"use client";

import { useEffect, useMemo, useState } from "react";
import Link from "next/link";
import { Area, AreaChart, CartesianGrid, XAxis } from "recharts";
import { PlusIcon, TrendingDownIcon, TrendingUpIcon } from "lucide-react";
import { ErrorState } from "@/components/layout/ErrorState";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardAction,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
  CardContent,
} from "@/components/ui/card";
import {
  ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Skeleton } from "@/components/ui/skeleton";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
import { DataTable, type DataTableRow } from "@/components/dashboard/data-table";
import { apiFetch, errorMessageForUi } from "@/lib/api";
import { useIsMobile } from "@/hooks/use-mobile";

type Tenant = {
  id: string;
  name: string;
  status: string;
  _count?: { users: number; vehicles: number };
};

type Geotab = { id: string; isConnected: boolean };

type BillingSummary = {
  activeSubscriptions: number;
  manualSubscriptions: number;
  stripeSubscriptions: number;
  activePlans: number;
  stripeSyncErrors: number;
};

const chartData = [
  { date: "2024-04-01", customers: 12, subscriptions: 8 },
  { date: "2024-04-08", customers: 18, subscriptions: 11 },
  { date: "2024-04-15", customers: 22, subscriptions: 14 },
  { date: "2024-04-22", customers: 28, subscriptions: 17 },
  { date: "2024-04-29", customers: 31, subscriptions: 19 },
  { date: "2024-05-06", customers: 36, subscriptions: 24 },
  { date: "2024-05-13", customers: 41, subscriptions: 27 },
  { date: "2024-05-20", customers: 45, subscriptions: 30 },
  { date: "2024-05-27", customers: 49, subscriptions: 33 },
  { date: "2024-06-03", customers: 54, subscriptions: 38 },
  { date: "2024-06-10", customers: 58, subscriptions: 41 },
  { date: "2024-06-17", customers: 63, subscriptions: 45 },
  { date: "2024-06-24", customers: 68, subscriptions: 49 },
  { date: "2024-06-30", customers: 72, subscriptions: 52 },
];

const chartConfig = {
  customers: {
    label: "Customers",
    color: "hsl(var(--chart-1))",
  },
  subscriptions: {
    label: "Subscriptions",
    color: "hsl(var(--chart-2))",
  },
} satisfies ChartConfig;

function SectionCards({
  tenants,
  billing,
  connected,
  geotabTotal,
}: {
  tenants: Tenant[];
  billing: BillingSummary | null;
  connected: number;
  geotabTotal: number;
}) {
  const activeCustomers = tenants.filter((t) => t.status === "ACTIVE").length;
  return (
    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
      <Card className="bg-gradient-to-t from-primary/5 to-card shadow-sm">
        <CardHeader>
          <CardDescription>Customers</CardDescription>
          <CardTitle className="text-2xl font-semibold tabular-nums sm:text-3xl">
            {tenants.length}
          </CardTitle>
          <CardAction>
            <Badge variant="outline" className="gap-1">
              <TrendingUpIcon className="size-3" />
              +{activeCustomers}
            </Badge>
          </CardAction>
        </CardHeader>
        <CardFooter className="flex-col items-start gap-1.5 text-sm">
          <div className="line-clamp-1 flex gap-2 font-medium">
            {activeCustomers} active this period <TrendingUpIcon className="size-4" />
          </div>
          <div className="text-muted-foreground">Total tenant accounts</div>
        </CardFooter>
      </Card>
      <Card className="bg-gradient-to-t from-primary/5 to-card shadow-sm">
        <CardHeader>
          <CardDescription>Active subscriptions</CardDescription>
          <CardTitle className="text-2xl font-semibold tabular-nums sm:text-3xl">
            {billing?.activeSubscriptions ?? 0}
          </CardTitle>
          <CardAction>
            <Badge variant="outline" className="gap-1">
              <TrendingUpIcon className="size-3" />
              +{billing?.stripeSubscriptions ?? 0}
            </Badge>
          </CardAction>
        </CardHeader>
        <CardFooter className="flex-col items-start gap-1.5 text-sm">
          <div className="line-clamp-1 flex gap-2 font-medium">
            Entitling Active/Trialing <TrendingUpIcon className="size-4" />
          </div>
          <div className="text-muted-foreground">
            {billing?.manualSubscriptions ?? 0} manual · {billing?.stripeSubscriptions ?? 0} Stripe
          </div>
        </CardFooter>
      </Card>
      <Card className="bg-gradient-to-t from-primary/5 to-card shadow-sm">
        <CardHeader>
          <CardDescription>Active plans</CardDescription>
          <CardTitle className="text-2xl font-semibold tabular-nums sm:text-3xl">
            {billing?.activePlans ?? 0}
          </CardTitle>
          <CardAction>
            <Badge variant="outline" className="gap-1">
              {(billing?.stripeSyncErrors ?? 0) > 0 ? (
                <TrendingDownIcon className="size-3" />
              ) : (
                <TrendingUpIcon className="size-3" />
              )}
              {billing?.stripeSyncErrors ?? 0} sync errors
            </Badge>
          </CardAction>
        </CardHeader>
        <CardFooter className="flex-col items-start gap-1.5 text-sm">
          <div className="line-clamp-1 flex gap-2 font-medium">
            {(billing?.stripeSyncErrors ?? 0) > 0 ? "Sync needs attention" : "Plans healthy"}
          </div>
          <div className="text-muted-foreground">Stripe catalog sync status</div>
        </CardFooter>
      </Card>
      <Card className="bg-gradient-to-t from-primary/5 to-card shadow-sm">
        <CardHeader>
          <CardDescription>MyGeotab integrations</CardDescription>
          <CardTitle className="text-2xl font-semibold tabular-nums sm:text-3xl">
            {connected}
          </CardTitle>
          <CardAction>
            <Badge variant="outline" className="gap-1">
              <TrendingUpIcon className="size-3" />
              {geotabTotal} accounts
            </Badge>
          </CardAction>
        </CardHeader>
        <CardFooter className="flex-col items-start gap-1.5 text-sm">
          <div className="line-clamp-1 flex gap-2 font-medium">
            Connected integrations <TrendingUpIcon className="size-4" />
          </div>
          <div className="text-muted-foreground">Across all customers</div>
        </CardFooter>
      </Card>
    </div>
  );
}

function ChartAreaInteractive() {
  const isMobile = useIsMobile();
  const [timeRange, setTimeRange] = useState("90d");

  useEffect(() => {
    if (isMobile) setTimeRange("30d");
  }, [isMobile]);

  const filteredData = useMemo(() => {
    const referenceDate = new Date("2024-06-30");
    let daysToSubtract = 90;
    if (timeRange === "30d") daysToSubtract = 30;
    if (timeRange === "7d") daysToSubtract = 7;
    const startDate = new Date(referenceDate);
    startDate.setDate(startDate.getDate() - daysToSubtract);
    return chartData.filter((item) => new Date(item.date) >= startDate);
  }, [timeRange]);

  return (
    <Card>
      <CardHeader className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
        <div>
          <CardTitle>Platform growth</CardTitle>
          <CardDescription>Customers and subscriptions over time</CardDescription>
        </div>
        <div className="flex items-center gap-2">
          <ToggleGroup
            type="single"
            value={timeRange}
            onValueChange={(value) => value && setTimeRange(value)}
            variant="outline"
            className="hidden md:flex"
          >
            <ToggleGroupItem value="90d">Last 3 months</ToggleGroupItem>
            <ToggleGroupItem value="30d">Last 30 days</ToggleGroupItem>
            <ToggleGroupItem value="7d">Last 7 days</ToggleGroupItem>
          </ToggleGroup>
          <Select value={timeRange} onValueChange={setTimeRange}>
            <SelectTrigger className="w-40 md:hidden" aria-label="Select a value">
              <SelectValue placeholder="Last 3 months" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="90d">Last 3 months</SelectItem>
              <SelectItem value="30d">Last 30 days</SelectItem>
              <SelectItem value="7d">Last 7 days</SelectItem>
            </SelectContent>
          </Select>
        </div>
      </CardHeader>
      <CardContent className="px-2 pt-4 sm:px-6 sm:pt-6">
        <ChartContainer config={chartConfig} className="aspect-auto h-[250px] w-full">
          <AreaChart data={filteredData}>
            <defs>
              <linearGradient id="fillCustomers" x1="0" y1="0" x2="0" y2="1">
                <stop offset="5%" stopColor="var(--color-customers)" stopOpacity={1} />
                <stop offset="95%" stopColor="var(--color-customers)" stopOpacity={0.1} />
              </linearGradient>
              <linearGradient id="fillSubscriptions" x1="0" y1="0" x2="0" y2="1">
                <stop offset="5%" stopColor="var(--color-subscriptions)" stopOpacity={0.8} />
                <stop offset="95%" stopColor="var(--color-subscriptions)" stopOpacity={0.1} />
              </linearGradient>
            </defs>
            <CartesianGrid vertical={false} />
            <XAxis
              dataKey="date"
              tickLine={false}
              axisLine={false}
              tickMargin={8}
              minTickGap={32}
              tickFormatter={(value) =>
                new Date(value).toLocaleDateString("en-US", { month: "short", day: "numeric" })
              }
            />
            <ChartTooltip
              cursor={false}
              content={
                <ChartTooltipContent
                  labelFormatter={(value) =>
                    new Date(value).toLocaleDateString("en-US", { month: "short", day: "numeric" })
                  }
                  indicator="dot"
                />
              }
            />
            <Area
              dataKey="subscriptions"
              type="natural"
              fill="url(#fillSubscriptions)"
              stroke="var(--color-subscriptions)"
              stackId="a"
            />
            <Area
              dataKey="customers"
              type="natural"
              fill="url(#fillCustomers)"
              stroke="var(--color-customers)"
              stackId="a"
            />
          </AreaChart>
        </ChartContainer>
      </CardContent>
    </Card>
  );
}

export default function AdminDashboardPage() {
  const [tenants, setTenants] = useState<Tenant[]>([]);
  const [billing, setBilling] = useState<BillingSummary | null>(null);
  const [geotab, setGeotab] = useState<Geotab[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    let cancelled = false;
    Promise.allSettled([
      apiFetch<Tenant[]>("/tenants"),
      apiFetch<BillingSummary>("/subscriptions/billing-summary"),
      apiFetch<Geotab[]>("/geotab/accounts"),
    ])
      .then(([tenantsResult, billingResult, geotabResult]) => {
        if (cancelled) return;
        const failures: string[] = [];
        if (tenantsResult.status === "fulfilled") setTenants(tenantsResult.value);
        else failures.push(tenantsResult.reason instanceof Error ? tenantsResult.reason.message : "tenants");
        if (billingResult.status === "fulfilled") setBilling(billingResult.value);
        else failures.push(billingResult.reason instanceof Error ? billingResult.reason.message : "billing");
        if (geotabResult.status === "fulfilled") setGeotab(geotabResult.value);
        else failures.push(geotabResult.reason instanceof Error ? geotabResult.reason.message : "geotab");
        if (failures.length) {
          setError(errorMessageForUi(new Error(failures[0]), "Failed to load"));
        }
      })
      .finally(() => {
        if (!cancelled) setLoading(false);
      });
    return () => {
      cancelled = true;
    };
  }, []);

  const connected = geotab.filter((g) => g.isConnected).length;

  const tableRows: DataTableRow[] = useMemo(
    () =>
      tenants.map((t) => ({
        id: t.id,
        header: t.name,
        type: "Customer",
        status: t.status === "ACTIVE" ? "Done" : "In Process",
        target: String(t._count?.users ?? 0),
        limit: String(t._count?.vehicles ?? 0),
        reviewer: t.status === "ACTIVE" ? "Eddie Lake" : "Assign reviewer",
        href: `/admin/customers/${t.id}`,
      })),
    [tenants],
  );

  return (
    <div className="flex flex-1 flex-col gap-4 md:gap-6">
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-lg font-semibold tracking-tight">Dashboard</h2>
          <p className="text-sm text-muted-foreground">Operational overview for Cleral</p>
        </div>
        <Button asChild size="sm">
          <Link href="/admin/customers">
            <PlusIcon />
            Quick Create
          </Link>
        </Button>
      </div>

      {error ? <ErrorState message={error} /> : null}

      {loading ? (
        <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
          {Array.from({ length: 4 }).map((_, i) => (
            <Skeleton key={i} className="h-36 rounded-xl" />
          ))}
        </div>
      ) : (
        <>
          <SectionCards
            tenants={tenants}
            billing={billing}
            connected={connected}
            geotabTotal={geotab.length}
          />
          <ChartAreaInteractive />
          <DataTable
            data={tableRows}
            addHref="/admin/customers"
            addLabel="Add Customer"
            tabs={[
              { value: "outline", label: "Outline" },
              { value: "past-performance", label: "Past Performance", badge: 3 },
              { value: "key-personnel", label: "Key Personnel", badge: 2 },
              { value: "focus-documents", label: "Focus Documents" },
            ]}
          />
        </>
      )}
    </div>
  );
}