'use client';

import { useState } from 'react';
import {
  TrendingDown,
  ArrowDownRight,
  ArrowUpRight,
  ShoppingCart,
  DollarSign,
  AlertCircle,
} from 'lucide-react';
import { Badge } from '@/components/ui/badge';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { MultiSelectCombobox } from '@/components/ui/multi-select-combobox';
import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
  PieChart,
  Pie,
  Cell,
  Legend,
} from 'recharts';
import { formatKoreanAmount } from '@/lib/utils/amount';
import type { PurchaseStatusData } from '../types';

interface PurchaseStatusSectionProps {
  data: PurchaseStatusData;
  showDailyDetail?: boolean;
}

const formatAmount = (value: number) => {
  if (value >= 100000000) return `${(value / 100000000).toFixed(1)}억`;
  if (value >= 10000) return `${(value / 10000).toFixed(0)}만`;
  return value.toLocaleString();
};

export function PurchaseStatusSection({ data, showDailyDetail = true }: PurchaseStatusSectionProps) {
  const [supplierFilter, setSupplierFilter] = useState<string[]>([]);
  const [sortOrder, setSortOrder] = useState('date-desc');

  const filteredItems = data.dailyItems
    .filter((item) => supplierFilter.length === 0 || supplierFilter.includes(item.supplier))
    .sort((a, b) => {
      if (sortOrder === 'date-desc') return b.date.localeCompare(a.date);
      if (sortOrder === 'date-asc') return a.date.localeCompare(b.date);
      if (sortOrder === 'amount-desc') return b.amount - a.amount;
      return a.amount - b.amount;
    });

  const suppliers = [...new Set(data.dailyItems.map((item) => item.supplier))];

  return (
    <div className="rounded-xl border overflow-hidden">
      {/* 다크 헤더 */}
      <div style={{ backgroundColor: '#1e293b' }} className="px-6 py-4">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div style={{ backgroundColor: 'rgba(255,255,255,0.1)' }} className="p-2 rounded-lg">
              <ShoppingCart style={{ color: '#ffffff' }} className="h-5 w-5" />
            </div>
            <div>
              <h3 style={{ color: '#ffffff' }} className="text-lg font-semibold">매입 현황</h3>
              <p style={{ color: '#cbd5e1' }} className="text-sm">당월 매입 실적</p>
            </div>
          </div>
          <Badge
            style={{ backgroundColor: '#f59e0b', color: '#ffffff', border: 'none' }}
            className="hover:opacity-90"
          >
            당월
          </Badge>
        </div>
      </div>

      <div style={{ backgroundColor: '#ffffff' }} className="p-6">
        {/* 통계카드 3개 */}
        <div className="grid grid-cols-1 xs:grid-cols-3 gap-4 mb-6">
          {/* 누적 매입 */}
          <div
            style={{ backgroundColor: '#fff7ed', borderColor: '#fed7aa' }}
            className="rounded-xl p-4 border"
          >
            <div className="flex items-center gap-2 mb-2">
              <div style={{ backgroundColor: '#f59e0b' }} className="p-1.5 rounded-lg">
                <DollarSign style={{ color: '#ffffff' }} className="h-4 w-4" />
              </div>
              <span style={{ color: '#b45309' }} className="text-sm font-medium">누적 매입</span>
            </div>
            <span style={{ color: '#0f172a' }} className="text-xl font-bold">
              {formatKoreanAmount(data.cumulativePurchase)}
            </span>
          </div>

          {/* 미결제 금액 */}
          <div
            style={{ backgroundColor: '#fef2f2', borderColor: '#fecaca' }}
            className="rounded-xl p-4 border"
          >
            <div className="flex items-center gap-2 mb-2">
              <div style={{ backgroundColor: '#ef4444' }} className="p-1.5 rounded-lg">
                <AlertCircle style={{ color: '#ffffff' }} className="h-4 w-4" />
              </div>
              <span style={{ color: '#dc2626' }} className="text-sm font-medium">미결제 금액</span>
            </div>
            <span style={{ color: '#0f172a' }} className="text-xl font-bold">
              {formatKoreanAmount(data.unpaidAmount)}
            </span>
          </div>

          {/* 전년 동기 대비 */}
          <div
            style={{
              backgroundColor: data.yoyChange >= 0 ? '#fef2f2' : '#eff6ff',
              borderColor: data.yoyChange >= 0 ? '#fecaca' : '#bfdbfe',
            }}
            className="rounded-xl p-4 border"
          >
            <div className="flex items-center gap-2 mb-2">
              <div style={{ backgroundColor: data.yoyChange >= 0 ? '#ef4444' : '#3b82f6' }} className="p-1.5 rounded-lg">
                <TrendingDown style={{ color: '#ffffff' }} className="h-4 w-4" />
              </div>
              <span style={{ color: data.yoyChange >= 0 ? '#dc2626' : '#1d4ed8' }} className="text-sm font-medium">전년 동기 대비</span>
            </div>
            <div className="flex items-center gap-1">
              <span style={{ color: '#0f172a' }} className="text-xl font-bold">
                {data.yoyChange >= 0 ? '+' : ''}{data.yoyChange}%
              </span>
              {data.yoyChange >= 0
                ? <ArrowUpRight className="h-4 w-4 text-red-500" />
                : <ArrowDownRight className="h-4 w-4 text-blue-500" />}
            </div>
          </div>
        </div>

        {/* 차트 2열 */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
          {/* 월별 매입 추이 */}
          <div className="border rounded-lg p-4">
            <h4 className="text-sm font-semibold text-gray-700 mb-3">월별 매입 추이</h4>
            <ResponsiveContainer width="100%" height={200}>
              <BarChart data={data.monthlyTrend}>
                <CartesianGrid strokeDasharray="3 3" stroke="#f1f5f9" />
                <XAxis dataKey="month" tick={{ fontSize: 12 }} />
                <YAxis tickFormatter={formatAmount} tick={{ fontSize: 11 }} />
                <Tooltip
                  formatter={(value: number | undefined) => [formatKoreanAmount(value ?? 0), '매입']}
                />
                <Bar dataKey="amount" fill="#f59e0b" radius={[4, 4, 0, 0]} />
              </BarChart>
            </ResponsiveContainer>
          </div>

          {/* 자재 유형별 비율 (Donut) */}
          <div className="border rounded-lg p-4">
            <h4 className="text-sm font-semibold text-gray-700 mb-3">자재 유형별 비율</h4>
            <ResponsiveContainer width="100%" height={200}>
              <PieChart>
                <Pie
                  data={data.materialRatio.map((r) => ({ name: r.name, value: r.value, percentage: r.percentage, color: r.color }) as Record<string, unknown>)}
                  cx="50%"
                  cy="50%"
                  innerRadius={50}
                  outerRadius={80}
                  dataKey="value"
                  nameKey="name"
                  label={({ name, payload }) => `${name} ${(payload as { percentage?: number })?.percentage ?? 0}%`}
                >
                  {data.materialRatio.map((entry, index) => (
                    <Cell key={`cell-${index}`} fill={entry.color} />
                  ))}
                </Pie>
                <Legend />
              </PieChart>
            </ResponsiveContainer>
          </div>
        </div>

        {/* 당월 매입 내역 테이블 */}
        {showDailyDetail && (
          <div className="border rounded-lg overflow-hidden">
            <div className="flex items-center justify-between p-4 bg-gray-50 border-b">
              <h4 className="text-sm font-semibold text-gray-700">당월 매입 내역</h4>
              <div className="flex gap-2">
                <MultiSelectCombobox
                  options={suppliers.map((s) => ({ value: s, label: s }))}
                  value={supplierFilter}
                  onChange={setSupplierFilter}
                  placeholder="전체 공급처"
                  className="w-[160px] h-8 text-xs"
                />
                <Select value={sortOrder} onValueChange={setSortOrder}>
                  <SelectTrigger className="w-[120px] h-8 text-xs">
                    <SelectValue placeholder="정렬" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="date-desc">최신순</SelectItem>
                    <SelectItem value="date-asc">오래된순</SelectItem>
                    <SelectItem value="amount-desc">금액 높은순</SelectItem>
                    <SelectItem value="amount-asc">금액 낮은순</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>
            <div className="overflow-x-auto">
              <table className="w-full text-sm">
                <thead>
                  <tr className="bg-gray-50 border-b">
                    <th className="px-4 py-2 text-left text-gray-600 font-medium">날짜</th>
                    <th className="px-4 py-2 text-left text-gray-600 font-medium">공급처</th>
                    <th className="px-4 py-2 text-left text-gray-600 font-medium">품목</th>
                    <th className="px-4 py-2 text-right text-gray-600 font-medium">금액</th>
                    <th className="px-4 py-2 text-center text-gray-600 font-medium">상태</th>
                  </tr>
                </thead>
                <tbody>
                  {filteredItems.map((item, idx) => (
                    <tr key={idx} className="border-b last:border-b-0 hover:bg-gray-50">
                      <td className="px-4 py-2 text-gray-700">{item.date}</td>
                      <td className="px-4 py-2 text-gray-700">{item.supplier}</td>
                      <td className="px-4 py-2 text-gray-700">{item.item}</td>
                      <td className="px-4 py-2 text-right text-gray-900 font-medium">
                        {item.amount.toLocaleString()}원
                      </td>
                      <td className="px-4 py-2 text-center">
                        <Badge
                          variant="outline"
                          className={
                            item.status === '결제완료'
                              ? 'text-green-600 border-green-200 bg-green-50'
                              : item.status === '미결제'
                              ? 'text-red-600 border-red-200 bg-red-50'
                              : 'text-orange-600 border-orange-200 bg-orange-50'
                          }
                        >
                          {item.status}
                        </Badge>
                      </td>
                    </tr>
                  ))}
                </tbody>
                <tfoot>
                  <tr className="bg-gray-100 font-semibold">
                    <td className="px-4 py-2 text-gray-700" colSpan={3}>합계</td>
                    <td className="px-4 py-2 text-right text-gray-900">
                      {filteredItems.reduce((sum, item) => sum + item.amount, 0).toLocaleString()}원
                    </td>
                    <td />
                  </tr>
                </tfoot>
              </table>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}