'use client';

import React, { useEffect, useState, useCallback, useRef } from 'react';
import { useTranslation } from '@/lib/i18n';
import {
  Plus,
  Search,
  Pencil,
  UserCheck,
  UserX,
} from 'lucide-react';
import { Card, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Badge } from '@/components/ui/badge';
import { Switch } from '@/components/ui/switch';
import { Label } from '@/components/ui/label';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from '@/components/ui/dialog';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { Textarea } from '@/components/ui/textarea';
import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Slider } from '@/components/ui/slider';
import { authFetch } from '@/lib/api';
import DataPagination from '@/components/shared/DataPagination';

interface UserData {
  id: string;
  name: string;
  email: string;
  phone?: string;
  role: string;
  isActive: boolean;
  areaId?: string;
  area?: { id: string; name: string; code: string } | null;
  permissions: string[];
  workloadLimit: number;
  activeWorkload: number;
  createdAt: string;
}

const roleColors: Record<string, string> = {
  super_admin: 'bg-purple-100 text-purple-800 dark:bg-purple-950/30 dark:text-purple-300',
  admin: 'bg-emerald-100 text-emerald-800 dark:bg-emerald-950/30 dark:text-emerald-300',
  head_of_department: 'bg-blue-100 text-blue-800 dark:bg-blue-950/30 dark:text-blue-300',
  service_engineer: 'bg-orange-100 text-orange-800 dark:bg-orange-950/30 dark:text-orange-300',
  vendor: 'bg-cyan-100 text-cyan-800 dark:bg-cyan-950/30 dark:text-cyan-300',
  user: 'bg-gray-100 text-gray-800 dark:bg-gray-950/30 dark:text-gray-300',
};

export default function UserManager() {
  const { t } = useTranslation();
  const [users, setUsers] = useState<UserData[]>([]);
  const [areas, setAreas] = useState<Array<{ id: string; name: string; code: string }>>([]);
  const [roles, setRoles] = useState<Array<{ id: string; name: string; displayName: string }>>([]);
  const [loading, setLoading] = useState(true);
  const [roleFilter, setRoleFilter] = useState('all');
  const [search, setSearch] = useState('');
  const [debouncedSearch, setDebouncedSearch] = useState('');
  const [editUser, setEditUser] = useState<UserData | null>(null);
  const [addOpen, setAddOpen] = useState(false);
  const [saving, setSaving] = useState(false);
  const [page, setPage] = useState(1);
  const [totalPages, setTotalPages] = useState(1);
  const [totalCount, setTotalCount] = useState(0);

  const [formName, setFormName] = useState('');
  const [formEmail, setFormEmail] = useState('');
  const [formPhone, setFormPhone] = useState('');
  const [formPassword, setFormPassword] = useState('');
  const [formRole, setFormRole] = useState('user');
  const [formAreaId, setFormAreaId] = useState('');
  const [formWorkloadLimit, setFormWorkloadLimit] = useState(10);
  // Permissions removed from user form - now managed via Role & Permission module

  // Debounce search to avoid API call on every keystroke
  const searchTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
  useEffect(() => {
    if (searchTimerRef.current) clearTimeout(searchTimerRef.current);
    searchTimerRef.current = setTimeout(() => {
      setDebouncedSearch(search);
      setPage(1);
    }, 400);
    return () => { if (searchTimerRef.current) clearTimeout(searchTimerRef.current); };
  }, [search]);

  const fetchUsers = useCallback(async () => {
    setLoading(true);
    try {
      const params = new URLSearchParams();
      if (roleFilter !== 'all') params.set('role', roleFilter);
      if (debouncedSearch) params.set('search', debouncedSearch);
      params.set('limit', '20');
      params.set('page', String(page));

      const res = await authFetch(`/api/users?${params}`);
      if (res.ok) {
        const data = await res.json();
        setUsers(data.users || []);
        if (data.pagination) {
          setTotalPages(data.pagination.totalPages || 1);
          setTotalCount(data.pagination.total || 0);
        }
      }
    } catch (err) {
      console.error('Fetch users error:', err);
    } finally {
      setLoading(false);
    }
  }, [roleFilter, debouncedSearch, page]);

  const fetchAreas = useCallback(async () => {
    try {
      const res = await authFetch('/api/areas');
      if (res.ok) {
        const data = await res.json();
        setAreas(data.areas || []);
      }
    } catch (err) {
      console.error('Fetch areas error:', err);
    }
  }, []);

  const fetchRoles = useCallback(async () => {
    try {
      const res = await authFetch('/api/roles');
      if (res.ok) {
        const data = await res.json();
        setRoles((data.roles || []).map((r: { id: string; name: string; displayName: string }) => ({ id: r.id, name: r.name, displayName: r.displayName })));
      }
    } catch (err) {
      console.error('Fetch roles error:', err);
    }
  }, []);

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

  useEffect(() => {
    fetchAreas();
    fetchRoles();
  }, [fetchAreas, fetchRoles]);

  const resetForm = () => {
    setFormName('');
    setFormEmail('');
    setFormPhone('');
    setFormPassword('');
    setFormRole('user');
    setFormAreaId('');
    setFormWorkloadLimit(10);
  };

  const openAdd = () => {
    resetForm();
    setEditUser(null);
    setAddOpen(true);
  };

  const openEdit = (user: UserData) => {
    setEditUser(user);
    setFormName(user.name);
    setFormEmail(user.email);
    setFormPhone(user.phone || '');
    setFormRole(user.role);
    // Role is already set via setFormRole above
    setFormAreaId(user.areaId || '');
    setFormWorkloadLimit(user.workloadLimit);
    setAddOpen(true);
  };

  const handleSave = async () => {
    setSaving(true);
    try {
      if (editUser) {
        // Update existing user
        const res = await authFetch(`/api/users`, {
          method: 'PUT',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            id: editUser.id,
            name: formName,
            email: formEmail,
            phone: formPhone,
            role: formRole,
            areaId: formAreaId || null,
            workloadLimit: formWorkloadLimit,
            // permissions managed via Role & Permission module
          }),
        });
        if (!res.ok) {
          const err = await res.json();
          console.error('Update user error:', err);
        }
      } else {
        // Create new user
        const res = await authFetch('/api/users', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            name: formName,
            email: formEmail,
            phone: formPhone,
            password: formPassword || 'TempPass123!',
            role: formRole,
            areaId: formAreaId || null,
            workloadLimit: formWorkloadLimit,
            // permissions managed via Role & Permission module
          }),
        });
        if (!res.ok) {
          const err = await res.json();
          console.error('Create user error:', err);
        }
      }
      setAddOpen(false);
      resetForm();
      fetchUsers();
    } catch (err) {
      console.error('Save user error:', err);
    } finally {
      setSaving(false);
    }
  };

  const toggleUserActive = async (user: UserData) => {
    try {
      await authFetch('/api/users', {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ id: user.id, isActive: !user.isActive }),
      });
      fetchUsers();
    } catch (err) {
      console.error('Toggle active error:', err);
    }
  };

  const getRoleLabel = (role: string) => {
    const m: Record<string, string> = {
      super_admin: 'Super Admin',
      admin: 'Admin',
      head_of_department: 'HOD',
      service_engineer: 'Engineer',
      vendor: 'Vendor',
      user: 'User',
    };
    return m[role] || role;
  };

  return (
    <div className="space-y-4 animate-fade-in">
      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
        <div>
          <h1 className="text-2xl font-bold">{t.nav.users}</h1>
          <p className="text-sm text-muted-foreground">Manage users, roles, and permissions</p>
        </div>
        <Button onClick={openAdd} className="bg-emerald-600 hover:bg-emerald-700">
          <Plus className="w-4 h-4 mr-2" /> {t.actions.add} {t.nav.users}
        </Button>
      </div>

      {/* Role Tabs */}
      <Tabs value={roleFilter} onValueChange={(v) => { setRoleFilter(v); setPage(1); }}>
        <TabsList className="bg-muted/50 flex-wrap h-auto">
          {['all', 'super_admin', 'admin', 'head_of_department', 'service_engineer', 'vendor', 'user'].map((role) => (
            <TabsTrigger key={role} value={role} className="text-xs">
              {role === 'all' ? t.common.all : getRoleLabel(role)}
            </TabsTrigger>
          ))}
        </TabsList>
      </Tabs>

      {/* Search */}
      <div className="relative max-w-sm">
        <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
        <Input
          placeholder="Search users..."
          value={search}
          onChange={(e) => setSearch(e.target.value)}
          className="pl-9 h-9"
        />
      </div>

      {/* Users Table */}
      <Card>
        <CardContent className="p-0">
          {loading ? (
            <div className="p-8 text-center text-muted-foreground">{t.common.loading}</div>
          ) : users.length === 0 ? (
            <div className="p-8 text-center text-muted-foreground">{t.common.noResults}</div>
          ) : (
            <div className="overflow-x-auto">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead className="text-xs">{t.form.name}</TableHead>
                    <TableHead className="text-xs">{t.form.email}</TableHead>
                    <TableHead className="text-xs hidden sm:table-cell">{t.form.phone}</TableHead>
                    <TableHead className="text-xs">{t.form.role}</TableHead>
                    <TableHead className="text-xs hidden md:table-cell">{t.form.area}</TableHead>
                    <TableHead className="text-xs">{t.form.status}</TableHead>
                    <TableHead className="text-xs hidden lg:table-cell">{t.workload.capacity}</TableHead>
                    <TableHead className="text-xs">Actions</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {users.map((user) => (
                    <TableRow key={user.id}>
                      <TableCell className="text-sm font-medium">{user.name}</TableCell>
                      <TableCell className="text-xs">{user.email}</TableCell>
                      <TableCell className="text-xs hidden sm:table-cell">{user.phone || '-'}</TableCell>
                      <TableCell>
                        <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-medium ${roleColors[user.role] || ''}`}>
                          {getRoleLabel(user.role)}
                        </span>
                      </TableCell>
                      <TableCell className="text-xs hidden md:table-cell">{user.area?.name || '-'}</TableCell>
                      <TableCell>
                        <div className="flex items-center gap-2">
                          <Switch
                            checked={user.isActive}
                            onCheckedChange={() => toggleUserActive(user)}
                            className="scale-75"
                          />
                          <span className="text-[10px]">{user.isActive ? 'Active' : 'Inactive'}</span>
                        </div>
                      </TableCell>
                      <TableCell className="text-xs hidden lg:table-cell">
                        <Badge variant="outline" className="text-[10px]">
                          {user.activeWorkload}/{user.workloadLimit}
                        </Badge>
                      </TableCell>
                      <TableCell>
                        <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => openEdit(user)}>
                          <Pencil className="w-3.5 h-3.5" />
                        </Button>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>
          )}
        </CardContent>
      </Card>

      {/* Pagination */}
      <DataPagination
        page={page}
        totalPages={totalPages}
        total={totalCount}
        onPageChange={setPage}
        limit={20}
      />

      {/* Add/Edit User Dialog */}
      <Dialog open={addOpen} onOpenChange={setAddOpen}>
        <DialogContent className="max-w-xl max-h-[85vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>{editUser ? `Edit User: ${editUser.name}` : 'Add New User'}</DialogTitle>
            <DialogDescription>{editUser ? 'Update user information and permissions' : 'Create a new user account'}</DialogDescription>
          </DialogHeader>

          <div className="space-y-4 py-2">
            <div className="grid grid-cols-2 gap-3">
              <div className="space-y-1.5">
                <Label className="text-xs">{t.form.name} *</Label>
                <Input value={formName} onChange={(e) => setFormName(e.target.value)} placeholder="Full name" />
              </div>
              <div className="space-y-1.5">
                <Label className="text-xs">{t.form.email} *</Label>
                <Input type="email" value={formEmail} onChange={(e) => setFormEmail(e.target.value)} placeholder="email@example.com" />
              </div>
            </div>

            <div className="grid grid-cols-2 gap-3">
              <div className="space-y-1.5">
                <Label className="text-xs">{t.form.phone}</Label>
                <Input value={formPhone} onChange={(e) => setFormPhone(e.target.value)} placeholder="+880..." />
              </div>
              {!editUser && (
                <div className="space-y-1.5">
                  <Label className="text-xs">{t.form.password} *</Label>
                  <Input type="password" value={formPassword} onChange={(e) => setFormPassword(e.target.value)} placeholder="Min 6 chars" />
                </div>
              )}
            </div>

            <div className="grid grid-cols-2 gap-3">
              <div className="space-y-1.5">
                <Label className="text-xs">{t.form.role}</Label>
                <Select value={formRole} onValueChange={setFormRole}>
                  <SelectTrigger><SelectValue /></SelectTrigger>
                  <SelectContent>
                    <SelectItem value="super_admin">Super Admin</SelectItem>
                    <SelectItem value="admin">Admin</SelectItem>
                    <SelectItem value="head_of_department">HOD</SelectItem>
                    <SelectItem value="service_engineer">Service Engineer</SelectItem>
                    <SelectItem value="vendor">Vendor</SelectItem>
                    <SelectItem value="user">User</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div className="space-y-1.5">
                <Label className="text-xs">{t.form.area}</Label>
                <Select value={formAreaId} onValueChange={setFormAreaId}>
                  <SelectTrigger><SelectValue placeholder="Select area" /></SelectTrigger>
                  <SelectContent>
                    <SelectItem value="none">No Area</SelectItem>
                    {areas.map((a) => (
                      <SelectItem key={a.id} value={a.id}>{a.name}</SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
            </div>

            {/* Workload Limit */}
            <div className="space-y-2">
              <div className="flex items-center justify-between">
                <Label className="text-xs">{t.workload.capacity} Limit</Label>
                <span className="text-sm font-medium text-emerald-600">{formWorkloadLimit}</span>
              </div>
              <Slider
                value={[formWorkloadLimit]}
                onValueChange={(v) => setFormWorkloadLimit(v[0])}
                max={50}
                min={1}
                step={1}
                className="py-2"
              />
            </div>
          </div>

          <DialogFooter>
            <Button variant="outline" onClick={() => setAddOpen(false)}>{t.actions.cancel}</Button>
            <Button onClick={handleSave} disabled={saving || !formName || !formEmail} className="bg-emerald-600 hover:bg-emerald-700">
              {saving ? t.common.loading : t.actions.save}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}