'use client';

import React, { useState } from 'react';
import { Plus, Search, MapPin, CheckCircle, UserPlus } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { PermissionGuard } from '@/features/auth/guards';
import { PERMISSIONS } from '@/constants/permissions';
import { DataTable, Column } from '@/components/ui/data-table';
import CreateDistrictModal from './_components/CreateStateModal';
import ProvisionOwnerModal from './_components/ProvisionOwnerModal'; 
import { TableSkeleton } from '@/components/ui/tableSkeleton';
import { useStates } from '@/services/states/queries';
import CreateStateModal from './_components/CreateStateModal';
import { useDebounce } from '@/hooks/useDebounce';

type StateWithRel = {
  id: string;
  code: string;
  name: string;
  stateOwner?: {
    user: {
      firstName: string;
      lastName: string;
      email: string;
    }
  } | null;
};

export default function StatesManagementPage() {
  const [search, setSearch] = useState('');
  const [page, setPage] = useState(1);
  const [isModalOpen, setIsModalOpen] = useState(false);

  // ✅ Debounce search parameter by 300ms
  const debouncedSearch = useDebounce(search, 300);
  
  const [provisionTarget, setProvisionTarget] = useState<{ id: string; name: string } | null>(null);

  const { data, isLoading } = useStates(page, debouncedSearch);

  const columns: Column<StateWithRel>[] = [
    {
      header: 'Sys Code',
      className: 'w-24 font-mono font-bold text-primary tracking-tight text-xs',
      cell: (state) => state.code,
    },
    {
      header: 'District Entity',
      className: 'font-semibold tracking-tight text-xs text-foreground',
      cell: (state) => (
        <div className="flex items-center gap-2">
          <MapPin className="h-3.5 w-3.5 text-muted-foreground/40 shrink-0" />
          <span>{state.name}</span>
        </div>
      ),
    },
    {
      header: 'State Governance / Owner',
      className: 'min-w-[200px]',
      cell: (state) => {
        if (state.stateOwner?.user) {
          const u = state.stateOwner.user;
          return (
            <div className="flex items-center gap-2 group/owner text-left">
              <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="outline"
            onClick={() => setProvisionTarget({ id: state.id, name: state.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>
        );
      },
    },
    {
      header: 'Operation Status',
      className: 'w-32',
      cell: () => (
        <span className="inline-flex items-center gap-1 px-2 py-0.5 text-[10px] font-bold rounded-full bg-emerald-500/10 text-emerald-500 border border-emerald-500/10">
          <CheckCircle className="h-2.5 w-2.5" />
          <span>Active</span>
        </span>
      ),
    },
  ];

  if (isLoading) return <TableSkeleton />;

  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="space-y-0.5">
            <h1 className="text-sm font-black tracking-widest text-foreground uppercase">Administrative Regions</h1>
            <p className="text-[11px] font-medium text-muted-foreground/70">Configure system geography boundaries and assign ownership authorities.</p>
          </div>
          <PermissionGuard permission={PERMISSIONS.MASTERS_DISTRICTS_MANAGE}>
            <Button 
              onClick={() => setIsModalOpen(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 State
            </Button>
          </PermissionGuard>
        </div>

        {/* SEARCH BAR BUS */}
        <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 localized boundaries..." 
              value={search} 
              onChange={(e) => { setSearch(e.target.value); setPage(1); }}
              className="w-full text-xs font-medium pl-8 pr-3 py-2 border border-border/40 bg-surface rounded-lg text-foreground focus:outline-none focus:border-primary"
            />
          </div>
        </div>

        {/* REUSABLE TABLE MATRIX */}
        <DataTable 
          data={data?.items} 
          columns={columns} 
          emptyMessage="No administrative zones found mapping back to evaluation variables."
          pagination={data ? {
            page: data.page,
            pages: data.pages,
            total: data.total,
            onPageChange: setPage
          } : undefined}
        />

        {isModalOpen && <CreateStateModal onClose={() => setIsModalOpen(false)} />}
      </div>
      
      {/* Slide-out Management Provisioning Panel */}
      {provisionTarget && (
        <ProvisionOwnerModal 
          stateId={provisionTarget.id}
          stateName={provisionTarget.name}
          onClose={() => setProvisionTarget(null)} 
        />
      )}
    </>
  );
}