import { useState } from "react";
import { ListPageTemplate } from "./templates/ListPageTemplate";
import { Column } from "./organisms/DataTable";
import { Button } from "./ui/button";
import { Badge } from "./ui/badge";
import {
  Plus,
  Truck,
  CheckCircle,
  Clock,
  AlertTriangle
} from "lucide-react";

interface ShippingRecord {
  id: string;
  shippingNumber: string;
  lotNumber: string;
  item: string;
  spec: string;
  unit: string;
  quantity: number;
  weight: string;
  destination: string;
  requestDate: string;
  shippingDate: string;
  status: string;
  managerApproval: string;
}

export function ShippingManagement() {
  const [shippingView, setShippingView] = useState<"list" | "write">("list");

  const shippingList: ShippingRecord[] = [
    {
      id: "1",
      shippingNumber: "SHP-250723-001",
      lotNumber: "250723-04",
      item: "EGIT-SST",
      spec: "1219*3500",
      unit: "EA",
      quantity: 50,
      weight: "2,600",
      destination: "생산1라인",
      requestDate: "2025-07-23",
      shippingDate: "2025-07-23",
      status: "출고완료",
      managerApproval: "승인완료"
    },
    {
      id: "2",
      shippingNumber: "SHP-250722-003",
      lotNumber: "250716-01",
      item: "용강코일",
      spec: "EGIT-SST(W)350",
      unit: "롤",
      quantity: 3,
      weight: "3,070",
      destination: "생산2라인",
      requestDate: "2025-07-22",
      shippingDate: "2025-07-22",
      status: "출고완료",
      managerApproval: "승인완료"
    },
    {
      id: "3",
      shippingNumber: "SHP-250724-001",
      lotNumber: "-",
      item: "베링용장",
      spec: "3808",
      unit: "EA",
      quantity: 100,
      weight: "-",
      destination: "조립라인",
      requestDate: "2025-07-24",
      shippingDate: "-",
      status: "출고대기",
      managerApproval: "대기"
    },
    {
      id: "4",
      shippingNumber: "SHP-250724-002",
      lotNumber: "250720-02",
      item: "알루미늄판",
      spec: "1000*2000*2T",
      unit: "장",
      quantity: 20,
      weight: "108",
      destination: "가공라인",
      requestDate: "2025-07-24",
      shippingDate: "-",
      status: "승인대기",
      managerApproval: "대기"
    }
  ];

  const getStatusBadgeVariant = (status: string): "default" | "secondary" | "destructive" | "outline" => {
    switch (status) {
      case "출고완료":
      case "승인완료":
        return "default";
      case "출고취소":
      case "반려":
        return "destructive";
      case "대기":
      case "출고대기":
      case "승인대기":
        return "secondary";
      default:
        return "outline";
    }
  };

  const getStatusIcon = (status: string) => {
    switch (status) {
      case "출고완료":
      case "승인완료":
        return <CheckCircle className="w-3 h-3 mr-1" />;
      case "대기":
      case "출고대기":
      case "승인대기":
        return <Clock className="w-3 h-3 mr-1" />;
      case "출고취소":
      case "반려":
        return <AlertTriangle className="w-3 h-3 mr-1" />;
      default:
        return null;
    }
  };

  const columns: Column<ShippingRecord>[] = [
    {
      key: "shippingNumber",
      label: "출고번호",
      render: (value) => <span className="font-mono text-primary">{value}</span>
    },
    {
      key: "lotNumber",
      label: "로트번호",
      render: (value) => <span className="font-mono">{value}</span>
    },
    {
      key: "item",
      label: "품목"
    },
    {
      key: "spec",
      label: "규격"
    },
    {
      key: "quantity",
      label: "수량",
      render: (value, row) => `${value} ${row.unit}`
    },
    {
      key: "weight",
      label: "중량(kg)"
    },
    {
      key: "destination",
      label: "출고처"
    },
    {
      key: "requestDate",
      label: "요청일"
    },
    {
      key: "shippingDate",
      label: "출고일"
    },
    {
      key: "status",
      label: "상태",
      render: (value) => (
        <Badge variant={getStatusBadgeVariant(value as string)}>
          {getStatusIcon(value as string)}
          {value}
        </Badge>
      )
    },
    {
      key: "managerApproval",
      label: "팀장승인",
      render: (value) => (
        <Badge variant={getStatusBadgeVariant(value as string)}>
          {getStatusIcon(value as string)}
          {value}
        </Badge>
      )
    }
  ];

  return (
    <ListPageTemplate
      title="출고 관리"
      description="자재 출고 내역 및 관리"
      icon={Truck}
      actions={
        <Button onClick={() => setShippingView("write")}>
          <Plus className="w-4 h-4 mr-2" />
          출고 등록
        </Button>
      }
      searchPlaceholder=""
      filterButton={false}
      showSearch={false}
      data={shippingList}
      keyField="id"
      columns={columns}
      renderMobileCard={(item) => ({
        title: item.item,
        subtitle: item.spec,
        icon: (
          <div className="flex items-center gap-2">
            <Badge variant="outline" className="font-mono text-xs">
              {item.shippingNumber}
            </Badge>
          </div>
        ),
        badge: {
          label: item.status,
          variant: getStatusBadgeVariant(item.status)
        },
        fields: [
          {
            label: "수량",
            value: `${item.quantity} ${item.unit}`
          },
          {
            label: "중량",
            value: `${item.weight} kg`
          },
          {
            label: "출고처",
            value: item.destination
          },
          {
            label: "요청일",
            value: item.requestDate
          },
          {
            label: "출고일",
            value: item.shippingDate
          },
          {
            label: "팀장승인",
            value: item.managerApproval
          }
        ],
        actions: []
      })}
      emptyIcon={Truck}
      emptyTitle="출고 데이터가 없습니다"
      emptyDescription="출고 내역을 등록해주세요"
    />
  );
}