'use client';

import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { DeleteConfirmDialog } from '@/components/ui/confirm-dialog';
import { Button } from '@/components/ui/button';
import { Label } from '@/components/ui/label';
import { Input } from '@/components/ui/input';
import { Badge } from '@/components/ui/badge';
import { ChevronUp, ChevronDown, Edit, Trash2, Plus, Settings } from 'lucide-react';

interface TabManagementDialogsProps {
  // Manage Tabs Dialog
  isManageTabsDialogOpen: boolean;
  setIsManageTabsDialogOpen: (open: boolean) => void;
  customTabs: Array<{ id: string; label: string; icon: string; order: number; isDefault?: boolean; key?: string }>;
  moveTabUp: (id: string) => void;
  moveTabDown: (id: string) => void;
  handleEditTabFromManage: (tab: any) => void;
  handleDeleteTab: (id: string) => void;
  getTabIcon: (iconName: string) => any;
  setIsAddTabDialogOpen: (open: boolean) => void;

  // Delete Tab Dialog
  isDeleteTabDialogOpen: boolean;
  setIsDeleteTabDialogOpen: (open: boolean) => void;
  deletingTabId: string | null;
  setDeletingTabId: (id: string | null) => void;
  confirmDeleteTab: () => void;

  // Add/Edit Tab Dialog
  isAddTabDialogOpen: boolean;
  editingTabId: string | null;
  setEditingTabId: (id: string | null) => void;
  newTabLabel: string;
  setNewTabLabel: (label: string) => void;
  handleUpdateTab: () => void;
  handleAddTab: () => void;

  // Manage Attribute Tabs Dialog
  isManageAttributeTabsDialogOpen: boolean;
  setIsManageAttributeTabsDialogOpen: (open: boolean) => void;
  attributeSubTabs: Array<{ id: string; label: string; key: string; order: number; isDefault?: boolean }>;
  moveAttributeTabUp: (id: string) => void;
  moveAttributeTabDown: (id: string) => void;
  handleDeleteAttributeTab: (id: string) => void;
  setIsAddAttributeTabDialogOpen: (open: boolean) => void;

  // Delete Attribute Tab Dialog
  isDeleteAttributeTabDialogOpen: boolean;
  setIsDeleteAttributeTabDialogOpen: (open: boolean) => void;
  deletingAttributeTabId: string | null;
  setDeletingAttributeTabId: (id: string | null) => void;
  confirmDeleteAttributeTab: () => void;

  // Add/Edit Attribute Tab Dialog
  isAddAttributeTabDialogOpen: boolean;
  editingAttributeTabId: string | null;
  setEditingAttributeTabId: (id: string | null) => void;
  newAttributeTabLabel: string;
  setNewAttributeTabLabel: (label: string) => void;
  handleUpdateAttributeTab: () => void;
  handleAddAttributeTab: () => void;
}

export function TabManagementDialogs({
  // Manage Tabs Dialog
  isManageTabsDialogOpen,
  setIsManageTabsDialogOpen,
  customTabs,
  moveTabUp,
  moveTabDown,
  handleEditTabFromManage,
  handleDeleteTab,
  getTabIcon,
  setIsAddTabDialogOpen,

  // Delete Tab Dialog
  isDeleteTabDialogOpen,
  setIsDeleteTabDialogOpen,
  deletingTabId,
  setDeletingTabId,
  confirmDeleteTab,

  // Add/Edit Tab Dialog
  isAddTabDialogOpen,
  editingTabId,
  setEditingTabId,
  newTabLabel,
  setNewTabLabel,
  handleUpdateTab,
  handleAddTab,

  // Manage Attribute Tabs Dialog
  isManageAttributeTabsDialogOpen,
  setIsManageAttributeTabsDialogOpen,
  attributeSubTabs,
  moveAttributeTabUp,
  moveAttributeTabDown,
  handleDeleteAttributeTab,
  setIsAddAttributeTabDialogOpen,

  // Delete Attribute Tab Dialog
  isDeleteAttributeTabDialogOpen,
  setIsDeleteAttributeTabDialogOpen,
  deletingAttributeTabId,
  setDeletingAttributeTabId,
  confirmDeleteAttributeTab,

  // Add/Edit Attribute Tab Dialog
  isAddAttributeTabDialogOpen,
  editingAttributeTabId,
  setEditingAttributeTabId,
  newAttributeTabLabel,
  setNewAttributeTabLabel,
  handleUpdateAttributeTab,
  handleAddAttributeTab,
}: TabManagementDialogsProps) {
  return (
    <>
      {/* 탭 관리 다이얼로그 */}
      <Dialog open={isManageTabsDialogOpen} onOpenChange={setIsManageTabsDialogOpen}>
        <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>탭 관리</DialogTitle>
            <DialogDescription>
              탭의 순서를 변경하거나 편집, 삭제할 수 있습니다
            </DialogDescription>
          </DialogHeader>
          <div className="space-y-2">
            {customTabs.sort((a, b) => a.order - b.order).map((tab, index) => {
              const Icon = getTabIcon(tab.icon);
              return (
                <div
                  key={tab.id}
                  className="flex items-center gap-3 p-3 border rounded-lg hover:bg-gray-50 transition-colors"
                >
                  <div className="flex flex-col gap-1">
                    <Button
                      size="sm"
                      variant="ghost"
                      className="h-6 w-6 p-0"
                      onClick={() => moveTabUp(tab.id)}
                      disabled={index === 0}
                    >
                      <ChevronUp className="h-4 w-4" />
                    </Button>
                    <Button
                      size="sm"
                      variant="ghost"
                      className="h-6 w-6 p-0"
                      onClick={() => moveTabDown(tab.id)}
                      disabled={index === customTabs.length - 1}
                    >
                      <ChevronDown className="h-4 w-4" />
                    </Button>
                  </div>

                  <Icon className="w-5 h-5 text-gray-500 flex-shrink-0" />

                  <div className="flex-1">
                    <div className="font-medium">{tab.label}</div>
                    <div className="text-xs text-gray-500">
                      {tab.isDefault ? '기본 탭' : '사용자 정의 탭'} • 순서: {tab.order}
                    </div>
                  </div>

                  <div className="flex gap-2">
                    {!tab.isDefault && (
                      <>
                        <Button
                          size="sm"
                          variant="outline"
                          onClick={() => handleEditTabFromManage(tab)}
                        >
                          <Edit className="h-4 w-4 mr-1" />
                          편집
                        </Button>
                        <Button
                          size="sm"
                          variant="outline"
                          onClick={() => handleDeleteTab(tab.id)}
                        >
                          <Trash2 className="h-4 w-4 mr-1 text-red-500" />
                          삭제
                        </Button>
                      </>
                    )}
                    {tab.isDefault && (
                      <Badge variant="secondary">기본 탭</Badge>
                    )}
                  </div>
                </div>
              );
            })}
          </div>
          <DialogFooter>
            <Button
              variant="outline"
              onClick={() => {
                setIsManageTabsDialogOpen(false);
                setIsAddTabDialogOpen(true);
              }}
            >
              <Plus className="h-4 w-4 mr-2" />
              새 탭 추가
            </Button>
            <Button onClick={() => setIsManageTabsDialogOpen(false)}>
              닫기
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* 탭 삭제 확인 다이얼로그 */}
      <DeleteConfirmDialog
        open={isDeleteTabDialogOpen}
        onOpenChange={(open) => {
          setIsDeleteTabDialogOpen(open);
          if (!open) setDeletingTabId(null);
        }}
        onConfirm={confirmDeleteTab}
        title="탭 삭제"
        description={
          <>
            &quot;{customTabs.find(t => t.id === deletingTabId)?.label}&quot; 탭을 삭제하시겠습니까?
            <br />
            이 작업은 되돌릴 수 없습니다.
          </>
        }
      />

      {/* 탭 추가/수정 다이얼로그 */}
      <Dialog open={isAddTabDialogOpen} onOpenChange={(open) => {
        setIsAddTabDialogOpen(open);
        if (!open) {
          setEditingTabId(null);
          setNewTabLabel('');
        }
      }}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>{editingTabId ? '탭 수정' : '탭 추가'}</DialogTitle>
            <DialogDescription>
              새로운 탭을 추가하여 품목기준관리를 확장할 수 있습니다
            </DialogDescription>
          </DialogHeader>
          <div className="space-y-4">
            <div>
              <Label>탭 이름 *</Label>
              <Input
                value={newTabLabel}
                onChange={(e) => setNewTabLabel(e.target.value)}
                placeholder="예: 거래처, 창고"
              />
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setIsAddTabDialogOpen(false)}>취소</Button>
            <Button onClick={editingTabId ? handleUpdateTab : handleAddTab}>
              {editingTabId ? '수정' : '추가'}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* 속성 하위 탭 관리 다이얼로그 */}
      <Dialog open={isManageAttributeTabsDialogOpen} onOpenChange={setIsManageAttributeTabsDialogOpen}>
        <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>속성 탭 관리</DialogTitle>
            <DialogDescription>
              속성 탭의 순서를 변경하거나 편집, 삭제할 수 있습니다
            </DialogDescription>
          </DialogHeader>
          <div className="space-y-2">
            {attributeSubTabs.sort((a, b) => a.order - b.order).map((tab, index) => {
              const Icon = Settings;
              return (
                <div key={tab.id} className="flex items-center justify-between p-4 border rounded-lg hover:bg-gray-50">
                  <div className="flex items-center gap-3">
                    <Icon className="h-5 w-5 text-gray-500" />
                    <div>
                      <div className="font-medium">{tab.label}</div>
                      <div className="text-sm text-gray-500">ID: {tab.key}</div>
                    </div>
                  </div>
                  <div className="flex items-center gap-2">
                    <Button
                      size="sm"
                      variant="outline"
                      onClick={() => moveAttributeTabUp(tab.id)}
                      disabled={index === 0}
                    >
                      <ChevronUp className="h-4 w-4" />
                    </Button>
                    <Button
                      size="sm"
                      variant="outline"
                      onClick={() => moveAttributeTabDown(tab.id)}
                      disabled={index === attributeSubTabs.length - 1}
                    >
                      <ChevronDown className="h-4 w-4" />
                    </Button>
                    {!tab.isDefault && (
                      <>
                        <Button
                          size="sm"
                          variant="outline"
                          onClick={() => {
                            setEditingAttributeTabId(tab.id);
                            setNewAttributeTabLabel(tab.label);
                            setIsManageAttributeTabsDialogOpen(false);
                            setIsAddAttributeTabDialogOpen(true);
                          }}
                        >
                          <Edit className="h-4 w-4 mr-1" />
                          편집
                        </Button>
                        <Button
                          size="sm"
                          variant="outline"
                          onClick={() => handleDeleteAttributeTab(tab.id)}
                        >
                          <Trash2 className="h-4 w-4 mr-1 text-red-500" />
                          삭제
                        </Button>
                      </>
                    )}
                    {tab.isDefault && (
                      <Badge variant="secondary">기본 탭</Badge>
                    )}
                  </div>
                </div>
              );
            })}
          </div>
          <DialogFooter>
            <Button
              variant="outline"
              onClick={() => {
                setIsManageAttributeTabsDialogOpen(false);
                setIsAddAttributeTabDialogOpen(true);
              }}
            >
              <Plus className="h-4 w-4 mr-2" />
              새 속성 탭 추가
            </Button>
            <Button onClick={() => setIsManageAttributeTabsDialogOpen(false)}>
              닫기
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* 속성 하위 탭 삭제 확인 다이얼로그 */}
      <DeleteConfirmDialog
        open={isDeleteAttributeTabDialogOpen}
        onOpenChange={(open) => {
          setIsDeleteAttributeTabDialogOpen(open);
          if (!open) setDeletingAttributeTabId(null);
        }}
        onConfirm={confirmDeleteAttributeTab}
        title="속성 탭 삭제"
        description={
          <>
            &quot;{attributeSubTabs.find(t => t.id === deletingAttributeTabId)?.label}&quot; 탭을 삭제하시겠습니까?
            <br />
            이 작업은 되돌릴 수 없습니다.
          </>
        }
      />

      {/* 속성 하위 탭 추가/수정 다이얼로그 */}
      <Dialog open={isAddAttributeTabDialogOpen} onOpenChange={(open) => {
        setIsAddAttributeTabDialogOpen(open);
        if (!open) {
          setEditingAttributeTabId(null);
          setNewAttributeTabLabel('');
        }
      }}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>{editingAttributeTabId ? '속성 탭 수정' : '속성 탭 추가'}</DialogTitle>
            <DialogDescription>
              새로운 속성 탭을 추가하여 속성 관리를 확장할 수 있습니다
            </DialogDescription>
          </DialogHeader>
          <div className="space-y-4">
            <div>
              <Label>탭 이름 *</Label>
              <Input
                value={newAttributeTabLabel}
                onChange={(e) => setNewAttributeTabLabel(e.target.value)}
                placeholder="예: 색상, 규격"
              />
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setIsAddAttributeTabDialogOpen(false)}>취소</Button>
            <Button onClick={editingAttributeTabId ? handleUpdateAttributeTab : handleAddAttributeTab}>
              {editingAttributeTabId ? '수정' : '추가'}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </>
  );
}
