import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
import { DollarSign, PieChart, Clock, Calculator, ArrowUpRight } from "lucide-react";
import { formatAmount, formatAmountManwon } from "../../utils/formatAmount";

export function DailySummaryWidget() {
  // Mock 데이터 (실제로는 API에서 가져옴)
  const data = {
    dailySales: {
      today: 45800000,
      yesterdayGrowth: 12.5,
      monthlyGrowth: 8.3
    },
    profitability: {
      grossMargin: 28.5,
      operatingMargin: 15.2
    },
    receivables: {
      total: 1250000000,
      overdue: 180000000,
      overdueRatio: 14.4
    },
    dailyPL: {
      netIncome: 8500000,
      sales: 45800000,
      purchase: 28200000,
      expenses: 9100000
    }
  };

  const { dailySales, profitability, receivables, dailyPL } = data;

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
      <Card className="border border-border/20 bg-card rounded-xl">
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-3">
          <CardTitle className="text-sm text-muted-foreground">당일 출하매출</CardTitle>
          <div className="w-8 h-8 bg-green-100 dark:bg-green-900/30 rounded-lg flex items-center justify-center">
            <DollarSign className="h-4 w-4 text-green-600 dark:text-green-400" />
          </div>
        </CardHeader>
        <CardContent className="space-y-3">
          <div className="text-2xl font-bold">
            {formatAmount(dailySales.today)}
          </div>
          <div className="space-y-1">
            <div className="flex items-center space-x-2 text-sm">
              <ArrowUpRight className="h-3 w-3 text-green-600" />
              <span className="text-green-600 font-semibold">전일 대비 +{dailySales.yesterdayGrowth}%</span>
            </div>
            <div className="flex items-center space-x-2 text-sm">
              <ArrowUpRight className="h-3 w-3 text-blue-600" />
              <span className="text-blue-600 font-semibold">전월 동일 대비 +{dailySales.monthlyGrowth}%</span>
            </div>
          </div>
        </CardContent>
      </Card>

      <Card className="border border-border/20 bg-card rounded-xl">
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-3">
          <CardTitle className="text-sm text-muted-foreground">매출총이익률</CardTitle>
          <div className="w-8 h-8 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center">
            <PieChart className="h-4 w-4 text-blue-600 dark:text-blue-400" />
          </div>
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold mb-2">
            {profitability.grossMargin}%
          </div>
          <div className="text-sm text-muted-foreground">
            영업이익률: <span className="font-semibold">{profitability.operatingMargin}%</span>
          </div>
        </CardContent>
      </Card>

      <Card className="border border-border/20 bg-card rounded-xl">
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-3">
          <CardTitle className="text-sm text-muted-foreground">총 미수금</CardTitle>
          <div className="w-8 h-8 bg-orange-100 dark:bg-orange-900/30 rounded-lg flex items-center justify-center">
            <Clock className="h-4 w-4 text-orange-600 dark:text-orange-400" />
          </div>
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold mb-2">
            {formatAmountManwon(receivables.total)}
          </div>
          <div className="text-sm text-red-600 font-semibold">
            연체: {formatAmountManwon(receivables.overdue)} ({receivables.overdueRatio}%)
          </div>
        </CardContent>
      </Card>

      <Card className="border border-border/20 bg-card rounded-xl">
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-3">
          <CardTitle className="text-sm text-muted-foreground">일일 순손익</CardTitle>
          <div className="w-8 h-8 bg-purple-100 dark:bg-purple-900/30 rounded-lg flex items-center justify-center">
            <Calculator className="h-4 w-4 text-purple-600 dark:text-purple-400" />
          </div>
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold mb-2">
            {formatAmount(dailyPL.netIncome)}
          </div>
          <div className="text-sm text-muted-foreground">
            매출-매입-경비: <span className="font-semibold">{formatAmount(dailyPL.sales - dailyPL.purchase - dailyPL.expenses)}</span>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}