import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
import { BarChart3 } from "lucide-react";
import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts";
import { useState } from "react";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select";

export function SalesTrendWidget() {
  const [viewType, setViewType] = useState<'monthly' | 'daily'>('monthly');

  // Mock 데이터 (실제로는 API에서 가져옴)
  const monthlyTrend = [
    { month: "1월", sales: 950, target: 1200, receivable: 320 },
    { month: "2월", sales: 1100, target: 1300, receivable: 340 },
    { month: "3월", sales: 1250, target: 1400, receivable: 410 },
    { month: "4월", sales: 1180, target: 1350, receivable: 390 },
    { month: "5월", sales: 1320, target: 1450, receivable: 425 },
    { month: "6월", sales: 1450, target: 1500, receivable: 460 }
  ];

  const dailyTrend = [
    { day: 1, sales: 42, target: 50, receivable: 11 },
    { day: 2, sales: 38, target: 50, receivable: 10 },
    { day: 3, sales: 52, target: 50, receivable: 14 },
    { day: 4, sales: 45, target: 50, receivable: 12 },
    { day: 5, sales: 48, target: 50, receivable: 13 },
    { day: 6, sales: 41, target: 50, receivable: 11 },
    { day: 7, sales: 55, target: 50, receivable: 15 }
  ];

  const chartData = viewType === 'monthly' ? monthlyTrend : dailyTrend;

  return (
    <Card className="h-full">
      <CardHeader className="flex flex-row items-center justify-between pb-3">
        <CardTitle className="flex items-center gap-2">
          <BarChart3 className="h-5 w-5 text-indigo-600" />
          매출 추이
        </CardTitle>
        <Select value={viewType} onValueChange={(v: 'monthly' | 'daily') => setViewType(v)}>
          <SelectTrigger className="w-28">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="monthly">월별</SelectItem>
            <SelectItem value="daily">일별</SelectItem>
          </SelectContent>
        </Select>
      </CardHeader>
      <CardContent>
        <ResponsiveContainer width="100%" height={250} minHeight={250}>
          <AreaChart data={chartData}>
            <defs>
              <linearGradient id="salesGradient" x1="0" y1="0" x2="0" y2="1">
                <stop offset="5%" stopColor="#3b82f6" stopOpacity={0.3}/>
                <stop offset="95%" stopColor="#3b82f6" stopOpacity={0}/>
              </linearGradient>
              <linearGradient id="targetGradient" x1="0" y1="0" x2="0" y2="1">
                <stop offset="5%" stopColor="#10b981" stopOpacity={0.3}/>
                <stop offset="95%" stopColor="#10b981" stopOpacity={0}/>
              </linearGradient>
            </defs>
            <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
            <XAxis 
              dataKey={viewType === 'monthly' ? 'month' : 'day'} 
              stroke="#6b7280"
              fontSize={12}
            />
            <YAxis stroke="#6b7280" fontSize={12} />
            <Tooltip />
            <Area 
              type="monotone" 
              dataKey="sales" 
              stroke="#3b82f6" 
              strokeWidth={2}
              fill="url(#salesGradient)" 
              name="실적"
            />
            <Area 
              type="monotone" 
              dataKey="target" 
              stroke="#10b981" 
              strokeWidth={2}
              strokeDasharray="5 5"
              fill="url(#targetGradient)" 
              name="목표"
            />
          </AreaChart>
        </ResponsiveContainer>
        <div className="flex items-center justify-center gap-6 mt-4">
          <div className="flex items-center gap-2">
            <div className="w-3 h-3 bg-blue-500 rounded-full" />
            <span className="text-sm text-muted-foreground">실적</span>
          </div>
          <div className="flex items-center gap-2">
            <div className="w-3 h-3 bg-green-500 rounded-full" />
            <span className="text-sm text-muted-foreground">목표</span>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}