'use client';

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { StatCards } from '../StatCards';
import type { ExpenseTabData } from '../hooks/useDashboardType2';

function LoadingSkeleton() {
  return (
    <div className="space-y-6">
      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
        {[...Array(4)].map((_, i) => (
          <div key={i} className="animate-pulse bg-muted rounded-xl h-[88px]" />
        ))}
      </div>
      <div className="grid grid-cols-1 xl:grid-cols-2 gap-6">
        <div className="animate-pulse bg-muted rounded-xl h-[300px]" />
        <div className="animate-pulse bg-muted rounded-xl h-[300px]" />
      </div>
    </div>
  );
}

export function ExpenseTab({ data }: { data: ExpenseTabData }) {
  if (data.loading) return <LoadingSkeleton />;

  return (
    <div className="space-y-6">
      <StatCards stats={data.stats} />

      <div className="grid grid-cols-1 xl:grid-cols-2 gap-6">
        <Card>
          <CardHeader>
            <CardTitle className="text-base font-semibold">접대비 사용 내역</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="overflow-x-auto">
              <table className="w-full text-sm min-w-[600px]">
                <thead>
                  <tr className="border-b bg-muted/50">
                    <th className="px-4 py-3 text-left font-medium text-muted-foreground">No</th>
                    <th className="px-4 py-3 text-left font-medium text-muted-foreground">일자</th>
                    <th className="px-4 py-3 text-left font-medium text-muted-foreground">사용자</th>
                    <th className="px-4 py-3 text-left font-medium text-muted-foreground">거래처</th>
                    <th className="px-4 py-3 text-right font-medium text-muted-foreground">금액</th>
                    <th className="px-4 py-3 text-left font-medium text-muted-foreground">용도</th>
                  </tr>
                </thead>
                <tbody>
                  {data.entertainmentData.map((row, i) => (
                    <tr key={i} className="border-b last:border-0 hover:bg-muted/30">
                      <td className="px-4 py-3 text-muted-foreground">{row.no}</td>
                      <td className="px-4 py-3">{row['일자']}</td>
                      <td className="px-4 py-3">{row['사용자']}</td>
                      <td className="px-4 py-3 font-medium">{row['거래처']}</td>
                      <td className="px-4 py-3 text-right">{row['금액']}</td>
                      <td className="px-4 py-3">{row['용도']}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle className="text-base font-semibold">복리후생비 항목별 현황</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="overflow-x-auto">
              <table className="w-full text-sm min-w-[600px]">
                <thead>
                  <tr className="border-b bg-muted/50">
                    <th className="px-4 py-3 text-left font-medium text-muted-foreground">No</th>
                    <th className="px-4 py-3 text-left font-medium text-muted-foreground">항목</th>
                    <th className="px-4 py-3 text-right font-medium text-muted-foreground">월한도</th>
                    <th className="px-4 py-3 text-right font-medium text-muted-foreground">사용액</th>
                    <th className="px-4 py-3 text-right font-medium text-muted-foreground">잔여</th>
                    <th className="px-4 py-3 text-left font-medium text-muted-foreground">비고</th>
                  </tr>
                </thead>
                <tbody>
                  {data.welfareData.map((row, i) => (
                    <tr key={i} className="border-b last:border-0 hover:bg-muted/30">
                      <td className="px-4 py-3 text-muted-foreground">{row.no}</td>
                      <td className="px-4 py-3 font-medium">{row['항목']}</td>
                      <td className="px-4 py-3 text-right">{row['월한도']}</td>
                      <td className="px-4 py-3 text-right">{row['사용액']}</td>
                      <td className="px-4 py-3 text-right text-green-600 font-medium">{row['잔여']}</td>
                      <td className="px-4 py-3 text-muted-foreground text-xs">{row['비고']}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}
