import { useState } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
import { Button } from "./ui/button";
import { Badge } from "./ui/badge";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "./ui/tabs";
import { 
  DollarSign,
  TrendingUp,
  TrendingDown,
  CreditCard,
  Banknote,
  PieChart,
  Calculator,
  FileText,
  AlertCircle,
  CheckCircle,
  ArrowUpRight,
  ArrowDownRight,
  Building2,
  Calendar
} from "lucide-react";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./ui/table";
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, LineChart, Line, PieChart as RechartsPieChart, Cell, Pie } from "recharts";

export function AccountingManagement() {
  const [selectedPeriod, setSelectedPeriod] = useState("month");

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

  // 거래처별 미수금
  const receivables = [
    { company: "삼성전자", amount: 45000000, days: 45, status: "위험" },
    { company: "LG전자", amount: 32000000, days: 28, status: "주의" },
    { company: "현대자동차", amount: 28000000, days: 15, status: "정상" },
    { company: "SK하이닉스", amount: 25000000, days: 52, status: "위험" },
    { company: "네이버", amount: 18000000, days: 22, status: "정상" }
  ];

  // 건별 원가 분석
  const costAnalysis = [
    {
      orderNo: "ORD-2024-001",
      product: "방화셔터 3000×3000",
      salesAmount: 15000000,
      materialCost: 6500000,
      laborCost: 3500000,
      overheadCost: 2000000,
      totalCost: 12000000,
      profit: 3000000,
      profitRate: 20.0
    },
    {
      orderNo: "ORD-2024-002",
      product: "일반셔터 2500×2500",
      salesAmount: 8500000,
      materialCost: 3200000,
      laborCost: 2100000,
      overheadCost: 1200000,
      totalCost: 6500000,
      profit: 2000000,
      profitRate: 23.5
    },
    {
      orderNo: "ORD-2024-003",
      product: "특수셔터 4000×3500",
      salesAmount: 22000000,
      materialCost: 9500000,
      laborCost: 5200000,
      overheadCost: 2800000,
      totalCost: 17500000,
      profit: 4500000,
      profitRate: 20.5
    }
  ];

  // 원가 구성 비율
  const costComposition = [
    { name: "자재비", value: 54, color: "#3B82F6" },
    { name: "인건비", value: 29, color: "#10B981" },
    { name: "경비", value: 17, color: "#F59E0B" }
  ];

  return (
    <div className="p-4 md:p-6 space-y-6">
      {/* 헤더 */}
      <div className="bg-card border border-border/20 rounded-xl p-6">
        <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
          <div>
            <h1 className="text-3xl font-bold text-foreground mb-2">회계 관리</h1>
            <p className="text-muted-foreground">매출/매입, 미수금, 원가 분석 및 손익 현황</p>
          </div>
          <div className="flex space-x-2">
            <Button variant="outline">
              <FileText className="h-4 w-4 mr-2" />
              월마감
            </Button>
            <Button className="bg-primary">
              <Calculator className="h-4 w-4 mr-2" />
              재무제표
            </Button>
          </div>
        </div>
      </div>

      {/* 주요 지표 */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        <Card className="border border-border/20">
          <CardHeader className="pb-3">
            <CardTitle className="text-sm text-muted-foreground flex items-center justify-between">
              <span>당월 매출</span>
              <DollarSign className="h-4 w-4 text-green-600" />
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-foreground mb-2">6,500만원</div>
            <div className="flex items-center space-x-1 text-sm text-green-600">
              <ArrowUpRight className="h-3 w-3" />
              <span>전월 대비 +12.1%</span>
            </div>
          </CardContent>
        </Card>

        <Card className="border border-border/20">
          <CardHeader className="pb-3">
            <CardTitle className="text-sm text-muted-foreground flex items-center justify-between">
              <span>당월 매입</span>
              <CreditCard className="h-4 w-4 text-orange-600" />
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-foreground mb-2">3,800만원</div>
            <div className="flex items-center space-x-1 text-sm text-orange-600">
              <ArrowUpRight className="h-3 w-3" />
              <span>전월 대비 +11.8%</span>
            </div>
          </CardContent>
        </Card>

        <Card className="border border-border/20">
          <CardHeader className="pb-3">
            <CardTitle className="text-sm text-muted-foreground flex items-center justify-between">
              <span>당월 순이익</span>
              <TrendingUp className="h-4 w-4 text-blue-600" />
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-foreground mb-2">2,700만원</div>
            <div className="flex items-center space-x-1 text-sm text-blue-600">
              <span>이익률: 41.5%</span>
            </div>
          </CardContent>
        </Card>

        <Card className="border border-border/20">
          <CardHeader className="pb-3">
            <CardTitle className="text-sm text-muted-foreground flex items-center justify-between">
              <span>총 미수금</span>
              <AlertCircle className="h-4 w-4 text-red-600" />
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-foreground mb-2">1,480만원</div>
            <div className="flex items-center space-x-1 text-sm text-red-600">
              <span>30일 초과: 700만원</span>
            </div>
          </CardContent>
        </Card>
      </div>

      {/* 탭 메뉴 */}
      <Tabs defaultValue="sales" className="space-y-4">
        <TabsList className="grid w-full grid-cols-5">
          <TabsTrigger value="sales">매출/매입</TabsTrigger>
          <TabsTrigger value="receivables">미수금 관리</TabsTrigger>
          <TabsTrigger value="cost">원가 분석</TabsTrigger>
          <TabsTrigger value="profit">손익 현황</TabsTrigger>
          <TabsTrigger value="transactions">입출금</TabsTrigger>
        </TabsList>

        {/* 매출/매입 관리 */}
        <TabsContent value="sales" className="space-y-4">
          <Card className="border border-border/20">
            <CardHeader>
              <CardTitle className="flex items-center space-x-3">
                <TrendingUp className="h-6 w-6 text-primary" />
                <span>매출/매입 추이</span>
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="h-80 min-h-[20rem]">
                <ResponsiveContainer width="100%" height="100%" minHeight={320}>
                  <LineChart data={salesPurchaseData}>
                    <CartesianGrid strokeDasharray="3 3" />
                    <XAxis dataKey="month" />
                    <YAxis />
                    <Tooltip />
                    <Line type="monotone" dataKey="sales" stroke="#10B981" strokeWidth={2} name="매출" />
                    <Line type="monotone" dataKey="purchase" stroke="#F59E0B" strokeWidth={2} name="매입" />
                    <Line type="monotone" dataKey="profit" stroke="#3B82F6" strokeWidth={2} name="이익" />
                  </LineChart>
                </ResponsiveContainer>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        {/* 미수금 관리 */}
        <TabsContent value="receivables" className="space-y-4">
          <Card className="border border-border/20">
            <CardHeader>
              <CardTitle className="flex items-center space-x-3">
                <CreditCard className="h-6 w-6 text-red-600" />
                <span>거래처별 미수금 현황</span>
              </CardTitle>
            </CardHeader>
            <CardContent>
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>거래처</TableHead>
                    <TableHead className="text-right">미수금액</TableHead>
                    <TableHead className="text-center">경과일수</TableHead>
                    <TableHead className="text-center">상태</TableHead>
                    <TableHead className="text-center">관리</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {receivables.map((item, index) => (
                    <TableRow key={index}>
                      <TableCell className="font-medium">{item.company}</TableCell>
                      <TableCell className="text-right font-bold">
                        {item.amount.toLocaleString()}원
                      </TableCell>
                      <TableCell className="text-center">{item.days}일</TableCell>
                      <TableCell className="text-center">
                        <Badge
                          className={
                            item.status === "위험"
                              ? "bg-red-500 text-white"
                              : item.status === "주의"
                              ? "bg-yellow-500 text-white"
                              : "bg-green-500 text-white"
                          }
                        >
                          {item.status}
                        </Badge>
                      </TableCell>
                      <TableCell className="text-center">
                        <Button size="sm" variant="outline">
                          독촉
                        </Button>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </CardContent>
          </Card>
        </TabsContent>

        {/* 원가 분석 */}
        <TabsContent value="cost" className="space-y-4">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
            <Card className="border border-border/20">
              <CardHeader>
                <CardTitle className="flex items-center space-x-3">
                  <PieChart className="h-6 w-6 text-primary" />
                  <span>원가 구성 비율</span>
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="h-64 min-h-[16rem]">
                  <ResponsiveContainer width="100%" height="100%" minHeight={256}>
                    <RechartsPieChart>
                      <Pie
                        data={costComposition}
                        cx="50%"
                        cy="50%"
                        labelLine={false}
                        label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`}
                        outerRadius={80}
                        fill="#8884d8"
                        dataKey="value"
                      >
                        {costComposition.map((entry, index) => (
                          <Cell key={`cell-${index}`} fill={entry.color} />
                        ))}
                      </Pie>
                      <Tooltip />
                    </RechartsPieChart>
                  </ResponsiveContainer>
                </div>
                <div className="space-y-2 mt-4">
                  {costComposition.map((item, index) => (
                    <div key={index} className="flex items-center justify-between">
                      <div className="flex items-center space-x-2">
                        <div
                          className="w-4 h-4 rounded"
                          style={{ backgroundColor: item.color }}
                        />
                        <span className="text-sm font-medium">{item.name}</span>
                      </div>
                      <span className="font-bold">{item.value}%</span>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>

            <Card className="border border-border/20">
              <CardHeader>
                <CardTitle className="flex items-center space-x-3">
                  <Calculator className="h-6 w-6 text-primary" />
                  <span>건별 원가 분석</span>
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-3">
                  {costAnalysis.slice(0, 3).map((item, index) => (
                    <div
                      key={index}
                      className="p-3 bg-muted/50 rounded-lg border border-border/50"
                    >
                      <div className="flex justify-between items-start mb-2">
                        <div>
                          <span className="text-xs text-muted-foreground">{item.orderNo}</span>
                          <p className="font-bold text-sm">{item.product}</p>
                        </div>
                        <Badge
                          className={
                            item.profitRate >= 25
                              ? "bg-green-500 text-white"
                              : item.profitRate >= 20
                              ? "bg-blue-500 text-white"
                              : "bg-yellow-500 text-white"
                          }
                        >
                          {item.profitRate}%
                        </Badge>
                      </div>
                      <div className="grid grid-cols-2 gap-2 text-xs">
                        <div>
                          <span className="text-muted-foreground">매출: </span>
                          <span className="font-bold">
                            {(item.salesAmount / 1000000).toFixed(1)}M
                          </span>
                        </div>
                        <div>
                          <span className="text-muted-foreground">원가: </span>
                          <span className="font-bold">
                            {(item.totalCost / 1000000).toFixed(1)}M
                          </span>
                        </div>
                        <div className="col-span-2">
                          <span className="text-muted-foreground">이익: </span>
                          <span className="font-bold text-green-600">
                            {(item.profit / 1000000).toFixed(1)}M
                          </span>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          </div>
        </TabsContent>

        {/* 손익 현황 */}
        <TabsContent value="profit" className="space-y-4">
          <Card className="border border-border/20">
            <CardHeader>
              <CardTitle className="flex items-center space-x-3">
                <Banknote className="h-6 w-6 text-primary" />
                <span>월별 손익 현황</span>
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="h-80 min-h-[20rem]">
                <ResponsiveContainer width="100%" height="100%">
                  <LineChart data={salesPurchaseData}>
                    <CartesianGrid strokeDasharray="3 3" />
                    <XAxis dataKey="month" />
                    <YAxis />
                    <Tooltip />
                    <Line type="monotone" dataKey="profit" stroke="#10B981" strokeWidth={2} name="순이익" />
                  </LineChart>
                </ResponsiveContainer>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        {/* 입출금 내역 */}
        <TabsContent value="transactions" className="space-y-4">
          <Card className="border border-border/20">
            <CardHeader>
              <CardTitle className="flex items-center space-x-3">
                <Building2 className="h-6 w-6 text-primary" />
                <span>거래처 입출금 내역</span>
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-3">
                <div className="p-4 bg-green-50 dark:bg-green-950/20 rounded-lg border border-green-200">
                  <div className="flex justify-between items-center">
                    <div>
                      <Badge className="bg-green-600 text-white mb-2">입금</Badge>
                      <p className="font-bold">삼성전자</p>
                      <p className="text-sm text-muted-foreground">2024-10-13 14:30</p>
                    </div>
                    <div className="text-right">
                      <p className="text-2xl font-bold text-green-600">+25,000,000원</p>
                      <p className="text-xs text-muted-foreground">제품 출하대금</p>
                    </div>
                  </div>
                </div>
                <div className="p-4 bg-red-50 dark:bg-red-950/20 rounded-lg border border-red-200">
                  <div className="flex justify-between items-center">
                    <div>
                      <Badge className="bg-red-600 text-white mb-2">출금</Badge>
                      <p className="font-bold">포스코</p>
                      <p className="text-sm text-muted-foreground">2024-10-13 11:20</p>
                    </div>
                    <div className="text-right">
                      <p className="text-2xl font-bold text-red-600">-15,000,000원</p>
                      <p className="text-xs text-muted-foreground">원자재 구매비</p>
                    </div>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  );
}