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

import React from 'react';
import { Layers, Home, UserCheck, Users, Map, Download, TrendingUp } from 'lucide-react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { useDashboardMetrics } from '@/services/superAdmin/queries';
import { dashboardApi } from '@/services/superAdmin/api';
import toast from 'react-hot-toast';

interface Props {
  userContext: any;
}

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

  const handleExport = () => {
    try {
      dashboardApi.exportPerformanceReport();
      toast.success("District Analytical Logs Dispatched.");
    } catch {
      toast.error("Export stream pipeline execution interrupted.");
    }
  };

  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="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 border-b border-border/10 pb-5">
        <div className="flex flex-col gap-0.5">
          <h1 className="text-lg font-bold tracking-tight text-foreground uppercase">
            District Controller Matrix
          </h1>
          <p className="text-[11px] font-medium text-muted-foreground/80">
            Regional operations supervisor terminal.
          </p>
        </div>
        <Button onClick={handleExport} variant="outline" className="h-8 text-xs font-semibold gap-1.5 border-border/40 hover:bg-muted">
          <Download className="h-3.5 w-3.5" /> Export District Dossier
        </Button>
      </div>

      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
        <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">Sectors Active</CardTitle>
            <Layers className="h-4 w-4 text-primary" />
          </CardHeader>
          <CardContent>
            <div className="text-xl font-bold text-foreground">{metrics.widgets.totalSectors}</div>
            <p className="text-[10px] text-muted-foreground/60 mt-0.5">Target Min Parameter: 15+</p>
          </CardContent>
        </Card>

        <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">Institutes Registered</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">Physical Center Operations Nodes</p>
          </CardContent>
        </Card>

        <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">Active Advisor Fleet</CardTitle>
            <UserCheck className="h-4 w-4 text-primary" />
          </CardHeader>
          <CardContent>
            <div className="text-xl font-bold text-foreground">{metrics.widgets.totalCareerAdvisors}</div>
            <p className="text-[10px] text-muted-foreground/60 mt-0.5">Assigned field deployment pool</p>
          </CardContent>
        </Card>

        <Card className="shadow-sm rounded-xl border border-border/40 bg-card/40 border-l-primary 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">Total Enrolled</CardTitle>
            <Users className="h-4 w-4 text-primary" />
          </CardHeader>
          <CardContent>
            <div className="text-xl font-bold text-foreground">{metrics.widgets.totalStudents}</div>
            <p className="text-[10px] text-muted-foreground/60 mt-0.5">District scale enrollment volume</p>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}