import { createFileRoute } from "@tanstack/react-router";
import { useEffect, useState } from "react";
import { toast } from "sonner";
import { BRIEFING_SECTIONS, emptyBriefingData, type BriefingData } from "@/lib/briefing-schema";
import { supabase } from "@/integrations/supabase/client";

export const Route = createFileRoute("/briefing/$token")({
  component: BriefingPage,
  head: () => ({ meta: [{ title: "Briefing — .PONTO" }, { name: "robots", content: "noindex" }] }),
});

function BriefingPage() {
  const { token } = Route.useParams();

  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [clientName, setClientName] = useState("");
  const [status, setStatus] = useState<string>("pending");
  const [data, setData] = useState<BriefingData>(emptyBriefingData());
  const [saving, setSaving] = useState(false);

  useEffect(() => {
    (async () => {
      try {
        const { data: rows, error: err } = await supabase.rpc("get_briefing_by_token", {
          _token: token,
        });
        if (err) throw err;
        const row = Array.isArray(rows) ? rows[0] : rows;
        if (!row) throw new Error("Briefing não encontrado");
        setClientName(row.client_name);
        setStatus(row.status);
        const existing = (row.data ?? {}) as BriefingData;
        setData({ ...emptyBriefingData(), ...existing });
      } catch (e) {
        setError(e instanceof Error ? e.message : "Erro ao carregar.");
      } finally {
        setLoading(false);
      }
    })();
  }, [token]);

  const setField = (key: string, value: string | string[]) =>
    setData((d) => ({ ...d, [key]: value }));

  const toggleCheckbox = (key: string, opt: string) => {
    setData((d) => {
      const cur = Array.isArray(d[key]) ? (d[key] as string[]) : [];
      return { ...d, [key]: cur.includes(opt) ? cur.filter((o) => o !== opt) : [...cur, opt] };
    });
  };

  const onSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setSaving(true);
    try {
      const { data: ok, error: err } = await supabase.rpc("submit_briefing_by_token", {
        _token: token,
        _data: data as never,
      });
      if (err) throw err;
      if (!ok) throw new Error("Briefing não encontrado");
      setStatus("submitted");
      toast.success("Briefing enviado! Obrigado.");
      window.scrollTo({ top: 0, behavior: "smooth" });
    } catch (err) {
      toast.error(err instanceof Error ? err.message : "Erro ao enviar.");
    } finally {
      setSaving(false);
    }
  };

  if (loading) {
    return (
      <div className="min-h-screen grid place-items-center bg-background">
        <p className="text-muted-foreground">Carregando briefing…</p>
      </div>
    );
  }
  if (error) {
    return (
      <div className="min-h-screen grid place-items-center bg-background p-6">
        <div className="max-w-md text-center">
          <h1 className="text-2xl font-black">Link inválido</h1>
          <p className="mt-2 text-muted-foreground">{error}</p>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-background">
      <div className="mx-auto max-w-3xl px-6 py-10">
        <div className="mb-8">
          <span className="text-xs font-bold uppercase tracking-widest text-primary">
            .PONTO Marketing
          </span>
          <h1 className="mt-2 text-3xl font-black md:text-4xl">Briefing de novo cliente</h1>
          <p className="mt-2 text-muted-foreground">
            Olá <span className="font-semibold text-foreground">{clientName}</span>! Preencha as
            informações abaixo para iniciarmos o trabalho. Suas respostas são salvas ao enviar.
          </p>
          {status === "submitted" && (
            <div className="mt-4 rounded-xl border border-[#3DFF8A]/40 bg-[#3DFF8A]/10 p-4 text-sm">
              ✓ Briefing já enviado. Você ainda pode revisar e reenviar.
            </div>
          )}
        </div>

        <form onSubmit={onSubmit} className="space-y-8">
          {BRIEFING_SECTIONS.map((section) => (
            <section
              key={section.title}
              className="rounded-2xl border border-border bg-card p-6"
            >
              <h2 className="mb-4 text-lg font-black uppercase tracking-wider">{section.title}</h2>
              <div className="space-y-5">
                {section.fields.map((f) => (
                  <div key={f.key}>
                    <label className="mb-2 block text-sm font-semibold">{f.label}</label>
                    {f.type === "text" && (
                      <input
                        value={(data[f.key] as string) || ""}
                        onChange={(e) => setField(f.key, e.target.value)}
                        className="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm outline-none focus:border-primary"
                      />
                    )}
                    {f.type === "textarea" && (
                      <textarea
                        rows={3}
                        value={(data[f.key] as string) || ""}
                        onChange={(e) => setField(f.key, e.target.value)}
                        className="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm outline-none focus:border-primary"
                      />
                    )}
                    {f.type === "radio" && (
                      <div className="flex flex-wrap gap-3">
                        {f.options!.map((opt) => (
                          <label
                            key={opt}
                            className="flex items-center gap-2 rounded-lg border border-border bg-background px-3 py-2 text-sm cursor-pointer hover:border-primary"
                          >
                            <input
                              type="radio"
                              name={f.key}
                              checked={data[f.key] === opt}
                              onChange={() => setField(f.key, opt)}
                            />
                            {opt}
                          </label>
                        ))}
                      </div>
                    )}
                    {f.type === "checkboxes" && (
                      <div className="flex flex-wrap gap-2">
                        {f.options!.map((opt) => {
                          const checked =
                            Array.isArray(data[f.key]) &&
                            (data[f.key] as string[]).includes(opt);
                          return (
                            <label
                              key={opt}
                              className={`flex items-center gap-2 rounded-lg border px-3 py-2 text-sm cursor-pointer ${
                                checked
                                  ? "border-primary bg-primary/10"
                                  : "border-border bg-background hover:border-primary/60"
                              }`}
                            >
                              <input
                                type="checkbox"
                                checked={checked}
                                onChange={() => toggleCheckbox(f.key, opt)}
                              />
                              {opt}
                            </label>
                          );
                        })}
                      </div>
                    )}
                  </div>
                ))}
              </div>
            </section>
          ))}

          <button
            type="submit"
            disabled={saving}
            className="w-full rounded-xl bg-[#3DFF8A] px-6 py-4 font-black uppercase tracking-wider text-black disabled:opacity-60"
          >
            {saving ? "Enviando…" : "Enviar briefing"}
          </button>
        </form>
      </div>
    </div>
  );
}