'use client';

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

type DistrictWithRel = {
  id: string;
  code: string;
  name: string;
  stateId: string;
  isActive: boolean;
  state?: {
    name: string
  };
  districtOwner?: {
    user: {
      firstName: string;
      lastName: string;
      email: string;
    }
  } | null;
};

export default function DistrictsManagementPage() {
  const [search, setSearch] = useState('');
  const [page, setPage] = useState(1);
  const [isModalOpen, setIsModalOpen] = useState(false);
  
  const [provisionTarget, setProvisionTarget] = useState<{ id: string; name: string } | null>(null);

  const { data, isLoading } = useDistricts(page, search);

  const columns: Column<DistrictWithRel>[] = [
    {
      header: 'Sys Code',
      className: 'w-24 font-mono font-bold text-primary tracking-tight text-xs',
      cell: (district) => district.code,
    },
    {
      header: 'District Entity',
      className: 'font-semibold tracking-tight text-xs text-foreground',
      cell: (district) => (
        <div className="flex items-center gap-2">
          <MapPin className="h-3.5 w-3.5 text-muted-foreground/40 shrink-0" />
          <span>{district.name}</span>
        </div>
      ),
    },
    {
      header: 'Jurisdiction State',
      className: 'w-36 text-muted-foreground/80 text-xs font-medium',
      cell: (district) => district.state?.name,
    },
    {
      header: 'District Governance / Owner',
      className: 'min-w-[200px]',
      cell: (district) => {
        if (district.districtOwner?.user) {
          const u = district.districtOwner.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: district.id, name: district.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: (district) => (
        <span
          className={`inline-flex items-center gap-1 px-2 py-0.5 text-[10px] font-bold rounded-full border ${
            district.isActive
              ? 'bg-emerald-500/10 text-emerald-500 border-emerald-500/10'
              : 'bg-muted text-muted-foreground border-border/40'
          }`}
        >
          <CheckCircle className={`h-2.5 w-2.5 ${district.isActive ? 'text-emerald-500' : 'text-muted-foreground'}`} />
          <span>{district.isActive ? 'Active' : 'Inactive'}</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 District
            </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 && <CreateDistrictModal onClose={() => setIsModalOpen(false)} />}
      </div>
      
      {/* Slide-out Management Provisioning Panel */}
      {provisionTarget && (
        <ProvisionOwnerModal 
          districtId={provisionTarget.id}
          districtName={provisionTarget.name}
          onClose={() => setProvisionTarget(null)} 
        />
      )}
    </>
  );
}