'use client';

import React, { useState, useMemo } from 'react';
import { 
  FileText, 
  FileSpreadsheet, 
  Filter, 
  RefreshCw, 
  Columns3, 
  Building2, 
  Layers, 
  GraduationCap, 
  UserCheck, 
  Users, 
  Check, 
  Download
} from 'lucide-react';
import { Button } from '@/components/ui/button';
import { DataTable } from '@/components/ui/data-table';
import { TableSkeleton } from '@/components/ui/tableSkeleton';
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
import { Checkbox } from '@/components/ui/checkbox';
import toast from 'react-hot-toast';

import { useOperationalReports } from '@/services/reports/queries';
import { reportsApi } from '@/services/reports/api';
import { ReportModuleType, ColumnDefinition } from '@/services/reports/types';
import { useAllStates } from '@/services/states/queries';
import { useAllDistricts } from '@/services/districts/queries';

// ============================================================================
// MODULE METADATA CONFIGURATION
// ============================================================================

const MODULE_CARDS: { id: ReportModuleType; label: string; desc: string; icon: React.ElementType }[] = [
  { id: 'dso', label: 'District Operations (DSO)', desc: 'District-wide metrics, active sectors, and territory coverage.', icon: Building2 },
  { id: 'sector', label: 'Sector Ledger', desc: 'Sector performance, assigned courses, and affiliated institutes.', icon: Layers },
  { id: 'institute', label: 'Institute Matrix', desc: 'Institute onboarding status, KYC state, and advisor counts.', icon: GraduationCap },
  { id: 'career_advisor', label: 'Career Advisor Pool', desc: 'Advisor LMS stage, certification, grade, and active status.', icon: UserCheck },
  { id: 'student', label: 'Student & CRM Funnel', desc: 'Lead stages, counselled metrics, course enrollment, and placements.', icon: Users },
];

const MODULE_COLUMNS: Record<ReportModuleType, ColumnDefinition[]> = {
  dso: [
    { key: 'state', label: 'State Jurisdiction', defaultVisible: true },
    { key: 'districtName', label: 'District Name', defaultVisible: true },
    { key: 'districtCode', label: 'District Code', defaultVisible: true },
    { key: 'sectorsCount', label: 'Active Sectors', defaultVisible: true, align: 'right' },
    { key: 'institutesCount', label: 'Managed Institutes', defaultVisible: true, align: 'right' },
    { key: 'advisorsPool', label: 'Advisors Pool', defaultVisible: true, align: 'right' },
    { key: 'studentsFunnel', label: 'Student Funnel', defaultVisible: true, align: 'right' },
  ],
  sector: [
    { key: 'sectorName', label: 'Sector Name', defaultVisible: true },
    { key: 'sectorCode', label: 'Sector Code', defaultVisible: true },
    { key: 'districtName', label: 'District', defaultVisible: true },
    { key: 'institutesCount', label: 'Total Institutes', defaultVisible: true, align: 'right' },
    { key: 'coursesCount', label: 'Active Courses', defaultVisible: true, align: 'right' },
    { key: 'status', label: 'Status', defaultVisible: true },
  ],
  institute: [
    { key: 'instituteName', label: 'Institute Name', defaultVisible: true },
    { key: 'instituteCode', label: 'Code', defaultVisible: true },
    { key: 'sectorName', label: 'Sector', defaultVisible: true },
    { key: 'kycStatus', label: 'KYC Status', defaultVisible: true },
    { key: 'advisorsCount', label: 'Advisors', defaultVisible: true, align: 'right' },
    { key: 'studentsCount', label: 'Students Enrolled', defaultVisible: true, align: 'right' },
  ],
  career_advisor: [
    { key: 'advisorName', label: 'Advisor Name', defaultVisible: true },
    { key: 'advisorCode', label: 'Advisor Code', defaultVisible: true },
    { key: 'instituteName', label: 'Institute', defaultVisible: true },
    { key: 'status', label: 'LMS Status', defaultVisible: true },
    { key: 'grade', label: 'Grade Level', defaultVisible: true },
    { key: 'mobile', label: 'Contact', defaultVisible: false },
    { key: 'studentsCounselled', label: 'Students Counselled', defaultVisible: true, align: 'right' },
  ],
  student: [
    { key: 'studentName', label: 'Student Name', defaultVisible: true },
    { key: 'mobile', label: 'Mobile', defaultVisible: true },
    { key: 'instituteName', label: 'Institute', defaultVisible: true },
    { key: 'stage', label: 'Pipeline Stage', defaultVisible: true },
    { key: 'leadSource', label: 'Lead Source', defaultVisible: false },
    { key: 'admissionDate', label: 'Admission Date', defaultVisible: true },
  ],
};

export default function AnalyticalReportsPage() {
  const [activeModule, setActiveModule] = useState<ReportModuleType>('dso');
  const [page, setPage] = useState(1);
  const [selectedState, setSelectedState] = useState('');
  const [selectedDistrict, setSelectedDistrict] = useState('');
  const [selectedStatus, setSelectedStatus] = useState('');

  // Column Customization State per module
  const [columnVisibility, setColumnVisibility] = useState<Record<string, boolean>>(() => {
    const initial: Record<string, boolean> = {};
    MODULE_COLUMNS.dso.forEach(col => { initial[col.key] = col.defaultVisible; });
    return initial;
  });

  const { data: allStateData } = useAllStates();
  const { data: districtsData } = useAllDistricts();
  const rawDistricts = (districtsData as any)?.items || districtsData || [];

  // Switch Module Reset logic
  const handleModuleChange = (mod: ReportModuleType) => {
    setActiveModule(mod);
    setPage(1);
    setSelectedStatus('');
    const newVis: Record<string, boolean> = {};
    MODULE_COLUMNS[mod].forEach(col => { newVis[col.key] = col.defaultVisible; });
    setColumnVisibility(newVis);
  };

  // Active query pipeline
  const visibleColumnKeys = useMemo(() => {
    return Object.keys(columnVisibility).filter(key => columnVisibility[key]);
  }, [columnVisibility]);

  const { data: reportPayload, isLoading, isRefetching, refetch } = useOperationalReports({
    module: activeModule,
    page,
    limit: 10,
    stateId: selectedState,
    districtId: selectedDistrict,
    status: selectedStatus,
    fields: visibleColumnKeys,
  });

  const reportItems = reportPayload?.items || [];
  const meta = reportPayload?.meta;

  const triggerFileDownloadStream = async (type: 'excel' | 'pdf') => {
    try {
      toast.loading(`Compiling export stream for ${activeModule.toUpperCase()}...`, { id: 'report-dl' });
      await reportsApi.downloadReport({
        type,
        module: activeModule,
        stateId: selectedState,
        districtId: selectedDistrict,
        status: selectedStatus,
        fields: visibleColumnKeys,
      });
      toast.success("Document compiled and downloaded successfully.", { id: 'report-dl' });
    } catch (err) {
      console.error("Export download failed:", err);
      toast.error("Download failed. Authorization or pipeline error.", { id: 'report-dl' });
    }
  };

  // Build dynamic table columns based on field toggle selections
  const dynamicTableColumns = useMemo(() => {
    const availableCols = MODULE_COLUMNS[activeModule];
    return availableCols
      .filter(col => columnVisibility[col.key])
      .map(col => ({
        header: col.label,
        className: col.align === 'right' ? 'text-right' : 'text-left',
        cell: (row: any) => {
          const val = row[col.key];
          if (typeof val === 'number') return <span className="font-mono text-xs">{val.toLocaleString()}</span>;
          if (col.key.toLowerCase().includes('status') || col.key.toLowerCase().includes('stage')) {
            return (
              <span className="inline-flex items-center px-2 py-0.5 rounded-md text-[10px] font-bold bg-muted text-foreground border border-border/50 uppercase tracking-wider">
                {val}
              </span>
            );
          }
          return <span className="text-xs text-foreground font-medium">{val ?? '—'}</span>;
        }
      }));
  }, [activeModule, columnVisibility]);

  return (
    <div className="space-y-6 max-w-7xl mx-auto animate-in fade-in duration-300 select-none pb-12">
      
      {/* PAGE HEADER */}
      <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 border-b border-border/40 pb-5">
        <div>
          <h1 className="text-base font-black tracking-widest text-foreground uppercase">Ecosystem Intelligence & Analytics</h1>
          <p className="text-xs font-medium text-muted-foreground/70 mt-0.5">Filter, customize fields, and export real-time module performance ledgers.</p>
        </div>
        <div className="flex items-center gap-2">
          <Button 
            onClick={() => triggerFileDownloadStream('excel')}
            variant="outline"
            className="h-8 text-xs font-bold gap-1.5 border-border/80 text-foreground hover:bg-muted cursor-pointer"
          >
            <FileSpreadsheet className="h-3.5 w-3.5 text-emerald-600" />
            <span>Excel Ledger</span>
          </Button>
          <Button 
            onClick={() => triggerFileDownloadStream('pdf')}
            className="h-8 text-xs font-bold gap-1.5 bg-foreground text-background hover:bg-foreground/90 cursor-pointer"
          >
            <FileText className="h-3.5 w-3.5" />
            <span>PDF Summary</span>
          </Button>
        </div>
      </div>

      {/* MODULE SELECTION BIFURCATION CARDS */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-3">
        {MODULE_CARDS.map((card) => {
          const Icon = card.icon;
          const isSelected = activeModule === card.id;
          return (
            <button
              key={card.id}
              onClick={() => handleModuleChange(card.id)}
              className={`flex flex-col justify-between text-left p-3.5 rounded-xl border transition-all cursor-pointer ${
                isSelected 
                  ? 'bg-primary/10 border-primary text-primary shadow-sm ring-1 ring-primary/30' 
                  : 'bg-card/40 border-border/40 text-muted-foreground hover:border-border hover:bg-muted/30'
              }`}
            >
              <div className="flex items-center justify-between w-full mb-2">
                <Icon className={`h-4 w-4 ${isSelected ? 'text-primary' : 'text-muted-foreground'}`} />
                {isSelected && <Check className="h-3.5 w-3.5 text-primary" />}
              </div>
              <div>
                <h3 className={`text-xs font-bold tracking-wide uppercase ${isSelected ? 'text-primary' : 'text-foreground'}`}>
                  {card.label}
                </h3>
                <p className="text-[10px] text-muted-foreground line-clamp-2 mt-1 leading-relaxed">
                  {card.desc}
                </p>
              </div>
            </button>
          );
        })}
      </div>

      {/* FILTER & COLUMN CUSTOMIZATION TOOLBAR */}
      <div className="flex flex-wrap items-center justify-between gap-3 bg-muted/20 border border-border/40 rounded-xl p-3.5">
        <div className="flex flex-wrap items-center gap-2">
          <div className="flex items-center gap-1 text-[10px] font-black uppercase tracking-widest text-muted-foreground mr-1">
            <Filter className="h-3 w-3" /> Filters
          </div>

          {/* State Filter */}
          <select
            value={selectedState}
            onChange={(e) => { setSelectedState(e.target.value); setPage(1); }}
            className="text-xs font-semibold px-2.5 py-1.5 border border-border/50 bg-background rounded-lg text-foreground focus:outline-none focus:border-primary cursor-pointer"
          >
            <option value="">All States</option>
            {allStateData?.items?.map((st: any) => (
              <option key={st.id} value={st.id}>{st.name}</option>
            ))}
          </select>

          {/* District Filter */}
          <select
            value={selectedDistrict}
            onChange={(e) => { setSelectedDistrict(e.target.value); setPage(1); }}
            className="text-xs font-semibold px-2.5 py-1.5 border border-border/50 bg-background rounded-lg text-foreground focus:outline-none focus:border-primary cursor-pointer"
          >
            <option value="">All Districts</option>
            {rawDistricts.map((d: any) => (
              <option key={d.id} value={d.id}>{d.name}</option>
            ))}
          </select>

          {/* Dynamic Module Context Filter */}
          {(activeModule === 'career_advisor' || activeModule === 'student' || activeModule === 'institute') && (
            <select
              value={selectedStatus}
              onChange={(e) => { setSelectedStatus(e.target.value); setPage(1); }}
              className="text-xs font-semibold px-2.5 py-1.5 border border-border/50 bg-background rounded-lg text-foreground focus:outline-none focus:border-primary cursor-pointer uppercase"
            >
              <option value="">All Statuses / Stages</option>
              {activeModule === 'career_advisor' && (
                <>
                  <option value="ACTIVE">ACTIVE</option>
                  <option value="PENDING_VERIFICATION">PENDING VERIFICATION</option>
                  <option value="CERTIFIED">CERTIFIED</option>
                </>
              )}
              {activeModule === 'student' && (
                <>
                  <option value="NEW_LEAD">NEW LEAD</option>
                  <option value="COUNSELLING">COUNSELLING</option>
                  <option value="ADMISSION">ADMISSION</option>
                  <option value="PLACEMENT">PLACEMENT</option>
                </>
              )}
              {activeModule === 'institute' && (
                <>
                  <option value="APPROVED">APPROVED</option>
                  <option value="UNDER_APPROVAL">UNDER APPROVAL</option>
                  <option value="AGREEMENT_PENDING">AGREEMENT PENDING</option>
                </>
              )}
            </select>
          )}
        </div>

        <div className="flex items-center gap-2">
          {/* FIELD ADJUSTMENT / COLUMN TOGGLE POPOVER */}
          <Popover>
            <PopoverTrigger asChild>
              <Button variant="outline" size="sm" className="h-8 text-xs font-semibold gap-1.5 cursor-pointer">
                <Columns3 className="h-3.5 w-3.5 text-muted-foreground" />
                <span>Adjust Fields ({visibleColumnKeys.length})</span>
              </Button>
            </PopoverTrigger>
            <PopoverContent align="end" className="w-56 p-3 space-y-2">
              <div className="text-[11px] font-bold uppercase tracking-wider text-muted-foreground border-b border-border/40 pb-1.5">
                Toggle {activeModule.toUpperCase()} Fields
              </div>
              <div className="space-y-1.5 max-h-60 overflow-y-auto pr-1">
                {MODULE_COLUMNS[activeModule].map((col) => (
                  <label key={col.key} className="flex items-center gap-2 text-xs font-medium text-foreground hover:bg-muted/50 p-1 rounded cursor-pointer">
                    <Checkbox
                      checked={!!columnVisibility[col.key]}
                      onCheckedChange={(checked) => {
                        setColumnVisibility(prev => ({ ...prev, [col.key]: !!checked }));
                      }}
                    />
                    <span>{col.label}</span>
                  </label>
                ))}
              </div>
            </PopoverContent>
          </Popover>

          <Button 
            variant="ghost" 
            size="sm"
            onClick={() => refetch()}
            disabled={isRefetching}
            className="h-8 text-xs font-semibold text-muted-foreground hover:text-foreground cursor-pointer"
          >
            <RefreshCw className={`h-3.5 w-3.5 mr-1 ${isRefetching ? 'animate-spin' : ''}`} />
            <span>Reload</span>
          </Button>
        </div>
      </div>

      {/* DATA GRID DISPLAY */}
      {isLoading ? (
        <TableSkeleton />
      ) : (
        <div className="rounded-xl border border-border/40 bg-card overflow-hidden shadow-sm">
          <DataTable
            data={reportItems}
            columns={dynamicTableColumns}
            emptyMessage={`No report entries found under the ${activeModule.toUpperCase()} module.`}
            pagination={meta ? {
              page: meta.currentPage,
              pages: meta.totalPages,
              total: meta.totalItems,
              onPageChange: setPage
            } : undefined}
          />
        </div>
      )}

    </div>
  );
}