"use client";

import React, { useRef, useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { X } from "lucide-react";
import { WebTypeComponentProps } from "@/lib/registry/types";
import { WidgetComponent } from "@/types/screen";
import { toast } from "sonner";
import { apiClient, getFullImageUrl } from "@/lib/api/client";

export const ImageWidget: React.FC<
  WebTypeComponentProps & { size?: { width?: number; height?: number }; style?: React.CSSProperties }
> = ({
  component,
  value,
  onChange,
  readonly = false,
  isDesignMode = false, // 디자인 모드 여부
  size, // props로 전달된 size
  style: propStyle, // props로 전달된 style
}) => {
  const widget = component as WidgetComponent;
  const { required, style: widgetStyle } = widget;
  const fileInputRef = useRef<HTMLInputElement>(null);
  const [uploading, setUploading] = useState(false);

  // 이미지 URL 처리 (백엔드 서버 경로로 변환)
  const rawImageUrl = value || widget.value || "";
  const imageUrl = rawImageUrl ? getFullImageUrl(rawImageUrl) : "";

  // 🔧 컴포넌트 크기를 명시적으로 적용 (props.size 우선, 없으면 style에서 가져옴)
  const effectiveSize = size || (widget as any).size || {};
  const effectiveStyle = propStyle || widgetStyle || {};
  const containerStyle: React.CSSProperties = {
    width: effectiveSize.width ? `${effectiveSize.width}px` : effectiveStyle?.width || "100%",
    height: effectiveSize.height ? `${effectiveSize.height}px` : effectiveStyle?.height || "100%",
  };

  // style에서 width, height 제거 (내부 요소용)
  const filteredStyle = effectiveStyle ? { ...effectiveStyle, width: undefined, height: undefined } : {};

  // 파일 선택 처리
  const handleFileSelect = () => {
    // 디자인 모드에서는 업로드 불가
    if (readonly || isDesignMode) return;
    fileInputRef.current?.click();
  };

  // 파일 업로드 처리
  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;

    // 이미지 파일 검증
    if (!file.type.startsWith("image/")) {
      toast.error("이미지 파일만 업로드 가능합니다.");
      return;
    }

    // 파일 크기 검증 (5MB)
    const maxSize = 5 * 1024 * 1024;
    if (file.size > maxSize) {
      toast.error("파일 크기는 최대 5MB까지 가능합니다.");
      return;
    }

    setUploading(true);

    try {
      // FormData 생성
      const formData = new FormData();
      formData.append("files", file);
      formData.append("docType", "IMAGE");
      formData.append("docTypeName", "이미지");

      // 서버에 업로드 (axios 사용 - 인증 토큰 자동 포함)
      const response = await apiClient.post("/files/upload", formData, {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      });

      if (response.data.success && response.data.files && response.data.files.length > 0) {
        const uploadedFile = response.data.files[0];
        const imageUrl = uploadedFile.filePath; // /uploads/company_*/2024/01/01/filename.jpg
        onChange?.(imageUrl);
        toast.success("이미지가 업로드되었습니다.");
      } else {
        throw new Error(response.data.message || "업로드 실패");
      }
    } catch (error: any) {
      console.error("이미지 업로드 오류:", error);
      const errorMessage = error.response?.data?.message || error.message || "이미지 업로드에 실패했습니다.";
      toast.error(errorMessage);
    } finally {
      setUploading(false);
    }
  };

  // 이미지 제거
  const handleRemove = () => {
    // 디자인 모드에서는 제거 불가
    if (readonly || isDesignMode) return;
    onChange?.("");
    toast.success("이미지가 제거되었습니다.");
  };

  // 드래그 앤 드롭 처리
  const handleDragOver = (e: React.DragEvent) => {
    e.preventDefault();
    e.stopPropagation();
  };

  const handleDrop = (e: React.DragEvent) => {
    e.preventDefault();
    e.stopPropagation();

    // 디자인 모드에서는 드롭 불가
    if (readonly || isDesignMode) return;

    const file = e.dataTransfer.files[0];
    if (!file) return;

    // 파일 input에 파일 설정
    const dataTransfer = new DataTransfer();
    dataTransfer.items.add(file);
    if (fileInputRef.current) {
      fileInputRef.current.files = dataTransfer.files;
      handleFileChange({ target: fileInputRef.current } as any);
    }
  };

  return (
    <div className="flex h-full w-full flex-col" style={containerStyle}>
      {imageUrl ? (
        // 이미지 표시 모드
        <div
          className="group relative w-full flex-1 overflow-hidden rounded-lg border border-border bg-muted shadow-sm transition-all hover:shadow-md"
          style={filteredStyle}
        >
          <img
            src={imageUrl}
            alt="업로드된 이미지"
            className="h-full w-full object-contain"
            onError={(e) => {
              e.currentTarget.src =
                "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Crect width='100' height='100' fill='%23f3f4f6'/%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' font-family='sans-serif' font-size='14' fill='%239ca3af'%3E이미지 로드 실패%3C/text%3E%3C/svg%3E";
            }}
          />

          {/* 호버 시 제거 버튼 */}
          {!readonly && !isDesignMode && (
            <div className="absolute inset-0 flex items-center justify-center bg-black/50 opacity-0 transition-opacity group-hover:opacity-100">
              <Button size="sm" variant="destructive" onClick={handleRemove} className="gap-2">
                <X className="h-4 w-4" />
                이미지 제거
              </Button>
            </div>
          )}
        </div>
      ) : (
        // 업로드 영역
        <div
          className={`group relative flex w-full flex-1 flex-col items-center justify-center rounded-lg border-2 border-dashed p-3 text-center shadow-sm transition-all duration-300 ${
            isDesignMode
              ? "cursor-default border-border bg-muted"
              : "cursor-pointer border-input bg-white hover:border-primary/60 hover:bg-primary/10/50 hover:shadow-md"
          }`}
          onClick={handleFileSelect}
          onDragOver={handleDragOver}
          onDrop={handleDrop}
          style={filteredStyle}
        >
          {uploading ? (
            <p className="text-xs font-medium text-primary">업로드 중...</p>
          ) : readonly ? (
            <p className="text-xs font-medium text-muted-foreground">업로드 불가</p>
          ) : isDesignMode ? (
            <p className="text-xs font-medium text-muted-foreground/70">이미지 업로드</p>
          ) : (
            <p className="text-xs font-medium text-foreground transition-colors duration-300 group-hover:text-primary">
              이미지 업로드
            </p>
          )}
        </div>
      )}

      {/* 숨겨진 파일 input */}
      <Input
        ref={fileInputRef}
        type="file"
        className="hidden"
        accept="image/*"
        onChange={handleFileChange}
        disabled={readonly || uploading}
      />

      {/* 필수 필드 경고 */}
      {required && !imageUrl && <div className="text-xs text-destructive">* 이미지를 업로드해야 합니다</div>}
    </div>
  );
};

ImageWidget.displayName = "ImageWidget";
