'use client';

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { StatCards } from '../StatCards';
import { ExpenseDonutChart } from '../charts/ExpenseDonutChart';
import type { FinanceTabData } 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 FinanceTab({ data }: { data: FinanceTabData }) {
  if (data.loading) return <LoadingSkeleton />;

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

      <ExpenseDonutChart data={data.expenseChartData} />

      <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-[500px]">
                <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>
                  </tr>
                </thead>
                <tbody>
                  {data.expenseData.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">
                        <span className={String(row['전월대비']).startsWith('+') ? 'text-red-500' : String(row['전월대비']).startsWith('-') ? 'text-green-500' : ''}>
                          {row['전월대비']}
                        </span>
                      </td>
                      <td className="px-4 py-3 text-right text-muted-foreground">{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-[500px]">
                <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-left font-medium text-muted-foreground">비고</th>
                  </tr>
                </thead>
                <tbody>
                  {data.cardData.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-muted-foreground">{row['비고']}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}
