/**
 * 카테고리 분류 관리
 * 수식 카테고리들을 묶는 분류 생성/관리
 */

import { useState, useMemo } from "react";
import { Plus, Edit, Trash2, Search } from "lucide-react";
import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
import { Button } from "./ui/button";
import { Input } from "./ui/input";
import { Label } from "./ui/label";
import { Textarea } from "./ui/textarea";
import { Badge } from "./ui/badge";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription, DialogBody } from "./ui/dialog";
import { Checkbox } from "./ui/checkbox";
import { toast } from "sonner@2.0.3";
import { useData } from "./contexts/DataContext";
import type { CategoryGroup } from "./contexts/DataContext";

interface Formula {
  id: string;
  name: string;
  category: string;
  formula: string;
}

interface CategoryGroupManagerProps {
  formulas: Formula[];
  categories: string[]; // 추가: 전체 카테고리 목록
}

export function CategoryGroupManager({ formulas, categories }: CategoryGroupManagerProps) {
  const { categoryGroups, addCategoryGroup, updateCategoryGroup, deleteCategoryGroup } = useData();
  const [isDialogOpen, setIsDialogOpen] = useState(false);
  const [editingGroup, setEditingGroup] = useState<CategoryGroup | null>(null);
  const [searchQuery, setSearchQuery] = useState("");
  const [formData, setFormData] = useState<Partial<CategoryGroup>>({
    name: '',
    description: '',
    categories: []
  });

  // 사용 가능한 카테고리 목록 (이미 다른 분류에 할당된 카테고리 제외)
  const availableCategories = useMemo(() => {
    // 편집 중이 아닌 다른 그룹에서 사용 중인 카테고리들
    const usedCategories = new Set<string>();
    categoryGroups.forEach(group => {
      // 현재 편집 중인 그룹은 제외
      if (editingGroup && group.id === editingGroup.id) return;
      group.categories?.forEach(cat => usedCategories.add(cat));
    });
    
    // 전체 카테고리 중 아직 사용되지 않은 카테고리만 반환
    return categories.filter(cat => !usedCategories.has(cat)).sort();
  }, [categories, categoryGroups, editingGroup]);

  // 검색 필터링
  const filteredGroups = useMemo(() => {
    if (!searchQuery) return categoryGroups;
    const query = searchQuery.toLowerCase();
    return categoryGroups.filter(g => 
      g.name.toLowerCase().includes(query) ||
      g.description?.toLowerCase().includes(query) ||
      g.categories?.some(c => c.toLowerCase().includes(query))
    );
  }, [categoryGroups, searchQuery]);

  // 추가
  const handleAdd = () => {
    setEditingGroup(null);
    setFormData({
      name: '',
      description: '',
      categories: []
    });
    setIsDialogOpen(true);
  };

  // 수정
  const handleEdit = (group: CategoryGroup) => {
    setEditingGroup(group);
    setFormData(group);
    setIsDialogOpen(true);
  };

  // 저장
  const handleSave = () => {
    if (!formData.name?.trim()) {
      toast.error('분류명을 입력해주세요.');
      return;
    }

    if (!formData.categories || formData.categories.length === 0) {
      toast.error('최소 1개 이상의 카테고리를 선택해주세요.');
      return;
    }

    const now = new Date().toISOString();

    if (editingGroup) {
      // 수정
      updateCategoryGroup(editingGroup.id, {
        ...formData,
        updatedAt: now
      });
      toast.success('분류가 수정되었습니다.');
    } else {
      // 추가
      const newGroup: CategoryGroup = {
        id: `catgroup-${Date.now()}`,
        name: formData.name!,
        description: formData.description,
        categories: formData.categories!,
        createdAt: now
      };
      addCategoryGroup(newGroup);
      toast.success('분류가 추가되었습니다.');
    }

    setIsDialogOpen(false);
  };

  // 삭제
  const handleDelete = (group: CategoryGroup) => {
    if (!confirm(`"${group.name}" 분류를 삭제하시겠습니까?\n\n이 분류를 사용하는 단가 맵핑이 있을 경우 영향을 받을 수 있습니다.`)) {
      return;
    }
    deleteCategoryGroup(group.id);
    toast.success('분류가 삭제되었습니다.');
  };

  // 카테고리 선택 토글
  const toggleCategory = (category: string) => {
    setFormData(prev => {
      const current = prev.categories || [];
      if (current.includes(category)) {
        return { ...prev, categories: current.filter(c => c !== category) };
      } else {
        return { ...prev, categories: [...current, category] };
      }
    });
  };

  return (
    <>
      <Card>
        <CardHeader>
          <div className="flex items-center justify-between">
            <div>
              <CardTitle>단가 계산 분류 관리</CardTitle>
              <p className="text-sm text-muted-foreground mt-1">
                카테고리들을 묶는 분류를 생성하고 관리합니다
              </p>
            </div>
            <Button onClick={handleAdd} size="sm">
              <Plus className="h-4 w-4 mr-2" />
              분류 추가
            </Button>
          </div>
        </CardHeader>

        <CardContent className="space-y-3">
          {/* 검색 */}
          <div className="relative">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
            <Input
              placeholder="분류명, 설명, 카테고리로 검색..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="pl-9"
            />
          </div>

          {/* 분류 목록 */}
          {filteredGroups.length === 0 ? (
            <div className="text-center py-8 border-2 border-dashed rounded-lg">
              <p className="text-muted-foreground mb-2">
                {searchQuery ? '검색 결과가 없습니다' : '등록된 분류가 없습니다'}
              </p>
              {!searchQuery && (
                <Button variant="outline" size="sm" onClick={handleAdd}>
                  <Plus className="h-4 w-4 mr-2" />
                  첫 분류 추가하기
                </Button>
              )}
            </div>
          ) : (
            <div className="space-y-2">
              {filteredGroups.map((group) => {
                const categoryCount = Array.isArray(group.categories) ? group.categories.length : 0;
                return (
                  <Card key={group.id} className="border hover:border-primary/50 transition-colors">
                    <CardContent className="p-3">
                      <div className="flex items-start justify-between">
                        <div className="flex-1 min-w-0">
                          <div className="flex items-center gap-2 mb-1">
                            <h4 className="font-medium text-sm">{group.name}</h4>
                            <Badge variant="outline" className="text-xs">
                              {categoryCount}개
                            </Badge>
                          </div>
                          {group.description && (
                            <p className="text-xs text-muted-foreground mb-2">{group.description}</p>
                          )}
                          {/* 포함된 카테고리 */}
                          <div className="flex flex-wrap gap-1">
                            {group.categories?.map(cat => (
                              <Badge key={cat} variant="secondary" className="text-xs px-2 py-0">
                                {cat}
                              </Badge>
                            ))}
                          </div>
                        </div>
                        <div className="flex gap-1 ml-2">
                          <Button size="sm" variant="ghost" onClick={() => handleEdit(group)} className="h-8 w-8 p-0">
                            <Edit className="h-3 w-3" />
                          </Button>
                          <Button 
                            size="sm" 
                            variant="ghost" 
                            onClick={() => handleDelete(group)}
                            className="h-8 w-8 p-0 text-red-600 hover:text-red-700 hover:bg-red-50"
                          >
                            <Trash2 className="h-3 w-3" />
                          </Button>
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                );
              })}
            </div>
          )}
        </CardContent>
      </Card>

      {/* 추가/수정 다이얼로그 */}
      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
        <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>
              {editingGroup ? '분류 수정' : '분류 추가'}
            </DialogTitle>
            <DialogDescription>
              카테고리들을 묶는 분류를 설정합니다
            </DialogDescription>
          </DialogHeader>

          <DialogBody className="space-y-4 px-6">
            {/* 분류명 */}
            <div>
              <Label>분류명 <span className="text-red-500">*</span></Label>
              <Input
                value={formData.name || ''}
                onChange={(e) => setFormData(prev => ({ ...prev, name: e.target.value }))}
                placeholder="예: 오픈형 제품, 면적 기반 제품"
              />
            </div>

            {/* 설명 */}
            <div>
              <Label>설명 (선택)</Label>
              <Textarea
                value={formData.description || ''}
                onChange={(e) => setFormData(prev => ({ ...prev, description: e.target.value }))}
                placeholder="분류에 대한 설명"
                rows={2}
              />
            </div>

            {/* 카테고리 선택 */}
            <div>
              <Label>포함할 카테고리 <span className="text-red-500">*</span></Label>
              <p className="text-xs text-muted-foreground mb-3">
                수식 관리에서 생성된 카테고리를 선택하세요
              </p>

              {availableCategories.length === 0 && (!editingGroup || !formData.categories || formData.categories.length === 0) ? (
                <div className="text-center py-8 border-2 border-dashed rounded-lg text-muted-foreground">
                  <p className="text-sm">사용 가능한 카테고리가 없습니다</p>
                  <p className="text-xs mt-1">
                    {editingGroup 
                      ? '이 분류의 카테고리는 이미 선택되어 있습니다' 
                      : '먼저 수식 관리에서 카테고리를 생성하거나, 다른 분류에 할당된 카테고리를 해제해주세요'}
                  </p>
                </div>
              ) : (
                <div className="border rounded-lg p-3 space-y-2 max-h-[300px] overflow-y-auto">
                  {/* 현재 선택된 카테고리 (편집 모드일 때만) */}
                  {editingGroup && formData.categories?.map(cat => {
                    // 이미 선택된 카테고리는 항상 표시
                    return (
                      <div key={cat} className="flex items-center gap-2 p-2 hover:bg-muted/50 rounded">
                        <Checkbox
                          id={`cat-${cat}`}
                          checked={true}
                          onCheckedChange={() => toggleCategory(cat)}
                        />
                        <Label htmlFor={`cat-${cat}`} className="flex-1 cursor-pointer">
                          <div className="flex items-center gap-2">
                            <span>{cat}</span>
                            <Badge variant="outline" className="text-xs">
                              {formulas.filter(f => f.category === cat).length}개 수식
                            </Badge>
                          </div>
                        </Label>
                      </div>
                    );
                  })}
                  
                  {/* 사용 가능한 카테고리 */}
                  {availableCategories.map(cat => (
                    <div key={cat} className="flex items-center gap-2 p-2 hover:bg-muted/50 rounded">
                      <Checkbox
                        id={`cat-${cat}`}
                        checked={formData.categories?.includes(cat) || false}
                        onCheckedChange={() => toggleCategory(cat)}
                      />
                      <Label htmlFor={`cat-${cat}`} className="flex-1 cursor-pointer">
                        <div className="flex items-center gap-2">
                          <span>{cat}</span>
                          <Badge variant="outline" className="text-xs">
                            {formulas.filter(f => f.category === cat).length}개 수식
                          </Badge>
                        </div>
                      </Label>
                    </div>
                  ))}
                </div>
              )}

              {/* 선택된 카테고리 미리보기 */}
              {formData.categories && formData.categories.length > 0 && (
                <div className="mt-3 p-3 bg-blue-50 border border-blue-200 rounded-lg">
                  <div className="text-sm font-medium text-blue-900 mb-2">
                    선택된 카테고리 ({formData.categories.length}개)
                  </div>
                  <div className="flex flex-wrap gap-2">
                    {formData.categories.map(cat => (
                      <Badge key={cat} variant="secondary">
                        {cat}
                      </Badge>
                    ))}
                  </div>
                </div>
              )}
            </div>
          </DialogBody>

          <DialogFooter>
            <Button variant="outline" onClick={() => setIsDialogOpen(false)}>
              취소
            </Button>
            <Button onClick={handleSave}>
              {editingGroup ? '수정' : '추가'}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </>
  );
}