
import React from 'react';
import { History, CheckCircle, Clock, XCircle, FileText } from 'lucide-react';
import { TradeOrder } from '../types';

interface HistoryPageProps {
  orders: TradeOrder[];
}

const HistoryPage: React.FC<HistoryPageProps> = ({ orders }) => {
  return (
    <div className="space-y-6 animate-in fade-in duration-500">
      <div className="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden">
        <div className="p-5 border-b border-slate-50 flex justify-between items-center bg-slate-50/10">
           <h3 className="text-[16px] font-black text-slate-800 flex items-center gap-2 uppercase tracking-tight">
             <History size={20} className="text-blue-600" /> 전체 거래 로그
           </h3>
           <button className="text-[10px] font-black text-slate-400 hover:text-slate-600 flex items-center gap-1.5 uppercase tracking-widest transition-colors">
             <FileText size={16} /> 데이터 내보내기 (CSV)
           </button>
        </div>
        
        <div className="overflow-x-auto">
          <table className="w-full">
            <thead className="bg-slate-50/30">
              <tr className="text-left text-[10px] font-black text-slate-400 uppercase tracking-widest border-b">
                <th className="px-6 py-3">체결 시퀀스 타임</th>
                <th className="px-6 py-3">자산명</th>
                <th className="px-6 py-3">오퍼레이션</th>
                <th className="px-6 py-3">체결 수량</th>
                <th className="px-6 py-3">체결 단가</th>
                <th className="px-6 py-3">트랜잭션 상태</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-slate-50">
              {orders.map(order => (
                <tr key={order.id} className="hover:bg-slate-50/50 transition-colors">
                  <td className="px-6 py-4 text-[12px] font-mono text-slate-500">
                    {order.timestamp.toLocaleString()}
                  </td>
                  <td className="px-6 py-4">
                    <div className="flex flex-col">
                      <span className="font-black text-slate-800 text-[14px]">{order.stockName}</span>
                      <span className="text-[10px] font-mono text-slate-400 uppercase tracking-widest">{order.stockCode}</span>
                    </div>
                  </td>
                  <td className="px-6 py-4">
                    <span className={`px-2 py-1 rounded-lg text-[10px] font-black tracking-widest ${order.type === 'BUY' ? 'bg-rose-50 text-rose-600' : 'bg-blue-50 text-blue-600'}`}>
                      {order.type === 'BUY' ? '매수' : '매도'}
                    </span>
                  </td>
                  <td className="px-6 py-4 text-[14px] font-black text-slate-700">
                    {order.quantity} UNIT
                  </td>
                  <td className="px-6 py-4 text-[14px] font-mono font-bold text-slate-600">
                    {order.price.toLocaleString()}
                  </td>
                  <td className="px-6 py-4">
                    <div className="flex items-center gap-2">
                       <CheckCircle size={14} className="text-emerald-500" />
                       <span className="text-[12px] font-black text-slate-800 uppercase tracking-tight">체결 완료</span>
                    </div>
                  </td>
                </tr>
              ))}
              {orders.length === 0 && (
                <tr>
                  <td colSpan={6} className="px-6 py-16 text-center text-slate-400 italic text-[14px]">
                    현재 기록된 트랜잭션 내역이 존재하지 않습니다.
                  </td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
};

export default HistoryPage;
