"use client";

import { useState, useRef } from "react";
import Image from "next/image";
import {
  X,
  Plus,
  Trash2,
  Upload,
  Loader2,
  ImageIcon,
  GripVertical,
} from "lucide-react";
import { cn, TAMANHOS_ORDEM } from "@/lib/utils";

type TamanhoForm = {
  tamanho: string;
  preco: string;
  estoque: string;
  estoqueMinimo: string;
  ativo: boolean;
};

type FardamentoForm = {
  nome: string;
  descricao: string;
  genero: "MASCULINO" | "FEMININO" | "UNISSEX";
  categoria: string;
  unidadeId: string;
  destaque: boolean;
  imagens: string[];
  tamanhos: TamanhoForm[];
};

const TAMANHO_PADRAO: TamanhoForm = {
  tamanho: "",
  preco: "",
  estoque: "0",
  estoqueMinimo: "2",
  ativo: true,
};

export function FardamentoModal({
  fardamento,
  unidades,
  unidadeIdPadrao,
  onClose,
  onSalvo,
}: {
  fardamento: any;
  unidades: { id: string; nome: string }[];
  unidadeIdPadrao: string;
  onClose: () => void;
  onSalvo: (f: any) => void;
}) {
  const [form, setForm] = useState<FardamentoForm>({
    nome: fardamento?.nome ?? "",
    descricao: fardamento?.descricao ?? "",
    genero: fardamento?.genero ?? "UNISSEX",
    categoria: fardamento?.categoria ?? "Uniforme Escolar",
    unidadeId: fardamento?.unidadeId ?? unidadeIdPadrao,
    destaque: fardamento?.destaque ?? false,
    imagens: fardamento?.imagens ?? [],
    tamanhos: fardamento?.tamanhos?.map((t: any) => ({
      tamanho: t.tamanho,
      preco: String(t.preco),
      estoque: String(t.estoque),
      estoqueMinimo: String(t.estoqueMinimo),
      ativo: t.ativo,
    })) ?? [{ ...TAMANHO_PADRAO }],
  });

  const [salvando, setSalvando] = useState(false);
  const [enviandoImagem, setEnviandoImagem] = useState(false);
  const [erro, setErro] = useState("");
  const inputImageRef = useRef<HTMLInputElement>(null);

  function setField<K extends keyof FardamentoForm>(
    key: K,
    value: FardamentoForm[K]
  ) {
    setForm((prev) => ({ ...prev, [key]: value }));
  }

  function setTamanho(idx: number, key: keyof TamanhoForm, value: any) {
    setForm((prev) => {
      const novos = [...prev.tamanhos];
      novos[idx] = { ...novos[idx], [key]: value };
      return { ...prev, tamanhos: novos };
    });
  }

  function adicionarTamanho() {
    setForm((prev) => ({
      ...prev,
      tamanhos: [...prev.tamanhos, { ...TAMANHO_PADRAO }],
    }));
  }

  function removerTamanho(idx: number) {
    setForm((prev) => ({
      ...prev,
      tamanhos: prev.tamanhos.filter((_, i) => i !== idx),
    }));
  }

  async function uploadImagem(file: File) {
    setEnviandoImagem(true);
    const fd = new FormData();
    fd.append("arquivo", file);
    const res = await fetch("/api/upload", { method: "POST", body: fd });
    setEnviandoImagem(false);
    if (res.ok) {
      const { url } = await res.json();
      setForm((prev) => ({ ...prev, imagens: [...prev.imagens, url] }));
    } else {
      setErro("Erro ao enviar imagem.");
    }
  }

  function removerImagem(idx: number) {
    setForm((prev) => ({
      ...prev,
      imagens: prev.imagens.filter((_, i) => i !== idx),
    }));
  }

  async function handleSalvar() {
    setErro("");

    if (!form.nome.trim()) {
      setErro("Nome é obrigatório.");
      return;
    }
    if (form.tamanhos.length === 0) {
      setErro("Adicione ao menos um tamanho.");
      return;
    }
    for (const t of form.tamanhos) {
      if (!t.tamanho || !t.preco) {
        setErro("Preencha tamanho e preço de todos os itens.");
        return;
      }
    }

    setSalvando(true);

    const payload = {
      ...form,
      tamanhos: form.tamanhos.map((t) => ({
        tamanho: t.tamanho,
        preco: parseFloat(t.preco),
        estoque: parseInt(t.estoque),
        estoqueMinimo: parseInt(t.estoqueMinimo),
        ativo: t.ativo,
      })),
    };

    const url = fardamento
      ? `/api/fardamentos/${fardamento.id}`
      : "/api/fardamentos";
    const method = fardamento ? "PATCH" : "POST";

    const res = await fetch(url, {
      method,
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(payload),
    });

    setSalvando(false);

    if (res.ok) {
      onSalvo(await res.json());
    } else {
      const data = await res.json().catch(() => ({}));
      setErro(data.error || "Erro ao salvar.");
    }
  }

  return (
    <div className="fixed inset-0 z-50 flex items-end sm:items-center justify-center">
      <div className="absolute inset-0 bg-black/60" onClick={onClose} />
      <div className="relative bg-white w-full max-w-2xl max-h-[95dvh] overflow-y-auto rounded-t-3xl sm:rounded-2xl shadow-2xl">
        {/* Header */}
        <div className="sticky top-0 bg-white border-b border-gray-100 px-5 py-4 flex items-center justify-between z-10">
          <h2 className="text-lg font-bold text-gray-900">
            {fardamento ? "Editar fardamento" : "Novo fardamento"}
          </h2>
          <button onClick={onClose} className="p-1.5 hover:bg-gray-100 rounded-lg">
            <X size={20} />
          </button>
        </div>

        <div className="p-5 space-y-5">
          {/* Imagens */}
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">
              Fotos do fardamento
            </label>
            <div className="flex gap-3 flex-wrap">
              {form.imagens.map((url, i) => (
                <div key={i} className="relative w-20 h-20">
                  <Image
                    src={url}
                    alt=""
                    fill
                    className="object-cover rounded-xl border border-gray-200"
                  />
                  <button
                    onClick={() => removerImagem(i)}
                    className="absolute -top-2 -right-2 bg-red-500 text-white rounded-full p-0.5"
                  >
                    <X size={12} />
                  </button>
                </div>
              ))}
              <button
                onClick={() => inputImageRef.current?.click()}
                disabled={enviandoImagem}
                className="w-20 h-20 border-2 border-dashed border-gray-300 rounded-xl flex flex-col items-center justify-center text-gray-400 hover:border-primary-400 hover:text-primary-500 transition-colors"
              >
                {enviandoImagem ? (
                  <Loader2 size={20} className="animate-spin" />
                ) : (
                  <>
                    <Upload size={18} />
                    <span className="text-xs mt-1">Foto</span>
                  </>
                )}
              </button>
              <input
                ref={inputImageRef}
                type="file"
                accept="image/*"
                className="hidden"
                onChange={(e) => {
                  const f = e.target.files?.[0];
                  if (f) uploadImagem(f);
                  e.target.value = "";
                }}
              />
            </div>
          </div>

          {/* Dados básicos */}
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div className="sm:col-span-2">
              <label className="block text-sm font-medium text-gray-700 mb-1.5">
                Nome *
              </label>
              <input
                type="text"
                value={form.nome}
                onChange={(e) => setField("nome", e.target.value)}
                className="input"
                placeholder="Ex: Camisa Polo Unissex"
              />
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1.5">
                Gênero
              </label>
              <select
                value={form.genero}
                onChange={(e) => setField("genero", e.target.value as any)}
                className="input"
              >
                <option value="UNISSEX">Unissex</option>
                <option value="MASCULINO">Masculino</option>
                <option value="FEMININO">Feminino</option>
              </select>
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1.5">
                Categoria
              </label>
              <input
                type="text"
                value={form.categoria}
                onChange={(e) => setField("categoria", e.target.value)}
                className="input"
                placeholder="Ex: Uniforme Escolar"
                list="categorias"
              />
              <datalist id="categorias">
                <option value="Uniforme Escolar" />
                <option value="Educação Física" />
                <option value="Passeio" />
                <option value="Formatura" />
              </datalist>
            </div>

            <div className="sm:col-span-2">
              <label className="block text-sm font-medium text-gray-700 mb-1.5">
                Descrição
              </label>
              <textarea
                value={form.descricao}
                onChange={(e) => setField("descricao", e.target.value)}
                className="input resize-none"
                rows={2}
                placeholder="Tecido, bordado, detalhes..."
              />
            </div>

            <div className="flex items-center gap-3">
              <input
                type="checkbox"
                id="destaque"
                checked={form.destaque}
                onChange={(e) => setField("destaque", e.target.checked)}
                className="w-4 h-4 rounded"
              />
              <label htmlFor="destaque" className="text-sm font-medium text-gray-700">
                Exibir em destaque na loja
              </label>
            </div>
          </div>

          {/* Tamanhos e preços */}
          <div>
            <div className="flex items-center justify-between mb-3">
              <label className="text-sm font-medium text-gray-700">
                Tamanhos, preços e estoque *
              </label>
              <button
                onClick={adicionarTamanho}
                className="flex items-center gap-1 text-primary-700 text-sm font-medium hover:text-primary-900"
              >
                <Plus size={15} /> Adicionar
              </button>
            </div>

            {/* Cabeçalho */}
            <div className="grid grid-cols-12 gap-2 text-xs text-gray-400 font-medium mb-1 px-1">
              <span className="col-span-3">Tamanho</span>
              <span className="col-span-3">Preço (R$)</span>
              <span className="col-span-3">Estoque</span>
              <span className="col-span-2">Mín.</span>
              <span className="col-span-1"></span>
            </div>

            <div className="space-y-2">
              {form.tamanhos.map((t, i) => (
                <div key={i} className="grid grid-cols-12 gap-2 items-center">
                  <input
                    value={t.tamanho}
                    onChange={(e) => setTamanho(i, "tamanho", e.target.value)}
                    className={cn(
                      "col-span-3 border rounded-lg px-2.5 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary-400",
                      !t.ativo && "opacity-50"
                    )}
                    placeholder="6 anos"
                    list="tamanhos-lista"
                  />
                  <input
                    type="number"
                    value={t.preco}
                    onChange={(e) => setTamanho(i, "preco", e.target.value)}
                    className={cn(
                      "col-span-3 border rounded-lg px-2.5 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary-400",
                      !t.ativo && "opacity-50"
                    )}
                    placeholder="0,00"
                    min="0"
                    step="0.01"
                  />
                  <input
                    type="number"
                    value={t.estoque}
                    onChange={(e) => setTamanho(i, "estoque", e.target.value)}
                    className={cn(
                      "col-span-3 border rounded-lg px-2.5 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary-400",
                      !t.ativo && "opacity-50"
                    )}
                    min="0"
                  />
                  <input
                    type="number"
                    value={t.estoqueMinimo}
                    onChange={(e) => setTamanho(i, "estoqueMinimo", e.target.value)}
                    className="col-span-2 border rounded-lg px-2.5 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary-400"
                    min="0"
                    title="Estoque mínimo para alerta"
                  />
                  <button
                    onClick={() => removerTamanho(i)}
                    className="col-span-1 flex items-center justify-center text-red-400 hover:text-red-600 p-1"
                    disabled={form.tamanhos.length === 1}
                  >
                    <Trash2 size={15} />
                  </button>
                </div>
              ))}
            </div>

            <datalist id="tamanhos-lista">
              {TAMANHOS_ORDEM.map((t) => (
                <option key={t} value={t} />
              ))}
            </datalist>
          </div>

          {/* Erro */}
          {erro && (
            <div className="bg-red-50 border border-red-200 text-red-700 text-sm rounded-xl p-3">
              {erro}
            </div>
          )}
        </div>

        {/* Footer */}
        <div className="sticky bottom-0 bg-white border-t border-gray-100 px-5 py-4 flex gap-3">
          <button
            onClick={onClose}
            className="flex-1 py-3 rounded-xl border border-gray-200 text-gray-700 font-medium text-sm hover:bg-gray-50"
          >
            Cancelar
          </button>
          <button
            onClick={handleSalvar}
            disabled={salvando}
            className="flex-1 flex items-center justify-center gap-2 py-3 rounded-xl bg-primary-800 text-white font-medium text-sm hover:bg-primary-900 disabled:opacity-50"
          >
            {salvando ? (
              <>
                <Loader2 size={16} className="animate-spin" /> Salvando...
              </>
            ) : (
              "Salvar"
            )}
          </button>
        </div>
      </div>
    </div>
  );
}