import { DashboardTemplate } from "./templates/DashboardTemplate";
import { DollarSign, TrendingUp, CreditCard, PieChart, Calculator, FileText, Banknote } from "lucide-react";
import { Badge } from "./ui/badge";
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, LineChart, Line } from "recharts";

export function AccountingDashboard() {
  const stats = [
    {
      label: "당월 매출",
      value: "6,500만원",
      icon: TrendingUp,
      iconColor: "text-green-600",
      trend: { value: "+12%", isPositive: true }
    },
    {
      label: "당월 매입",
      value: "3,800만원",
      icon: CreditCard,
      iconColor: "text-blue-600",
      trend: { value: "+11.8%", isPositive: false }
    },
    {
      label: "당월 이익",
      value: "2,700만원",
      icon: DollarSign,
      iconColor: "text-purple-600",
      trend: { value: "41.5%", isPositive: true }
    },
    {
      label: "미수금",
      value: "1,250만원",
      icon: Banknote,
      iconColor: "text-orange-600",
      trend: { value: "-5%", isPositive: true }
    }
  ];

  const monthlyData = [
    { month: "1월", 매출: 450, 매입: 280, 이익: 170 },
    { month: "2월", 매출: 520, 매입: 310, 이익: 210 },
    { month: "3월", 매출: 480, 매입: 295, 이익: 185 },
    { month: "4월", 매출: 610, 매입: 350, 이익: 260 },
    { month: "5월", 매출: 580, 매입: 340, 이익: 240 },
    { month: "6월", 매출: 650, 매입: 380, 이익: 270 }
  ];

  const profitTrend = [
    { month: "1월", 매출총이익: 170, 영업이익: 120, 순이익: 95 },
    { month: "2월", 매출총이익: 210, 영업이익: 155, 순이익: 125 },
    { month: "3월", 매출총이익: 185, 영업이익: 135, 순이익: 108 },
    { month: "4월", 매출총이익: 260, 영업이익: 195, 순이익: 158 },
    { month: "5월", 매출총이익: 240, 영업이익: 180, 순이익: 145 },
    { month: "6월", 매출총이익: 270, 영업이익: 205, 순이익: 165 }
  ];

  const quickActions = [
    { label: "매출 관리", description: "매출 전표 및 세금계산서", icon: DollarSign, onClick: () => {} },
    { label: "매입 관리", description: "매입 전표 및 비용 처리", icon: CreditCard, onClick: () => {} },
    { label: "재무제표", description: "손익계산서 및 재무상태표", icon: FileText, onClick: () => {} },
    { label: "원가 관리", description: "원가 분석 및 관리", icon: Calculator, onClick: () => {} }
  ];

  const sections = [
    {
      title: "월별 매출/매입 현황",
      span: "full" as const,
      content: (
        <div className="h-80 min-h-[20rem]">
          <ResponsiveContainer width="100%" height="100%" minHeight={320}>
            <BarChart data={monthlyData}>
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis dataKey="month" />
              <YAxis />
              <Tooltip />
              <Bar dataKey="매출" fill="#3b82f6" />
              <Bar dataKey="매입" fill="#10b981" />
              <Bar dataKey="이익" fill="#8b5cf6" />
            </BarChart>
          </ResponsiveContainer>
        </div>
      )
    },
    {
      title: "손익 추이",
      span: "full" as const,
      content: (
        <div className="h-80 min-h-[20rem]">
          <ResponsiveContainer width="100%" height="100%" minHeight={320}>
            <LineChart data={profitTrend}>
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis dataKey="month" />
              <YAxis />
              <Tooltip />
              <Line type="monotone" dataKey="매출총이익" stroke="#3b82f6" strokeWidth={2} />
              <Line type="monotone" dataKey="영업이익" stroke="#10b981" strokeWidth={2} />
              <Line type="monotone" dataKey="순이익" stroke="#8b5cf6" strokeWidth={2} />
            </LineChart>
          </ResponsiveContainer>
        </div>
      )
    }
  ];

  return (
    <DashboardTemplate
      title="회계관리"
      description="전사 재무 현황 및 회계 정보를 통합 관리합니다"
      icon={PieChart}
      stats={stats}
      quickActions={quickActions}
      sections={sections}
    />
  );
}
