// src/app/(dashboard)/dashboard/_components/SectorOwnerView.tsx
'use client';

import React from 'react';
import { Layers, Home, UserCheck, ShieldAlert } from 'lucide-react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { useDashboardMetrics } from '@/services/superAdmin/queries';

interface Props {
  userContext: any;
}

export default function SectorOwnerView({ userContext }: Props) {
  const { data: metrics, isError } = useDashboardMetrics();

  if (isError || !metrics?.widgets) return null;

  return (
    <div className="space-y-6 max-w-7xl mx-auto p-4 animate-in fade-in duration-300 select-none">
      <div className="border-b border-border/10 pb-5">
        <h1 className="text-lg font-bold tracking-tight text-foreground uppercase">
          Vertical Industry Segment Hub
        </h1>
        <p className="text-[11px] font-medium text-muted-foreground/80">
          Statewide market segment vector supervisor terminal.
          </p>
      </div>

      <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
        <Card className="shadow-sm rounded-xl border border-border/40 bg-card/40">
          <CardHeader className="flex flex-row items-center justify-between pb-2 space-y-0">
            <CardTitle className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Affiliated Hubs</CardTitle>
            <Home className="h-4 w-4 text-primary" />
          </CardHeader>
          <CardContent>
            <div className="text-xl font-bold text-foreground">{metrics.widgets.totalInstitutes}</div>
            <p className="text-[10px] text-muted-foreground/60 mt-0.5">Centers handling sector verticals</p>
          </CardContent>
        </Card>

        <Card className="shadow-sm rounded-xl border border-border/40 bg-card/40 border-l-success border-l-2">
          <CardHeader className="flex flex-row items-center justify-between pb-2 space-y-0">
            <CardTitle className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Certified Experts</CardTitle>
            <UserCheck className="h-4 w-4 text-success" />
          </CardHeader>
          <CardContent>
            {/* <div className="text-xl font-bold text-success">{metrics.widgets.activeAdvisors}</div> */}
            <p className="text-[10px] text-muted-foreground/60 mt-0.5">Fully authenticated sector advisors</p>
          </CardContent>
        </Card>

        <Card className="shadow-sm rounded-xl border border-border/40 bg-card/40 border-l-destructive border-l-2">
          <CardHeader className="flex flex-row items-center justify-between pb-2 space-y-0">
            <CardTitle className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">KYC Gate Blockers</CardTitle>
            <ShieldAlert className="h-4 w-4 text-destructive" />
          </CardHeader>
          <CardContent>
            <div className="text-xl font-bold text-destructive">{metrics.widgets.pendingApprovals}</div>
            <p className="text-[10px] text-muted-foreground/60 mt-0.5">Advisor applications awaiting review</p>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}