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

export default HistoryPage;