import { useState } from "react";
import { Button } from "./ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
import { Input } from "./ui/input";
import { Badge } from "./ui/badge";
import { PageLayout } from "./organisms/PageLayout";
import { PageHeader } from "./organisms/PageHeader";
import { StatCards } from "./organisms/StatCards";
import { Package, Plus, Edit, Trash2, Save, GitBranch } from "lucide-react";
import { useVersionControl, VersionControlDialog, VersionHistoryViewer } from "./VersionControl";
import { toast } from "sonner@2.0.3";

/**
 * 버전 관리 기능이 통합된 품목관리 화면 예시
 * 
 * 사용법:
 * 1. 화면을 수정할 때마다 requestVersionUpdate() 호출
 * 2. 다이얼로그가 나타나면 사용자가 버전 업데이트 여부 선택
 * 3. 승인하면 버전 업데이트 + 수정사항 적용
 * 4. 취소하면 수정사항만 적용
 */

export function ItemManagementWithVersion() {
  // 버전 관리 Hook
  const {
    screenVersion,
    isVersionDialogOpen,
    setIsVersionDialogOpen,
    requestVersionUpdate,
    confirmVersionUpdate,
    cancelVersionUpdate
  } = useVersionControl("품목관리", "/components/ItemManagement.tsx");

  // 임시 데이터
  const [items, setItems] = useState([
    { id: "1", code: "PT-001", name: "가이드레일", type: "PT" },
    { id: "2", code: "FG-001", name: "방화셔터", type: "FG" },
  ]);

  const stats = [
    { label: "전체 품목", value: items.length, icon: Package, iconColor: "text-blue-600" },
    { label: "제품", value: items.filter(i => i.type === "FG").length, icon: Package, iconColor: "text-purple-600" },
    { label: "부품", value: items.filter(i => i.type === "PT").length, icon: Package, iconColor: "text-orange-600" },
    { label: "부자재", value: 0, icon: Package, iconColor: "text-green-600" },
  ];

  // 품목 추가 (버전 관리 적용 예시)
  const handleAddItem = () => {
    requestVersionUpdate(() => {
      const newItem = {
        id: Date.now().toString(),
        code: `PT-00${items.length + 1}`,
        name: "새 품목",
        type: "PT"
      };
      setItems([...items, newItem]);
      toast.success("품목이 추가되었습니다.");
    });
  };

  // 품목 삭제 (버전 관리 적용 예시)
  const handleDeleteItem = (id: string) => {
    requestVersionUpdate(() => {
      setItems(items.filter(item => item.id !== id));
      toast.success("품목이 삭제되었습니다.");
    });
  };

  return (
    <PageLayout>
      <PageHeader
        title="품목 관리"
        description="제품, 부품, 부자재, 원자재, 소모품 등록 및 관리"
        icon={Package}
        actions={
          <div className="flex items-center gap-2">
            <Badge variant="secondary" className="gap-1">
              <GitBranch className="h-3 w-3" />
              v{screenVersion.version}
            </Badge>
            <Button size="sm" onClick={handleAddItem}>
              <Plus className="h-4 w-4 mr-2" />
              품목 등록
            </Button>
          </div>
        }
      />

      {/* 통계 카드 */}
      <StatCards stats={stats} />

      {/* 버전 히스토리 */}
      <VersionHistoryViewer
        screenName="품목관리"
        versionHistory={screenVersion.versionHistory}
        currentVersion={screenVersion.version}
      />

      {/* 품목 목록 */}
      <Card>
        <CardHeader>
          <CardTitle>품목 목록 ({items.length}개)</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-2">
            {items.map(item => (
              <div key={item.id} className="flex items-center justify-between p-3 border rounded-lg">
                <div className="flex items-center gap-3">
                  <code className="text-xs bg-gray-100 px-2 py-1 rounded">{item.code}</code>
                  <span>{item.name}</span>
                  <Badge variant="secondary">{item.type}</Badge>
                </div>
                <div className="flex gap-2">
                  <Button variant="ghost" size="sm">
                    <Edit className="h-4 w-4" />
                  </Button>
                  <Button 
                    variant="ghost" 
                    size="sm"
                    onClick={() => handleDeleteItem(item.id)}
                  >
                    <Trash2 className="h-4 w-4 text-red-600" />
                  </Button>
                </div>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>

      {/* 버전 업데이트 다이얼로그 */}
      <VersionControlDialog
        open={isVersionDialogOpen}
        onOpenChange={setIsVersionDialogOpen}
        screenName="품목관리"
        screenPath="/components/ItemManagement.tsx"
        onConfirm={confirmVersionUpdate}
        onCancel={cancelVersionUpdate}
      />
    </PageLayout>
  );
}
