import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
import { BarChart3 } from "lucide-react";
import { ResponsiveContainer, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip } from "recharts";

export function SalesTrendChartWidget() {
  // Mock 데이터 (실제로는 API에서 가져옴)
  const monthlyTrend = [
    { month: '2024-01', target: 1500, sales: 1320, achievement: 88.0 },
    { month: '2024-02', target: 1500, sales: 1450, achievement: 96.7 },
    { month: '2024-03', target: 1500, sales: 1580, achievement: 105.3 },
    { month: '2024-04', target: 1500, sales: 1420, achievement: 94.7 },
    { month: '2024-05', target: 1500, sales: 1380, achievement: 92.0 },
    { month: '2024-06', target: 1500, sales: 1520, achievement: 101.3 },
    { month: '2024-07', target: 1500, sales: 1460, achievement: 97.3 },
    { month: '2024-08', target: 1500, sales: 1350, achievement: 90.0 },
    { month: '2024-09', target: 1500, sales: 1480, achievement: 98.7 },
    { month: '2024-10', target: 1500, sales: 1280, achievement: 85.3 },
    { month: '2024-11', target: 1500, sales: 1400, achievement: 93.3 },
    { month: '2024-12', target: 1500, sales: 1380, achievement: 92.0 }
  ];

  return (
    <Card className="border border-border/20 bg-card rounded-xl">
      <CardHeader>
        <CardTitle className="flex items-center justify-between">
          <div className="flex items-center space-x-3">
            <div className="w-6 h-6 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center">
              <BarChart3 className="h-4 w-4 text-blue-600 dark:text-blue-400" />
            </div>
            <span>월별 매출 추이 (최근 12개월)</span>
          </div>
        </CardTitle>
      </CardHeader>
      <CardContent>
        <ResponsiveContainer width="100%" height={250} minHeight={250}>
          <BarChart data={monthlyTrend}>
            <CartesianGrid strokeDasharray="3 3" stroke="#f1f5f9" />
            <XAxis 
              dataKey="month" 
              stroke="#64748b"
              tickFormatter={(value) => value.split('-')[1] + '월'}
              tick={{ fontSize: 12 }}
              interval={0}
              angle={-45}
              textAnchor="end"
              height={60}
            />
            <YAxis stroke="#64748b" tick={{ fontSize: 12 }} />
            <Tooltip 
              contentStyle={{ 
                backgroundColor: 'white', 
                border: '1px solid #e2e8f0', 
                borderRadius: '8px',
                boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)'
              }}
              formatter={(value: any) => [`${value}M원`, '']}
              labelFormatter={(label) => `${label.split('-')[1]}월`}
            />
            <Bar dataKey="target" fill="#94a3b8" name="목표" radius={[4, 4, 0, 0]} />
            <Bar dataKey="sales" fill="#3b82f6" name="실적" radius={[4, 4, 0, 0]} />
          </BarChart>
        </ResponsiveContainer>
        <div className="mt-4 grid grid-cols-3 gap-3">
          <div className="text-center p-2 bg-muted/50 rounded-lg">
            <p className="text-xs text-muted-foreground">평균 달성률</p>
            <p className="font-bold text-blue-600">
              {(monthlyTrend.reduce((sum: number, m: any) => sum + m.achievement, 0) / monthlyTrend.length).toFixed(1)}%
            </p>
          </div>
          <div className="text-center p-2 bg-muted/50 rounded-lg">
            <p className="text-xs text-muted-foreground">최고 달성률</p>
            <p className="font-bold text-green-600">
              {Math.max(...monthlyTrend.map((m: any) => m.achievement)).toFixed(1)}%
            </p>
          </div>
          <div className="text-center p-2 bg-muted/50 rounded-lg">
            <p className="text-xs text-muted-foreground">최저 달성률</p>
            <p className="font-bold text-orange-600">
              {Math.min(...monthlyTrend.map((m: any) => m.achievement)).toFixed(1)}%
            </p>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}