'use client';

import React, { useState, useEffect, useCallback } from 'react';
import { useTranslation } from '@/lib/i18n';
import { useStore } from '@/lib/store';
import { Building2, Plus, Trash2, Edit3, Save, X, Loader2, MapPin, Users, ChevronDown, ChevronRight, UserCircle } from 'lucide-react';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Badge } from '@/components/ui/badge';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog';
import { Textarea } from '@/components/ui/textarea';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Switch } from '@/components/ui/switch';
import { authFetch } from '@/lib/api';
import DataPagination from '@/components/shared/DataPagination';

interface DepartmentData {
  id: string;
  name: string;
  nameBn?: string | null;
  code: string;
  description?: string | null;
  isActive: boolean;
  hodId?: string | null;
  hod?: { id: string; name: string; email: string; phone?: string } | null;
  engineerCount?: number;
  areas: Array<{ id: string; name: string; code: string }>;
  engineers?: Array<{ id: string; name: string; email: string }>;
}

export default function DepartmentMapping() {
  const { t } = useTranslation();
  const [departments, setDepartments] = useState<DepartmentData[]>([]);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [expandedDept, setExpandedDept] = useState<string | null>(null);
  const [page, setPage] = useState(1);
  const DEPTS_PER_PAGE = 10;

  // HODs for dropdown
  const [hods, setHods] = useState<Array<{ id: string; name: string; email: string }>>([]);
  // Engineers for assignment
  const [engineers, setEngineers] = useState<Array<{ id: string; name: string; email: string; departmentId?: string | null }>>([]);

  // Dialog state
  const [createDialogOpen, setCreateDialogOpen] = useState(false);
  const [editDialogOpen, setEditDialogOpen] = useState(false);
  const [editDept, setEditDept] = useState<DepartmentData | null>(null);
  const [formData, setFormData] = useState({ name: '', nameBn: '', code: '', description: '', hodId: '' });

  const fetchDepartments = useCallback(async () => {
    setLoading(true);
    try {
      const [deptRes, hodRes, engRes] = await Promise.all([
        authFetch('/api/departments'),
        authFetch('/api/users?role=head_of_department&limit=100'),
        authFetch('/api/users?role=service_engineer&limit=100'),
      ]);
      if (deptRes.ok) {
        const data = await deptRes.json();
        setDepartments(data.departments || []);
      }
      if (hodRes.ok) {
        const data = await hodRes.json();
        setHods(data.users || []);
      }
      if (engRes.ok) {
        const data = await engRes.json();
        setEngineers(data.users || []);
      }
    } catch { } finally { setLoading(false); }
  }, []);

  useEffect(() => { fetchDepartments(); }, [fetchDepartments]);

  const handleCreate = async () => {
    if (!formData.name.trim() || !formData.code.trim()) return;
    setSaving(true);
    try {
      const res = await authFetch('/api/departments', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          name: formData.name,
          nameBn: formData.nameBn || undefined,
          code: formData.code,
          description: formData.description || undefined,
          hodId: formData.hodId || undefined,
        }),
      });
      if (res.ok) {
        setCreateDialogOpen(false);
        setFormData({ name: '', nameBn: '', code: '', description: '', hodId: '' });
        fetchDepartments();
      }
    } catch { } finally { setSaving(false); }
  };

  const handleEdit = async () => {
    if (!editDept || !formData.name.trim() || !formData.code.trim()) return;
    setSaving(true);
    try {
      const res = await authFetch(`/api/departments/${editDept.id}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          name: formData.name,
          nameBn: formData.nameBn || undefined,
          code: formData.code,
          description: formData.description || undefined,
          hodId: formData.hodId || null,
        }),
      });
      if (res.ok) {
        setEditDialogOpen(false);
        setEditDept(null);
        fetchDepartments();
      }
    } catch { } finally { setSaving(false); }
  };

  const handleDelete = async (deptId: string) => {
    setSaving(true);
    try {
      await authFetch(`/api/departments/${deptId}`, { method: 'DELETE' });
      fetchDepartments();
    } catch { } finally { setSaving(false); }
  };

  const openEditDialog = (dept: DepartmentData) => {
    setEditDept(dept);
    setFormData({ name: dept.name, nameBn: dept.nameBn || '', code: dept.code, description: dept.description || '', hodId: dept.hodId || '' });
    setEditDialogOpen(true);
  };

  const toggleExpanded = (deptId: string) => {
    setExpandedDept(expandedDept === deptId ? null : deptId);
  };

  const totalPages = Math.ceil(departments.length / DEPTS_PER_PAGE);
  const paginatedDepartments = departments.slice((page - 1) * DEPTS_PER_PAGE, page * DEPTS_PER_PAGE);

  if (loading) {
    return <div className="flex items-center justify-center py-20"><Loader2 className="w-8 h-8 animate-spin text-emerald-600" /></div>;
  }

  return (
    <div className="space-y-6">
      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div>
          <h1 className="text-2xl font-bold text-foreground">Department Mapping</h1>
          <p className="text-sm text-muted-foreground mt-1">Create departments, map areas, and assign HODs and engineers</p>
        </div>
        <Button className="bg-emerald-600 hover:bg-emerald-700" onClick={() => { setFormData({ name: '', nameBn: '', code: '', description: '', hodId: '' }); setCreateDialogOpen(true); }}>
          <Plus className="w-4 h-4 mr-1" /> Create Department
        </Button>
      </div>

      {/* Department Tree */}
      {departments.length === 0 ? (
        <Card>
          <CardContent className="py-12 text-center">
            <Building2 className="w-12 h-12 mx-auto mb-3 text-muted-foreground/30" />
            <p className="text-sm text-muted-foreground">No departments created yet</p>
          </CardContent>
        </Card>
      ) : (
        <>
        <div className="space-y-3">
          {paginatedDepartments.map((dept) => (
            <Card key={dept.id} className={dept.isActive ? '' : 'opacity-60'}>
              <CardContent className="p-4">
                <div className="flex items-center gap-3 cursor-pointer" onClick={() => toggleExpanded(dept.id)}>
                  <button className="flex-shrink-0">
                    {expandedDept === dept.id ? <ChevronDown className="w-5 h-5 text-emerald-600" /> : <ChevronRight className="w-5 h-5 text-emerald-600" />}
                  </button>
                  <div className="flex-shrink-0 w-10 h-10 rounded-lg bg-emerald-50 dark:bg-emerald-950/30 flex items-center justify-center">
                    <Building2 className="w-5 h-5 text-emerald-600" />
                  </div>
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center gap-2">
                      <h3 className="font-semibold text-sm">{dept.name}</h3>
                      <Badge variant="outline" className="text-[10px]">{dept.code}</Badge>
                      {dept.nameBn && <span className="text-xs text-muted-foreground">({dept.nameBn})</span>}
                    </div>
                    <div className="flex items-center gap-3 mt-0.5 text-xs text-muted-foreground">
                      {dept.hod && <span className="flex items-center gap-1"><UserCircle className="w-3 h-3" /> HOD: {dept.hod.name}</span>}
                      <span className="flex items-center gap-1"><MapPin className="w-3 h-3" /> {dept.areas.length} areas</span>
                      <span className="flex items-center gap-1"><Users className="w-3 h-3" /> {dept.engineerCount || 0} engineers</span>
                    </div>
                  </div>
                  <div className="flex items-center gap-1.5">
                    <Button size="sm" variant="ghost" className="h-7 w-7 p-0" onClick={(e) => { e.stopPropagation(); openEditDialog(dept); }}>
                      <Edit3 className="w-3.5 h-3.5" />
                    </Button>
                    <Button size="sm" variant="ghost" className="h-7 w-7 p-0 text-red-500 hover:text-red-600" onClick={(e) => { e.stopPropagation(); handleDelete(dept.id); }}>
                      <Trash2 className="w-3.5 h-3.5" />
                    </Button>
                  </div>
                </div>

                {expandedDept === dept.id && (
                  <div className="mt-4 ml-12 space-y-3">
                    {/* Areas */}
                    <div>
                      <h4 className="text-xs font-semibold text-emerald-700 uppercase tracking-wider mb-2">Areas</h4>
                      {dept.areas.length > 0 ? (
                        <div className="flex flex-wrap gap-1.5">
                          {dept.areas.map(area => (
                            <Badge key={area.id} variant="secondary" className="text-xs bg-emerald-50 text-emerald-700 dark:bg-emerald-950/30 dark:text-emerald-300">
                              <MapPin className="w-3 h-3 mr-1" />{area.name} ({area.code})
                            </Badge>
                          ))}
                        </div>
                      ) : (
                        <p className="text-xs text-muted-foreground">No areas mapped</p>
                      )}
                    </div>

                    {/* HOD Info */}
                    <div>
                      <h4 className="text-xs font-semibold text-emerald-700 uppercase tracking-wider mb-2">Head of Department</h4>
                      {dept.hod ? (
                        <div className="flex items-center gap-2 bg-muted/50 rounded-lg p-2">
                          <div className="w-8 h-8 rounded-full bg-emerald-100 dark:bg-emerald-900/30 flex items-center justify-center">
                            <UserCircle className="w-4 h-4 text-emerald-600" />
                          </div>
                          <div>
                            <p className="text-sm font-medium">{dept.hod.name}</p>
                            <p className="text-xs text-muted-foreground">{dept.hod.email}</p>
                          </div>
                        </div>
                      ) : (
                        <p className="text-xs text-muted-foreground">No HOD assigned</p>
                      )}
                    </div>
                  </div>
                )}
              </CardContent>
            </Card>
          ))}
        </div>
        <DataPagination
          page={page}
          totalPages={totalPages}
          total={departments.length}
          onPageChange={setPage}
          limit={DEPTS_PER_PAGE}
        />
        </>
      )}

      {/* Create Dialog */}
      <Dialog open={createDialogOpen} onOpenChange={setCreateDialogOpen}>
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <DialogTitle>Create Department</DialogTitle>
          </DialogHeader>
          <div className="space-y-4 py-4">
            <div className="grid grid-cols-2 gap-3">
              <div className="space-y-2">
                <Label>Name</Label>
                <Input value={formData.name} onChange={(e) => setFormData(f => ({ ...f, name: e.target.value }))} placeholder="Department name" />
              </div>
              <div className="space-y-2">
                <Label>Code</Label>
                <Input value={formData.code} onChange={(e) => setFormData(f => ({ ...f, code: e.target.value }))} placeholder="DEPT-001" />
              </div>
            </div>
            <div className="space-y-2">
              <Label>Name (Bengali)</Label>
              <Input value={formData.nameBn} onChange={(e) => setFormData(f => ({ ...f, nameBn: e.target.value }))} placeholder="বাংলায় নাম" />
            </div>
            <div className="space-y-2">
              <Label>Description</Label>
              <Textarea value={formData.description} onChange={(e) => setFormData(f => ({ ...f, description: e.target.value }))} placeholder="Department description..." rows={2} />
            </div>
            <div className="space-y-2">
              <Label>Assign HOD</Label>
              <Select value={formData.hodId} onValueChange={(v) => setFormData(f => ({ ...f, hodId: v }))}>
                <SelectTrigger><SelectValue placeholder="Select HOD" /></SelectTrigger>
                <SelectContent>
                  <SelectItem value="none">None</SelectItem>
                  {hods.map(h => <SelectItem key={h.id} value={h.id}>{h.name} ({h.email})</SelectItem>)}
                </SelectContent>
              </Select>
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setCreateDialogOpen(false)}>Cancel</Button>
            <Button className="bg-emerald-600 hover:bg-emerald-700" onClick={handleCreate} disabled={!formData.name.trim() || !formData.code.trim() || saving}>
              {saving ? <Loader2 className="w-4 h-4 animate-spin mr-1" /> : <Plus className="w-4 h-4 mr-1" />} Create
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* Edit Dialog */}
      <Dialog open={editDialogOpen} onOpenChange={setEditDialogOpen}>
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <DialogTitle>Edit Department</DialogTitle>
          </DialogHeader>
          <div className="space-y-4 py-4">
            <div className="grid grid-cols-2 gap-3">
              <div className="space-y-2">
                <Label>Name</Label>
                <Input value={formData.name} onChange={(e) => setFormData(f => ({ ...f, name: e.target.value }))} />
              </div>
              <div className="space-y-2">
                <Label>Code</Label>
                <Input value={formData.code} onChange={(e) => setFormData(f => ({ ...f, code: e.target.value }))} />
              </div>
            </div>
            <div className="space-y-2">
              <Label>Name (Bengali)</Label>
              <Input value={formData.nameBn} onChange={(e) => setFormData(f => ({ ...f, nameBn: e.target.value }))} />
            </div>
            <div className="space-y-2">
              <Label>Description</Label>
              <Textarea value={formData.description} onChange={(e) => setFormData(f => ({ ...f, description: e.target.value }))} rows={2} />
            </div>
            <div className="space-y-2">
              <Label>Assign HOD</Label>
              <Select value={formData.hodId || 'none'} onValueChange={(v) => setFormData(f => ({ ...f, hodId: v === 'none' ? '' : v }))}>
                <SelectTrigger><SelectValue placeholder="Select HOD" /></SelectTrigger>
                <SelectContent>
                  <SelectItem value="none">None</SelectItem>
                  {hods.map(h => <SelectItem key={h.id} value={h.id}>{h.name} ({h.email})</SelectItem>)}
                </SelectContent>
              </Select>
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setEditDialogOpen(false)}>Cancel</Button>
            <Button className="bg-emerald-600 hover:bg-emerald-700" onClick={handleEdit} disabled={saving}>
              {saving ? <Loader2 className="w-4 h-4 animate-spin mr-1" /> : <Save className="w-4 h-4 mr-1" />} Save
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}