'use client';

/**
 * 수주 선택 모달
 * API 연동 완료 (2025-12-26)
 */

import { useState, useEffect, useCallback } from 'react';
import { Search, FileText, Loader2 } from 'lucide-react';
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Badge } from '@/components/ui/badge';
import { toast } from 'sonner';
import { getSalesOrdersForWorkOrder } from './actions';
import type { SalesOrder } from './types';

interface SalesOrderSelectModalProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  onSelect: (order: SalesOrder) => void;
}

export function SalesOrderSelectModal({
  open,
  onOpenChange,
  onSelect,
}: SalesOrderSelectModalProps) {
  const [searchTerm, setSearchTerm] = useState('');
  const [salesOrders, setSalesOrders] = useState<SalesOrder[]>([]);
  const [isLoading, setIsLoading] = useState(false);

  // API로 수주 목록 로드
  const loadSalesOrders = useCallback(async () => {
    setIsLoading(true);
    try {
      const result = await getSalesOrdersForWorkOrder({
        q: searchTerm || undefined,
      });
      if (result.success) {
        // API 응답을 SalesOrder 타입으로 변환
        const orders: SalesOrder[] = result.data.map((item) => ({
          id: String(item.id),
          orderNo: item.orderNo,
          client: item.client,
          projectName: item.projectName,
          dueDate: item.dueDate,
          status: item.status,
          itemCount: item.itemCount,
          splitCount: item.splitCount,
        }));
        setSalesOrders(orders);
      } else {
        toast.error(result.error || '수주 목록 조회에 실패했습니다.');
      }
    } catch (error) {
      console.error('[SalesOrderSelectModal] loadSalesOrders error:', error);
      toast.error('수주 목록 로드 중 오류가 발생했습니다.');
    } finally {
      setIsLoading(false);
    }
  }, [searchTerm]);

  // 모달이 열릴 때 데이터 로드
  useEffect(() => {
    if (open) {
      loadSalesOrders();
    }
  }, [open, loadSalesOrders]);

  const handleSelect = (order: SalesOrder) => {
    onSelect(order);
    onOpenChange(false);
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-lg">
        <DialogHeader>
          <DialogTitle>수주 선택</DialogTitle>
        </DialogHeader>

        {/* 검색 */}
        <div className="relative">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
          <Input
            placeholder="수주번호, 거래처, 현장명 검색..."
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
            className="pl-9"
          />
        </div>

        {/* 안내 문구 */}
        <p className="text-sm text-muted-foreground">
          생산지시 가능한 수주 {salesOrders.length}건 (회계확인 완료 상태)
        </p>

        {/* 수주 목록 */}
        <div className="max-h-[400px] overflow-y-auto space-y-2">
          {isLoading ? (
            <div className="py-8 flex items-center justify-center">
              <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
            </div>
          ) : salesOrders.map((order) => (
            <div
              key={order.id}
              onClick={() => handleSelect(order)}
              className="p-4 border rounded-lg cursor-pointer hover:bg-muted/50 transition-colors"
            >
              <div className="flex items-start justify-between mb-2">
                <div className="flex items-center gap-2">
                  <span className="font-semibold">{order.orderNo}</span>
                  <Badge variant="secondary" className="text-xs">
                    {order.status}
                  </Badge>
                </div>
                <div className="text-sm text-right">
                  <span className="text-muted-foreground">납기: </span>
                  <span>{order.dueDate}</span>
                </div>
              </div>
              <div className="text-sm text-muted-foreground mb-1">
                {order.client}
              </div>
              <div className="text-sm mb-2">{order.projectName}</div>
              <div className="flex items-center gap-4 text-xs text-muted-foreground">
                <span>{order.itemCount}개 품목</span>
                <span>분할 {order.splitCount}건</span>
              </div>
            </div>
          ))}
          {!isLoading && salesOrders.length === 0 && (
            <div className="py-8 text-center text-muted-foreground">
              <FileText className="w-8 h-8 mx-auto mb-2 opacity-50" />
              <p>검색 결과가 없습니다.</p>
            </div>
          )}
        </div>
      </DialogContent>
    </Dialog>
  );
}