import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
import { useState, useEffect } from "react";
import {
  Activity as ActivityIcon,
  AlertTriangle,
  ArrowRight,
  Ban,
  CheckCircle2,
  ChevronRight,
  Cloud,
  FileStack,
  Landmark,
  Loader2,
  MessageSquareText,
  Sparkles,
  Upload,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { ConfidenceIndicator } from "@/components/ledger/ConfidenceIndicator";
import { ActivityTimeline } from "@/components/ledger/ActivityTimeline";
import { DocumentUploadDialog } from "@/components/ledger/DocumentUploadDialog";
import { EmptyState, KpiCard, PageHeader, SectionCard } from "@/components/ledger/Primitives";
import { StatusBadge } from "@/components/ledger/StatusBadge";
import { useAuthSession } from "@/hooks/useAuthSession";
import { fetchSnelStartConnectionsApi } from "@/lib/api";
import { eur, useLedger } from "@/lib/ledger-store";

export const Route = createFileRoute("/")({
  head: () => ({
    meta: [
      { title: "Firm overview — Amanah" },
      {
        name: "description",
        content: "See what needs review, what is auto-ready and what failed to sync to SnelStart.",
      },
      { property: "og:title", content: "Firm overview — Amanah" },
      { property: "og:description", content: "Daily bookkeeping operations overview for your firm." },
    ],
  }),
  component: FirmDashboard,
});

function FirmDashboard() {
  const { invoices, queries, activity, clientName, clients, uploadDocumentFile } = useLedger();
  const navigate = useNavigate();
  const session = useAuthSession("firm");
  const [uploadOpen, setUploadOpen] = useState(false);
  const [snelstart, setSnelstart] = useState<{
    enabled: boolean;
    connected: number;
    reachable: boolean | null;
    loading: boolean;
  }>({ enabled: false, connected: 0, reachable: null, loading: true });
  const firstName = (session?.name ?? "Sara").split(/\s+/)[0];

  useEffect(() => {
    if (!session?.email) return;
    let cancelled = false;
    void fetchSnelStartConnectionsApi({ platform: "firm", email: session.email })
      .then((res) => {
        if (cancelled) return;
        setSnelstart({
          enabled: res.integrationEnabled,
          connected: res.counts.connected,
          reachable: res.probe.reachable,
          loading: false,
        });
      })
      .catch(() => {
        if (!cancelled) {
          setSnelstart((prev) => ({ ...prev, loading: false }));
        }
      });
    return () => {
      cancelled = true;
    };
  }, [session?.email]);

  const needsReview = invoices.filter((i) => i.status === "Needs review");
  const processing = invoices.filter((i) => i.status === "Processing" || i.status === "New");
  const autoReady = invoices.filter((i) => i.status === "Auto-ready");
  const openQueries = queries.filter((q) => !["Resolved", "Cancelled", "Approved"].includes(q.status));
  const failed = invoices.filter((i) => i.status === "Sync failed");
  const withConfidence = invoices.filter((i) => i.confidence > 0);
  const autoBook =
    withConfidence.length > 0
      ? Math.round((withConfidence.filter((i) => i.confidence >= 85).length / withConfidence.length) * 100)
      : null;

  const reviewQueue = processing.length + needsReview.length + autoReady.length;
  const queue = [...processing, ...needsReview, ...autoReady].slice(0, 6);

  return (
    <div className="space-y-6">
      <PageHeader
        eyebrow="Firm overview"
        title={`Good morning, ${firstName}`}
        subtitle="Here’s what needs your attention today."
        actions={
          <>
            <Button variant="outline" onClick={() => setUploadOpen(true)}>
              <Upload size={16} /> Upload document
            </Button>
            <Button variant="brand" onClick={() => navigate({ to: "/inbox" })}>
              Go to inbox <ArrowRight size={16} />
            </Button>
          </>
        }
      />

      <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-5">
        <KpiCard
          label="Review queue"
          value={reviewQueue}
          hint="Processing and awaiting review"
          icon={AlertTriangle}
          tone="amber"
          onClick={() => navigate({ to: "/inbox" })}
        />
        <KpiCard
          label="Auto-ready"
          value={autoReady.length}
          hint="Above confidence threshold"
          icon={CheckCircle2}
          tone="green"
          onClick={() => navigate({ to: "/inbox" })}
        />
        <KpiCard
          label="Open queries"
          value={openQueries.length}
          hint="Waiting on clients"
          icon={MessageSquareText}
          tone="amber"
          onClick={() => navigate({ to: "/queries" })}
        />
        <KpiCard
          label="Sync failed"
          value={failed.length}
          hint="Blocked in SnelStart"
          icon={Ban}
          tone="danger"
          onClick={() => navigate({ to: "/inbox" })}
        />
        <KpiCard
          label="Auto-book %"
          value={autoBook != null ? `${autoBook}%` : "—"}
          hint={autoBook != null ? "Documents with confidence data" : "Requires extraction data"}
          icon={Sparkles}
          tone="green"
          onClick={() => navigate({ to: "/activity" })}
        />
      </div>

      <SectionCard title="SnelStart" description="Live integration status">
        <div className="flex flex-wrap items-center justify-between gap-4 px-5 py-4">
          <div className="flex items-start gap-3">
            <span className="flex size-10 items-center justify-center rounded-lg bg-primary-soft text-primary">
              {snelstart.loading ? (
                <Loader2 size={18} className="animate-spin" aria-hidden="true" />
              ) : (
                <Cloud size={18} aria-hidden="true" />
              )}
            </span>
            <div>
              <p className="text-[14px] font-semibold text-foreground">
                {snelstart.loading
                  ? "Checking connection..."
                  : snelstart.enabled
                    ? snelstart.connected > 0
                      ? `${snelstart.connected} administration${snelstart.connected === 1 ? "" : "s"} connected`
                      : "Configured — no administrations connected yet"
                    : "Not connected"}
              </p>
              <p className="mt-0.5 text-[13px] text-muted-foreground">
                {snelstart.loading
                  ? "Loading live status from PostgreSQL."
                  : snelstart.enabled
                    ? snelstart.reachable
                      ? "SnelStart API host responded on last check."
                      : "SnelStart credentials are set, but the API host did not respond."
                    : "Add SnelStart API credentials to enable live sync."}
              </p>
            </div>
          </div>
          <Button variant="outline" asChild>
            <Link to="/settings/snelstart">View connection</Link>
          </Button>
        </div>
      </SectionCard>

      <div className="grid gap-4 lg:grid-cols-[1.85fr_1fr]">
        <SectionCard
          title="Review queue"
          description="Invoices requiring your attention"
          action={
            <Link
              to="/inbox"
              className="text-[13px] font-semibold text-brand-foreground transition-colors hover:text-brand"
            >
              View all →
            </Link>
          }
        >
          {queue.length === 0 ? (
            <EmptyState
              icon={CheckCircle2}
              title="No documents need your attention"
              description="Documents uploaded by clients or firm users will appear here when they require review."
            />
          ) : (
            <ul className="divide-y divide-border">
              {queue.map((invoice) => (
                <li key={invoice.id}>
                  <Link
                    to="/invoices/$id"
                    params={{ id: invoice.id }}
                    className="flex min-h-[56px] items-center gap-3 px-5 py-3.5 transition-colors hover:bg-brand-soft/40"
                  >
                    <div className="min-w-0 flex-1">
                      <p className="truncate text-[13.5px] font-medium">
                        {invoice.supplier?.trim() ? invoice.supplier : invoice.file}
                      </p>
                      <p className="truncate text-[12px] text-muted-foreground">
                        {clientName(invoice.clientId)}
                        {invoice.supplier?.trim() ? ` · ${invoice.file}` : ""}
                        {invoice.uploadedAt ? ` · ${invoice.uploadedAt}` : ""}
                      </p>
                    </div>
                    <div className="hidden w-32 md:block">
                      {invoice.confidence > 0 ? (
                        <ConfidenceIndicator value={invoice.confidence} compact />
                      ) : (
                        <span className="text-[12px] text-muted-foreground">Not processed</span>
                      )}
                    </div>
                    <span className="num w-24 text-right text-[13.5px] font-semibold">
                      {invoice.total > 0 ? eur(invoice.total) : "—"}
                    </span>
                    <StatusBadge status={invoice.status} />
                    <ChevronRight size={16} className="text-muted-foreground" aria-hidden="true" />
                  </Link>
                </li>
              ))}
            </ul>
          )}
        </SectionCard>

        <SectionCard title="Recent activity" description="Latest events across your firm">
          {activity.length === 0 ? (
            <EmptyState
              icon={ActivityIcon}
              title="No recent activity yet"
              description="Your activity will appear here as you work."
            />
          ) : (
            <div className="px-1 py-1">
              <ActivityTimeline events={activity.slice(0, 7)} />
            </div>
          )}
        </SectionCard>
      </div>

      <div className="flex flex-wrap gap-2">
        <Button variant="outline" asChild>
          <Link to="/inbox">
            <FileStack size={16} /> Review invoices
          </Link>
        </Button>
        <Button variant="outline" asChild>
          <Link to="/bank">
            <Landmark size={16} /> View bank matching
          </Link>
        </Button>
        <Button variant="outline" asChild>
          <Link to="/queries">
            <MessageSquareText size={16} /> Open client queries
          </Link>
        </Button>
        <Button variant="outline" asChild>
          <Link to="/activity">
            <ActivityIcon size={16} /> View activity
          </Link>
        </Button>
      </div>

      <DocumentUploadDialog
        open={uploadOpen}
        onOpenChange={setUploadOpen}
        platform="firm"
        clients={clients}
        actor={session?.name ?? "Sara"}
        email={session?.email ?? ""}
        onUpload={(file, options) =>
          uploadDocumentFile(file, {
            platform: "firm",
            email: session?.email ?? "",
            clientId: options.clientId,
            actor: session?.name ?? "Sara",
            onProgress: options.onProgress,
          })
        }
      />
    </div>
  );
}