import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
import { useEffect, useState } from "react";
import { supabase } from "@/integrations/supabase/client";
import { SiteLayout } from "@/components/SiteLayout";
import { FIRMA, SERVICII } from "@/lib/site";

const STATUS = { noua: "Nouă", in_lucru: "În lucru", finalizata: "Finalizată" } as const;
type Status = keyof typeof STATUS;

type CerereConsultanta = {
  id: string;
  servicii: string[];
  mesaj: string | null;
  status: Status;
  created_at: string;
};

export const Route = createFileRoute("/_authenticated/contul-meu")({
  head: () => ({
    meta: [
      { title: "Contul meu | Laboratorul de Afaceri și Profit" },
      { name: "description", content: "Zona dvs. de client Laboratorul de Afaceri și Profit: datele firmei și cererea de consultanță contabilă." },
      { property: "og:title", content: "Contul meu | Laboratorul de Afaceri și Profit" },
      { property: "og:description", content: "Zona dvs. de client Laboratorul de Afaceri și Profit: datele firmei și cererea de consultanță contabilă." },
      { property: "og:type", content: "website" },
      { name: "twitter:card", content: "summary_large_image" },
    ],
  }),
  component: ContulMeuPage,
});

function ContulMeuPage() {
  const navigate = useNavigate();
  const { queryClient } = Route.useRouteContext();
  const [email, setEmail] = useState<string>("");
  const [numeFirma, setNumeFirma] = useState("");
  const [telefon, setTelefon] = useState("");
  const [seIncarca, setSeIncarca] = useState(true);

  return (
    <SiteLayout>
      <div className="mx-auto grid max-w-5xl gap-8 px-6 py-16 lg:grid-cols-2">
        <ProfilCard
          email={email}
          numeFirma={numeFirma}
          telefon={telefon}
          seIncarca={seIncarca}
          setEmail={setEmail}
          setNumeFirma={setNumeFirma}
          setTelefon={setTelefon}
          setSeIncarca={setSeIncarca}
          onDeconectare={async () => {
            await queryClient.cancelQueries();
            queryClient.clear();
            await supabase.auth.signOut();
            navigate({ to: "/auth", replace: true });
          }}
        />
        <ConsultantaCard numeFirma={numeFirma} telefon={telefon} email={email} seIncarca={seIncarca} />
      </div>
    </SiteLayout>
  );
}

type ProfilProps = {
  email: string;
  numeFirma: string;
  telefon: string;
  seIncarca: boolean;
  setNumeFirma: (v: string) => void;
  setTelefon: (v: string) => void;
  setEmail: (v: string) => void;
  setSeIncarca: (v: boolean) => void;
  onDeconectare: () => Promise<void>;
};

function ProfilCard({ email, numeFirma, telefon, seIncarca, setNumeFirma, setTelefon, setEmail, setSeIncarca, onDeconectare }: ProfilProps) {
  const [mesaj, setMesaj] = useState<string | null>(null);
  const [eroare, setEroare] = useState<string | null>(null);
  const [salvare, setSalvare] = useState(false);

  useEffect(() => {
    (async () => {
      const {
        data: { user },
      } = await supabase.auth.getUser();
      if (!user) return;
      setEmail(user.email ?? "");
      const { data: profil } = await supabase
        .from("profiles")
        .select("nume_firma, telefon")
        .eq("id", user.id)
        .maybeSingle();
      setNumeFirma(profil?.nume_firma ?? "");
      setTelefon(profil?.telefon ?? "");
      setSeIncarca(false);
    })();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  async function salveaza(e: React.FormEvent) {
    e.preventDefault();
    setMesaj(null);
    setEroare(null);
    setSalvare(true);
    try {
      const {
        data: { user },
      } = await supabase.auth.getUser();
      if (!user) return;
      const { error } = await supabase
        .from("profiles")
        .update({ nume_firma: numeFirma || null, telefon: telefon || null, updated_at: new Date().toISOString() })
        .eq("id", user.id);
      if (error) {
        setEroare("Nu am putut salva datele. Încercați din nou.");
        return;
      }
      setMesaj("Datele au fost salvate.");
    } finally {
      setSalvare(false);
    }
  }

  return (
    <div className="w-full rounded-lg border border-border bg-card p-8 shadow-card">
      <h1 className="font-serif text-3xl text-foreground">Contul meu</h1>
      {seIncarca ? (
        <p className="mt-4 text-sm text-muted-foreground">Se încarcă datele...</p>
      ) : (
        <>
          <p className="mt-2 text-sm text-muted-foreground">Conectat ca {email}</p>
          <AdminLink />
          <p className="mt-6 text-sm text-foreground">
            Bine ați venit! Păstrați aici datele firmei, iar în dreapta puteți cere consultanță pentru serviciile noastre.
          </p>

          <form onSubmit={salveaza} className="mt-6 space-y-4">
            <div>
              <label htmlFor="profil-nume" className="mb-1 block text-sm font-medium text-foreground">
                Numele firmei dvs.
              </label>
              <input
                id="profil-nume"
                type="text"
                value={numeFirma}
                onChange={(e) => setNumeFirma(e.target.value)}
                className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-accent"
                placeholder="SC Exemplu SRL"
              />
            </div>
            <div>
              <label htmlFor="profil-telefon" className="mb-1 block text-sm font-medium text-foreground">
                Telefon
              </label>
              <input
                id="profil-telefon"
                type="tel"
                value={telefon}
                onChange={(e) => setTelefon(e.target.value)}
                className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-accent"
                placeholder="07xx xxx xxx"
              />
            </div>
            {mesaj && <p className="text-sm text-green-700">{mesaj}</p>}
            {eroare && <p className="text-sm text-red-600">{eroare}</p>}
            <button
              type="submit"
              disabled={salvare}
              className="w-full rounded-md bg-accent px-4 py-2 text-sm font-medium text-accent-foreground hover:opacity-90 disabled:opacity-60"
            >
              {salvare ? "Se salvează..." : "Salvează datele"}
            </button>
          </form>

          <button
            type="button"
            onClick={onDeconectare}
            className="mt-6 w-full rounded-md border border-input px-4 py-2 text-sm font-medium text-foreground hover:bg-accent/10"
          >
            Deconectare
          </button>

          <p className="mt-6 text-xs text-muted-foreground">
            {FIRMA.nume} — {FIRMA.telefon}
          </p>
        </>
      )}
    </div>
  );
}

function ConsultantaCard({ numeFirma, telefon, email, seIncarca }: { numeFirma: string; telefon: string; email: string; seIncarca: boolean }) {
  const [alese, setAlese] = useState<string[]>([]);
  const [mesaj, setMesaj] = useState("");
  const [telefonCons, setTelefonCons] = useState("");
  const [salvare, setSalvare] = useState(false);
  const [confirmare, setConfirmare] = useState<string | null>(null);
  const [eroare, setEroare] = useState<string | null>(null);
  const [cereri, setCereri] = useState<CerereConsultanta[]>([]);

  useEffect(() => {
    if (!seIncarca) setTelefonCons(telefon);
  }, [seIncarca, telefon]);

  async function incarcaCereri() {
    const { data } = await supabase
      .from("cereri_consultanta")
      .select("id, servicii, mesaj, status, created_at")
      .order("created_at", { ascending: false });
    setCereri((data as CerereConsultanta[] | null) ?? []);
  }

  useEffect(() => {
    if (seIncarca) return;
    void incarcaCereri();
  }, [seIncarca]);

  function comuta(serviciu: string) {
    setAlese((a) => (a.includes(serviciu) ? a.filter((s) => s !== serviciu) : [...a, serviciu]));
  }

  async function trimite(e: React.FormEvent) {
    e.preventDefault();
    setConfirmare(null);
    setEroare(null);
    if (alese.length === 0) {
      setEroare("Alegeți cel puțin un serviciu pentru care doriți consultanță.");
      return;
    }
    setSalvare(true);
    try {
      const {
        data: { user },
      } = await supabase.auth.getUser();
      if (!user) {
        setEroare("Sesiunea a expirat. Reautentificați-vă.");
        return;
      }
      const { error } = await supabase.from("cereri_consultanta").insert({
        user_id: user.id,
        nume_firma: numeFirma || null,
        email: email || null,
        telefon: telefonCons || null,
        servicii: alese,
        mesaj: mesaj.trim() || null,
      });
      if (error) {
        setEroare("Nu am putut trimite cererea. Încercați din nou.");
        return;
      }
      setConfirmare(
        `Mulțumim! Cererea dvs. de consultanță a fost trimisă. Vă contactăm în cel mai scurt timp la ${telefonCons || FIRMA.telefon}.`,
      );
      setAlese([]);
      setMesaj("");
      await incarcaCereri();
    } finally {
      setSalvare(false);
    }
  }

  async function retrage(id: string) {
    if (!confirm("Retrageți această cerere de consultanță?")) return;
    await supabase.from("cereri_consultanta").delete().eq("id", id);
    await incarcaCereri();
  }

  return (
    <div className="w-full self-start rounded-lg border border-border bg-card p-8 shadow-card">
      <h2 className="font-serif text-2xl text-foreground">Cere consultanță</h2>
      <p className="mt-2 text-sm text-muted-foreground">
        Alege serviciile despre care vrei să discuți, descrie-ne pe scurt situația și te contactăm noi.
      </p>

      <form onSubmit={trimite} className="mt-6 space-y-4">
        <fieldset>
          <legend className="mb-2 block text-sm font-medium text-foreground">Serviciile pentru care doriți consultanță</legend>
          <div className="grid gap-2">
            {SERVICII.map((s) => (
              <label key={s.titlu} className="flex cursor-pointer items-start gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm hover:bg-accent/5">
                <input
                  type="checkbox"
                  checked={alese.includes(s.titlu)}
                  onChange={() => comuta(s.titlu)}
                  className="mt-0.5 accent-[oklch(0.51_0.095_85)]"
                />
                <span className="text-foreground">{s.titlu}</span>
              </label>
            ))}
          </div>
        </fieldset>

        <div>
          <label htmlFor="consultanta-telefon" className="mb-1 block text-sm font-medium text-foreground">
            Telefon de contact
          </label>
          <input
            id="consultanta-telefon"
            type="tel"
            value={telefonCons}
            onChange={(e) => setTelefonCons(e.target.value)}
            className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-accent"
            placeholder="07xx xxx xxx"
          />
        </div>

        <div>
          <label htmlFor="consultanta-mesaj" className="mb-1 block text-sm font-medium text-foreground">
            Despre ce doriți să discutăm? <span className="font-normal text-muted-foreground">(opțional)</span>
          </label>
          <textarea
            id="consultanta-mesaj"
            value={mesaj}
            onChange={(e) => setMesaj(e.target.value)}
            rows={4}
            maxLength={1500}
            className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-accent"
            placeholder="De exemplu: vreau să trec de la contabilul actual la voi și am câteva întrebări despre tranziție."
          />
        </div>

        {confirmare && <p className="text-sm text-green-700">{confirmare}</p>}
        {eroare && <p className="text-sm text-red-600">{eroare}</p>}

        <button
          type="submit"
          disabled={salvare || seIncarca}
          className="w-full rounded-md bg-accent px-4 py-2 text-sm font-medium text-accent-foreground hover:opacity-90 disabled:opacity-60"
        >
          {salvare ? "Se trimite..." : "Trimite cererea de consultanță"}
        </button>
      </form>

      {cereri.length > 0 && (
        <div className="mt-8 border-t border-border pt-6">
          <h3 className="text-sm font-medium text-foreground">Cererile tale de consultanță</h3>
          <ul className="mt-3 space-y-3">
            {cereri.map((c) => (
              <li key={c.id} className="rounded-md border border-input bg-background p-3 text-sm">
                <div className="flex items-center justify-between gap-2">
                  <span className="text-muted-foreground">{new Date(c.created_at).toLocaleDateString("ro-RO", { dateStyle: "medium" })}</span>
                  <span className="rounded-full bg-secondary px-2 py-0.5 text-xs">{STATUS[c.status]}</span>
                </div>
                <div className="mt-2 flex flex-wrap gap-1.5">
                  {c.servicii.map((s) => (
                    <span key={s} className="rounded-full bg-secondary px-2 py-0.5 text-xs">{s}</span>
                  ))}
                </div>
                {c.mesaj && <p className="mt-2 whitespace-pre-line text-muted-foreground">{c.mesaj}</p>}
                {c.status === "noua" && (
                  <button type="button" onClick={() => retrage(c.id)} className="mt-2 text-xs text-destructive hover:underline">
                    Retrage cererea
                  </button>
                )}
              </li>
            ))}
          </ul>
        </div>
      )}

      <p className="mt-6 text-xs text-muted-foreground">
        Ai nevoie de un răspuns repede? Sună-ne la{" "}
        <a href={FIRMA.telefonLink} className="underline underline-offset-2">{FIRMA.telefon}</a> sau{" "}
        <Link to="/contact" className="underline underline-offset-2">vezi pagina de contact</Link>.
      </p>
    </div>
  );
}

function AdminLink() {
  const [admin, setAdmin] = useState(false);
  useEffect(() => {
    supabase.auth.getUser().then(({ data }) => {
      if (!data.user) return;
      supabase.from("user_roles").select("role").eq("user_id", data.user.id).eq("role", "admin").maybeSingle()
        .then(({ data: r }) => setAdmin(!!r));
    });
  }, []);
  if (!admin) return null;
  return (
    <Link to="/admin" className="mt-4 block rounded-md bg-navy px-4 py-2 text-center text-sm font-medium text-navy-foreground hover:opacity-90">
      Vezi cererile primite
    </Link>
  );
}