"use client";

import React, { useState, useEffect } from "react";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Checkbox } from "@/components/ui/checkbox";
import { Slider } from "@/components/ui/slider";
import { Textarea } from "@/components/ui/textarea";
import { X, Upload, FileText, Image, FileVideo, FileAudio } from "lucide-react";
import { FileTypeConfig } from "@/types/screen";

interface FileTypeConfigPanelProps {
  config: FileTypeConfig;
  onConfigChange: (config: FileTypeConfig) => void;
}

export const FileTypeConfigPanel: React.FC<FileTypeConfigPanelProps> = ({ config, onConfigChange }) => {
  // 기본값이 설정된 config 사용
  const safeConfig = {
    accept: "",
    multiple: false,
    maxSize: 10, // MB
    maxFiles: 1,
    preview: true,
    dragDrop: true,
    allowedExtensions: [],
    ...config,
  };

  // 로컬 상태로 실시간 입력 관리
  const [localValues, setLocalValues] = useState({
    accept: safeConfig.accept,
    multiple: safeConfig.multiple,
    maxSize: safeConfig.maxSize,
    maxFiles: safeConfig.maxFiles,
    preview: safeConfig.preview,
    dragDrop: safeConfig.dragDrop,
  });

  const [newExtension, setNewExtension] = useState("");

  // 미리 정의된 파일 타입들
  const fileTypePresets = [
    { label: "이미지", accept: "image/*", extensions: [".jpg", ".jpeg", ".png", ".gif", ".webp"], icon: Image },
    {
      label: "문서",
      accept: ".pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx",
      extensions: [".pdf", ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx"],
      icon: FileText,
    },
    { label: "비디오", accept: "video/*", extensions: [".mp4", ".avi", ".mov", ".mkv"], icon: FileVideo },
    { label: "오디오", accept: "audio/*", extensions: [".mp3", ".wav", ".ogg", ".m4a"], icon: FileAudio },
  ];

  // config가 변경될 때 로컬 상태 동기화
  useEffect(() => {
    setLocalValues({
      accept: safeConfig.accept,
      multiple: safeConfig.multiple,
      maxSize: safeConfig.maxSize,
      maxFiles: safeConfig.maxFiles,
      preview: safeConfig.preview,
      dragDrop: safeConfig.dragDrop,
    });
  }, [
    safeConfig.accept,
    safeConfig.multiple,
    safeConfig.maxSize,
    safeConfig.maxFiles,
    safeConfig.preview,
    safeConfig.dragDrop,
  ]);

  const updateConfig = (key: keyof FileTypeConfig, value: any) => {
    // 로컬 상태 즉시 업데이트
    setLocalValues((prev) => ({ ...prev, [key]: value }));

    // 실제 config 업데이트
    const newConfig = { ...safeConfig, [key]: value };
    // console.log("📁 FileTypeConfig 업데이트:", {
      // key,
      // value,
      // oldConfig: safeConfig,
      // newConfig,
    // });
    onConfigChange(newConfig);
  };

  const applyFileTypePreset = (preset: (typeof fileTypePresets)[0]) => {
    updateConfig("accept", preset.accept);
    updateConfig("allowedExtensions", preset.extensions);
  };

  const addExtension = () => {
    if (newExtension.trim() && !newExtension.includes(" ")) {
      const extension = newExtension.startsWith(".") ? newExtension : `.${newExtension}`;
      const updatedExtensions = [...(safeConfig.allowedExtensions || []), extension];
      updateConfig("allowedExtensions", updatedExtensions);
      setNewExtension("");
    }
  };

  const removeExtension = (index: number) => {
    const updatedExtensions = (safeConfig.allowedExtensions || []).filter((_, i) => i !== index);
    updateConfig("allowedExtensions", updatedExtensions);
  };

  const formatFileSize = (sizeInMB: number) => {
    if (sizeInMB < 1) {
      return `${Math.round(sizeInMB * 1024)} KB`;
    }
    return `${sizeInMB} MB`;
  };

  return (
    <div className="space-y-4">
      {/* 파일 타입 프리셋 */}
      <div>
        <Label className="text-sm font-medium">빠른 설정</Label>
        <div className="mt-2 grid grid-cols-2 gap-2">
          {fileTypePresets.map((preset) => {
            const IconComponent = preset.icon;
            return (
              <Button
                key={preset.label}
                variant="outline"
                size="sm"
                onClick={() => applyFileTypePreset(preset)}
                className="flex items-center space-x-2"
              >
                <IconComponent className="h-3 w-3" />
                <span>{preset.label}</span>
              </Button>
            );
          })}
        </div>
      </div>

      {/* Accept 속성 */}
      <div>
        <Label htmlFor="accept" className="text-sm font-medium">
          허용 파일 타입 (accept)
        </Label>
        <Input
          id="accept"
          value={localValues.accept}
          onChange={(e) => updateConfig("accept", e.target.value)}
          placeholder="예: image/*,.pdf,.docx"
          className="mt-1"
        />
        <div className="mt-1 text-xs text-muted-foreground">MIME 타입 또는 파일 확장자를 쉼표로 구분하여 입력</div>
      </div>

      {/* 허용 확장자 관리 */}
      <div>
        <Label className="text-sm font-medium">허용 확장자</Label>
        <div className="mt-2 flex flex-wrap gap-1">
          {(safeConfig.allowedExtensions || []).map((extension, index) => (
            <Badge key={index} variant="secondary" className="flex items-center space-x-1">
              <span>{extension}</span>
              <X className="h-3 w-3 cursor-pointer" onClick={() => removeExtension(index)} />
            </Badge>
          ))}
        </div>
        <div className="mt-2 flex space-x-2">
          <Input
            value={newExtension}
            onChange={(e) => setNewExtension(e.target.value)}
            placeholder="확장자 입력 (예: jpg)"
            className="flex-1"
          />
          <Button size="sm" onClick={addExtension} disabled={!newExtension.trim()}>
            추가
          </Button>
        </div>
      </div>

      {/* 다중 파일 선택 */}
      <div className="flex items-center justify-between">
        <Label htmlFor="multiple" className="text-sm font-medium">
          다중 파일 선택
        </Label>
        <Checkbox
          id="multiple"
          checked={localValues.multiple}
          onCheckedChange={(checked) => updateConfig("multiple", !!checked)}
        />
      </div>

      {/* 최대 파일 크기 */}
      <div>
        <Label htmlFor="maxSize" className="text-sm font-medium">
          최대 파일 크기: {formatFileSize(localValues.maxSize)}
        </Label>
        <div className="mt-2">
          <Slider
            value={[localValues.maxSize]}
            onValueChange={(value) => updateConfig("maxSize", value[0])}
            min={0.1}
            max={100}
            step={0.1}
            className="w-full"
          />
          <div className="mt-1 flex justify-between text-xs text-muted-foreground">
            <span>100 KB</span>
            <span>100 MB</span>
          </div>
        </div>
      </div>

      {/* 최대 파일 개수 (다중 선택 시) */}
      {localValues.multiple && (
        <div>
          <Label htmlFor="maxFiles" className="text-sm font-medium">
            최대 파일 개수: {localValues.maxFiles}
          </Label>
          <div className="mt-2">
            <Slider
              value={[localValues.maxFiles]}
              onValueChange={(value) => updateConfig("maxFiles", value[0])}
              min={1}
              max={20}
              step={1}
              className="w-full"
            />
            <div className="mt-1 flex justify-between text-xs text-muted-foreground">
              <span>1</span>
              <span>20</span>
            </div>
          </div>
        </div>
      )}

      {/* 미리보기 표시 */}
      <div className="flex items-center justify-between">
        <Label htmlFor="preview" className="text-sm font-medium">
          미리보기 표시 (이미지)
        </Label>
        <Checkbox
          id="preview"
          checked={localValues.preview}
          onCheckedChange={(checked) => updateConfig("preview", !!checked)}
        />
      </div>

      {/* 드래그 앤 드롭 */}
      <div className="flex items-center justify-between">
        <Label htmlFor="dragDrop" className="text-sm font-medium">
          드래그 앤 드롭 지원
        </Label>
        <Checkbox
          id="dragDrop"
          checked={localValues.dragDrop}
          onCheckedChange={(checked) => updateConfig("dragDrop", !!checked)}
        />
      </div>

      {/* 미리보기 */}
      <div className="rounded-md border bg-muted p-3">
        <Label className="text-sm font-medium text-foreground">미리보기</Label>
        <div className="mt-2">
          <div
            className={`rounded border-2 border-dashed p-4 text-center ${
              localValues.dragDrop ? "border-primary/40 bg-accent" : "border-input"
            }`}
          >
            <Upload className="mx-auto h-8 w-8 text-muted-foreground/70" />
            <div className="mt-2 text-sm text-muted-foreground">
              {localValues.dragDrop ? "파일을 드래그하여 놓거나 클릭하여 선택" : "클릭하여 파일 선택"}
            </div>
            <div className="mt-1 text-xs text-muted-foreground">
              {localValues.accept && `허용 타입: ${localValues.accept}`}
              {(safeConfig.allowedExtensions || []).length > 0 && (
                <div>확장자: {(safeConfig.allowedExtensions || []).join(", ")}</div>
              )}
              최대 크기: {formatFileSize(localValues.maxSize)}
              {localValues.multiple && `, 최대 ${localValues.maxFiles}개`}
            </div>
          </div>
        </div>
      </div>

      {/* 안내 메시지 */}
      <div className="rounded-md bg-accent p-3">
        <div className="text-sm font-medium text-primary">파일 업로드 설정</div>
        <div className="mt-1 text-xs text-primary">
          • Accept 속성은 파일 선택 다이얼로그에서 필터링됩니다
          <br />
          • 허용 확장자는 추가 검증에 사용됩니다
          <br />
          • 미리보기는 이미지 파일에만 적용됩니다
          <br />• 실제 파일 업로드는 서버 설정이 필요합니다
        </div>
      </div>
    </div>
  );
};

export default FileTypeConfigPanel;
