'use client';

import React, { useEffect, useState, useMemo } from 'react';
import { Plus, Search, Layers, UserPlus, X } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { PermissionGuard, useAuthorization } from '@/features/auth/guards'; 
import { PERMISSIONS } from '@/constants/permissions';
import { useSectors } from '@/services/sectors/queries';
import { useDistricts } from '@/services/districts/queries';
import { DataTable, Column } from '@/components/ui/data-table';
import CreateSectorModal from './_components/CreateSectorModal';
import ProvisionSectorOwnerModal from './_components/ProvisionSectorOwnerModal';
import { TableSkeleton } from '@/components/ui/tableSkeleton';
import { useDebounce } from '@/hooks/useDebounce';

export default function SectorsManagementPage() {
  const [search, setSearch] = useState('');
  const [selectedDistrict, setSelectedDistrict] = useState('');
  const [page, setPage] = useState(1);
  const [isCreateOpen, setIsCreateOpen] = useState(false);
  const [provisionTarget, setProvisionTarget] = useState<{ id: string; name: string } | null>(null);

  const debouncedSearch = useDebounce(search, 300);

  const { role } = useAuthorization();
  const isSuperAdmin = role === 'SUPER_ADMIN';

  const { data, isLoading, isFetching } = useSectors(page, debouncedSearch, selectedDistrict);
  const { data: districtData } = useDistricts(1, isSuperAdmin ? '' : 'SKIP_FETCH');

  useEffect(() => {
    if (data) {
      console.log("DATA FOR SECTORS:", data);
    }
  }, [data]);

  const handleClearSearch = () => {
    setSearch('');
    setPage(1);
  };

  // ✅ Memoize columns to prevent child table re-render cascades
  const columns = useMemo<Column<any>[]>(
    () => [
      {
        header: 'Sys Code',
        className: 'w-24 font-mono font-bold text-primary tracking-tight text-xs',
        cell: (sector) => sector.code,
      },
      {
        header: 'Sector Operations Node',
        className: 'font-semibold tracking-tight text-xs text-foreground',
        cell: (sector) => (
          <div className="flex items-center gap-2">
            <Layers className="h-3.5 w-3.5 text-muted-foreground/40 shrink-0" />
            <span>{sector.name}</span>
          </div>
        ),
      },
      {
        header: 'Sector Governance Owner',
        className: 'min-w-[220px]',
        cell: (sector) => {
          if (sector.sectorOwner?.user) {
            const u = sector.sectorOwner.user;
            return (
              <div className="flex items-center gap-2 text-left group/owner">
                <div className="h-6 w-6 rounded-md bg-primary/10 border border-primary/10 flex items-center justify-center text-[10px] font-bold text-primary shrink-0">
                  {u.firstName[0]}{u.lastName[0]}
                </div>
                <div className="flex flex-col">
                  <span className="text-foreground font-semibold tracking-tight text-xs leading-tight">
                    {u.firstName} {u.lastName}
                  </span>
                  <span className="text-[10px] text-muted-foreground/60 font-medium mt-0.5">{u.email}</span>
                </div>
              </div>
            );
          }
          return (
            <Button
              variant="ghost"
              onClick={() => setProvisionTarget({ id: sector.id, name: sector.name })}
              className="h-7 text-[10px] font-bold text-amber-500 hover:text-amber-600 hover:bg-amber-500/5 border border-dashed border-amber-500/20 hover:border-amber-500/40 rounded-md px-2 gap-1"
            >
              <UserPlus className="h-3 w-3 stroke-[2.5]" />
              <span>Provision Owner</span>
            </Button>
          );
        },
      },
    ],
    []
  );

  return (
    <div className="space-y-4 max-w-7xl mx-auto animate-in fade-in duration-300 select-none">
      {/* TITLE PANEL VIEW HEADER */}
      <div className="flex items-center justify-between border-b border-border/10 pb-4">
        <div className="flex flex-col gap-0.5 text-left">
          <h1 className="text-sm font-black tracking-widest text-foreground uppercase">Sectors Matrix</h1>
          <p className="text-[11px] font-medium text-muted-foreground/70">Manage training operations and monitor specialized vertical domains.</p>
        </div>
        <PermissionGuard permission={PERMISSIONS.MASTERS_SECTORS_MANAGE}>
          <Button 
            onClick={() => setIsCreateOpen(true)} 
            className="h-8 rounded-md px-3 text-[11px] font-bold tracking-wider uppercase shadow-sm gap-1.5 transition-all bg-foreground text-background hover:bg-foreground/90"
          >
            <Plus className="h-3.5 w-3.5 stroke-[2.5]" /> New Sector Unit
          </Button>
        </PermissionGuard>
      </div>

      {/* SEARCH AND FILTERS CONTROLS AXIS */}
      <div className="flex flex-wrap items-center gap-2">
        <div className="flex items-center max-w-xs w-full relative group">
          <Search className="absolute left-2.5 top-2.5 h-3.5 w-3.5 text-muted-foreground/60 transition-colors group-focus-within:text-primary" />
          <input 
            type="text" 
            placeholder="Search sectors matrix..." 
            value={search} 
            onChange={(e) => { setSearch(e.target.value); setPage(1); }}
            className="w-full text-xs font-medium pl-8 pr-14 py-2 border border-border/40 bg-surface rounded-lg text-foreground focus:outline-none focus:border-primary transition-colors"
          />
          
          <div className="absolute right-2.5 top-2 flex items-center gap-1.5">
            {search && (
              <button
                type="button"
                onClick={handleClearSearch}
                className="p-0.5 rounded-md hover:bg-muted text-muted-foreground/60 hover:text-foreground transition-colors cursor-pointer"
                title="Clear search"
              >
                <X className="h-3.5 w-3.5" />
              </button>
            )}

            {isFetching && (
              <span className="flex h-2 w-2 relative">
                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"></span>
                <span className="relative inline-flex rounded-full h-2 w-2 bg-primary"></span>
              </span>
            )}
          </div>
        </div>

        {isSuperAdmin && (
          <div className="w-full sm:w-auto">
            <select
              value={selectedDistrict}
              onChange={(e) => { setSelectedDistrict(e.target.value); setPage(1); }}
              className="w-full sm:w-auto text-xs font-semibold px-2.5 py-2 border border-border/40 bg-surface rounded-lg text-muted-foreground focus:outline-none focus:border-primary transition-colors cursor-pointer"
            >
              <option value="">All Maharashtra Districts</option>
              {districtData?.items?.map((d: any) => (
                <option key={d.id} value={d.id}>{d.name}</option>
              ))}
            </select>
          </div>
        )}
      </div>

      {/* TABLE DATA MATRIX RENDER */}
      {isLoading && !data ? (
        <TableSkeleton />
      ) : (
        <DataTable 
          data={data?.items || []} 
          columns={columns} 
          emptyMessage="No operations sector nodes configured matching filter inputs."
          pagination={data ? {
            page: data.page, pages: data.pages, total: data.total, onPageChange: setPage
          } : undefined}
        />
      )}

      {isCreateOpen && <CreateSectorModal onClose={() => setIsCreateOpen(false)} />}
      
      {provisionTarget && (
        <ProvisionSectorOwnerModal 
          sectorId={provisionTarget.id} 
          sectorName={provisionTarget.name}
          onClose={() => setProvisionTarget(null)} 
        />
      )}
    </div>
  );
}