import React, { useRef, useState, useEffect } from "react";
import { Button } from "@/components/ui/button";
import { UploadIcon, Trash2Icon, XIcon, ImageIcon, EyeIcon, Loader2Icon } from "lucide-react";
import { toast } from "sonner"; // Agrega esta línea

// Helper to format bytes
function formatBytes(bytes: number) {
  if (bytes === 0) return "0 Bytes";
  const k = 1024;
  const sizes = ["Bytes", "KB", "MB", "GB", "TB"];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
}

export default function FileUploadReal({
  onUpload,
  single = false,
  accept = "*",
  maxSizeMB = 5,
  maxFiles,
  defaultUrls = [],
}: {
  onUpload?: (urls: string[]) => void;
  single?: boolean;
  accept?: string;
  maxSizeMB?: number;
  maxFiles?: number;
  defaultUrls?: string[]; // NUEVO
}) {
  const [files, setFiles] = useState<File[]>([]);
  const [uploadingIdx, setUploadingIdx] = useState<number | null>(null);
  const [progress, setProgress] = useState<number[]>([]);
  const [uploadedUrls, setUploadedUrls] = useState<string[]>(defaultUrls);
  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
  const [previewType, setPreviewType] = useState<string | null>(null);
  const [showPreview, setShowPreview] = useState(false);
  const inputRef = useRef<HTMLInputElement>(null);

  const maxFilesFinal = single ? 1 : (maxFiles ?? 6);
  const maxSize = maxSizeMB * 1024 * 1024;

  // Sincroniza cuando cambian las urls iniciales (ej: al editar)
  useEffect(() => {
    setUploadedUrls(defaultUrls);
  }, [defaultUrls]);

  const handleFiles = (fileList: FileList | null) => {
    if (!fileList) return;
    let arr = Array.from(fileList);
    if (single) arr = arr.slice(0, 1);
    else arr = arr.slice(0, maxFilesFinal - uploadedUrls.length);

    // Filtrar archivos por tamaño
    const filtered = arr.filter((f) => f.size <= maxSize);
    if (filtered.length < arr.length) {
      toast.error(`Algunos archivos exceden el tamaño máximo de ${maxSizeMB}MB y no serán agregados.`);
    }
    setFiles(filtered);
    setProgress(Array(filtered.length).fill(0));
  };

  // Subida individual de archivo
  const handleUploadOne = async (file: File, idx: number) => {
    setUploadingIdx(idx);
    setProgress((prev) => {
      const copy = [...prev];
      copy[idx] = 0;
      return copy;
    });
    const formData = new FormData();
    formData.append("files[]", file);
    try {
      const xhr = new XMLHttpRequest();
      xhr.open("POST", "/api/upload");
      xhr.upload.onprogress = (event) => {
        if (event.lengthComputable) {
          setProgress((prev) => {
            const copy = [...prev];
            copy[idx] = Math.round((event.loaded / event.total) * 100);
            return copy;
          });
        }
      };
      xhr.onload = () => {
        setUploadingIdx(null);
        if (xhr.status === 200) {
          const res = JSON.parse(xhr.responseText);
          const url = (res.urls && res.urls[0]) || null;
          if (url) {
            const newUrls = [...uploadedUrls, url];
            setUploadedUrls(newUrls);
            if (onUpload) onUpload(newUrls);
          }
          // Eliminar archivo subido de la lista de pendientes
          setFiles((prev) => prev.filter((_, i) => i !== idx));
          setProgress((prev) => prev.filter((_, i) => i !== idx));
        }
      };
      xhr.onerror = () => {
        setUploadingIdx(null);
        alert("Error uploading file");
      };
      xhr.send(formData);
    } catch (e) {
      setUploadingIdx(null);
      alert("Error uploading file");
    }
  };

  const removeFile = (idx: number) => {
    setFiles((prev) => prev.filter((_, i) => i !== idx));
    setProgress((prev) => prev.filter((_, i) => i !== idx));
  };

  const removeUploadedUrl = (idx: number) => {
    const newUrls = uploadedUrls.filter((_, i) => i !== idx);
    setUploadedUrls(newUrls);
    if (onUpload) onUpload(newUrls);
  };

  const removeAll = () => {
    setFiles([]);
    setProgress([]);
    setUploadedUrls([]);
    if (onUpload) onUpload([]);
  };

  // Detecta el tipo de archivo por url
  const getFileType = (url: string) => {
    const ext = url.split('.').pop()?.toLowerCase();
    if (!ext) return "other";
    if (["jpg", "jpeg", "png", "gif", "webp", "bmp"].includes(ext)) return "image";
    if (["pdf"].includes(ext)) return "pdf";
    if (["html"].includes(ext) || url.endsWith("/index.html")) return "html";
    return "other";
  };

  return (
    <div className="flex flex-col gap-2">
      {/* Dialog de preview */}
      {showPreview && previewUrl && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60">
          <div className="bg-white rounded-lg shadow-lg max-w-full max-h-full p-4 relative flex flex-col items-center">
            <Button
              size="icon"
              variant="outline"
              className="absolute top-2 right-2"
              onClick={() => setShowPreview(false)}
              aria-label="Cerrar preview"
            >
              <XIcon className="size-4" />
            </Button>
            {previewType === "image" ? (
              <img src={previewUrl} alt="preview" className="max-w-[80vw] max-h-[70vh] rounded" />
            ) : previewType === "pdf" ? (
              <iframe src={previewUrl} title="PDF Preview" className="w-[80vw] h-[70vh] rounded" />
            ) : previewType === "html" ? (
              <iframe src={previewUrl} title="HTML Preview" className="w-[80vw] h-[70vh] rounded border" />
            ) : (
              <div className="flex flex-col items-center">
                <span className="mb-2">No se puede previsualizar este archivo.</span>
                <a href={previewUrl} target="_blank" rel="noopener noreferrer" className="underline text-blue-600">Abrir archivo</a>
              </div>
            )}
          </div>
        </div>
      )}
      <div className="border-input relative flex min-h-40 flex-col items-center overflow-hidden rounded-xl border border-dashed p-4 transition-colors justify-center">
        <input
          ref={inputRef}
          type="file"
          multiple={!single}
          accept={accept}
          className="sr-only"
          onChange={(e) => handleFiles(e.target.files)}
        />
        {(files.length > 0 || uploadedUrls.length > 0) ? (
          <div className="flex w-full flex-col gap-3">
            <div className="flex items-center justify-between gap-2">
              <h3 className="truncate text-sm font-medium">
                Archivos ({uploadedUrls.length + files.length})
              </h3>
              <div className="flex gap-2">
                {(uploadedUrls.length + files.length) < maxFilesFinal && (
                  <Button variant="outline" size="sm" type="button" onClick={() => inputRef.current?.click()}>
                    <UploadIcon className="-ms-0.5 size-3.5 opacity-60" aria-hidden="true" />
                    Agregar archivos
                  </Button>
                )}
                <Button variant="outline" size="sm" type="button" onClick={removeAll}>
                  <Trash2Icon className="-ms-0.5 size-3.5 opacity-60" aria-hidden="true" />
                  Quitar todos
                </Button>
              </div>
            </div>
            <div className="w-full space-y-2">
              {/* Archivos ya subidos */}
              {uploadedUrls.map((url, idx) => (
                <div key={url} className="bg-background flex flex-col gap-1 rounded-lg border p-2 pe-3 transition-opacity duration-300">
                  <div className="flex items-center justify-between gap-2">
                    <div className="flex items-center gap-3 overflow-hidden">
                      <div className="flex aspect-square size-10 shrink-0 items-center justify-center rounded border">
                        <ImageIcon className="size-5 opacity-60" />
                      </div>
                      <div className="flex min-w-0 flex-col gap-0.5">
                        <a href={url} target="_blank" rel="noopener noreferrer" className="truncate text-[13px] font-medium underline">{url.split('/').pop()}</a>
                        <span className="text-muted-foreground text-xs break-all">{url}</span>
                      </div>
                    </div>
                    <div className="flex gap-1 items-center">
                      <Button
                        size="icon"
                        variant="outline"
                        type="button"
                        className="cursor-pointer text-muted-foreground/80 hover:text-foreground size-8 hover:bg-transparent"
                        onClick={() => {
                          setPreviewUrl(url);
                          setPreviewType(getFileType(url));
                          setShowPreview(true);
                        }}
                        aria-label="Previsualizar archivo"
                      >
                        <EyeIcon className="size-4" aria-hidden="true" />
                      </Button>
                      <Button
                        size="icon"
                        variant="outline"
                        type="button"
                        className="cursor-pointer text-muted-foreground/80 hover:text-foreground size-8 hover:bg-transparent"
                        onClick={() => removeUploadedUrl(idx)}
                        aria-label="Quitar archivo"
                      >
                        <Trash2Icon className="size-4" aria-hidden="true" />
                      </Button>
                    </div>
                  </div>
                </div>
              ))}
              {/* Archivos pendientes de subir */}
              {files.map((file, idx) => (
                <div key={idx} className="bg-background flex flex-col gap-1 rounded-lg border p-2 pe-3 transition-opacity duration-300">
                  <div className="flex items-center justify-between gap-2">
                    <div className="flex items-center gap-3 overflow-hidden">
                      <div className="flex aspect-square size-10 shrink-0 items-center justify-center rounded border">
                        <ImageIcon className="size-5 opacity-60" />
                      </div>
                      <div className="flex min-w-0 flex-col gap-0.5">
                        <p className="truncate text-[13px] font-medium">{file.name}</p>
                        <p className="text-muted-foreground text-xs">{formatBytes(file.size)}</p>
                      </div>
                    </div>
                    <div className="flex gap-1 items-center">
                      <Button
                        size="icon"
                        variant="ghost"
                        type="button"
                        className="cursor-pointer text-muted-foreground/80 hover:text-foreground size-8 hover:bg-transparent"
                        onClick={() => removeFile(idx)}
                        aria-label="Quitar archivo"
                        disabled={uploadingIdx === idx}
                      >
                        <XIcon className="size-4" aria-hidden="true" />
                      </Button>
                      <Button
                        size="sm"
                        variant="outline"
                        type="button"
                        className="ml-1 cursor-pointer"
                        onClick={() => handleUploadOne(file, idx)}
                        disabled={uploadingIdx !== null}
                      >
                        {uploadingIdx === idx ? (
                          <>
                            <Loader2Icon className="animate-spin size-4 mr-1" /> Cargando...
                          </>
                        ) : (
                          <>
                            <UploadIcon className="size-4 mr-1" /> Subir
                          </>
                        )}
                      </Button>
                    </div>
                  </div>
                  {uploadingIdx === idx && progress[idx] !== undefined && (
                    <div className="mt-1 flex items-center gap-2">
                      <div className="h-1.5 w-full overflow-hidden rounded-full bg-gray-100">
                        <div className="bg-primary h-full transition-all duration-300 ease-out" style={{ width: `${progress[idx]}%` }} />
                      </div>
                      <span className="text-muted-foreground w-10 text-xs tabular-nums">{progress[idx]}%</span>
                    </div>
                  )}
                </div>
              ))}
            </div>
          </div>
        ) : (
          <div className="flex flex-col items-center justify-center px-4 py-3 text-center">
            {/* <div className="bg-background mb-2 flex size-11 shrink-0 items-center justify-center rounded-full border" aria-hidden="true">
              <ImageIcon className="size-4 opacity-60" />
            </div> */}
            <p className="mb-1.5 text-sm font-medium">Arrastra tus archivos aquí</p>
            <p className="text-muted-foreground text-xs">
              Máx {maxFilesFinal} archivo{maxFilesFinal > 1 ? "s" : ""} ∙ Hasta {maxSizeMB}MB
            </p>
            <Button variant="outline" className="mt-4" type="button" onClick={() => inputRef.current?.click()}>
              <UploadIcon className="-ms-1 opacity-60" aria-hidden="true" />
              Seleccionar archivos
            </Button>
          </div>
        )}
      </div>
    </div>
  );
}