"use client";

import React, { useState, useEffect, useCallback } from "react";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Checkbox } from "@/components/ui/checkbox";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Textarea } from "@/components/ui/textarea";
import { Badge } from "@/components/ui/badge";
import { FileComponent } from "@/types/screen";
import { Plus, X } from "lucide-react";
import { Button } from "@/components/ui/button";

interface FileComponentConfigPanelProps {
  component: FileComponent;
  onUpdateProperty: (componentId: string, path: string, value: any) => void;
}

export const FileComponentConfigPanel: React.FC<FileComponentConfigPanelProps> = ({ component, onUpdateProperty }) => {
  // 로컬 상태
  const [localInputs, setLocalInputs] = useState({
    docType: component.fileConfig.docType || "DOCUMENT",
    docTypeName: component.fileConfig.docTypeName || "일반 문서",
    dragDropText: component.fileConfig.dragDropText || "파일을 드래그하거나 클릭하여 업로드하세요",
    maxSize: component.fileConfig.maxSize || 10,
    maxFiles: component.fileConfig.maxFiles || 5,
    newAcceptType: "", // 새 파일 타입 추가용
  });

  const [localValues, setLocalValues] = useState({
    multiple: component.fileConfig.multiple ?? true,
    showPreview: component.fileConfig.showPreview ?? true,
    showProgress: component.fileConfig.showProgress ?? true,
  });

  const [acceptTypes, setAcceptTypes] = useState<string[]>(component.fileConfig.accept || []);

  // 컴포넌트 변경 시 로컬 상태 동기화
  useEffect(() => {
    setLocalInputs({
      docType: component.fileConfig.docType || "DOCUMENT",
      docTypeName: component.fileConfig.docTypeName || "일반 문서",
      dragDropText: component.fileConfig.dragDropText || "파일을 드래그하거나 클릭하여 업로드하세요",
      maxSize: component.fileConfig.maxSize || 10,
      maxFiles: component.fileConfig.maxFiles || 5,
      newAcceptType: "",
    });

    setLocalValues({
      multiple: component.fileConfig.multiple ?? true,
      showPreview: component.fileConfig.showPreview ?? true,
      showProgress: component.fileConfig.showProgress ?? true,
    });

    setAcceptTypes(component.fileConfig.accept || []);
  }, [component.fileConfig]);

  // 미리 정의된 문서 타입들
  const docTypeOptions = [
    { value: "CONTRACT", label: "계약서" },
    { value: "DRAWING", label: "도면" },
    { value: "PHOTO", label: "사진" },
    { value: "DOCUMENT", label: "일반 문서" },
    { value: "REPORT", label: "보고서" },
    { value: "SPECIFICATION", label: "사양서" },
    { value: "MANUAL", label: "매뉴얼" },
    { value: "CERTIFICATE", label: "인증서" },
    { value: "OTHER", label: "기타" },
  ];

  // 미리 정의된 파일 타입들
  const commonFileTypes = [
    { value: "image/*", label: "모든 이미지 파일" },
    { value: ".pdf", label: "PDF 파일" },
    { value: ".doc,.docx", label: "Word 문서" },
    { value: ".xls,.xlsx", label: "Excel 파일" },
    { value: ".ppt,.pptx", label: "PowerPoint 파일" },
    { value: ".txt", label: "텍스트 파일" },
    { value: ".zip,.rar", label: "압축 파일" },
    { value: ".dwg,.dxf", label: "CAD 파일" },
  ];

  // 파일 타입 추가
  const addAcceptType = useCallback(() => {
    const newType = localInputs.newAcceptType.trim();
    if (newType && !acceptTypes.includes(newType)) {
      const newAcceptTypes = [...acceptTypes, newType];
      setAcceptTypes(newAcceptTypes);
      onUpdateProperty(component.id, "fileConfig.accept", newAcceptTypes);
      setLocalInputs((prev) => ({ ...prev, newAcceptType: "" }));
    }
  }, [localInputs.newAcceptType, acceptTypes, component.id, onUpdateProperty]);

  // 파일 타입 제거
  const removeAcceptType = useCallback(
    (typeToRemove: string) => {
      const newAcceptTypes = acceptTypes.filter((type) => type !== typeToRemove);
      setAcceptTypes(newAcceptTypes);
      onUpdateProperty(component.id, "fileConfig.accept", newAcceptTypes);
    },
    [acceptTypes, component.id, onUpdateProperty],
  );

  // 미리 정의된 파일 타입 추가
  const addCommonFileType = useCallback(
    (fileType: string) => {
      const types = fileType.split(",");
      const newAcceptTypes = [...acceptTypes];

      types.forEach((type) => {
        if (!newAcceptTypes.includes(type.trim())) {
          newAcceptTypes.push(type.trim());
        }
      });

      setAcceptTypes(newAcceptTypes);
      onUpdateProperty(component.id, "fileConfig.accept", newAcceptTypes);
    },
    [acceptTypes, component.id, onUpdateProperty],
  );

  return (
    <div className="space-y-6">
      {/* 문서 분류 설정 */}
      <div className="space-y-4">
        <h4 className="text-sm font-medium text-gray-900">문서 분류 설정</h4>

        <div className="space-y-2">
          <Label htmlFor="docType">문서 타입</Label>
          <Select
            value={localInputs.docType}
            onValueChange={(value) => {
              setLocalInputs((prev) => ({ ...prev, docType: value }));
              onUpdateProperty(component.id, "fileConfig.docType", value);

              // 문서 타입 변경 시 자동으로 타입명도 업데이트
              const selectedOption = docTypeOptions.find((opt) => opt.value === value);
              if (selectedOption) {
                setLocalInputs((prev) => ({ ...prev, docTypeName: selectedOption.label }));
                onUpdateProperty(component.id, "fileConfig.docTypeName", selectedOption.label);
              }
            }}
          >
            <SelectTrigger>
              <SelectValue placeholder="문서 타입을 선택하세요" />
            </SelectTrigger>
            <SelectContent>
              {docTypeOptions.map((option) => (
                <SelectItem key={option.value} value={option.value}>
                  {option.label}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>

        <div className="space-y-2">
          <Label htmlFor="docTypeName">문서 타입 표시명</Label>
          <Input
            id="docTypeName"
            value={localInputs.docTypeName}
            onChange={(e) => {
              const newValue = e.target.value;
              setLocalInputs((prev) => ({ ...prev, docTypeName: newValue }));
              onUpdateProperty(component.id, "fileConfig.docTypeName", newValue);
            }}
            placeholder="문서 타입 표시명"
          />
        </div>
      </div>

      {/* 파일 업로드 제한 설정 */}
      <div className="space-y-4">
        <h4 className="text-sm font-medium text-gray-900">파일 업로드 제한</h4>

        <div className="grid grid-cols-2 gap-4">
          <div className="space-y-2">
            <Label htmlFor="maxSize">최대 파일 크기 (MB)</Label>
            <Input
              id="maxSize"
              type="number"
              min="1"
              max="100"
              value={localInputs.maxSize}
              onChange={(e) => {
                const newValue = parseInt(e.target.value) || 10;
                setLocalInputs((prev) => ({ ...prev, maxSize: newValue }));
                onUpdateProperty(component.id, "fileConfig.maxSize", newValue);
              }}
            />
          </div>

          <div className="space-y-2">
            <Label htmlFor="maxFiles">최대 파일 개수</Label>
            <Input
              id="maxFiles"
              type="number"
              min="1"
              max="20"
              value={localInputs.maxFiles}
              onChange={(e) => {
                const newValue = parseInt(e.target.value) || 5;
                setLocalInputs((prev) => ({ ...prev, maxFiles: newValue }));
                onUpdateProperty(component.id, "fileConfig.maxFiles", newValue);
              }}
            />
          </div>
        </div>

        <div className="flex items-center space-x-2">
          <Checkbox
            id="multiple"
            checked={localValues.multiple}
            onCheckedChange={(checked) => {
              setLocalValues((prev) => ({ ...prev, multiple: checked as boolean }));
              onUpdateProperty(component.id, "fileConfig.multiple", checked);
            }}
          />
          <Label htmlFor="multiple">다중 파일 선택 허용</Label>
        </div>
      </div>

      {/* 허용 파일 타입 설정 */}
      <div className="space-y-4">
        <h4 className="text-sm font-medium text-gray-900">허용 파일 타입</h4>

        {/* 미리 정의된 파일 타입 버튼들 */}
        <div className="space-y-2">
          <Label>빠른 추가</Label>
          <div className="flex flex-wrap gap-2">
            {commonFileTypes.map((fileType) => (
              <Button
                key={fileType.value}
                variant="outline"
                size="sm"
                onClick={() => addCommonFileType(fileType.value)}
                className="text-xs"
              >
                <Plus className="mr-1 h-3 w-3" />
                {fileType.label}
              </Button>
            ))}
          </div>
        </div>

        {/* 현재 설정된 파일 타입들 */}
        <div className="space-y-2">
          <Label>현재 허용 타입</Label>
          <div className="flex flex-wrap gap-2">
            {acceptTypes.map((type, index) => (
              <Badge key={index} variant="secondary" className="flex items-center space-x-1">
                <span>{type}</span>
                <Button
                  variant="ghost"
                  size="sm"
                  onClick={() => removeAcceptType(type)}
                  className="h-4 w-4 p-0 hover:bg-transparent"
                >
                  <X className="h-3 w-3" />
                </Button>
              </Badge>
            ))}
            {acceptTypes.length === 0 && <span className="text-sm text-gray-500">모든 파일 타입 허용</span>}
          </div>
        </div>

        {/* 사용자 정의 파일 타입 추가 */}
        <div className="space-y-2">
          <Label htmlFor="newAcceptType">사용자 정의 타입 추가</Label>
          <div className="flex space-x-2">
            <Input
              id="newAcceptType"
              value={localInputs.newAcceptType}
              onChange={(e) => {
                setLocalInputs((prev) => ({ ...prev, newAcceptType: e.target.value }));
              }}
              placeholder="예: .dwg, image/*, .custom"
              onKeyPress={(e) => {
                if (e.key === "Enter") {
                  addAcceptType();
                }
              }}
            />
            <Button onClick={addAcceptType} disabled={!localInputs.newAcceptType.trim()} size="sm">
              추가
            </Button>
          </div>
        </div>
      </div>

      {/* UI 설정 */}
      <div className="space-y-4">
        <h4 className="text-sm font-medium text-gray-900">UI 설정</h4>

        <div className="space-y-2">
          <Label htmlFor="dragDropText">드래그앤드롭 안내 텍스트</Label>
          <Textarea
            id="dragDropText"
            value={localInputs.dragDropText}
            onChange={(e) => {
              const newValue = e.target.value;
              setLocalInputs((prev) => ({ ...prev, dragDropText: newValue }));
              onUpdateProperty(component.id, "fileConfig.dragDropText", newValue);
            }}
            placeholder="파일을 드래그하거나 클릭하여 업로드하세요"
            rows={2}
          />
        </div>

        <div className="space-y-3">
          <div className="flex items-center space-x-2">
            <Checkbox
              id="showPreview"
              checked={localValues.showPreview}
              onCheckedChange={(checked) => {
                setLocalValues((prev) => ({ ...prev, showPreview: checked as boolean }));
                onUpdateProperty(component.id, "fileConfig.showPreview", checked);
              }}
            />
            <Label htmlFor="showPreview">파일 미리보기 표시</Label>
          </div>

          <div className="flex items-center space-x-2">
            <Checkbox
              id="showProgress"
              checked={localValues.showProgress}
              onCheckedChange={(checked) => {
                setLocalValues((prev) => ({ ...prev, showProgress: checked as boolean }));
                onUpdateProperty(component.id, "fileConfig.showProgress", checked);
              }}
            />
            <Label htmlFor="showProgress">업로드 진행률 표시</Label>
          </div>
        </div>
      </div>
    </div>
  );
};