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

import React from 'react';
import { UserPlus, UserCheck, Target } from 'lucide-react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';

interface Props {
  userContext: any;
}

export default function CareerAdvisorView({ userContext }: Props) {
  // Use a fallback object layout configuration if server sync delays during mutations
  const defaultWidgets = { myLeads: 0, admissionsGenerated: 0, targetObjective: 45 };

  return (
    <div className="space-y-6 max-w-7xl mx-auto p-4 animate-in fade-in duration-300 select-none">
      
      {/* HEADER COMPONENT ROW */}
      <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">COUNSELLOR LOGFLOW</h1>
          <p className="text-[11px] font-medium text-muted-foreground/80">Direct Candidate Acquisition and Career Tracking Ledger.</p>
        </div>
        <Button className="h-8 rounded-lg px-3 text-xs font-semibold shadow-sm gap-1.5 transition-transform duration-150 active:scale-95">
          <span>Register Student</span>
        </Button>
      </div>

      {/* SYSTEM METRICS GRID SUMMARY MAP */}
      <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">My Allocated Leads</CardTitle>
            <UserPlus className="h-4 w-4 text-primary" />
          </CardHeader>
          <CardContent>
            <div className="text-xl font-bold text-foreground">{defaultWidgets.myLeads}</div>
            <p className="text-[10px] text-muted-foreground/60 mt-0.5">Active candidates under personal follow-up</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">My Converted Cohort</CardTitle>
            <UserCheck className="h-4 w-4 text-success" />
          </CardHeader>
          <CardContent>
            <div className="text-xl font-bold text-success">{defaultWidgets.admissionsGenerated}</div>
            <p className="text-[10px] text-muted-foreground/60 mt-0.5">Final certified training courses generated</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">Monthly Targets</CardTitle>
            <Target className="h-4 w-4 text-primary" />
          </CardHeader>
          <CardContent>
            <div className="text-xl font-bold text-foreground">{defaultWidgets.admissionsGenerated} / {defaultWidgets.targetObjective}</div>
            <p className="text-[10px] text-muted-foreground/60 mt-0.5">Dynamic performance threshold grade metric</p>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}