"use client";

import React, { useState, useMemo } from "react";
import { Plus, Layers, Search, Filter } from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { Input } from "@/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { useComponents } from "@/hooks/admin/useComponents";

interface ComponentsPanelProps {
  onDragStart: (e: React.DragEvent, component: ComponentItem) => void;
}

interface ComponentItem {
  id: string;
  name: string;
  description: string;
  category: string;
  componentType: string;
  componentConfig: any;
  icon: React.ReactNode;
  defaultSize: { width: number; height: number };
}

// 컴포넌트 카테고리 정의 (실제 생성된 컴포넌트에 맞게)
const COMPONENT_CATEGORIES = [
  { id: "action", name: "액션", description: "사용자 동작을 처리하는 컴포넌트" },
  { id: "layout", name: "레이아웃", description: "화면 구조를 제공하는 컴포넌트" },
  { id: "data", name: "데이터", description: "데이터를 표시하는 컴포넌트" },
  { id: "navigation", name: "네비게이션", description: "화면 이동을 도와주는 컴포넌트" },
  { id: "feedback", name: "피드백", description: "사용자 피드백을 제공하는 컴포넌트" },
  { id: "input", name: "입력", description: "사용자 입력을 받는 컴포넌트" },
  { id: "other", name: "기타", description: "기타 컴포넌트" },
];

export const ComponentsPanel: React.FC<ComponentsPanelProps> = ({ onDragStart }) => {
  const [searchTerm, setSearchTerm] = useState("");
  const [selectedCategory, setSelectedCategory] = useState<string>("all");

  // 데이터베이스에서 컴포넌트 가져오기
  const {
    data: componentsData,
    isLoading: loading,
    error,
  } = useComponents({
    active: "Y",
  });

  // 컴포넌트를 ComponentItem으로 변환
  const componentItems = useMemo(() => {
    if (!componentsData?.components) return [];

    return componentsData.components.map((component) => ({
      id: component.component_code,
      name: component.component_name,
      description: component.description || `${component.component_name} 컴포넌트`,
      category: component.category || "other",
      componentType: component.component_config?.type || component.component_code,
      componentConfig: component.component_config,
      icon: getComponentIcon(component.icon_name || component.component_config?.type),
      defaultSize: component.default_size || getDefaultSize(component.component_config?.type),
    }));
  }, [componentsData]);

  // 필터링된 컴포넌트
  const filteredComponents = useMemo(() => {
    return componentItems.filter((component) => {
      const matchesSearch =
        component.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
        component.description.toLowerCase().includes(searchTerm.toLowerCase());

      const matchesCategory = selectedCategory === "all" || component.category === selectedCategory;

      return matchesSearch && matchesCategory;
    });
  }, [componentItems, searchTerm, selectedCategory]);

  // 카테고리별 그룹화
  const groupedComponents = useMemo(() => {
    const groups: Record<string, ComponentItem[]> = {};

    COMPONENT_CATEGORIES.forEach((category) => {
      groups[category.id] = filteredComponents.filter((component) => component.category === category.id);
    });

    return groups;
  }, [filteredComponents]);

  if (loading) {
    return (
      <div className="flex h-full items-center justify-center">
        <div className="text-center">
          <Layers className="mx-auto h-8 w-8 animate-pulse text-gray-400" />
          <p className="mt-2 text-sm text-gray-500">컴포넌트 로딩 중...</p>
        </div>
      </div>
    );
  }

  if (error) {
    return (
      <div className="flex h-full items-center justify-center">
        <div className="text-center">
          <Layers className="mx-auto h-8 w-8 text-red-400" />
          <p className="mt-2 text-sm text-red-500">컴포넌트 로드 실패</p>
          <p className="text-xs text-gray-500">{error.message}</p>
        </div>
      </div>
    );
  }

  return (
    <div className="flex h-full flex-col">
      {/* 헤더 */}
      <div className="border-b border-gray-200 p-4">
        <div className="flex items-center space-x-2">
          <Layers className="h-4 w-4 text-gray-600" />
          <h3 className="font-medium text-gray-900">컴포넌트</h3>
          <Badge variant="secondary" className="text-xs">
            {filteredComponents.length}개
          </Badge>
        </div>
        <p className="mt-1 text-xs text-gray-500">드래그하여 화면에 추가하세요</p>
      </div>

      {/* 검색 및 필터 */}
      <div className="space-y-3 border-b border-gray-200 p-4">
        {/* 검색 */}
        <div className="relative">
          <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-400" />
          <Input
            placeholder="컴포넌트 검색..."
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
            className="h-8 pl-9 text-xs"
          />
        </div>

        {/* 카테고리 필터 */}
        <div className="flex items-center space-x-2">
          <Filter className="h-4 w-4 text-gray-400" />
          <Select value={selectedCategory} onValueChange={setSelectedCategory}>
            <SelectTrigger className="h-8 text-xs">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">전체 카테고리</SelectItem>
              {COMPONENT_CATEGORIES.map((category) => (
                <SelectItem key={category.id} value={category.id}>
                  {category.name}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>
      </div>

      {/* 컴포넌트 목록 */}
      <div className="flex-1 overflow-y-auto">
        {selectedCategory === "all" ? (
          // 카테고리별 그룹 표시
          <div className="space-y-4 p-4">
            {COMPONENT_CATEGORIES.map((category) => {
              const categoryComponents = groupedComponents[category.id];
              if (categoryComponents.length === 0) return null;

              return (
                <div key={category.id}>
                  <div className="mb-2 flex items-center space-x-2">
                    <h4 className="text-sm font-medium text-gray-700">{category.name}</h4>
                    <Badge variant="outline" className="text-xs">
                      {categoryComponents.length}개
                    </Badge>
                  </div>
                  <p className="mb-3 text-xs text-gray-500">{category.description}</p>
                  <div className="grid gap-2">
                    {categoryComponents.map((component) => (
                      <ComponentCard key={component.id} component={component} onDragStart={onDragStart} />
                    ))}
                  </div>
                </div>
              );
            })}
          </div>
        ) : (
          // 선택된 카테고리만 표시
          <div className="p-4">
            <div className="grid gap-2">
              {filteredComponents.map((component) => (
                <ComponentCard key={component.id} component={component} onDragStart={onDragStart} />
              ))}
            </div>
          </div>
        )}

        {filteredComponents.length === 0 && (
          <div className="flex h-full items-center justify-center">
            <div className="text-center">
              <Layers className="mx-auto h-8 w-8 text-gray-300" />
              <p className="mt-2 text-sm text-gray-500">검색 결과가 없습니다</p>
              <p className="text-xs text-gray-400">다른 검색어를 시도해보세요</p>
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

// 컴포넌트 카드 컴포넌트
const ComponentCard: React.FC<{
  component: ComponentItem;
  onDragStart: (e: React.DragEvent, component: ComponentItem) => void;
}> = ({ component, onDragStart }) => {
  return (
    <div
      draggable
      onDragStart={(e) => onDragStart(e, component)}
      className="group cursor-move rounded-lg border border-gray-200 bg-white p-3 shadow-sm transition-all hover:border-blue-300 hover:shadow-md"
    >
      <div className="flex items-start space-x-3">
        <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-blue-50 text-blue-600 group-hover:bg-blue-100">
          {component.icon}
        </div>
        <div className="min-w-0 flex-1">
          <h4 className="truncate text-sm font-medium text-gray-900">{component.name}</h4>
          <p className="mt-1 line-clamp-2 text-xs text-gray-500">{component.description}</p>
          <div className="mt-2 flex items-center space-x-2">
            <Badge variant="outline" className="text-xs">
              {component.webType}
            </Badge>
          </div>
        </div>
      </div>
    </div>
  );
};

// 웹타입별 아이콘 매핑
function getComponentIcon(webType: string): React.ReactNode {
  const iconMap: Record<string, React.ReactNode> = {
    text: <span className="text-xs">Aa</span>,
    number: <span className="text-xs">123</span>,
    date: <span className="text-xs">📅</span>,
    select: <span className="text-xs">▼</span>,
    checkbox: <span className="text-xs">☑</span>,
    radio: <span className="text-xs">◉</span>,
    textarea: <span className="text-xs">📝</span>,
    file: <span className="text-xs">📎</span>,
    button: <span className="text-xs">🔘</span>,
    email: <span className="text-xs">📧</span>,
    tel: <span className="text-xs">📞</span>,
    password: <span className="text-xs">🔒</span>,
    code: <span className="text-xs">&lt;&gt;</span>,
    entity: <span className="text-xs">🔗</span>,
  };

  return iconMap[webType] || <span className="text-xs">⚪</span>;
}

// 웹타입별 기본 크기
function getDefaultSize(webType: string): { width: number; height: number } {
  const sizeMap: Record<string, { width: number; height: number }> = {
    text: { width: 200, height: 36 },
    number: { width: 150, height: 36 },
    date: { width: 180, height: 36 },
    select: { width: 200, height: 36 },
    checkbox: { width: 150, height: 36 },
    radio: { width: 200, height: 80 },
    textarea: { width: 300, height: 100 },
    file: { width: 300, height: 120 },
    button: { width: 120, height: 36 },
    email: { width: 250, height: 36 },
    tel: { width: 180, height: 36 },
    password: { width: 200, height: 36 },
    code: { width: 200, height: 36 },
    entity: { width: 200, height: 36 },
  };

  return sizeMap[webType] || { width: 200, height: 36 };
}

export default ComponentsPanel;