import { createFileRoute, Link } from "@tanstack/react-router";
import { queryOptions, useQueryClient, useSuspenseQuery } from "@tanstack/react-query";
import { useMemo, useState } from "react";
import { supabase } from "@/integrations/supabase/client";
import { SiteLayout } from "@/components/SiteLayout";

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

type CerereOferta = {
  id: string;
  nume: string;
  firma: string | null;
  tip_entitate: string;
  servicii: string[];
  documente_lunare: string | null;
  angajati: string | null;
  telefon: string;
  email: string | null;
  mesaj: string | null;
  status: Status;
  created_at: string;
};

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

const cereriQuery = queryOptions({
  queryKey: ["admin", "cereri"],
  queryFn: async () => {
    const { data: u } = await supabase.auth.getUser();
    if (!u.user) return { admin: false, cereri: [], consultanta: [] };
    const { data: rol } = await supabase.from("user_roles").select("role").eq("user_id", u.user.id).eq("role", "admin").maybeSingle();
    if (!rol) return { admin: false, cereri: [], consultanta: [] };
    const [{ data, error }, { data: cons, error: consErr }] = await Promise.all([
      supabase.from("cereri_oferta").select("*").order("created_at", { ascending: false }),
      supabase.from("cereri_consultanta").select("*").order("created_at", { ascending: false }),
    ]);
    if (error || consErr) throw new Error("Cererile nu au putut fi încărcate.");
    return { admin: true, cereri: (data ?? []) as CerereOferta[], consultanta: (cons ?? []) as CerereConsultanta[] };
  },
});

export const Route = createFileRoute("/_authenticated/admin")({
  head: () => ({
    meta: [
      { title: "Cereri primite – Administrare | Laboratorul de Afaceri și Profit" },
      { name: "description", content: "Pagina administratorului pentru cererile de ofertă și consultanță primite." },
      { property: "og:title", content: "Administrare cereri primite" },
      { property: "og:description", content: "Pagina administratorului pentru cererile de ofertă și consultanță primite." },
      { property: "og:type", content: "website" },
      { name: "twitter:card", content: "summary" },
      { name: "robots", content: "noindex" },
    ],
  }),
  loader: ({ context }) => context.queryClient.ensureQueryData(cereriQuery),
  component: Admin,
  errorComponent: ({ error }) => <SiteLayout><p className="mx-auto max-w-6xl px-6 py-16 text-destructive">{error instanceof Error ? error.message : String(error)}</p></SiteLayout>,
  notFoundComponent: () => <SiteLayout><p className="px-6 py-16">Pagina nu există.</p></SiteLayout>,
});

function Admin() {
  const { data } = useSuspenseQuery(cereriQuery);
  const qc = useQueryClient();
  const [tab, setTab] = useState<"oferta" | "consultanta">("oferta");
  const [filtru, setFiltru] = useState<Status | "toate">("toate");
  const [cauta, setCauta] = useState("");

  const lista = useMemo(() => {
    const q = cauta.trim().toLowerCase();
    if (tab === "oferta") {
      return data.cereri.filter((c) =>
        (filtru === "toate" || c.status === filtru) &&
        (!q || [c.nume, c.firma, c.telefon, c.email].some((v) => v?.toLowerCase().includes(q))),
      );
    }
    return data.consultanta.filter((c) =>
      (filtru === "toate" || c.status === filtru) &&
      (!q || [c.nume_firma, c.telefon, c.email].some((v) => v?.toLowerCase().includes(q))),
    );
  }, [data, tab, filtru, cauta]);

  if (!data.admin) {
    return (
      <SiteLayout>
        <div className="mx-auto max-w-md px-6 py-20 text-center">
          <h1 className="text-3xl text-navy">Acces restricționat</h1>
          <p className="mt-3 text-muted-foreground">Această pagină este disponibilă doar administratorului.</p>
          <Link to="/contul-meu" className="mt-6 inline-block text-accent underline-offset-4 hover:underline">Înapoi la Contul meu</Link>
        </div>
      </SiteLayout>
    );
  }

  const total = tab === "oferta" ? data.cereri.length : data.consultanta.length;
  const nr = (s: Status) => (tab === "oferta" ? data.cereri : data.consultanta).filter((c) => c.status === s).length;

  function invalidate() {
    qc.invalidateQueries({ queryKey: cereriQuery.queryKey });
  }

  return (
    <SiteLayout>
      <section className="mx-auto max-w-6xl px-6 py-12">
        <h1 className="text-4xl text-navy">Cereri primite</h1>
        <div className="mt-6 flex gap-2">
          {([["oferta", "Cereri de ofertă"], ["consultanta", "Cereri de consultanță"]] as const).map(([k, label]) => (
            <button key={k} onClick={() => setTab(k)} className={`rounded-full px-4 py-1.5 text-sm font-medium ${tab === k ? "bg-accent text-accent-foreground" : "border bg-card"}`}>
              {label}
            </button>
          ))}
        </div>
        <div className="mt-4 flex flex-wrap gap-2">
          {(["toate", "noua", "in_lucru", "finalizata"] as const).map((s) => (
            <button key={s} onClick={() => setFiltru(s)} className={`rounded-full border px-4 py-1.5 text-sm ${filtru === s ? "bg-navy text-navy-foreground" : "bg-card"}`}>
              {s === "toate" ? `Toate (${total})` : `${STATUS[s]} (${nr(s)})`}
            </button>
          ))}
          <input value={cauta} onChange={(e) => setCauta(e.target.value)} placeholder="Caută după nume, firmă, telefon..." className="ml-auto w-full rounded-md border bg-card px-3 py-1.5 text-sm sm:w-72" />
        </div>

        {lista.length === 0 ? (
          <p className="mt-10 rounded-lg border bg-card p-8 text-center text-muted-foreground">Nicio cerere {filtru !== "toate" || cauta ? "pentru acest filtru" : "primită încă"}.</p>
        ) : tab === "oferta" ? (
          <ul className="mt-6 space-y-4">
            {lista.map((c) => (
              <li key={c.id} className={`rounded-lg border bg-card p-5 shadow-card ${c.status === "noua" ? "border-l-4 border-l-accent" : ""}`}>
                <div className="flex flex-wrap items-start justify-between gap-3">
                  <div>
                    <p className="font-serif text-xl text-navy">{c.nume}{c.firma && <span className="text-muted-foreground"> · {c.firma}</span>}</p>
                    <p className="text-sm text-muted-foreground">{new Date(c.created_at).toLocaleString("ro-RO", { dateStyle: "medium", timeStyle: "short" })} · {c.tip_entitate}</p>
                  </div>
                  <StatusSelect status={c.status} onChange={(s) => schimbaStatus("cereri_oferta", c.id, s, invalidate)} />
                </div>
                <div className="mt-3 flex flex-wrap gap-2">
                  {c.servicii.map((s) => <span key={s} className="rounded-full bg-secondary px-3 py-0.5 text-xs">{s}</span>)}
                </div>
                <dl className="mt-3 grid gap-x-6 gap-y-1 text-sm sm:grid-cols-2">
                  {c.documente_lunare && <div><dt className="inline text-muted-foreground">Documente/lună: </dt><dd className="inline">{c.documente_lunare}</dd></div>}
                  {c.angajati && <div><dt className="inline text-muted-foreground">Angajați: </dt><dd className="inline">{c.angajati}</dd></div>}
                </dl>
                {c.mesaj && <p className="mt-3 whitespace-pre-line rounded-md bg-muted p-3 text-sm">{c.mesaj}</p>}
                <ContactRow telefon={c.telefon} email={c.email} sterge={async () => {
                  if (!confirm("Ștergeți definitiv această cerere?")) return;
                  await supabase.from("cereri_oferta").delete().eq("id", c.id);
                  invalidate();
                }} />
              </li>
            ))}
          </ul>
        ) : (
          <ul className="mt-6 space-y-4">
            {lista.map((c) => (
              <li key={c.id} className={`rounded-lg border bg-card p-5 shadow-card ${c.status === "noua" ? "border-l-4 border-l-accent" : ""}`}>
                <div className="flex flex-wrap items-start justify-between gap-3">
                  <div>
                    <p className="font-serif text-xl text-navy">{c.nume_firma || "Client"}</p>
                    <p className="text-sm text-muted-foreground">{new Date(c.created_at).toLocaleString("ro-RO", { dateStyle: "medium", timeStyle: "short" })}</p>
                  </div>
                  <StatusSelect status={c.status} onChange={(s) => schimbaStatus("cereri_consultanta", c.id, s, invalidate)} />
                </div>
                <div className="mt-3 flex flex-wrap gap-2">
                  {c.servicii.map((s) => <span key={s} className="rounded-full bg-secondary px-3 py-0.5 text-xs">{s}</span>)}
                </div>
                {c.mesaj && <p className="mt-3 whitespace-pre-line rounded-md bg-muted p-3 text-sm">{c.mesaj}</p>}
                <ContactRow telefon={c.telefon ?? ""} email={c.email} sterge={async () => {
                  if (!confirm("Ștergeți definitiv această cerere?")) return;
                  await supabase.from("cereri_consultanta").delete().eq("id", c.id);
                  invalidate();
                }} />
              </li>
            ))}
          </ul>
        )}
      </section>
    </SiteLayout>
  );
}

async function schimbaStatus(tabela: "cereri_oferta" | "cereri_consultanta", id: string, status: Status, invalidate: () => void) {
  await supabase.from(tabela).update({ status }).eq("id", id);
  invalidate();
}

function StatusSelect({ status, onChange }: { status: Status; onChange: (s: Status) => void }) {
  return (
    <select value={status} onChange={(e) => onChange(e.target.value as Status)} className="rounded-md border bg-background px-2 py-1 text-sm">
      {Object.entries(STATUS).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
    </select>
  );
}

function ContactRow({ telefon, email, sterge }: { telefon: string; email: string | null; sterge: () => Promise<void> }) {
  if (!telefon && !email) {
    return (
      <div className="mt-4 flex items-center text-sm text-muted-foreground">
        <span>Nicio informație de contact.</span>
        <button onClick={() => void sterge()} className="ml-auto text-destructive hover:underline">Șterge</button>
      </div>
    );
  }
  return (
    <div className="mt-4 flex flex-wrap items-center gap-3 text-sm">
      {telefon && (
        <>
          <a href={`tel:${telefon.replace(/[^+0-9]/g, "")}`} className="rounded-md bg-accent px-3 py-1.5 font-medium text-accent-foreground">Sună {telefon}</a>
          <a href={`https://wa.me/${telefon.replace(/\D/g, "").replace(/^0/, "40")}`} target="_blank" rel="noopener noreferrer" className="rounded-md bg-whatsapp px-3 py-1.5 font-medium text-whatsapp-foreground">WhatsApp</a>
        </>
      )}
      {email && <a href={`mailto:${email}`} className="rounded-md border px-3 py-1.5">{email}</a>}
      <button onClick={() => void sterge()} className="ml-auto text-destructive hover:underline">Șterge</button>
    </div>
  );
}