import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
import { Badge } from "../ui/badge";
import { Calendar, BarChart3, TrendingUp } from "lucide-react";

export function SalesAchievementWidget() {
  // Mock 데이터 (실제로는 API에서 가져옴)
  const salesTarget = {
    daily: {
      target: 50000000,
      actual: 45800000,
      achievement: 91.6,
      collected: 38000000,
      receivable: 7800000
    },
    monthly: {
      target: 1500000000,
      actual: 1280000000,
      achievement: 85.3,
      collected: 950000000,
      receivable: 330000000
    },
    yearly: {
      target: 18000000000,
      actual: 12500000000,
      achievement: 69.4,
      collected: 9200000000,
      receivable: 3300000000
    }
  };

  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
      {/* 일별 매출 현황 */}
      <Card className="border border-border/20 bg-card rounded-xl">
        <CardHeader className="pb-3">
          <div className="flex items-center justify-between mb-2">
            <div className="flex items-center space-x-2">
              <div className="w-6 h-6 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center">
                <Calendar className="h-4 w-4 text-blue-600 dark:text-blue-400" />
              </div>
              <CardTitle className="text-base">일별 매출</CardTitle>
            </div>
            <Badge className="bg-blue-500 text-white">{salesTarget.daily.achievement}%</Badge>
          </div>
        </CardHeader>
        <CardContent className="space-y-3">
          <div className="grid grid-cols-2 gap-2">
            <div className="p-2 bg-blue-50 dark:bg-blue-950/20 rounded-lg">
              <p className="text-xs text-muted-foreground mb-0.5">목표</p>
              <p className="font-bold">{(salesTarget.daily.target / 1000000).toFixed(0)}M</p>
            </div>
            <div className="p-2 bg-green-50 dark:bg-green-950/20 rounded-lg">
              <p className="text-xs text-muted-foreground mb-0.5">실적</p>
              <p className="font-bold text-green-600">{(salesTarget.daily.actual / 1000000).toFixed(0)}M</p>
            </div>
          </div>
          <div className="space-y-1.5">
            <div className="flex justify-between items-center">
              <span className="text-xs text-muted-foreground">달성률</span>
              <span className="font-bold text-blue-600 text-sm">{salesTarget.daily.achievement}%</span>
            </div>
            <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
              <div 
                className="bg-blue-600 h-2 rounded-full transition-all"
                style={{ width: `${Math.min(salesTarget.daily.achievement, 100)}%` }}
              />
            </div>
          </div>
          <div className="pt-2 border-t space-y-1.5">
            <div className="flex justify-between items-center">
              <span className="text-xs text-muted-foreground">수금액</span>
              <span className="text-sm font-medium">{(salesTarget.daily.collected / 1000000).toFixed(0)}M</span>
            </div>
            <div className="flex justify-between items-center">
              <span className="text-xs text-muted-foreground">미수금</span>
              <span className="text-sm font-medium text-orange-600">{(salesTarget.daily.receivable / 1000000).toFixed(0)}M</span>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* 월별 매출 현황 */}
      <Card className="border border-border/20 bg-card rounded-xl">
        <CardHeader className="pb-3">
          <div className="flex items-center justify-between mb-2">
            <div className="flex items-center space-x-2">
              <div className="w-6 h-6 bg-green-100 dark:bg-green-900/30 rounded-lg flex items-center justify-center">
                <BarChart3 className="h-4 w-4 text-green-600 dark:text-green-400" />
              </div>
              <CardTitle className="text-base">월별 매출</CardTitle>
            </div>
            <Badge className="bg-green-500 text-white">{salesTarget.monthly.achievement}%</Badge>
          </div>
        </CardHeader>
        <CardContent className="space-y-3">
          <div className="grid grid-cols-2 gap-2">
            <div className="p-2 bg-blue-50 dark:bg-blue-950/20 rounded-lg">
              <p className="text-xs text-muted-foreground mb-0.5">목표</p>
              <p className="font-bold">{(salesTarget.monthly.target / 100000000).toFixed(1)}억</p>
            </div>
            <div className="p-2 bg-green-50 dark:bg-green-950/20 rounded-lg">
              <p className="text-xs text-muted-foreground mb-0.5">실적</p>
              <p className="font-bold text-green-600">{(salesTarget.monthly.actual / 100000000).toFixed(1)}억</p>
            </div>
          </div>
          <div className="space-y-1.5">
            <div className="flex justify-between items-center">
              <span className="text-xs text-muted-foreground">달성률</span>
              <span className="font-bold text-green-600 text-sm">{salesTarget.monthly.achievement}%</span>
            </div>
            <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
              <div 
                className="bg-green-600 h-2 rounded-full transition-all"
                style={{ width: `${Math.min(salesTarget.monthly.achievement, 100)}%` }}
              />
            </div>
          </div>
          <div className="pt-2 border-t space-y-1.5">
            <div className="flex justify-between items-center">
              <span className="text-xs text-muted-foreground">수금액</span>
              <span className="text-sm font-medium">{(salesTarget.monthly.collected / 100000000).toFixed(1)}억</span>
            </div>
            <div className="flex justify-between items-center">
              <span className="text-xs text-muted-foreground">미수금</span>
              <span className="text-sm font-medium text-orange-600">{(salesTarget.monthly.receivable / 100000000).toFixed(1)}억</span>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* 연간 매출 현황 */}
      <Card className="border border-border/20 bg-card rounded-xl">
        <CardHeader className="pb-3">
          <div className="flex items-center justify-between mb-2">
            <div className="flex items-center space-x-2">
              <div className="w-6 h-6 bg-purple-100 dark:bg-purple-900/30 rounded-lg flex items-center justify-center">
                <TrendingUp className="h-4 w-4 text-purple-600 dark:text-purple-400" />
              </div>
              <CardTitle className="text-base">연간 매출</CardTitle>
            </div>
            <Badge className="bg-purple-500 text-white">{salesTarget.yearly.achievement}%</Badge>
          </div>
        </CardHeader>
        <CardContent className="space-y-3">
          <div className="grid grid-cols-2 gap-2">
            <div className="p-2 bg-blue-50 dark:bg-blue-950/20 rounded-lg">
              <p className="text-xs text-muted-foreground mb-0.5">목표</p>
              <p className="font-bold">{(salesTarget.yearly.target / 1000000000).toFixed(0)}0억</p>
            </div>
            <div className="p-2 bg-green-50 dark:bg-green-950/20 rounded-lg">
              <p className="text-xs text-muted-foreground mb-0.5">실적</p>
              <p className="font-bold text-green-600">{(salesTarget.yearly.actual / 1000000000).toFixed(0)}2억</p>
            </div>
          </div>
          <div className="space-y-1.5">
            <div className="flex justify-between items-center">
              <span className="text-xs text-muted-foreground">달성률</span>
              <span className="font-bold text-purple-600 text-sm">{salesTarget.yearly.achievement}%</span>
            </div>
            <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
              <div 
                className="bg-purple-600 h-2 rounded-full transition-all"
                style={{ width: `${Math.min(salesTarget.yearly.achievement, 100)}%` }}
              />
            </div>
          </div>
          <div className="pt-2 border-t space-y-1.5">
            <div className="flex justify-between items-center">
              <span className="text-xs text-muted-foreground">수금액</span>
              <span className="text-sm font-medium">{(salesTarget.yearly.collected / 1000000000).toFixed(0)}억</span>
            </div>
            <div className="flex justify-between items-center">
              <span className="text-xs text-muted-foreground">미수금</span>
              <span className="text-sm font-medium text-orange-600">{(salesTarget.yearly.receivable / 1000000000).toFixed(0)}억</span>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}
