import { useCallback, useEffect, useMemo, useState } from "react";
import { createFileRoute, Link } from "@tanstack/react-router";
import { CheckCircle2, Inbox, MessageSquarePlus, MessageSquareText, Search, XCircle } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { EmptyState, KpiCard, PageHeader, SectionCard } from "@/components/ledger/Primitives";
import { QueryPriorityBadge, queryStatusTone } from "@/components/ledger/QueryThread";
import { Pill } from "@/components/ledger/StatusBadge";
import { useAuthSession } from "@/hooks/useAuthSession";
import { fetchQueriesApi } from "@/lib/api";
import { eur, useLedger } from "@/lib/ledger-store";
import type { ClientQuery, QueryStats } from "@/lib/ledger-types";

export const Route = createFileRoute("/queries/")({
  head: () => ({
    meta: [{ title: "Client queries — Amanah" }],
  }),
  component: QueriesPage,
});

const STATUS_TABS = ["Requested", "Delivered", "Answered", "Resolved", "Cancelled", "All"] as const;

function QueriesPage() {
  const session = useAuthSession("firm");
  const { clients, clientName, getInvoice, createQuery, invoices } = useLedger();

  const [rows, setRows] = useState<ClientQuery[]>([]);
  const [stats, setStats] = useState<QueryStats>({
    requested: 0,
    delivered: 0,
    answered: 0,
    resolved: 0,
    cancelled: 0,
    total: 0,
  });
  const [tab, setTab] = useState<string>("All");
  const [clientFilter, setClientFilter] = useState("all");
  const [priorityFilter, setPriorityFilter] = useState("all");
  const [search, setSearch] = useState("");
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  const [askOpen, setAskOpen] = useState(false);
  const [askClient, setAskClient] = useState("");
  const [askQuestion, setAskQuestion] = useState("");
  const [askPriority, setAskPriority] = useState("Normal");
  const [askInvoice, setAskInvoice] = useState("none");

  const load = useCallback(async () => {
    if (!session?.email) return;
    setLoading(true);
    setError(null);
    try {
      const res = await fetchQueriesApi(
        { platform: "firm", email: session.email },
        {
          clientId: clientFilter !== "all" ? clientFilter : undefined,
          status: tab !== "All" ? tab : undefined,
          priority: priorityFilter !== "all" ? priorityFilter : undefined,
          q: search.trim() || undefined,
        },
      );
      setRows(Array.isArray(res?.items) ? res.items : []);
      setStats({
        requested: res?.stats?.requested ?? 0,
        delivered: res?.stats?.delivered ?? 0,
        answered: res?.stats?.answered ?? 0,
        resolved: res?.stats?.resolved ?? 0,
        cancelled: res?.stats?.cancelled ?? 0,
        total: res?.stats?.total ?? 0,
      });
    } catch (err) {
      setError(err instanceof Error ? err.message : "Could not load queries.");
    } finally {
      setLoading(false);
    }
  }, [session?.email, clientFilter, tab, priorityFilter, search]);

  useEffect(() => {
    void load();
  }, [load]);

  const clientInvoices = useMemo(() => {
    if (!askClient) return [];
    return invoices.filter((i) => i.clientId === askClient);
  }, [askClient, invoices]);

  const openCount = stats.requested + stats.delivered + stats.answered;

  return (
    <div className="space-y-6">
      <PageHeader
        eyebrow="Workspace"
        title="Client queries"
        subtitle="Ask clients for clarification and track their responses."
        actions={
          <Button onClick={() => setAskOpen(true)}>
            <MessageSquarePlus size={16} /> Ask client
          </Button>
        }
      />

      <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-5">
        <KpiCard label="Requested" value={stats.requested} hint="Created, not yet delivered" icon={Inbox} />
        <KpiCard label="Delivered" value={stats.delivered} hint="Waiting on the client" icon={MessageSquareText} tone="amber" />
        <KpiCard label="Answered" value={stats.answered} hint="Ready for your review" icon={MessageSquareText} tone="amber" />
        <KpiCard label="Resolved" value={stats.resolved} hint="Closed by the firm" icon={CheckCircle2} tone="green" />
        <KpiCard label="Cancelled" value={stats.cancelled} hint="Withdrawn questions" icon={XCircle} />
      </div>

      <div className="flex flex-wrap items-end gap-3">
        <Tabs value={tab} onValueChange={setTab}>
          <TabsList>
            {STATUS_TABS.map((t) => (
              <TabsTrigger key={t} value={t}>
                {t}
              </TabsTrigger>
            ))}
          </TabsList>
        </Tabs>
        <Select value={clientFilter} onValueChange={setClientFilter}>
          <SelectTrigger className="w-[180px]">
            <SelectValue placeholder="Client" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">All clients</SelectItem>
            {clients.map((c) => (
              <SelectItem key={c.id} value={c.id}>
                {c.name}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
        <Select value={priorityFilter} onValueChange={setPriorityFilter}>
          <SelectTrigger className="w-[140px]">
            <SelectValue placeholder="Priority" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">All priorities</SelectItem>
            <SelectItem value="Low">Low</SelectItem>
            <SelectItem value="Normal">Normal</SelectItem>
            <SelectItem value="High">High</SelectItem>
          </SelectContent>
        </Select>
        <div className="relative min-w-[220px] flex-1">
          <Search size={15} className="absolute top-1/2 left-3 -translate-y-1/2 text-muted-foreground" />
          <Input
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            placeholder="Search questions, clients, invoices…"
            className="pl-9"
          />
        </div>
      </div>

      {loading ? (
        <SectionCard>
          <p className="p-5 text-[13px] text-muted-foreground">Loading queries…</p>
        </SectionCard>
      ) : error ? (
        <SectionCard>
          <EmptyState
            icon={MessageSquareText}
            title="Could not load queries"
            description={error}
            action={
              <Button variant="outline" onClick={() => void load()}>
                Try again
              </Button>
            }
          />
        </SectionCard>
      ) : rows.length === 0 ? (
        <SectionCard>
          <EmptyState
            icon={CheckCircle2}
            title={openCount === 0 && tab === "All" ? "No open queries" : "No queries found"}
            description={
              openCount === 0
                ? "You're all caught up with client questions."
                : "Try adjusting your filters."
            }
          />
        </SectionCard>
      ) : (
        <div className="space-y-3">
          {rows.map((q) => {
            const invoice = q.invoiceId ? getInvoice(q.invoiceId) : undefined;
            const preview = q.messages?.[0]?.message ?? q.question ?? "";
            return (
              <article key={q.id} className="surface-card p-5">
                <div className="flex flex-wrap items-start justify-between gap-3">
                  <div className="min-w-0">
                    <p className="text-[12px] text-muted-foreground">
                      {clientName(q.clientId)} · {q.createdAt}
                      {invoice ? (
                        <>
                          {" · "}
                          <Link
                            to="/invoices/$id"
                            params={{ id: invoice.id }}
                            className="text-primary hover:underline"
                          >
                            {invoice.number || invoice.file}
                          </Link>
                        </>
                      ) : null}
                    </p>
                    <p className="mt-1.5 max-w-3xl text-[14px] leading-6 text-foreground">{preview}</p>
                    {invoice ? (
                      <p className="mt-1 text-[12px] text-muted-foreground">
                        {invoice.supplier || invoice.file}
                        {invoice.total ? ` · ${eur(invoice.total)}` : ""}
                      </p>
                    ) : null}
                  </div>
                  <div className="flex flex-wrap items-center gap-2">
                    <QueryPriorityBadge priority={q.priority} />
                    <Pill tone={queryStatusTone(q.status)} icon={MessageSquareText}>
                      {q.status}
                    </Pill>
                  </div>
                </div>
                <div className="mt-4">
                  <Button size="sm" variant="outline" asChild>
                    <Link to="/queries/$id" params={{ id: q.id }}>
                      Review
                    </Link>
                  </Button>
                </div>
              </article>
            );
          })}
        </div>
      )}

      <Dialog open={askOpen} onOpenChange={setAskOpen}>
        <DialogContent className="max-w-lg">
          <DialogHeader>
            <DialogTitle>Ask client</DialogTitle>
            <DialogDescription>
              Send a question to your client. They will receive a notification in their portal.
            </DialogDescription>
          </DialogHeader>
          <div className="space-y-4">
            <div className="space-y-2">
              <Label>Client</Label>
              <Select value={askClient} onValueChange={setAskClient}>
                <SelectTrigger>
                  <SelectValue placeholder="Select client" />
                </SelectTrigger>
                <SelectContent>
                  {clients.map((c) => (
                    <SelectItem key={c.id} value={c.id}>
                      {c.name}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
            <div className="space-y-2">
              <Label>Question</Label>
              <Textarea
                value={askQuestion}
                onChange={(e) => setAskQuestion(e.target.value)}
                placeholder="We received two identical invoices. Did you pay both?"
                className="min-h-24"
              />
            </div>
            <div className="space-y-2">
              <Label>Related document (optional)</Label>
              <Select value={askInvoice} onValueChange={setAskInvoice} disabled={!askClient}>
                <SelectTrigger>
                  <SelectValue placeholder="None" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="none">None</SelectItem>
                  {clientInvoices.map((inv) => (
                    <SelectItem key={inv.id} value={inv.id}>
                      {inv.file}
                      {inv.supplier ? ` · ${inv.supplier}` : ""}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
            <div className="space-y-2">
              <Label>Priority</Label>
              <Select value={askPriority} onValueChange={setAskPriority}>
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="Low">Low</SelectItem>
                  <SelectItem value="Normal">Normal</SelectItem>
                  <SelectItem value="High">High</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setAskOpen(false)}>
              Cancel
            </Button>
            <Button
              disabled={!askClient || !askQuestion.trim()}
              onClick={() => {
                createQuery(askClient, askQuestion.trim(), {
                  invoiceId: askInvoice !== "none" ? askInvoice : undefined,
                  priority: askPriority,
                });
                setAskOpen(false);
                setAskQuestion("");
                setAskInvoice("none");
                void load();
              }}
            >
              Send question
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}