import { createFileRoute, Link } from "@tanstack/react-router";
import { useQuery } from "@tanstack/react-query";
import { useServerFn } from "@tanstack/react-start";
import { Inbox, Users, Zap, Activity, Loader2, Building2, MapPin } from "lucide-react";
import { useBusiness } from "@/lib/business-context";
import { Card, PartnerShell, StatusPill } from "@/components/partner/PartnerShell";
import { SubscriptionBadge } from "@/components/partner/SubscriptionBadge";
import { getDashboard } from "@/lib/partner.functions";

export const Route = createFileRoute("/_partner/partner/dashboard")({
  head: () => ({
    meta: [
      { title: "Partner Dashboard — Airfis" },
      { name: "description", content: "Your Airfis partner home: status and usage at a glance." },
      { property: "og:title", content: "Partner Dashboard — Airfis" },
      {
        property: "og:description",
        content: "Track requests and usage in the Airfis partner console.",
      },
      { property: "og:type", content: "website" },
      { name: "twitter:card", content: "summary" },
      { name: "robots", content: "noindex" },
    ],
  }),
  component: DashboardPage,
});

function DashboardPage() {
  const { activeId } = useBusiness();
  const fetchDashboard = useServerFn(getDashboard);
  const { data, isLoading, error } = useQuery({
    queryKey: ["partner", "dashboard", activeId],
    queryFn: () => fetchDashboard({ data: { businessId: activeId } }),
  });

  const businessName = data
    ? (data.partner.shop_name ?? data.partner.business_name ?? "Business")
    : "\u00a0";
  const businessMeta = data
    ? `${data.partner.city} · ${data.partner.pincode} · ${data.partner.business_type}`
    : undefined;

  return (
    <PartnerShell title={businessName} description={businessMeta} hideHeader>
      {isLoading && (
        <Card className="flex items-center justify-center py-20">
          <Loader2 className="h-5 w-5 animate-spin text-ink-3" />
        </Card>
      )}
      {error && <Card className="text-sm text-rose-700">{(error as Error).message}</Card>}
      {data && (
        <div className="space-y-6">
          <Card>
            <div className="flex flex-col gap-6 sm:flex-row sm:items-center sm:justify-between">
              <div className="flex items-start gap-4">
                <div className="inline-flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl bg-[#f3f3f3] text-[#0a0a12]">
                  <Building2 className="h-6 w-6" />
                </div>
                <div className="min-w-0">
                  <h2 className="text-xl font-bold text-ink truncate">{businessName}</h2>
                  <div className="mt-0.5 flex items-center gap-1 text-sm text-ink-2">
                    <MapPin className="h-3.5 w-3.5 shrink-0" />
                    <span className="truncate">{businessMeta}</span>
                  </div>
                </div>
              </div>
              <SubscriptionBadge inline />
            </div>
          </Card>

          <div className="grid sm:grid-cols-2 xl:grid-cols-4 gap-4">
            <Metric icon={Inbox} label="Requests today" value={data.usage.todayRequests} />
            <Metric icon={Activity} label="Requests this month" value={data.usage.monthRequests} />
            <Metric icon={Users} label="Active team" value={data.usage.drivers} />
            <Metric icon={Zap} label="API calls" value={data.usage.apiCalls} />
          </div>

          <Card>
            <div className="flex items-center justify-between">
              <h3 className="font-bold text-ink">Recent requests</h3>
              <Link to="/partner/requests" className="text-sm font-semibold text-[#FF4308]">
                View all
              </Link>
            </div>
            <div className="mt-4 divide-y divide-hairline">
              {data.recentRequests.map((r) => (
                <div key={r.id} className="flex flex-wrap items-center justify-between gap-3 py-3">
                  <div className="min-w-0">
                    <p className="font-semibold text-ink text-sm">
                      {r.customer_name} · {r.vehicle}
                    </p>
                    <p className="text-xs text-ink-2">
                      {r.issue} — {r.location}
                    </p>
                  </div>
                  <div className="flex items-center gap-3">
                    <span className="text-sm font-semibold text-ink">
                      ₹{Number(r.amount).toLocaleString("en-IN")}
                    </span>
                    <StatusPill status={r.status} />
                  </div>
                </div>
              ))}
            </div>
          </Card>
        </div>
      )}
    </PartnerShell>
  );
}

function Metric({
  icon: Icon,
  label,
  value,
}: {
  icon: typeof Inbox;
  label: string;
  value: number;
}) {
  return (
    <Card>
      <div className="inline-flex h-10 w-10 items-center justify-center rounded-xl bg-[#f3f3f3] text-[#0a0a12]">
        <Icon className="h-[18px] w-[18px]" />
      </div>
      <p className="mt-4 text-3xl font-bold text-ink">{value.toLocaleString("en-IN")}</p>
      <p className="mt-1 text-sm text-ink-2">{label}</p>
    </Card>
  );
}