'use client';

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { StatCards } from '../StatCards';
import { OverviewSummaryChart } from '../charts/OverviewSummaryChart';
import type { OverviewTabData } 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="animate-pulse bg-muted rounded-xl h-[300px]" />
    </div>
  );
}

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

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

      <OverviewSummaryChart data={data.chartData} />

      <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-right font-medium text-muted-foreground">금액</th>
                  <th className="px-4 py-3 text-center font-medium text-muted-foreground">상태</th>
                  <th className="px-4 py-3 text-left font-medium text-muted-foreground">담당자</th>
                </tr>
              </thead>
              <tbody>
                {data.recentOrders.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">{row['품목']}</td>
                    <td className="px-4 py-3 text-right">{row['금액']}</td>
                    <td className="px-4 py-3 text-center">
                      <StatusBadge status={row['상태'] as string} />
                    </td>
                    <td className="px-4 py-3">{row['담당자']}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}

function StatusBadge({ status }: { status: string }) {
  const styles: Record<string, string> = {
    '진행중': 'bg-blue-100 text-blue-700',
    '완료': 'bg-green-100 text-green-700',
    '대기': 'bg-gray-100 text-gray-600',
    '주의': 'bg-yellow-100 text-yellow-700',
    '위험': 'bg-red-100 text-red-700',
  };
  return (
    <span className={`inline-block px-2.5 py-0.5 rounded-full text-xs font-medium ${styles[status] ?? 'bg-gray-100 text-gray-600'}`}>
      {status}
    </span>
  );
}
