"use client";

import Image from "next/image";
import { useRef, useState } from "react";
import { Download, Loader2, Trash2, Upload } from "lucide-react";
import { getSupabaseClient } from "@/lib/supabase";
import { Button } from "@/components/ui/button";

type ProductionTemplateFormat = "pdf" | "ai" | "cdr";

type ProductionTemplateFile = {
  url: string;
  name: string;
};

interface ProductProductionFileUploadProps {
  format: ProductionTemplateFormat;
  title: string;
  value: ProductionTemplateFile | null;
  onChange: (value: ProductionTemplateFile | null) => void;
  bucket?: string;
  folder?: string;
  disabled?: boolean;
}

const ACCEPTED_EXTENSIONS = ["pdf", "ai", "cdr"] as const;

const TEMPLATE_META: Record<
  ProductionTemplateFormat,
  {
    label: string;
    iconSrc: string;
    tintClass: string;
    softClass: string;
    borderClass: string;
  }
> = {
  ai: {
    label: "Illustrator",
    iconSrc: "/icons/templates/ai.svg",
    tintClass: "text-amber-600",
    softClass: "bg-amber-50",
    borderClass: "border-amber-100",
  },
  cdr: {
    label: "CorelDRAW",
    iconSrc: "/icons/templates/cdr.svg",
    tintClass: "text-emerald-600",
    softClass: "bg-emerald-50",
    borderClass: "border-emerald-100",
  },
  pdf: {
    label: "PDF",
    iconSrc: "/icons/templates/pdf.svg",
    tintClass: "text-rose-600",
    softClass: "bg-rose-50",
    borderClass: "border-rose-100",
  },
};

function getFileExtension(fileName: string) {
  const raw = String(fileName || "").trim().toLowerCase();
  const parts = raw.split(".");
  return parts.length > 1 ? parts.pop() || "" : "";
}

function isAcceptedTemplateFile(fileName: string) {
  return ACCEPTED_EXTENSIONS.includes(getFileExtension(fileName) as (typeof ACCEPTED_EXTENSIONS)[number]);
}

export function ProductProductionFileUpload({
  format,
  title,
  value,
  onChange,
  bucket = "products",
  folder = "products/templates",
  disabled = false,
}: ProductProductionFileUploadProps) {
  const inputRef = useRef<HTMLInputElement | null>(null);
  const [uploading, setUploading] = useState(false);
  /* O aviso fica no próprio cartão, onde a pessoa clicou: a caixinha do
     navegador para de aparecer depois de algumas seguidas. */
  const [erro, setErro] = useState<string | null>(null);
  const meta = TEMPLATE_META[format];

  async function handleUpload(fileList: FileList | null) {
    const selectedFile = fileList?.[0];
    if (!selectedFile) return;
    setErro(null);

    if (!isAcceptedTemplateFile(selectedFile.name) || getFileExtension(selectedFile.name) !== format) {
      setErro(`Envie um arquivo de gabarito no formato ${format.toUpperCase()}.`);
      if (inputRef.current) inputRef.current.value = "";
      return;
    }

    setUploading(true);
    try {
      const supabase = getSupabaseClient();
      const extension = getFileExtension(selectedFile.name) || "pdf";
      const normalizedName = selectedFile.name.replace(/[^\w.\-()\s]/g, "_");
      const path = `${folder ? `${folder}/` : ""}${crypto.randomUUID()}_${Date.now()}.${extension}`;

      const { error: uploadError } = await supabase.storage.from(bucket).upload(path, selectedFile, {
        cacheControl: "3600",
        upsert: false,
      });
      if (uploadError) throw uploadError;

      const { data } = supabase.storage.from(bucket).getPublicUrl(path);
      if (!data.publicUrl) {
        throw new Error("Não foi possível obter o link do gabarito.");
      }

      onChange({
        url: data.publicUrl,
        name: normalizedName,
      });
    } catch (error) {
      console.error("Erro ao enviar gabarito:", error);
      setErro("Não foi possível enviar o gabarito. Tente de novo.");
    } finally {
      setUploading(false);
      if (inputRef.current) inputRef.current.value = "";
    }
  }

  return (
    <div className="flex h-full flex-col rounded-xl border border-slate-200 bg-white p-3 shadow-sm">
      <div className="flex items-center gap-2.5">
        <Image src={meta.iconSrc} alt={meta.label} width={24} height={24} className="h-6 w-6 shrink-0 object-contain" />
        <div className="min-w-0">
          <p className="truncate text-sm font-semibold text-slate-900">{title}</p>
        </div>
      </div>

      <input
        ref={inputRef}
        type="file"
        accept={format === "pdf" ? ".pdf,application/pdf" : `.${format}`}
        onChange={(event) => handleUpload(event.target.files)}
        className="hidden"
        disabled={disabled || uploading}
      />

      <div className="mt-3">
        <Button
          type="button"
          size="sm"
          variant="outline"
          onClick={() => inputRef.current?.click()}
          disabled={disabled || uploading}
          fullWidth
          className="justify-center rounded-lg"
          icon={uploading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Upload size={14} />}
        >
          {uploading ? "Enviando..." : value ? "Trocar" : "Enviar"}
        </Button>
        {erro ? (
          <p role="alert" className="mt-2 text-[11px] font-medium leading-4 text-rose-600">
            {erro}
          </p>
        ) : null}
      </div>

      {value ? (
        <div className={`mt-3 rounded-xl border ${meta.borderClass} ${meta.softClass} p-3`}>
          <p className="truncate text-xs font-semibold text-slate-800" title={value.name}>
            {value.name}
          </p>
          <div className="mt-3 flex flex-wrap gap-2">
            <a
              href={value.url}
              target="_blank"
              rel="noreferrer"
              className="inline-flex items-center gap-1.5 rounded-lg border border-white bg-white px-2.5 py-1.5 text-[11px] font-semibold text-slate-700 shadow-sm transition-colors hover:bg-slate-50"
            >
              <Download size={11} />
              Ver
            </a>
            <button
              type="button"
              onClick={() => onChange(null)}
              disabled={disabled || uploading}
              className="inline-flex items-center gap-1.5 rounded-lg border border-transparent bg-white/70 px-2.5 py-1.5 text-[11px] font-semibold text-rose-600 transition-colors hover:bg-rose-50 disabled:opacity-60"
              aria-label="Remover gabarito"
            >
              <Trash2 size={11} />
              Remover
            </button>
          </div>
        </div>
      ) : (
        <div className="mt-3 flex flex-1 items-center">
          <div className="w-full rounded-xl border border-dashed border-slate-200 bg-slate-50/70 px-3 py-4 text-center">
            <p className="text-xs font-medium text-slate-500">Sem arquivo</p>
          </div>
        </div>
      )}
    </div>
  );
}