'use client';

import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Package, Folder } from 'lucide-react';
import type { SectionTemplate } from '@/contexts/ItemMasterContext';

interface LoadTemplateDialogProps {
  isLoadTemplateDialogOpen: boolean;
  setIsLoadTemplateDialogOpen: (open: boolean) => void;
  sectionTemplates: SectionTemplate[];
  // string 또는 number | null 모두 지원
  selectedTemplateId: string | number | null;
  setSelectedTemplateId: (id: string | number | null) => void;
  handleLoadTemplate: () => void;
}

const _ITEM_TYPE_OPTIONS = [
  { value: 'product', label: '제품' },
  { value: 'part', label: '부품' },
  { value: 'material', label: '자재' },
  { value: 'assembly', label: '조립품' },
];

export function LoadTemplateDialog({
  isLoadTemplateDialogOpen,
  setIsLoadTemplateDialogOpen,
  sectionTemplates,
  selectedTemplateId,
  setSelectedTemplateId,
  handleLoadTemplate,
}: LoadTemplateDialogProps) {
  return (
    <Dialog open={isLoadTemplateDialogOpen} onOpenChange={(open) => {
      setIsLoadTemplateDialogOpen(open);
      if (!open) {
        setSelectedTemplateId(null);
      }
    }}>
      <DialogContent className="max-w-[95vw] sm:max-w-2xl max-h-[90vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle>섹션 불러오기</DialogTitle>
          <DialogDescription>
            저장된 섹션을 선택하여 현재 페이지에 추가합니다
          </DialogDescription>
        </DialogHeader>
        <div className="space-y-4">
          {sectionTemplates.length === 0 ? (
            <div className="text-center py-8">
              <p className="text-muted-foreground">등록된 섹션이 없습니다</p>
            </div>
          ) : (
            <div className="space-y-2 max-h-96 overflow-y-auto">
              {sectionTemplates.map((template) => (
                <div
                  key={template.id}
                  onClick={() => setSelectedTemplateId(String(template.id))}
                  className={`p-4 border rounded-lg cursor-pointer transition-colors ${
                    selectedTemplateId === String(template.id)
                      ? 'border-blue-500 bg-blue-50 dark:bg-blue-950'
                      : 'hover:bg-gray-50 dark:hover:bg-gray-800'
                  }`}
                >
                  <div className="flex items-start gap-3">
                    <div className="p-2 rounded-lg bg-blue-100 dark:bg-blue-900">
                      {template.section_type === 'BOM' ? (
                        <Package className="w-5 h-5 text-blue-600 dark:text-blue-400" />
                      ) : (
                        <Folder className="w-5 h-5 text-blue-600 dark:text-blue-400" />
                      )}
                    </div>
                    <div className="flex-1 min-w-0">
                      <div className="flex items-center gap-2 mb-1">
                        <h4 className="font-medium">{template.template_name}</h4>
                        <Badge variant={template.section_type === 'BOM' ? 'default' : 'secondary'}>
                          {template.section_type}
                        </Badge>
                      </div>
                      {template.description && (
                        <p className="text-sm text-muted-foreground mb-2">{template.description}</p>
                      )}
                    </div>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
        <DialogFooter>
          <Button variant="outline" onClick={() => setIsLoadTemplateDialogOpen(false)}>취소</Button>
          <Button
            onClick={handleLoadTemplate}
            disabled={!selectedTemplateId}
          >
            불러오기
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}
