import { createFileRoute } from "@tanstack/react-router";
import { useState, type FormEvent } from "react";
import { z } from "zod";
import { SiteLayout } from "@/components/SiteLayout";
import { FIRMA, SERVICII } from "@/lib/site";
import { supabase } from "@/integrations/supabase/client";

export const Route = createFileRoute("/cerere-oferta")({
  head: () => ({
    meta: [
      { title: "Cere o ofertă de contabilitate | Laboratorul de Afaceri și Profit, Bârlad" },
      { name: "description", content: "Completează formularul în 2 minute și primești o ofertă personalizată de contabilitate în Bârlad, jud. Vaslui." },
      { property: "og:title", content: "Cere o ofertă – Laboratorul de Afaceri și Profit" },
      { property: "og:description", content: `Ofertă personalizată pentru firma ta. Sau sună la ${FIRMA.telefon}.` },
      { property: "og:type", content: "website" },
      { name: "twitter:card", content: "summary_large_image" },
    ],
  }),
  component: CerereOferta,
});

const TIPURI = ["SRL", "PFA / II / IF", "ONG / Asociație", "Încă nu am firmă"];
const DOCUMENTE = ["Sub 30", "30 – 100", "100 – 300", "Peste 300", "Nu știu"];
const ANGAJATI = ["Fără angajați", "1 – 5", "6 – 20", "Peste 20"];

const schema = z.object({
  nume: z.string().trim().min(2, "Scrieți numele (minim 2 caractere).").max(100),
  firma: z.string().trim().max(150),
  tip_entitate: z.string().min(1, "Alegeți tipul firmei."),
  servicii: z.array(z.string()).min(1, "Alegeți cel puțin un serviciu."),
  documente_lunare: z.string(),
  angajati: z.string(),
  telefon: z.string().trim().regex(/^[+0-9 ()-]{6,30}$/, "Număr de telefon invalid."),
  email: z.union([z.literal(""), z.string().trim().email("Email invalid.").max(255)]),
  mesaj: z.string().trim().max(1500, "Maxim 1500 de caractere."),
  acord: z.literal(true, { errorMap: () => ({ message: "Este necesar acordul pentru a vă putea contacta." }) }),
});

type Date = z.input<typeof schema>;
const gol: Omit<Date, "acord"> & { acord: boolean } = {
  nume: "", firma: "", tip_entitate: "", servicii: [], documente_lunare: "", angajati: "", telefon: "", email: "", mesaj: "", acord: false,
};

function CerereOferta() {
  const [d, setD] = useState(gol);
  const [erori, setErori] = useState<Record<string, string>>({});
  const [stare, setStare] = useState<"idle" | "trimit" | "ok" | "eroare">("idle");

  const set = <K extends keyof typeof gol>(k: K, v: (typeof gol)[K]) => setD((p) => ({ ...p, [k]: v }));
  const toggle = (s: string) => set("servicii", d.servicii.includes(s) ? d.servicii.filter((x) => x !== s) : [...d.servicii, s]);

  const rezumat = () =>
    [
      `Bună ziua! Am trimis o cerere de ofertă de pe site.`,
      `Nume: ${d.nume}`,
      d.firma && `Firma: ${d.firma}`,
      `Tip: ${d.tip_entitate}`,
      `Servicii: ${d.servicii.join(", ")}`,
      d.documente_lunare && `Documente/lună: ${d.documente_lunare}`,
      d.angajati && `Angajați: ${d.angajati}`,
      `Telefon: ${d.telefon}`,
      d.email && `Email: ${d.email}`,
      d.mesaj && `Detalii: ${d.mesaj}`,
    ].filter(Boolean).join("\n");

  async function trimite(e: FormEvent) {
    e.preventDefault();
    const r = schema.safeParse(d);
    if (!r.success) {
      const m: Record<string, string> = {};
      r.error.issues.forEach((i) => (m[String(i.path[0])] ??= i.message));
      setErori(m);
      return;
    }
    setErori({});
    setStare("trimit");
    const { data: u } = await supabase.auth.getUser();
    const { acord: _a, ...v } = r.data;
    const { error } = await supabase.from("cereri_oferta").insert({
      ...v,
      firma: v.firma || null,
      email: v.email || null,
      mesaj: v.mesaj || null,
      documente_lunare: v.documente_lunare || null,
      angajati: v.angajati || null,
      user_id: u.user?.id ?? null,
    });
    setStare(error ? "eroare" : "ok");
  }

  const waLink = `https://wa.me/${FIRMA.whatsapp}?text=${encodeURIComponent(rezumat())}`;
  const camp = "mt-1 w-full rounded-md border bg-card px-3 py-2 focus:outline-none focus:ring-2 focus:ring-ring";
  const Err = ({ k }: { k: string }) => (erori[k] ? <p className="mt-1 text-sm text-destructive">{erori[k]}</p> : null);

  return (
    <SiteLayout>
      <section className="mx-auto grid max-w-6xl gap-12 px-6 py-16 lg:grid-cols-[1fr_2fr]">
        <aside>
          <h1 className="text-5xl text-navy">Cere o ofertă</h1>
          <p className="mt-4 text-lg text-muted-foreground">Durează cam 2 minute. Fără obligații.</p>
          <ol className="mt-8 space-y-5">
            {[
              ["Completezi formularul", "Ne spui ce fel de firmă ai și de ce ai nevoie."],
              ["Te sunăm în cel mult o zi lucrătoare", "Clarificăm detaliile împreună."],
              ["Primești oferta", "Un preț clar, adaptat volumului tău de activitate."],
            ].map(([t, x], i) => (
              <li key={t} className="flex gap-4">
                <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-accent text-sm font-medium text-accent-foreground">{i + 1}</span>
                <div><p className="font-medium text-navy">{t}</p><p className="text-sm text-muted-foreground">{x}</p></div>
              </li>
            ))}
          </ol>
          <div className="mt-10 rounded-lg bg-secondary p-5 text-sm">
            <p className="font-medium text-navy">Preferi să vorbim direct?</p>
            <a href={FIRMA.telefonLink} className="mt-2 inline-block font-medium text-accent underline-offset-4 hover:underline">Sună la {FIRMA.telefon}</a>
          </div>
        </aside>

        {stare === "ok" ? (
          <div className="rounded-lg border bg-card p-8 shadow-card">
            <h2 className="text-3xl text-navy">Mulțumim, {d.nume.split(" ")[0]}!</h2>
            <p className="mt-3 text-muted-foreground">Am primit cererea. Vă contactăm la <strong className="text-foreground">{d.telefon}</strong> în cel mult o zi lucrătoare.</p>
            <p className="mt-6 text-sm text-muted-foreground">Vreți un răspuns și mai rapid? Trimiteți-ne rezumatul pe WhatsApp:</p>
            <a href={waLink} target="_blank" rel="noopener noreferrer" className="mt-3 inline-block rounded-md bg-whatsapp px-6 py-3 font-medium text-whatsapp-foreground hover:opacity-90">Trimite pe WhatsApp</a>
            <button type="button" onClick={() => { setD(gol); setStare("idle"); }} className="mt-6 block text-sm text-muted-foreground underline-offset-4 hover:underline">Trimite o altă cerere</button>
          </div>
        ) : (
          <form onSubmit={trimite} noValidate className="space-y-8 rounded-lg border bg-card p-6 shadow-card sm:p-8">
            <fieldset>
              <legend className="font-serif text-2xl text-navy">1. De ce servicii aveți nevoie?</legend>
              <div className="mt-4 grid gap-3 sm:grid-cols-2">
                {SERVICII.map((s) => (
                  <label key={s.titlu} className={`flex cursor-pointer items-start gap-3 rounded-md border p-3 ${d.servicii.includes(s.titlu) ? "border-accent bg-secondary" : ""}`}>
                    <input type="checkbox" className="mt-1 accent-[var(--accent)]" checked={d.servicii.includes(s.titlu)} onChange={() => toggle(s.titlu)} />
                    <span className="text-sm font-medium">{s.titlu}</span>
                  </label>
                ))}
              </div>
              <Err k="servicii" />
            </fieldset>

            <fieldset>
              <legend className="font-serif text-2xl text-navy">2. Despre firma dvs.</legend>
              <div className="mt-4 grid gap-4 sm:grid-cols-2">
                <label className="text-sm">Tip firmă *
                  <select className={camp} value={d.tip_entitate} onChange={(e) => set("tip_entitate", e.target.value)}>
                    <option value="">Alegeți...</option>
                    {TIPURI.map((t) => <option key={t}>{t}</option>)}
                  </select>
                  <Err k="tip_entitate" />
                </label>
                <label className="text-sm">Numele firmei
                  <input className={camp} value={d.firma} maxLength={150} onChange={(e) => set("firma", e.target.value)} placeholder="opțional" />
                </label>
                <label className="text-sm">Documente pe lună (facturi, chitanțe)
                  <select className={camp} value={d.documente_lunare} onChange={(e) => set("documente_lunare", e.target.value)}>
                    <option value="">Alegeți...</option>
                    {DOCUMENTE.map((t) => <option key={t}>{t}</option>)}
                  </select>
                </label>
                <label className="text-sm">Număr de angajați
                  <select className={camp} value={d.angajati} onChange={(e) => set("angajati", e.target.value)}>
                    <option value="">Alegeți...</option>
                    {ANGAJATI.map((t) => <option key={t}>{t}</option>)}
                  </select>
                </label>
              </div>
              <p className="mt-2 text-xs text-muted-foreground">Volumul de documente ne ajută să vă dăm un preț corect din prima.</p>
            </fieldset>

            <fieldset>
              <legend className="font-serif text-2xl text-navy">3. Cum vă contactăm?</legend>
              <div className="mt-4 grid gap-4 sm:grid-cols-2">
                <label className="text-sm">Nume și prenume *
                  <input className={camp} value={d.nume} maxLength={100} autoComplete="name" onChange={(e) => set("nume", e.target.value)} />
                  <Err k="nume" />
                </label>
                <label className="text-sm">Telefon *
                  <input className={camp} type="tel" value={d.telefon} maxLength={30} autoComplete="tel" onChange={(e) => set("telefon", e.target.value)} placeholder="07xx xxx xxx" />
                  <Err k="telefon" />
                </label>
                <label className="text-sm sm:col-span-2">Email
                  <input className={camp} type="email" value={d.email} maxLength={255} autoComplete="email" onChange={(e) => set("email", e.target.value)} placeholder="opțional" />
                  <Err k="email" />
                </label>
                <label className="text-sm sm:col-span-2">Alte detalii
                  <textarea className={camp} rows={4} value={d.mesaj} maxLength={1500} onChange={(e) => set("mesaj", e.target.value)} placeholder="Ex.: domeniul de activitate, dacă sunteți plătitor de TVA, de când doriți să începem..." />
                  <Err k="mesaj" />
                </label>
              </div>
            </fieldset>

            <div>
              <label className="flex items-start gap-3 text-sm">
                <input type="checkbox" className="mt-1" checked={d.acord} onChange={(e) => set("acord", e.target.checked)} />
                <span>Sunt de acord ca {FIRMA.numeLegal} să folosească aceste date doar pentru a mă contacta în legătură cu oferta. *</span>
              </label>
              <Err k="acord" />
            </div>

            {stare === "eroare" && (
              <p className="rounded-md bg-destructive/10 p-3 text-sm text-destructive">Cererea nu a putut fi trimisă. Încercați din nou sau sunați la {FIRMA.telefon}.</p>
            )}

            <button type="submit" disabled={stare === "trimit"} className="w-full rounded-md bg-accent px-6 py-3 font-medium text-accent-foreground hover:opacity-90 disabled:opacity-60">
              {stare === "trimit" ? "Se trimite..." : "Trimite cererea de ofertă"}
            </button>
          </form>
        )}
      </section>
    </SiteLayout>
  );
}