"use client";

import Link from "next/link";
import type { Route } from "next";
import { trpc } from "~/lib/trpc/client.js";
import { MobileCapacityCard } from "./MobileCapacityCard.js";
import { MobileProjectCard } from "./MobileProjectCard.js";
import { EmptyState } from "~/components/ui/EmptyState.js";

export function MobileSummaryClient() {
  const { data: overview, isLoading: overviewLoading } = trpc.dashboard.getOverview.useQuery(undefined, {
    staleTime: 60_000,
  });

  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const { data: projectsData, isLoading: projectsLoading } = (trpc.project.list.useQuery as any)(
    { limit: 5, status: "ACTIVE" },
    { staleTime: 60_000 },
  ) as { data: { projects: Array<{ id: string; shortCode: string; name: string; status: string }> } | undefined; isLoading: boolean };

  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const { data: demandData } = (trpc.dashboard.getDemand.useQuery as any)(
    undefined,
    { staleTime: 60_000 },
  ) as { data: { openDemandCount?: number; openDemands?: unknown[] } | undefined };

  const projects = projectsData?.projects ?? [];
  const openDemandCount = demandData?.openDemandCount ?? demandData?.openDemands?.length ?? 0;

  const isLoading = overviewLoading || projectsLoading;

  return (
    <div className="min-h-screen bg-gray-50 dark:bg-gray-950">
      {/* Top nav bar */}
      <div className="sticky top-0 z-10 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 px-4 py-3 flex items-center justify-between">
        <h1 className="text-base font-semibold text-gray-900 dark:text-gray-100">CapaKraken</h1>
        <Link href="/dashboard" className="text-xs font-medium text-brand-600 dark:text-brand-400">
          Full Dashboard →
        </Link>
      </div>

      <div className="max-w-[428px] mx-auto px-4 py-5 space-y-4">
        {isLoading ? (
          <div className="space-y-4">
            {Array.from({ length: 3 }).map((_, i) => (
              <div key={i} className="h-32 shimmer-skeleton rounded-2xl" />
            ))}
          </div>
        ) : (
          <>
            {/* Capacity snapshot */}
            {overview && (
              <MobileCapacityCard
                totalResources={overview.totalResources}
                activeResources={overview.activeResources}
                avgUtilizationPct={overview.budgetSummary?.avgUtilizationPercent ?? 0}
              />
            )}

            {/* Open demand alert */}
            {openDemandCount > 0 && (
              <Link
                href="/timeline"
                className="flex items-center gap-3 rounded-xl border border-amber-300 dark:border-amber-700 bg-amber-50 dark:bg-amber-950/30 px-4 py-3"
              >
                <div className="h-8 w-8 shrink-0 rounded-full bg-amber-100 dark:bg-amber-900/50 flex items-center justify-center">
                  <span className="text-sm font-bold text-amber-700 dark:text-amber-300">{openDemandCount}</span>
                </div>
                <div>
                  <div className="text-sm font-semibold text-amber-800 dark:text-amber-300">
                    Open Demand
                  </div>
                  <div className="text-xs text-amber-700 dark:text-amber-400">
                    {openDemandCount} unfilled role{openDemandCount !== 1 ? "s" : ""} — tap to fill
                  </div>
                </div>
              </Link>
            )}

            {/* Active projects */}
            <div>
              <div className="flex items-center justify-between mb-3">
                <span className="text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
                  Active Projects
                </span>
                <Link href="/projects" className="text-xs text-brand-600 dark:text-brand-400">
                  See all
                </Link>
              </div>
              {projects.length === 0 ? (
                <EmptyState title="No active projects" detail="Create a project to get started." />
              ) : (
                <div className="space-y-2">
                  {projects.map((p) => (
                    <MobileProjectCard
                      key={p.id}
                      id={p.id}
                      shortCode={p.shortCode}
                      name={p.name}
                      status={p.status}
                    />
                  ))}
                </div>
              )}
            </div>

            {/* Quick links */}
            <div className="grid grid-cols-2 gap-3">
              {(
                [
                  ["/timeline" as Route, "Timeline"],
                  ["/bench" as Route, "Bench Board"],
                  ["/allocations" as Route, "Allocations"],
                  ["/staffing" as Route, "Staffing"],
                ] as [Route, string][]
              ).map(([href, label]) => (
                <Link
                  key={href}
                  href={href}
                  className="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 px-4 py-3 text-sm font-medium text-gray-700 dark:text-gray-300 text-center hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
                >
                  {label}
                </Link>
              ))}
            </div>
          </>
        )}
      </div>
    </div>
  );
}
