"use client";

import React, { useCallback, useEffect, useState } from "react";
import Link from "next/link";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import DataService from "@/config/axios";
import { tenantApiPath } from "@/lib/tenant-api";
import { Building2, Shield, UserPlus, Users } from "lucide-react";
import ClientWorkspaceLayout, {
  type ClientWorkspaceChildCtx,
} from "@/features/client/client-workspace-layout";

type DashboardStats = {
  users: number;
  properties: number;
  roles: number;
};

function ClientDashboardBody({ ctx }: { ctx: ClientWorkspaceChildCtx }) {
  const { tenantApiKey, tenantReady, isSuperAdmin } = ctx;
  const [stats, setStats] = useState<DashboardStats | null>(null);
  const [statsLoading, setStatsLoading] = useState(false);

  const loadStats = useCallback(async () => {
    if (!tenantReady) {
      setStats(null);
      return;
    }
    setStatsLoading(true);
    try {
      const res = await DataService.get(tenantApiPath(tenantApiKey, "/dashboard-stats"));
      const d = res.data?.data;
      if (d && typeof d.users === "number") {
        setStats({
          users: d.users,
          properties: d.properties,
          roles: d.roles,
        });
      } else {
        setStats(null);
      }
    } catch {
      setStats(null);
    } finally {
      setStatsLoading(false);
    }
  }, [tenantApiKey, tenantReady]);

  useEffect(() => {
    if (!tenantReady) return;
    loadStats();
  }, [tenantReady, loadStats]);

  if (!tenantReady) {
    return null;
  }

  return (
    <>
      {ctx.moduleBlockedProperty && (
        <p className="rounded-md border border-amber-200 bg-amber-50 p-3 text-sm text-amber-900">
          The Property module is not enabled for your organization. Property counts may be zero; open
          Users or Roles for full lists.
        </p>
      )}

      <div className="grid gap-4 sm:grid-cols-3">
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="flex items-center gap-2 text-base font-semibold">
              <Users className="size-5 text-primary" />
              Users
            </CardTitle>
            <CardDescription>Staff linked to this client</CardDescription>
          </CardHeader>
          <CardContent className="space-y-3">
            <p className="text-3xl font-semibold tabular-nums">
              {statsLoading ? "—" : stats?.users ?? "—"}
            </p>
            <Button variant="outline" size="sm" className="w-full" asChild>
              <Link href="/client/users">View all users</Link>
            </Button>
            {isSuperAdmin && (
              <Button variant="ghost" size="sm" className="w-full" asChild>
                <Link href="/super-admin/admin/users">
                  <UserPlus className="mr-2 size-4" />
                  Add user (admin)
                </Link>
              </Button>
            )}
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="flex items-center gap-2 text-base font-semibold">
              <Building2 className="size-5 text-primary" />
              Properties
            </CardTitle>
            <CardDescription>Buildings & sites for this client</CardDescription>
          </CardHeader>
          <CardContent className="space-y-3">
            <p className="text-3xl font-semibold tabular-nums">
              {statsLoading ? "—" : stats?.properties ?? "—"}
            </p>
            <Button variant="outline" size="sm" className="w-full" asChild>
              <Link href="/client/properties">View all properties</Link>
            </Button>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="flex items-center gap-2 text-base font-semibold">
              <Shield className="size-5 text-primary" />
              Roles
            </CardTitle>
            <CardDescription>Roles in use for this client</CardDescription>
          </CardHeader>
          <CardContent className="space-y-3">
            <p className="text-3xl font-semibold tabular-nums">
              {statsLoading ? "—" : stats?.roles ?? "—"}
            </p>
            <Button variant="outline" size="sm" className="w-full" asChild>
              <Link href="/client/roles">View all roles</Link>
            </Button>
            {isSuperAdmin && (
              <Button variant="ghost" size="sm" className="w-full" asChild>
                <Link href="/super-admin/admin/roles">
                  <Shield className="mr-2 size-4" />
                  Manage roles (admin)
                </Link>
              </Button>
            )}
          </CardContent>
        </Card>
      </div>
    </>
  );
}

export default function ClientDashboard() {
  return (
    <ClientWorkspaceLayout
      title="Client dashboard"
      barDescription="Summary for the selected API client. Open the sidebar for full listings."
    >
      {(ctx) => <ClientDashboardBody ctx={ctx} />}
    </ClientWorkspaceLayout>
  );
}