import React, { useState, useMemo } from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import {
  Users,
  Search,
  Plus,
  Edit2,
  Trash2,
  Filter,
  CheckCircle,
  AlertTriangle,
  FolderKanban,
  CheckSquare,
  ShieldCheck,
  RefreshCw,
  Sparkles,
  MapPin,
  FileCheck,
  Lock,
} from 'lucide-react';
import {
  getProjects,
  getProjectBeneficiaries,
  getBeneficiary,
  createBeneficiary,
  updateBeneficiary,
  getBeneficiaryOutcomes,
  getProjectOutcomes,
  createOutcome,
  updateOutcome,
  getProjectComplianceItems,
  getComplianceItem,
  createComplianceItem,
  updateComplianceItem,
} from '../services/api';
import { Modal } from '../components/ui/Modal';
import { useToast } from '../components/ui/Toast';
import { HelpTooltip } from '../components/ui/HelpTooltip';
import { ExportButton } from '../components/ui/ExportButton';
import { ExportColumn } from '../utils/exportUtils';
import { useTableSort, SortableTh } from '../utils/tableSort';
import { useRbac } from '../auth/rbac';
import { ApprovalStatusBadge, ComplianceStatusBadge } from '../components/ui/StatusBadge';
import { Beneficiary, ComplianceItem, Outcome, ApprovalStatus, ComplianceStatus } from '../types';
import { getApprovalStatusBadge, getComplianceStatusBadge, formatDate, APPROVAL_STATUS_OPTIONS, COMPLIANCE_STATUS_OPTIONS } from '../lib/formatters';

const beneficiarySchema = z.object({
  name: z.string().min(2, 'Beneficiary name required'),
  category: z.string().min(2, 'Category required'),
  location: z.string().min(2, 'Location required'),
  targetCount: z.coerce.number().min(1, 'Target count must be at least 1'),
  reachedCount: z.coerce.number().min(0, 'Reached count must be 0 or more'),
});

const complianceSchema = z.object({
  title: z.string().min(3, 'Compliance title required'),
  requirements: z.string().min(5, 'Requirements detail required'),
  status: z.coerce.number().optional(),
  beneficiaryId: z.string().optional(),
});

const outcomeSchema = z.object({
  name: z.string().min(3, 'Outcome name required'),
  description: z.string().min(5, 'Description required'),
  status: z.coerce.number().optional(),
  beneficiaryId: z.string().optional(),
});

type BeneficiaryFormValues = z.infer<typeof beneficiarySchema>;
type ComplianceFormValues = z.infer<typeof complianceSchema>;
type OutcomeFormValues = z.infer<typeof outcomeSchema>;

export const BeneficiariesPage: React.FC = () => {
  const queryClient = useQueryClient();
  const { success, error: toastError } = useToast();
  const { canAdd, canApprove, canExport, canApproveRecord, isMaker } = useRbac();

  const [selectedProjectId, setSelectedProjectId] = useState<string>('all');
  const [activeTab, setActiveTab] = useState<'beneficiaries' | 'compliance' | 'outcomes'>('beneficiaries');
  const [searchTerm, setSearchTerm] = useState('');
  const [categoryFilter, setCategoryFilter] = useState('all');
  const [compStatusFilter, setCompStatusFilter] = useState('all');

  // Outcomes tab filters
  const [outcomeSearchTerm, setOutcomeSearchTerm] = useState('');
  const [outcomeStatusFilter, setOutcomeStatusFilter] = useState('all');
  const [outcomeBenFilter, setOutcomeBenFilter] = useState('all');

  // Modal states
  const [isBenModalOpen, setIsBenModalOpen] = useState(false);
  const [editingBen, setEditingBen] = useState<Beneficiary | null>(null);

  const [isCompModalOpen, setIsCompModalOpen] = useState(false);
  const [editingComp, setEditingComp] = useState<ComplianceItem | null>(null);
  const [compTargetProjectId, setCompTargetProjectId] = useState<string>('');

  const [selectedBenForDetail, setSelectedBenForDetail] = useState<Beneficiary | null>(null);
  const [isDetailModalOpen, setIsDetailModalOpen] = useState(false);

  const [isOutcomeModalOpen, setIsOutcomeModalOpen] = useState(false);
  const [editingOutcome, setEditingOutcome] = useState<Outcome | null>(null);

  // Queries
  const { data: projects = [], isLoading: loadingProjects } = useQuery({
    queryKey: ['projects'],
    queryFn: () => getProjects(),
  });

  // Query beneficiaries across selected project or all projects
  const {
    data: beneficiaries = [],
    isLoading: loadingBens,
    refetch: refetchBens,
    isFetching: fetchingBens,
  } = useQuery({
    queryKey: ['beneficiaries', selectedProjectId, projects.map((p) => p.id).join(',')],
    queryFn: async (): Promise<Beneficiary[]> => {
      if (selectedProjectId !== 'all') {
        const bens = await getProjectBeneficiaries(selectedProjectId);
        return (bens || []).map((b) => ({ ...b, projectId: b.projectId || selectedProjectId }));
      }
      if (!projects || projects.length === 0) return [];
      const settled = await Promise.allSettled(
        projects.map(async (p) => {
          const bens = await getProjectBeneficiaries(p.id);
          return (bens || []).map((b) => ({ ...b, projectId: b.projectId || p.id }));
        })
      );
      const combined: Beneficiary[] = [];
      settled.forEach((res) => {
        if (res.status === 'fulfilled' && Array.isArray(res.value)) {
          combined.push(...res.value);
        }
      });
      return combined;
    },
    enabled: projects.length > 0,
  });

  // Query compliance items
  const {
    data: complianceItems = [],
    isLoading: loadingComps,
    isError: isCompsError,
    refetch: refetchComps,
    isFetching: fetchingComps,
  } = useQuery({
    queryKey: ['complianceItems', selectedProjectId, projects.map((p) => p.id).join(',')],
    queryFn: async (): Promise<ComplianceItem[]> => {
      if (selectedProjectId !== 'all') {
        const items = await getProjectComplianceItems(selectedProjectId);
        return (items || []).map((ci) => ({
          ...ci,
          projectId: ci.projectId || selectedProjectId,
        }));
      }
      if (!projects || projects.length === 0) return [];
      const settled = await Promise.allSettled(
        projects.map(async (p) => {
          const items = await getProjectComplianceItems(p.id);
          return (items || []).map((ci) => ({
            ...ci,
            projectId: ci.projectId || p.id,
          }));
        })
      );
      const combined: ComplianceItem[] = [];
      settled.forEach((res) => {
        if (res.status === 'fulfilled' && Array.isArray(res.value)) {
          combined.push(...res.value);
        }
      });
      return combined;
    },
    enabled: projects.length > 0,
  });

  // Query outcomes for selected beneficiary in inspector modal
  const { data: outcomes = [], refetch: refetchOutcomes } = useQuery({
    queryKey: ['outcomes', selectedBenForDetail?.id],
    queryFn: () => (selectedBenForDetail?.id ? getBeneficiaryOutcomes(selectedBenForDetail.id) : Promise.resolve([])),
    enabled: !!selectedBenForDetail?.id,
  });

  // Query all outcomes for the new Outcomes tab
  const {
    data: allOutcomes = [],
    isLoading: loadingOutcomesTab,
    refetch: refetchAllOutcomes,
    isFetching: fetchingOutcomesTab,
  } = useQuery({
    queryKey: ['allOutcomes', selectedProjectId, beneficiaries.map((b) => b.id).join(','), projects.map((p) => p.id).join(',')],
    queryFn: async (): Promise<(Outcome & { beneficiaryName?: string; projectName?: string })[]> => {
      const projMap = new Map<string, string>();
      projects.forEach((p) => projMap.set(String(p.id), p.name || 'Project'));

      const benMap = new Map<string, Beneficiary>();
      beneficiaries.forEach((b) => {
        benMap.set(String(b.id), b);
      });

      let rawOutcomes: Outcome[] = [];

      if (selectedProjectId !== 'all') {
        try {
          rawOutcomes = await getProjectOutcomes(selectedProjectId);
        } catch {
          rawOutcomes = [];
        }
        if (rawOutcomes.length === 0 && beneficiaries.length > 0) {
          const settled = await Promise.allSettled(beneficiaries.map((b) => getBeneficiaryOutcomes(b.id)));
          settled.forEach((res) => {
            if (res.status === 'fulfilled' && Array.isArray(res.value)) {
              rawOutcomes.push(...res.value);
            }
          });
        }
      } else {
        if (!projects || projects.length === 0) return [];
        const settled = await Promise.allSettled(
          projects.map(async (p) => {
            const list = await getProjectOutcomes(p.id);
            return list;
          })
        );
        settled.forEach((res) => {
          if (res.status === 'fulfilled' && Array.isArray(res.value)) {
            rawOutcomes.push(...res.value);
          }
        });

        if (rawOutcomes.length === 0 && beneficiaries.length > 0) {
          const benSettled = await Promise.allSettled(beneficiaries.map((b) => getBeneficiaryOutcomes(b.id)));
          benSettled.forEach((res) => {
            if (res.status === 'fulfilled' && Array.isArray(res.value)) {
              rawOutcomes.push(...res.value);
            }
          });
        }
      }

      // Deduplicate and enrich
      const seen = new Set<string>();
      const enriched: (Outcome & { beneficiaryName?: string; projectName?: string })[] = [];
      for (const o of rawOutcomes) {
        const idKey = String(o.id);
        if (seen.has(idKey)) continue;
        seen.add(idKey);

        const ben = benMap.get(String(o.beneficiaryId));
        const benName = ben?.name || `Beneficiary #${o.beneficiaryId}`;
        const projName = ben?.projectId
          ? (projMap.get(String(ben.projectId)) || 'Project')
          : (selectedProjectId !== 'all' ? (projMap.get(selectedProjectId) || 'Project') : 'Project');

        enriched.push({
          ...o,
          beneficiaryName: benName,
          projectName: projName,
        });
      }

      return enriched;
    },
    enabled: projects.length > 0,
  });

  // Forms
  const benForm = useForm<BeneficiaryFormValues>({
    resolver: zodResolver(beneficiarySchema),
    defaultValues: { name: '', category: 'Youth & Skills', location: 'National', targetCount: 100, reachedCount: 0 },
  });

  const compForm = useForm<ComplianceFormValues>({
    resolver: zodResolver(complianceSchema),
    defaultValues: { title: '', requirements: '', status: ApprovalStatus.Pending },
  });

  const outcomeForm = useForm<OutcomeFormValues>({
    resolver: zodResolver(outcomeSchema),
    defaultValues: { name: '', description: '', beneficiaryId: '' },
  });

  // Mutations
  const createBenMutation = useMutation({
    mutationFn: (vals: BeneficiaryFormValues) => {
      const targetProjId = selectedProjectId !== 'all' ? selectedProjectId : projects[0]?.id;
      if (!targetProjId) throw new Error('No project selected');
      return createBeneficiary({
        projectId: targetProjId,
        name: vals.name,
        location: vals.location,
        category: vals.category,
        targetCount: vals.targetCount,
        reachedCount: vals.reachedCount,
      });
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['beneficiaries'] });
      setIsBenModalOpen(false);
      benForm.reset();
      success('Beneficiary Registered', 'New project beneficiary profile successfully created.');
    },
    onError: (err: unknown) => toastError('Registration Failed', err),
  });

  const updateBenMutation = useMutation({
    mutationFn: (vals: BeneficiaryFormValues) => {
      if (!editingBen) throw new Error('No beneficiary selected');
      return updateBeneficiary({
        beneficiaryId: editingBen.id,
        name: vals.name,
        location: vals.location,
        category: vals.category,
        targetCount: vals.targetCount,
        reachedCount: vals.reachedCount,
      });
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['beneficiaries'] });
      setIsBenModalOpen(false);
      setEditingBen(null);
      benForm.reset();
      success('Beneficiary Updated', 'Beneficiary details and targets updated.');
    },
    onError: (err: unknown) => toastError('Update Failed', err),
  });

  const createCompMutation = useMutation({
    mutationFn: (vals: ComplianceFormValues) => {
      const targetProjId = compTargetProjectId || (selectedProjectId !== 'all' ? selectedProjectId : projects[0]?.id);
      if (!targetProjId) throw new Error('No project selected');
      return createComplianceItem({
        projectId: targetProjId,
        title: vals.title,
        requirements: vals.requirements,
        status: vals.status ?? ComplianceStatus.NotMet,
        beneficiaryId: vals.beneficiaryId && vals.beneficiaryId !== 'none' ? Number(vals.beneficiaryId) : null,
      });
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['complianceItems'] });
      setIsCompModalOpen(false);
      compForm.reset();
      success('Compliance Requirement Logged', 'Compliance item registered for project beneficiaries.');
    },
    onError: (err: unknown) => toastError('Creation Failed', err),
  });

  const updateCompMutation = useMutation({
    mutationFn: (vals: ComplianceFormValues) => {
      if (!editingComp) throw new Error('No item selected');
      if (
        (vals.status === ComplianceStatus.Met || vals.status === ComplianceStatus.Exceeded) &&
        isMaker(editingComp.createdBy)
      ) {
        throw new Error('Maker-Checker Violation: You created this compliance item and cannot approve it.');
      }
      return updateComplianceItem({
        complianceItemId: editingComp.id,
        title: vals.title,
        requirements: vals.requirements,
        status: vals.status ?? ComplianceStatus.NotMet,
        beneficiaryId: vals.beneficiaryId && vals.beneficiaryId !== 'none' ? Number(vals.beneficiaryId) : null,
      });
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['complianceItems'] });
      setIsCompModalOpen(false);
      setEditingComp(null);
      compForm.reset();
      success('Compliance Item Updated', 'Status and requirement record updated.');
    },
    onError: (err: unknown) => toastError('Update Failed', err),
  });

  const createOutcomeMutation = useMutation({
    mutationFn: (vals: OutcomeFormValues) => {
      const targetBenId = vals.beneficiaryId || selectedBenForDetail?.id;
      if (!targetBenId) throw new Error('No beneficiary selected');
      return createOutcome({
        beneficiaryId: targetBenId,
        name: vals.name,
        description: vals.description,
        status: vals.status ?? ComplianceStatus.NotMet,
      });
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['outcomes'] });
      queryClient.invalidateQueries({ queryKey: ['allOutcomes'] });
      queryClient.invalidateQueries({ queryKey: ['beneficiaryOutcomes'] });
      refetchOutcomes();
      refetchAllOutcomes();
      setIsOutcomeModalOpen(false);
      setEditingOutcome(null);
      outcomeForm.reset();
      success('Outcome Logged', 'Beneficiary outcome and impact metric registered.');
    },
    onError: (err: unknown) => toastError('Failed to Record Outcome', err),
  });

  const updateOutcomeMutation = useMutation({
    mutationFn: (vals: OutcomeFormValues) => {
      if (!editingOutcome) throw new Error('No outcome selected for update');
      if (
        (vals.status === ComplianceStatus.Met || vals.status === ComplianceStatus.Exceeded) &&
        isMaker(editingOutcome.createdBy)
      ) {
        throw new Error('Maker-Checker Violation: You created this outcome record and cannot approve or certify fulfillment.');
      }
      return updateOutcome({
        outcomeId: editingOutcome.id,
        name: vals.name,
        description: vals.description,
        status: vals.status ?? ComplianceStatus.NotMet,
      });
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['outcomes'] });
      queryClient.invalidateQueries({ queryKey: ['allOutcomes'] });
      queryClient.invalidateQueries({ queryKey: ['beneficiaryOutcomes'] });
      refetchOutcomes();
      refetchAllOutcomes();
      setIsOutcomeModalOpen(false);
      setEditingOutcome(null);
      outcomeForm.reset();
      success('Outcome Updated', 'Beneficiary outcome and impact metric updated.');
    },
    onError: (err: unknown) => toastError('Failed to Update Outcome', err),
  });

  // Filtered & Sorted Beneficiaries
  const filteredBens = useMemo(() => {
    return beneficiaries.filter((b) => {
      const matchesSearch =
        !searchTerm.trim() ||
        (b.name && b.name.toLowerCase().includes(searchTerm.toLowerCase())) ||
        (b.location && b.location.toLowerCase().includes(searchTerm.toLowerCase()));
      const matchesCat = categoryFilter === 'all' || b.category === categoryFilter;
      return matchesSearch && matchesCat;
    });
  }, [beneficiaries, searchTerm, categoryFilter]);

  const { sortedData: sortedBens, sortColumn: benSortCol, sortDirection: benSortDir, handleSort: handleBenSort } =
    useTableSort(filteredBens);

  // Filtered & Sorted Compliance Items
  const filteredComps = useMemo(() => {
    return complianceItems.filter((c) => {
      const matchesSearch =
        !searchTerm.trim() ||
        (c.title && c.title.toLowerCase().includes(searchTerm.toLowerCase())) ||
        (c.requirements && c.requirements.toLowerCase().includes(searchTerm.toLowerCase()));
      const matchesStatus =
        compStatusFilter === 'all' ||
        (compStatusFilter === 'approved' && c.status === ApprovalStatus.Approved) ||
        (compStatusFilter === 'pending' && c.status !== ApprovalStatus.Approved);
      return matchesSearch && matchesStatus;
    });
  }, [complianceItems, searchTerm, compStatusFilter]);

  const { sortedData: sortedComps, sortColumn: compSortCol, sortDirection: compSortDir, handleSort: handleCompSort } =
    useTableSort(filteredComps);

  // Filtered & Sorted Outcomes
  const filteredOutcomes = useMemo(() => {
    return allOutcomes.filter((o) => {
      const term = outcomeSearchTerm.toLowerCase().trim();
      const matchesSearch =
        !term ||
        (o.name && o.name.toLowerCase().includes(term)) ||
        (o.description && o.description.toLowerCase().includes(term)) ||
        (o.beneficiaryName && o.beneficiaryName.toLowerCase().includes(term));

      const matchesStatus =
        outcomeStatusFilter === 'all' ||
        String(o.status) === outcomeStatusFilter ||
        (outcomeStatusFilter === 'met' && (Number(o.status) === ComplianceStatus.Met || Number(o.status) === ComplianceStatus.Exceeded)) ||
        (outcomeStatusFilter === 'notMet' && Number(o.status) === ComplianceStatus.NotMet);

      const matchesBen = outcomeBenFilter === 'all' || String(o.beneficiaryId) === outcomeBenFilter;

      return matchesSearch && matchesStatus && matchesBen;
    });
  }, [allOutcomes, outcomeSearchTerm, outcomeStatusFilter, outcomeBenFilter]);

  const {
    sortedData: sortedOutcomes,
    sortColumn: outcomeSortCol,
    sortDirection: outcomeSortDir,
    handleSort: handleOutcomeSort,
  } = useTableSort(filteredOutcomes);

  // Metrics
  const totalTarget = beneficiaries.reduce((acc, b) => acc + (b.targetCount || 0), 0);
  const totalReached = beneficiaries.reduce((acc, b) => acc + (b.reachedCount || 0), 0);
  const reachPercentage = totalTarget > 0 ? Math.min(100, Math.round((totalReached / totalTarget) * 100)) : 0;
  const verifiedCompCount = complianceItems.filter((c) => c.status === ApprovalStatus.Approved).length;
  const metOutcomesCount = useMemo(
    () => allOutcomes.filter((o) => Number(o.status) === ComplianceStatus.Met || Number(o.status) === ComplianceStatus.Exceeded).length,
    [allOutcomes]
  );

  // Exports
  const benExportColumns: ExportColumn<Beneficiary>[] = [
    { header: 'Beneficiary Name', key: 'name' },
    { header: 'Category', key: 'category' },
    { header: 'Location', key: 'location' },
    { header: 'Target Population', key: 'targetCount' },
    { header: 'Reached Population', key: 'reachedCount' },
  ];

  const compExportColumns: ExportColumn<ComplianceItem>[] = [
    {
      header: 'Project',
      key: 'projectId',
      format: (val) => projects.find((p) => String(p.id) === String(val))?.name || 'Project',
    },
    { header: 'Compliance Requirement', key: 'title' },
    { header: 'Requirements Detail', key: 'requirements' },
    { header: 'Status', key: 'status', format: (val) => (val === ApprovalStatus.Approved ? 'Approved' : 'Pending Review') },
  ];

  const outcomeExportColumns: ExportColumn<Outcome & { beneficiaryName?: string; projectName?: string }>[] = [
    { header: 'Outcome / Metric', key: 'name' },
    { header: 'Beneficiary Cohort', key: 'beneficiaryName' },
    { header: 'Project', key: 'projectName' },
    { header: 'Impact Description', key: 'description' },
    {
      header: 'Fulfillment Status',
      key: 'status',
      format: (val) => {
        const s = Number(val);
        if (s === ComplianceStatus.Met) return 'Met';
        if (s === ComplianceStatus.Exceeded) return 'Exceeded';
        return 'Not Met';
      },
    },
    { header: 'Date Recorded', key: 'createdAt', format: (val) => (val ? formatDate(val) : '') },
  ];

  const handleOpenEditBen = async (b: Beneficiary) => {
    try {
      const fresh = await getBeneficiary(b.id);
      setEditingBen(fresh);
      benForm.reset({
        name: fresh.name || '',
        category: fresh.category || 'General',
        location: fresh.location || '',
        targetCount: fresh.targetCount || 0,
        reachedCount: fresh.reachedCount || 0,
      });
      setIsBenModalOpen(true);
    } catch {
      setEditingBen(b);
      benForm.reset({
        name: b.name || '',
        category: b.category || 'General',
        location: b.location || '',
        targetCount: b.targetCount || 0,
        reachedCount: b.reachedCount || 0,
      });
      setIsBenModalOpen(true);
    }
  };

  const handleOpenEditComp = async (c: ComplianceItem) => {
    try {
      const fresh = await getComplianceItem(c.id);
      setEditingComp(fresh);
      compForm.reset({
        title: fresh.title || '',
        requirements: fresh.requirements || '',
        status: fresh.status ?? ComplianceStatus.NotMet,
        beneficiaryId: fresh.beneficiaryId ? String(fresh.beneficiaryId) : 'none',
      });
      setIsCompModalOpen(true);
    } catch {
      setEditingComp(c);
      compForm.reset({
        title: c.title || '',
        requirements: c.requirements || '',
        status: c.status ?? ComplianceStatus.NotMet,
        beneficiaryId: c.beneficiaryId ? String(c.beneficiaryId) : 'none',
      });
      setIsCompModalOpen(true);
    }
  };

  const handleOpenAddOutcome = (ben?: Beneficiary | null) => {
    setEditingOutcome(null);
    outcomeForm.reset({
      name: '',
      description: '',
      status: ComplianceStatus.NotMet,
      beneficiaryId: ben?.id ? String(ben.id) : (selectedBenForDetail?.id ? String(selectedBenForDetail.id) : (beneficiaries[0]?.id ? String(beneficiaries[0].id) : '')),
    });
    setIsOutcomeModalOpen(true);
  };

  const handleOpenEditOutcome = (o: Outcome) => {
    setEditingOutcome(o);
    outcomeForm.reset({
      name: o.name || '',
      description: o.description || '',
      status: o.status ?? ComplianceStatus.NotMet,
      beneficiaryId: o.beneficiaryId ? String(o.beneficiaryId) : '',
    });
    setIsOutcomeModalOpen(true);
  };

  const onSubmitOutcome = (data: OutcomeFormValues) => {
    if (editingOutcome) {
      updateOutcomeMutation.mutate(data);
    } else {
      const targetBenId = data.beneficiaryId || selectedBenForDetail?.id;
      if (!targetBenId) {
        toastError('Missing Beneficiary', 'Please select a beneficiary cohort for this outcome.');
        return;
      }
      createOutcomeMutation.mutate({ ...data, beneficiaryId: String(targetBenId) });
    }
  };

  return (
    <div className="space-y-8 pb-16">
      {/* Header Banner */}
      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 bg-gradient-to-r from-[#0d1322] via-[#0f172a] to-[#0d1322] p-6 sm:p-8 rounded-3xl border border-slate-800/80 shadow-2xl relative overflow-hidden">
        <div className="absolute -right-10 -bottom-10 w-60 h-60 bg-blue-600/10 rounded-full blur-3xl pointer-events-none" />
        <div className="space-y-2 relative z-10">
          <div className="flex items-center gap-3">
            <div className="h-12 w-12 rounded-2xl bg-blue-600/20 border border-blue-500/30 flex items-center justify-center text-blue-400 shadow-lg shadow-blue-500/10">
              <Users className="w-6 h-6" />
            </div>
            <div>
              <div className="flex items-center gap-2.5 flex-wrap">
                <h1 className="text-2xl sm:text-3xl font-bold tracking-tight text-white flex items-center gap-2.5">
                  Beneficiaries, Compliance & Outcomes
                </h1>
                <HelpTooltip
                  title="Beneficiary & Outcomes Framework"
                  content="Record target population demographics, track real-world participant reach vs targets, monitor statutory compliance records, and verify impact outcomes across projects."
                  size="sm"
                  placement="bottom"
                />
              </div>
              <p className="text-xs sm:text-sm text-slate-400 mt-1">
                Manage target recipient demographics, track reached counts, monitor statutory compliance items, and record impact metrics.
              </p>
            </div>
          </div>
        </div>
      </div>

      {/* KPI Cards */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4">
        <div className="bg-[#0f1523]/80 backdrop-blur-md p-5 rounded-2xl border border-slate-800/80 shadow-xl space-y-2">
          <div className="flex items-center justify-between text-slate-400">
            <div className="flex items-center gap-1.5">
              <span className="text-xs font-semibold uppercase tracking-wider">Beneficiary Cohorts</span>
              <HelpTooltip
                title="Beneficiary Cohorts"
                content="Registered demographic stakeholder groups receiving direct programmatic support."
                size="sm"
              />
            </div>
            <Users className="w-4 h-4 text-blue-400" />
          </div>
          <p className="text-2xl font-bold text-white">{beneficiaries.length}</p>
          <p className="text-[11px] text-slate-400">Registered target stakeholder groups</p>
        </div>

        <div className="bg-[#0f1523]/80 backdrop-blur-md p-5 rounded-2xl border border-slate-800/80 shadow-xl space-y-2">
          <div className="flex items-center justify-between text-slate-400">
            <div className="flex items-center gap-1.5">
              <span className="text-xs font-semibold uppercase tracking-wider">Total Target Reach</span>
              <HelpTooltip
                title="Target Reach"
                content="Total planned participant headcount agreed upon across project targets."
                size="sm"
              />
            </div>
            <Users className="w-4 h-4 text-indigo-400" />
          </div>
          <p className="text-2xl font-bold text-white">{totalTarget.toLocaleString()}</p>
          <p className="text-[11px] text-slate-400">Planned participant headcount</p>
        </div>

        <div className="bg-[#0f1523]/80 backdrop-blur-md p-5 rounded-2xl border border-slate-800/80 shadow-xl space-y-2">
          <div className="flex items-center justify-between text-slate-400">
            <div className="flex items-center gap-1.5">
              <span className="text-xs font-semibold uppercase tracking-wider">Actual Reached</span>
              <HelpTooltip
                title="Actual Reach"
                content="Verified real-world participant reach to date across active projects."
                size="sm"
              />
            </div>
            <CheckCircle className="w-4 h-4 text-emerald-400" />
          </div>
          <div className="flex items-baseline gap-2">
            <p className="text-2xl font-bold text-emerald-400">{totalReached.toLocaleString()}</p>
            <span className="text-xs font-medium text-slate-400">({reachPercentage}%)</span>
          </div>
          <p className="text-[11px] text-slate-400">Verified participant reach to date</p>
        </div>

        <div className="bg-[#0f1523]/80 backdrop-blur-md p-5 rounded-2xl border border-slate-800/80 shadow-xl space-y-2">
          <div className="flex items-center justify-between text-slate-400">
            <div className="flex items-center gap-1.5">
              <span className="text-xs font-semibold uppercase tracking-wider">Compliance Items</span>
              <HelpTooltip
                title="Compliance Items"
                content="Statutory, environmental, labor, and financial audit verification requirements."
                size="sm"
              />
            </div>
            <ShieldCheck className="w-4 h-4 text-cyan-400" />
          </div>
          <div className="flex items-baseline gap-2">
            <p className="text-2xl font-bold text-cyan-400">{complianceItems.length}</p>
            <span className="text-xs font-medium text-slate-400">({verifiedCompCount} Satisfied)</span>
          </div>
          <p className="text-[11px] text-slate-400">Statutory & audit verification records</p>
        </div>

        <div className="bg-[#0f1523]/80 backdrop-blur-md p-5 rounded-2xl border border-slate-800/80 shadow-xl space-y-2">
          <div className="flex items-center justify-between text-slate-400">
            <div className="flex items-center gap-1.5">
              <span className="text-xs font-semibold uppercase tracking-wider">Recorded Outcomes</span>
              <HelpTooltip
                title="Recorded Outcomes"
                content="Real-world participant outcomes and impact metrics registered across project beneficiaries."
                size="sm"
              />
            </div>
            <Sparkles className="w-4 h-4 text-indigo-400" />
          </div>
          <div className="flex items-baseline gap-2">
            <p className="text-2xl font-bold text-indigo-400">{allOutcomes.length}</p>
            <span className="text-xs font-medium text-slate-400">({metOutcomesCount} Met)</span>
          </div>
          <p className="text-[11px] text-slate-400">Recorded impact metrics & achievements</p>
        </div>
      </div>

      {/* Tabs */}
      <div className="space-y-4">
        <div className="flex border-b border-slate-800 bg-[#0d121f]/80 px-2 sm:px-4 rounded-2xl backdrop-blur-sm overflow-x-auto gap-2">
          <button
            onClick={() => setActiveTab('beneficiaries')}
            className={`py-3.5 px-4 text-xs font-semibold border-b-2 transition-colors flex items-center gap-2 cursor-pointer whitespace-nowrap ${
              activeTab === 'beneficiaries'
                ? 'border-blue-500 text-blue-400'
                : 'border-transparent text-slate-400 hover:text-slate-200'
            }`}
          >
            <Users className="w-4 h-4" />
            <span>Beneficiaries Register ({beneficiaries.length})</span>
          </button>

          <button
            onClick={() => setActiveTab('compliance')}
            className={`py-3.5 px-4 text-xs font-semibold border-b-2 transition-colors flex items-center gap-2 cursor-pointer whitespace-nowrap ${
              activeTab === 'compliance'
                ? 'border-blue-500 text-blue-400'
                : 'border-transparent text-slate-400 hover:text-slate-200'
            }`}
          >
            <CheckSquare className="w-4 h-4" />
            <span>Compliance Requirements ({complianceItems.length})</span>
          </button>

          <button
            onClick={() => setActiveTab('outcomes')}
            className={`py-3.5 px-4 text-xs font-semibold border-b-2 transition-colors flex items-center gap-2 cursor-pointer whitespace-nowrap ${
              activeTab === 'outcomes'
                ? 'border-indigo-500 text-indigo-400'
                : 'border-transparent text-slate-400 hover:text-slate-200'
            }`}
          >
            <Sparkles className="w-4 h-4" />
            <span>Beneficiary Outcomes ({allOutcomes.length})</span>
          </button>
        </div>

        {/* Tab 1: Beneficiaries Tab Toolbar & Content */}
        {activeTab === 'beneficiaries' && (
          <div className="space-y-4">
            <div className="flex flex-col lg:flex-row items-stretch lg:items-center justify-between gap-3 bg-[#0d121f]/60 p-3.5 rounded-2xl border border-slate-800/80">
              <div className="flex items-center gap-2.5 flex-wrap flex-1">
                {/* Search */}
                <div className="relative flex-1 min-w-[200px] max-w-sm">
                  <Search className="w-3.5 h-3.5 absolute left-3 top-2.5 text-slate-400" />
                  <input
                    type="text"
                    placeholder="Search name, location..."
                    value={searchTerm}
                    onChange={(e) => setSearchTerm(e.target.value)}
                    className="w-full bg-slate-900 border border-slate-800 rounded-xl pl-8 pr-3 py-1.5 text-xs text-white focus:outline-none focus:border-blue-500 shadow-xs"
                  />
                </div>

                {/* Category Filter */}
                <div className="flex items-center gap-1.5 text-xs text-slate-400">
                  <select
                    value={categoryFilter}
                    onChange={(e) => setCategoryFilter(e.target.value)}
                    className="bg-slate-900 border border-slate-800 rounded-xl px-3 py-1.5 text-xs text-white focus:outline-none focus:border-blue-500"
                  >
                    <option value="all">All Categories</option>
                    <option value="Youth & Skills">Youth & Skills</option>
                    <option value="Women-Led">Women-Led</option>
                    <option value="SME / Enterprise">SME / Enterprise</option>
                    <option value="Agriculture & Rural">Agriculture & Rural</option>
                    <option value="Healthcare & Community">Healthcare & Community</option>
                    <option value="Education">Education</option>
                    <option value="General">General</option>
                  </select>
                </div>

                {/* Project Selector */}
                <div className="flex items-center gap-1.5 text-xs text-slate-400">
                  <FolderKanban className="w-3.5 h-3.5 text-blue-400" />
                  <select
                    value={selectedProjectId}
                    onChange={(e) => setSelectedProjectId(e.target.value)}
                    className="bg-slate-900 border border-slate-800 rounded-xl px-3 py-1.5 text-xs text-white focus:outline-none focus:border-blue-500 max-w-[180px] truncate"
                  >
                    <option value="all">All Projects</option>
                    {projects.map((p) => (
                      <option key={p.id} value={p.id}>
                        {p.name}
                      </option>
                    ))}
                  </select>
                </div>
              </div>

              {/* Actions: Refresh, Export, Register */}
              <div className="flex items-center gap-2 flex-wrap justify-end">
                <button
                  type="button"
                  onClick={() => {
                    refetchBens();
                    success('Refreshed', 'Beneficiaries register updated from API.');
                  }}
                  disabled={fetchingBens}
                  className="flex items-center gap-1.5 px-3 py-1.5 rounded-xl text-xs font-semibold bg-slate-900 text-slate-300 hover:text-white border border-slate-800 hover:bg-slate-800 transition cursor-pointer disabled:opacity-50"
                  title="Force refresh beneficiaries"
                >
                  <RefreshCw className={`w-3.5 h-3.5 text-blue-400 ${fetchingBens ? 'animate-spin' : ''}`} />
                  <span>Refresh</span>
                </button>

                <ExportButton
                  claim="beneficiaries"
                  data={sortedBens}
                  columns={benExportColumns}
                  filename={`project_beneficiaries_${new Date().toISOString().split('T')[0]}`}
                  title="Beneficiaries Register"
                />

                {canAdd('beneficiaries') && (
                  <button
                    onClick={() => {
                      setEditingBen(null);
                      benForm.reset({ name: '', category: 'Youth & Skills', location: 'National', targetCount: 100, reachedCount: 0 });
                      setIsBenModalOpen(true);
                    }}
                    className="flex items-center gap-1.5 px-3.5 py-1.5 rounded-xl text-xs font-semibold bg-gradient-to-r from-blue-600 to-indigo-600 text-white hover:from-blue-500 hover:to-indigo-500 shadow-md shadow-blue-600/25 transition cursor-pointer"
                  >
                    <Plus className="w-3.5 h-3.5" />
                    <span>Register Beneficiary</span>
                  </button>
                )}
              </div>
            </div>

            <div className="bg-[#0f1523]/80 rounded-2xl border border-slate-800/80 shadow-lg backdrop-blur-sm overflow-hidden">
              <div className="overflow-x-auto">
                <table className="w-full text-left text-xs border-collapse">
                  <thead>
                    <tr className="bg-[#0d121f]/95 border-b border-slate-800/80 text-slate-400 uppercase tracking-wider font-semibold text-[11px]">
                      <SortableTh column="name" currentColumn={benSortCol} direction={benSortDir} onSort={handleBenSort} className="py-3.5 px-5 whitespace-nowrap">
                        Beneficiary / Cohort
                      </SortableTh>
                      <SortableTh column="category" currentColumn={benSortCol} direction={benSortDir} onSort={handleBenSort} className="py-3.5 px-4 whitespace-nowrap">
                        Category
                      </SortableTh>
                      <SortableTh column="location" currentColumn={benSortCol} direction={benSortDir} onSort={handleBenSort} className="py-3.5 px-4 whitespace-nowrap">
                        Location
                      </SortableTh>
                      <SortableTh column="targetCount" currentColumn={benSortCol} direction={benSortDir} onSort={handleBenSort} className="py-3.5 px-4 whitespace-nowrap">
                        Target Headcount
                      </SortableTh>
                      <SortableTh column="reachedCount" currentColumn={benSortCol} direction={benSortDir} onSort={handleBenSort} className="py-3.5 px-4 whitespace-nowrap">
                        Reached Headcount
                      </SortableTh>
                      <th className="py-3.5 px-4 font-semibold whitespace-nowrap">Reach Progress</th>
                      <th className="py-3.5 px-5 text-right font-medium whitespace-nowrap">Actions</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-slate-800/60">
                    {loadingBens ? (
                      <tr>
                        <td colSpan={7} className="py-12 text-center text-slate-400">
                          <div className="flex flex-col items-center gap-2">
                            <div className="w-6 h-6 border-2 border-blue-500 border-t-transparent rounded-full animate-spin" />
                            <span>Loading beneficiaries...</span>
                          </div>
                        </td>
                      </tr>
                    ) : sortedBens.length === 0 ? (
                      <tr>
                        <td colSpan={7} className="py-12 text-center text-slate-400">
                          No beneficiaries recorded for this project.
                        </td>
                      </tr>
                    ) : (
                      sortedBens.map((b) => {
                        const prog = b.targetCount && b.targetCount > 0 ? Math.round(((b.reachedCount || 0) / b.targetCount) * 100) : 0;
                        return (
                          <tr key={b.id} className="hover:bg-slate-800/40 transition-colors">
                            <td className="py-3.5 px-5 whitespace-nowrap font-semibold text-white">
                              <div className="flex items-center gap-2">
                                <Users className="w-3.5 h-3.5 text-blue-400 shrink-0" />
                                <span>{b.name}</span>
                              </div>
                            </td>
                            <td className="py-3.5 px-4 whitespace-nowrap text-slate-300">
                              <span className="bg-slate-800/80 px-2 py-0.5 rounded-md border border-slate-700/60 text-[11px]">
                                {b.category || 'General'}
                              </span>
                            </td>
                            <td className="py-3.5 px-4 whitespace-nowrap text-slate-300">
                              <div className="flex items-center gap-1.5 text-slate-400">
                                <MapPin className="w-3 h-3 text-slate-500" />
                                <span>{b.location || 'Not Specified'}</span>
                              </div>
                            </td>
                            <td className="py-3.5 px-4 whitespace-nowrap font-medium text-slate-200">{(b.targetCount || 0).toLocaleString()}</td>
                            <td className="py-3.5 px-4 whitespace-nowrap font-bold text-emerald-400">{(b.reachedCount || 0).toLocaleString()}</td>
                            <td className="py-3.5 px-4 whitespace-nowrap">
                              <div className="flex items-center gap-2 max-w-[140px]">
                                <div className="flex-1 bg-slate-800 h-1.5 rounded-full overflow-hidden">
                                  <div className="bg-emerald-500 h-full rounded-full" style={{ width: `${Math.min(100, prog)}%` }} />
                                </div>
                                <span className="text-[11px] font-mono text-slate-400">{prog}%</span>
                              </div>
                            </td>
                            <td className="py-3.5 px-5 text-right whitespace-nowrap space-x-2">
                              <button
                                onClick={() => {
                                  setSelectedBenForDetail(b);
                                  setIsDetailModalOpen(true);
                                }}
                                className="px-2.5 py-1 text-xs font-medium text-blue-400 hover:text-blue-300 bg-blue-950/40 hover:bg-blue-900/40 rounded-lg border border-blue-800/40 transition cursor-pointer"
                              >
                                Compliance & Outcomes
                              </button>
                              <button
                                onClick={() => handleOpenEditBen(b)}
                                className="p-1 text-slate-400 hover:text-white hover:bg-slate-800 rounded-lg transition cursor-pointer"
                                title="Edit beneficiary"
                              >
                                <Edit2 className="w-3.5 h-3.5" />
                              </button>
                            </td>
                          </tr>
                        );
                      })
                    )}
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        )}

        {/* Tab 2: Compliance Items Table */}
        {activeTab === 'compliance' && (
          <div className="space-y-4">
            <div className="flex flex-col lg:flex-row items-stretch lg:items-center justify-between gap-3 bg-[#0d121f]/60 p-3.5 rounded-2xl border border-slate-800/80">
              <div className="flex items-center gap-2.5 flex-wrap flex-1">
                {/* Search */}
                <div className="relative flex-1 min-w-[200px] max-w-sm">
                  <Search className="w-3.5 h-3.5 absolute left-3 top-2.5 text-slate-400" />
                  <input
                    type="text"
                    placeholder="Search requirement or title..."
                    value={searchTerm}
                    onChange={(e) => setSearchTerm(e.target.value)}
                    className="w-full bg-slate-900 border border-slate-800 rounded-xl pl-8 pr-3 py-1.5 text-xs text-white focus:outline-none focus:border-blue-500 shadow-xs"
                  />
                </div>

                {/* Status Filter */}
                <div className="flex items-center gap-1.5 text-xs text-slate-400">
                  <select
                    value={compStatusFilter}
                    onChange={(e) => setCompStatusFilter(e.target.value)}
                    className="bg-slate-900 border border-slate-800 rounded-xl px-3 py-1.5 text-xs text-white focus:outline-none focus:border-blue-500"
                  >
                    <option value="all">All Verification Statuses</option>
                    <option value="approved">Approved & Satisfied</option>
                    <option value="pending">Pending Review</option>
                  </select>
                </div>

                {/* Project Selector */}
                <div className="flex items-center gap-1.5 text-xs text-slate-400">
                  <FolderKanban className="w-3.5 h-3.5 text-blue-400" />
                  <select
                    value={selectedProjectId}
                    onChange={(e) => setSelectedProjectId(e.target.value)}
                    className="bg-slate-900 border border-slate-800 rounded-xl px-3 py-1.5 text-xs text-white focus:outline-none focus:border-blue-500 max-w-[180px] truncate"
                  >
                    <option value="all">All Projects</option>
                    {projects.map((p) => (
                      <option key={p.id} value={p.id}>
                        {p.name}
                      </option>
                    ))}
                  </select>
                </div>
              </div>

              {/* Actions: Refresh, Export, Log Compliance Item */}
              <div className="flex items-center gap-2 flex-wrap justify-end">
                <button
                  type="button"
                  onClick={() => {
                    refetchComps();
                    success('Refreshed', 'Compliance items updated from API.');
                  }}
                  disabled={fetchingComps}
                  className="flex items-center gap-1.5 px-3 py-1.5 rounded-xl text-xs font-semibold bg-slate-900 text-slate-300 hover:text-white border border-slate-800 hover:bg-slate-800 transition cursor-pointer disabled:opacity-50"
                  title="Force refresh compliance items"
                >
                  <RefreshCw className={`w-3.5 h-3.5 text-blue-400 ${fetchingComps ? 'animate-spin' : ''}`} />
                  <span>Refresh</span>
                </button>

                <ExportButton
                  claim="beneficiaries"
                  data={sortedComps}
                  columns={compExportColumns}
                  filename={`compliance_items_${new Date().toISOString().split('T')[0]}`}
                  title="Statutory & Compliance Items"
                />

                {canAdd('beneficiaries') && (
                  <button
                    onClick={() => {
                      setEditingComp(null);
                      setCompTargetProjectId(selectedProjectId !== 'all' ? selectedProjectId : String(projects[0]?.id || ''));
                      compForm.reset({ title: '', requirements: '', status: ApprovalStatus.Pending, beneficiaryId: 'none' });
                      setIsCompModalOpen(true);
                    }}
                    className="flex items-center gap-1.5 px-3.5 py-1.5 rounded-xl text-xs font-semibold bg-gradient-to-r from-blue-600 to-indigo-600 text-white hover:from-blue-500 hover:to-indigo-500 shadow-md shadow-blue-600/25 transition cursor-pointer"
                  >
                    <Plus className="w-3.5 h-3.5" />
                    <span>Log Compliance Item</span>
                  </button>
                )}
              </div>
            </div>

            <div className="bg-[#0f1523]/80 rounded-2xl border border-slate-800/80 shadow-lg backdrop-blur-sm overflow-hidden">
              <div className="overflow-x-auto">
                <table className="w-full text-left text-xs border-collapse">
                  <thead>
                    <tr className="bg-[#0d121f]/95 border-b border-slate-800/80 text-slate-400 uppercase tracking-wider font-semibold text-[11px]">
                      <SortableTh column="title" currentColumn={compSortCol} direction={compSortDir} onSort={handleCompSort} className="py-3.5 px-5 whitespace-nowrap">
                        Compliance Requirement
                      </SortableTh>
                      <th className="py-3.5 px-4 whitespace-nowrap">Project</th>
                      <SortableTh column="requirements" currentColumn={compSortCol} direction={compSortDir} onSort={handleCompSort} className="py-3.5 px-4 whitespace-nowrap">
                        Requirements Detail
                      </SortableTh>
                      <SortableTh column="status" currentColumn={compSortCol} direction={compSortDir} onSort={handleCompSort} className="py-3.5 px-4 whitespace-nowrap">
                        Verification Status
                      </SortableTh>
                      <th className="py-3.5 px-5 text-right font-medium whitespace-nowrap">Actions</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-slate-800/60">
                    {loadingComps ? (
                      <tr>
                        <td colSpan={5} className="py-12 text-center text-slate-400">
                          <div className="flex flex-col items-center gap-2">
                            <div className="w-6 h-6 border-2 border-blue-500 border-t-transparent rounded-full animate-spin" />
                            <span>Loading compliance requirements...</span>
                          </div>
                        </td>
                      </tr>
                    ) : sortedComps.length === 0 ? (
                      <tr>
                        <td colSpan={5} className="py-12 text-center text-slate-400">
                          No compliance items recorded for this project.
                        </td>
                      </tr>
                    ) : (
                      sortedComps.map((c) => (
                        <tr key={c.id} className="hover:bg-slate-800/40 transition-colors">
                          <td className="py-3.5 px-5 whitespace-nowrap font-semibold text-white">
                            <div className="flex items-center gap-2">
                              <ShieldCheck className="w-3.5 h-3.5 text-cyan-400 shrink-0" />
                              <span>{c.title}</span>
                            </div>
                          </td>
                          <td className="py-3.5 px-4 whitespace-nowrap text-slate-400">
                            {projects.find((p) => String(p.id) === String(c.projectId))?.name || 'Project'}
                          </td>
                          <td className="py-3.5 px-4 text-slate-300 max-w-sm truncate" title={c.requirements || ''}>
                            {c.requirements || 'No specific requirements'}
                          </td>
                          <td className="py-3.5 px-4 whitespace-nowrap">
                            <ApprovalStatusBadge status={c.status} />
                          </td>
                          <td className="py-3.5 px-5 text-right whitespace-nowrap">
                            <button
                              onClick={() => handleOpenEditComp(c)}
                              className="p-1 text-slate-400 hover:text-white hover:bg-slate-800 rounded-lg transition cursor-pointer"
                              title="Edit compliance item"
                            >
                              <Edit2 className="w-3.5 h-3.5" />
                            </button>
                          </td>
                        </tr>
                      ))
                    )}
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        )}

        {/* Tab 3: Beneficiary Outcomes Tab */}
        {activeTab === 'outcomes' && (
          <div className="space-y-4">
            <div className="flex flex-col lg:flex-row items-stretch lg:items-center justify-between gap-3 bg-[#0d121f]/60 p-3.5 rounded-2xl border border-slate-800/80">
              <div className="flex items-center gap-2.5 flex-wrap flex-1">
                {/* Search */}
                <div className="relative flex-1 min-w-[200px] max-w-sm">
                  <Search className="w-3.5 h-3.5 absolute left-3 top-2.5 text-slate-400" />
                  <input
                    type="text"
                    placeholder="Search outcome, impact, beneficiary..."
                    value={outcomeSearchTerm}
                    onChange={(e) => setOutcomeSearchTerm(e.target.value)}
                    className="w-full bg-slate-900 border border-slate-800 rounded-xl pl-8 pr-3 py-1.5 text-xs text-white focus:outline-none focus:border-blue-500 shadow-xs"
                  />
                </div>

                {/* Status Filter */}
                <div className="flex items-center gap-1.5 text-xs text-slate-400">
                  <select
                    value={outcomeStatusFilter}
                    onChange={(e) => setOutcomeStatusFilter(e.target.value)}
                    className="bg-slate-900 border border-slate-800 rounded-xl px-3 py-1.5 text-xs text-white focus:outline-none focus:border-blue-500"
                  >
                    <option value="all">All Fulfillment Statuses</option>
                    {COMPLIANCE_STATUS_OPTIONS.map((opt) => (
                      <option key={opt.value} value={String(opt.value)}>
                        {opt.label}
                      </option>
                    ))}
                  </select>
                </div>

                {/* Beneficiary Filter */}
                <div className="flex items-center gap-1.5 text-xs text-slate-400">
                  <Users className="w-3.5 h-3.5 text-indigo-400" />
                  <select
                    value={outcomeBenFilter}
                    onChange={(e) => setOutcomeBenFilter(e.target.value)}
                    className="bg-slate-900 border border-slate-800 rounded-xl px-3 py-1.5 text-xs text-white focus:outline-none focus:border-blue-500 max-w-[180px] truncate"
                  >
                    <option value="all">All Beneficiaries</option>
                    {beneficiaries.map((b) => (
                      <option key={b.id} value={String(b.id)}>
                        {b.name}
                      </option>
                    ))}
                  </select>
                </div>

                {/* Project Selector */}
                <div className="flex items-center gap-1.5 text-xs text-slate-400">
                  <FolderKanban className="w-3.5 h-3.5 text-blue-400" />
                  <select
                    value={selectedProjectId}
                    onChange={(e) => setSelectedProjectId(e.target.value)}
                    className="bg-slate-900 border border-slate-800 rounded-xl px-3 py-1.5 text-xs text-white focus:outline-none focus:border-blue-500 max-w-[180px] truncate"
                  >
                    <option value="all">All Projects</option>
                    {projects.map((p) => (
                      <option key={p.id} value={p.id}>
                        {p.name}
                      </option>
                    ))}
                  </select>
                </div>
              </div>

              {/* Actions: Refresh, Export, Record */}
              <div className="flex items-center gap-2 flex-wrap justify-end">
                <button
                  type="button"
                  onClick={() => {
                    refetchAllOutcomes();
                    success('Refreshed', 'Beneficiary outcomes updated from API.');
                  }}
                  disabled={fetchingOutcomesTab}
                  className="flex items-center gap-1.5 px-3 py-1.5 rounded-xl text-xs font-semibold bg-slate-900 text-slate-300 hover:text-white border border-slate-800 hover:bg-slate-800 transition cursor-pointer disabled:opacity-50"
                  title="Force refresh outcomes"
                >
                  <RefreshCw className={`w-3.5 h-3.5 text-indigo-400 ${fetchingOutcomesTab ? 'animate-spin' : ''}`} />
                  <span>Refresh</span>
                </button>

                <ExportButton
                  claim="beneficiaries"
                  data={sortedOutcomes}
                  columns={outcomeExportColumns}
                  filename={`beneficiary_outcomes_${new Date().toISOString().split('T')[0]}`}
                  title="Beneficiary Outcomes & Impact Register"
                />

                {canAdd('beneficiaries') && (
                  <button
                    onClick={() => handleOpenAddOutcome()}
                    className="flex items-center gap-1.5 px-3.5 py-1.5 rounded-xl text-xs font-semibold bg-gradient-to-r from-indigo-600 to-blue-600 text-white hover:from-indigo-500 hover:to-blue-500 shadow-md shadow-indigo-600/25 transition cursor-pointer"
                  >
                    <Plus className="w-3.5 h-3.5" />
                    <span>Record Outcome</span>
                  </button>
                )}
              </div>
            </div>

            {/* Outcomes Table */}
            <div className="bg-[#0f1523]/80 rounded-2xl border border-slate-800/80 shadow-lg backdrop-blur-sm overflow-hidden">
              <div className="overflow-x-auto">
                <table className="w-full text-left text-xs border-collapse">
                  <thead>
                    <tr className="bg-[#0d121f]/95 border-b border-slate-800/80 text-slate-400 uppercase tracking-wider font-semibold text-[11px]">
                      <SortableTh column="name" currentColumn={outcomeSortCol} direction={outcomeSortDir} onSort={handleOutcomeSort} className="py-3.5 px-5 whitespace-nowrap">
                        Outcome / Impact Metric
                      </SortableTh>
                      <SortableTh column="beneficiaryName" currentColumn={outcomeSortCol} direction={outcomeSortDir} onSort={handleOutcomeSort} className="py-3.5 px-4 whitespace-nowrap">
                        Beneficiary Cohort
                      </SortableTh>
                      <SortableTh column="projectName" currentColumn={outcomeSortCol} direction={outcomeSortDir} onSort={handleOutcomeSort} className="py-3.5 px-4 whitespace-nowrap">
                        Project
                      </SortableTh>
                      <th className="py-3.5 px-4 whitespace-nowrap">Impact Description</th>
                      <SortableTh column="status" currentColumn={outcomeSortCol} direction={outcomeSortDir} onSort={handleOutcomeSort} className="py-3.5 px-4 whitespace-nowrap">
                        Fulfillment Status
                      </SortableTh>
                      <SortableTh column="createdAt" currentColumn={outcomeSortCol} direction={outcomeSortDir} onSort={handleOutcomeSort} className="py-3.5 px-4 whitespace-nowrap">
                        Recorded Date
                      </SortableTh>
                      <th className="py-3.5 px-5 text-right font-medium whitespace-nowrap">Actions</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-slate-800/60">
                    {loadingOutcomesTab ? (
                      <tr>
                        <td colSpan={7} className="py-12 text-center text-slate-400">
                          <div className="flex flex-col items-center gap-2">
                            <div className="w-6 h-6 border-2 border-indigo-500 border-t-transparent rounded-full animate-spin" />
                            <span>Loading outcomes...</span>
                          </div>
                        </td>
                      </tr>
                    ) : sortedOutcomes.length === 0 ? (
                      <tr>
                        <td colSpan={7} className="py-12 text-center text-slate-400">
                          No outcomes registered for this selection.
                        </td>
                      </tr>
                    ) : (
                      sortedOutcomes.map((o) => (
                        <tr key={o.id} className="hover:bg-slate-800/40 transition-colors">
                          <td className="py-3.5 px-5 whitespace-nowrap font-semibold text-white">
                            <div className="flex items-center gap-2">
                              <Sparkles className="w-3.5 h-3.5 text-indigo-400 shrink-0" />
                              <span>{o.name}</span>
                            </div>
                          </td>
                          <td className="py-3.5 px-4 whitespace-nowrap text-slate-300">
                            <div className="flex items-center gap-1.5">
                              <Users className="w-3 h-3 text-blue-400 shrink-0" />
                              <span className="font-medium text-slate-200">{o.beneficiaryName}</span>
                            </div>
                          </td>
                          <td className="py-3.5 px-4 whitespace-nowrap text-slate-400">
                            <span>{o.projectName}</span>
                          </td>
                          <td className="py-3.5 px-4 text-slate-400 max-w-xs truncate" title={o.description || ''}>
                            {o.description || 'No description provided'}
                          </td>
                          <td className="py-3.5 px-4 whitespace-nowrap">
                            <ComplianceStatusBadge status={o.status} />
                          </td>
                          <td className="py-3.5 px-4 whitespace-nowrap text-slate-400 font-mono text-[11px]">
                            {o.createdAt ? formatDate(o.createdAt) : '—'}
                          </td>
                          <td className="py-3.5 px-5 text-right whitespace-nowrap space-x-2">
                            <button
                              onClick={() => handleOpenEditOutcome(o)}
                              className="p-1 text-slate-400 hover:text-white hover:bg-slate-800 rounded-lg transition cursor-pointer"
                              title="Edit outcome"
                            >
                              <Edit2 className="w-3.5 h-3.5" />
                            </button>
                          </td>
                        </tr>
                      ))
                    )}
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        )}
      </div>

      {/* Modal: Create/Edit Beneficiary */}
      <Modal
        isOpen={isBenModalOpen}
        onClose={() => setIsBenModalOpen(false)}
        title={editingBen ? 'Edit Beneficiary Profile' : 'Register Project Beneficiary'}
        size="md"
      >
        <form
          onSubmit={benForm.handleSubmit((d) => (editingBen ? updateBenMutation.mutate(d) : createBenMutation.mutate(d)))}
          className="space-y-4"
        >
          <div>
            <label className="block text-xs font-semibold text-slate-300 mb-1">Beneficiary Name / Group *</label>
            <input
              {...benForm.register('name')}
              className="w-full bg-slate-900 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-blue-500"
              placeholder="e.g. Rural Female Farmers Cohort"
            />
            {benForm.formState.errors.name && (
              <span className="text-[11px] text-rose-400 mt-1 block">{benForm.formState.errors.name.message}</span>
            )}
          </div>

          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="block text-xs font-semibold text-slate-300 mb-1">Category *</label>
              <select
                {...benForm.register('category')}
                className="w-full bg-slate-900 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-blue-500 cursor-pointer"
              >
                <option value="Youth & Skills">Youth & Skills</option>
                <option value="Women-Led">Women-Led</option>
                <option value="SME / Enterprise">SME / Enterprise</option>
                <option value="Agriculture & Rural">Agriculture & Rural</option>
                <option value="Healthcare & Community">Healthcare & Community</option>
                <option value="Education">Education</option>
                <option value="General">General</option>
              </select>
            </div>
            <div>
              <label className="block text-xs font-semibold text-slate-300 mb-1">Location *</label>
              <input
                {...benForm.register('location')}
                className="w-full bg-slate-900 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-blue-500"
                placeholder="e.g. Limpopo, District 4"
              />
            </div>
          </div>

          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="block text-xs font-semibold text-slate-300 mb-1">Target Count *</label>
              <input
                type="number"
                {...benForm.register('targetCount')}
                className="w-full bg-slate-900 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-blue-500"
              />
            </div>
            <div>
              <label className="block text-xs font-semibold text-slate-300 mb-1">Reached Count</label>
              <input
                type="number"
                {...benForm.register('reachedCount')}
                className="w-full bg-slate-900 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-blue-500"
              />
            </div>
          </div>

          <div className="flex justify-end gap-3 pt-4 border-t border-slate-800">
            <button
              type="button"
              onClick={() => setIsBenModalOpen(false)}
              className="px-4 py-2 rounded-xl text-xs font-semibold text-slate-400 hover:text-white hover:bg-slate-800 transition"
            >
              Cancel
            </button>
            <button
              type="submit"
              disabled={createBenMutation.isPending || updateBenMutation.isPending}
              className="px-4 py-2 rounded-xl text-xs font-semibold bg-blue-600 hover:bg-blue-500 text-white transition shadow-md shadow-blue-600/30"
            >
              {editingBen ? 'Update Beneficiary' : 'Register Beneficiary'}
            </button>
          </div>
        </form>
      </Modal>

      {/* Modal: Create/Edit Compliance Item */}
      <Modal
        isOpen={isCompModalOpen}
        onClose={() => setIsCompModalOpen(false)}
        title={editingComp ? 'Edit Compliance Item' : 'Log Project Compliance Requirement'}
        size="md"
      >
        <form
          onSubmit={compForm.handleSubmit((d) => (editingComp ? updateCompMutation.mutate(d) : createCompMutation.mutate(d)))}
          className="space-y-4"
        >
          <div>
            <label className="block text-xs font-semibold text-slate-300 mb-1">Requirement Title *</label>
            <input
              {...compForm.register('title')}
              className="w-full bg-slate-900 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-blue-500"
              placeholder="e.g. Tax Clearance PIN Validation"
            />
            {compForm.formState.errors.title && (
              <span className="text-[11px] text-rose-400 mt-1 block">{compForm.formState.errors.title.message}</span>
            )}
          </div>

          <div>
            <label className="block text-xs font-semibold text-slate-300 mb-1">Requirements Detail *</label>
            <textarea
              rows={3}
              {...compForm.register('requirements')}
              className="w-full bg-slate-900 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-blue-500"
              placeholder="Specify the documentation or statutory evidence required..."
            />
            {compForm.formState.errors.requirements && (
              <span className="text-[11px] text-rose-400 mt-1 block">{compForm.formState.errors.requirements.message}</span>
            )}
          </div>

          <div>
            <label className="block text-xs font-semibold text-slate-300 mb-1">Associated Beneficiary (Optional)</label>
            <select
              {...compForm.register('beneficiaryId')}
              className="w-full bg-slate-900 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-blue-500 cursor-pointer"
            >
              <option value="none">General / All Beneficiaries</option>
              {beneficiaries
                .filter((b) => (selectedProjectId === 'all' ? true : String(b.projectId) === String(selectedProjectId)))
                .map((b) => (
                  <option key={b.id} value={String(b.id)}>
                    {b.name} ({b.category})
                  </option>
                ))}
            </select>
          </div>

          <div>
            <label className="block text-xs font-semibold text-slate-300 mb-1">Compliance Status</label>
            <select
              {...compForm.register('status')}
              className="w-full bg-slate-900 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-blue-500 cursor-pointer"
            >
              {COMPLIANCE_STATUS_OPTIONS.map((opt) => {
                const isApprovedOpt = opt.value === ComplianceStatus.Met || opt.value === ComplianceStatus.Exceeded;
                const makerRestricted = editingComp && isApprovedOpt && isMaker(editingComp.createdBy);
                return (
                  <option key={opt.value} value={opt.value} disabled={makerRestricted}>
                    {opt.label} {makerRestricted ? '(Maker-Checker: Restricted)' : ''}
                  </option>
                );
              })}
            </select>
          </div>

          <div className="flex justify-end gap-3 pt-4 border-t border-slate-800">
            <button
              type="button"
              onClick={() => setIsCompModalOpen(false)}
              className="px-4 py-2 rounded-xl text-xs font-semibold text-slate-400 hover:text-white hover:bg-slate-800 transition"
            >
              Cancel
            </button>
            <button
              type="submit"
              disabled={createCompMutation.isPending || updateCompMutation.isPending}
              className="px-4 py-2 rounded-xl text-xs font-semibold bg-blue-600 hover:bg-blue-500 text-white transition shadow-md shadow-blue-600/30"
            >
              {editingComp ? 'Update Item' : 'Create Item'}
            </button>
          </div>
        </form>
      </Modal>

      {/* Modal: Beneficiary Detail & Compliance / Outcomes Inspector */}
      {selectedBenForDetail && (
        <Modal
          isOpen={isDetailModalOpen}
          onClose={() => setIsDetailModalOpen(false)}
          title={`Beneficiary: ${selectedBenForDetail.name}`}
          size="lg"
        >
          <div className="space-y-6">
            <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 bg-slate-900/60 p-4 rounded-xl border border-slate-800">
              <div>
                <span className="text-[10px] uppercase font-semibold text-slate-400 block">Category</span>
                <span className="text-xs font-bold text-white">{selectedBenForDetail.category || 'General'}</span>
              </div>
              <div>
                <span className="text-[10px] uppercase font-semibold text-slate-400 block">Location</span>
                <span className="text-xs font-bold text-white">{selectedBenForDetail.location || 'National'}</span>
              </div>
              <div>
                <span className="text-[10px] uppercase font-semibold text-slate-400 block">Target Count</span>
                <span className="text-xs font-bold text-white">{selectedBenForDetail.targetCount}</span>
              </div>
              <div>
                <span className="text-[10px] uppercase font-semibold text-slate-400 block">Reached</span>
                <span className="text-xs font-bold text-emerald-400">{selectedBenForDetail.reachedCount}</span>
              </div>
            </div>

            {/* Compliance Satisfied Section */}
            <div className="space-y-3">
              <div className="flex items-center justify-between">
                <h4 className="text-xs font-bold text-white uppercase tracking-wider flex items-center gap-2">
                  <FileCheck className="w-4 h-4 text-cyan-400" />
                  <span>Compliance Requirements Satisfying this Beneficiary</span>
                </h4>
              </div>

              {complianceItems.length === 0 ? (
                <div className="text-center py-4 bg-slate-900/40 rounded-xl border border-slate-800 text-slate-400 text-xs">
                  No compliance items recorded for this project yet.
                </div>
              ) : (
                <div className="space-y-2 max-h-48 overflow-y-auto pr-1">
                  {complianceItems.map((ci) => (
                    <div
                      key={ci.id}
                      className="p-3 bg-slate-900/60 rounded-xl border border-slate-800 flex items-center justify-between gap-3 text-xs"
                    >
                      <div>
                        <p className="font-semibold text-white">{ci.title}</p>
                        <p className="text-[11px] text-slate-400 truncate max-w-sm">{ci.requirements}</p>
                      </div>
                      <div className="shrink-0">
                        <ApprovalStatusBadge status={ci.status} />
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </div>

            {/* Outcomes Section */}
            <div className="space-y-3 pt-4 border-t border-slate-800">
              <div className="flex items-center justify-between">
                <h4 className="text-xs font-bold text-white uppercase tracking-wider flex items-center gap-2">
                  <Sparkles className="w-4 h-4 text-indigo-400" />
                  <span>Recorded Outcomes & Impact ({outcomes.length})</span>
                </h4>
                <button
                  type="button"
                  onClick={() => handleOpenAddOutcome(selectedBenForDetail)}
                  className="px-3 py-1 bg-indigo-600/30 hover:bg-indigo-600/50 text-indigo-300 border border-indigo-500/40 rounded-lg text-xs font-semibold transition cursor-pointer flex items-center gap-1.5"
                >
                  <Plus className="w-3 h-3" />
                  <span>Add Outcome</span>
                </button>
              </div>

              {outcomes.length === 0 ? (
                <div className="text-center py-4 bg-slate-900/40 rounded-xl border border-slate-800 text-slate-400 text-xs">
                  No outcomes registered for this beneficiary yet.
                </div>
              ) : (
                <div className="space-y-2 max-h-48 overflow-y-auto pr-1">
                  {outcomes.map((o) => (
                    <div
                      key={o.id}
                      className="p-3 bg-slate-900/60 rounded-xl border border-slate-800 flex items-center justify-between gap-3 text-xs"
                    >
                      <div className="flex-1 min-w-0">
                        <p className="font-semibold text-white truncate">{o.name}</p>
                        <p className="text-[11px] text-slate-400 mt-0.5 line-clamp-2">{o.description}</p>
                      </div>
                      <div className="flex items-center gap-2 shrink-0">
                        <ComplianceStatusBadge status={o.status} />
                        <button
                          type="button"
                          onClick={() => handleOpenEditOutcome(o)}
                          className="p-1 text-slate-400 hover:text-white hover:bg-slate-800 rounded-lg transition cursor-pointer"
                          title="Edit outcome"
                        >
                          <Edit2 className="w-3.5 h-3.5" />
                        </button>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </div>
          </div>
        </Modal>
      )}

      {/* Modal: Add / Edit Outcome */}
      <Modal
        isOpen={isOutcomeModalOpen}
        onClose={() => {
          setIsOutcomeModalOpen(false);
          setEditingOutcome(null);
        }}
        title={editingOutcome ? 'Edit Beneficiary Outcome' : 'Record Beneficiary Outcome'}
        size="md"
      >
        <form onSubmit={outcomeForm.handleSubmit(onSubmitOutcome)} className="space-y-4">
          {selectedBenForDetail ? (
            <div>
              <label className="block text-xs font-semibold text-slate-300 mb-1">Beneficiary Cohort</label>
              <div className="bg-slate-800/80 border border-slate-700/60 rounded-xl px-3 py-2 text-xs text-white font-medium flex items-center gap-2">
                <Users className="w-3.5 h-3.5 text-blue-400" />
                <span>{selectedBenForDetail.name}</span>
              </div>
            </div>
          ) : (
            <div>
              <label className="block text-xs font-semibold text-slate-300 mb-1">Beneficiary Cohort *</label>
              <select
                {...outcomeForm.register('beneficiaryId')}
                disabled={!!editingOutcome}
                className="w-full bg-slate-900 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-blue-500 cursor-pointer disabled:opacity-50"
              >
                <option value="">Select a beneficiary cohort...</option>
                {beneficiaries.map((b) => (
                  <option key={b.id} value={String(b.id)}>
                    {b.name} ({b.category || 'General'})
                  </option>
                ))}
              </select>
              {outcomeForm.formState.errors.beneficiaryId && (
                <p className="text-[11px] text-rose-400 mt-1">
                  {outcomeForm.formState.errors.beneficiaryId.message}
                </p>
              )}
            </div>
          )}

          <div>
            <label className="block text-xs font-semibold text-slate-300 mb-1">Outcome Name *</label>
            <input
              {...outcomeForm.register('name')}
              className="w-full bg-slate-900 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-blue-500"
              placeholder="e.g. 85% Post-Training Employment Rate"
            />
            {outcomeForm.formState.errors.name && (
              <p className="text-[11px] text-rose-400 mt-1">{outcomeForm.formState.errors.name.message}</p>
            )}
          </div>

          <div>
            <label className="block text-xs font-semibold text-slate-300 mb-1">Impact Description *</label>
            <textarea
              rows={3}
              {...outcomeForm.register('description')}
              className="w-full bg-slate-900 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-blue-500"
              placeholder="Detail quantitative or qualitative impact observed..."
            />
            {outcomeForm.formState.errors.description && (
              <p className="text-[11px] text-rose-400 mt-1">{outcomeForm.formState.errors.description.message}</p>
            )}
          </div>

          <div>
            <label className="block text-xs font-semibold text-slate-300 mb-1">Fulfillment Status</label>
            <select
              {...outcomeForm.register('status')}
              className="w-full bg-slate-900 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-blue-500 cursor-pointer"
            >
              {COMPLIANCE_STATUS_OPTIONS.map((opt) => {
                const isMetOpt = opt.value === ComplianceStatus.Met || opt.value === ComplianceStatus.Exceeded;
                const makerRestricted = editingOutcome && isMetOpt && isMaker(editingOutcome.createdBy);
                return (
                  <option key={opt.value} value={opt.value} disabled={makerRestricted}>
                    {opt.label} {makerRestricted ? '(Maker-Checker: Restricted)' : ''}
                  </option>
                );
              })}
            </select>
          </div>

          <div className="flex justify-end gap-3 pt-4 border-t border-slate-800">
            <button
              type="button"
              onClick={() => {
                setIsOutcomeModalOpen(false);
                setEditingOutcome(null);
              }}
              className="px-4 py-2 rounded-xl text-xs font-semibold text-slate-400 hover:text-white hover:bg-slate-800 transition"
            >
              Cancel
            </button>
            <button
              type="submit"
              disabled={createOutcomeMutation.isPending || updateOutcomeMutation.isPending}
              className="px-4 py-2 rounded-xl text-xs font-semibold bg-indigo-600 hover:bg-indigo-500 text-white transition shadow-md shadow-indigo-600/30 disabled:opacity-50"
            >
              {editingOutcome ? 'Update Outcome' : 'Save Outcome'}
            </button>
          </div>
        </form>
      </Modal>
    </div>
  );
};