'use client';

import React, { useState, useEffect } from 'react';
import { getUsers, createAdminUser, updateAdminUser } from '@/lib/actions/users';
import { getCountries, getStates, getCities, getAreas } from '@/lib/actions/geography';
import { Button } from '@/components/ui/Button';
import { Input } from '@/components/ui/Input';
import { Card } from '@/components/ui/Card';

interface UserItem {
  _id: string;
  email: string;
  role: 'SUPER_ADMIN' | 'CITY_HEAD' | 'AREA_INCHARGE' | 'MEMBER';
  isActive: boolean;
  assignments: {
    scopeType: 'global' | 'city' | 'area';
    targetId: string;
    validFrom: string;
    validTo?: string;
    isActive: boolean;
  }[];
}

export default function UserManagementPage() {
  const [users, setUsers] = useState<UserItem[]>([]);
  const [countries, setCountries] = useState<any[]>([]);
  const [states, setStates] = useState<any[]>([]);
  const [cities, setCities] = useState<any[]>([]);
  const [areas, setAreas] = useState<any[]>([]);

  // Dialog States
  const [isOpen, setIsOpen] = useState(false);
  const [editUser, setEditUser] = useState<UserItem | null>(null);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  // Form fields
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [role, setRole] = useState<'SUPER_ADMIN' | 'CITY_HEAD' | 'AREA_INCHARGE' | 'MEMBER'>('AREA_INCHARGE');
  const [isActive, setIsActive] = useState(true);
  const [assignments, setAssignments] = useState<any[]>([]);

  // Assignment builder fields
  const [asgScope, setAsgScope] = useState<'global' | 'city' | 'area'>('city');
  const [asgTarget, setAsgTarget] = useState('');
  const [asgFrom, setAsgFrom] = useState(new Date().toISOString().substring(0, 10));
  const [asgTo, setAsgTo] = useState('');

  useEffect(() => {
    loadUsers();
    loadGeographies();
  }, []);

  const loadUsers = async () => {
    const list = await getUsers();
    setUsers(list);
  };

  const loadGeographies = async () => {
    const co = await getCountries();
    setCountries(co);
    if (co.length > 0) {
      const st = await getStates(co[0]._id);
      setStates(st);
      if (st.length > 0) {
        const ct = await getCities(st[0]._id);
        setCities(ct);
        if (ct.length > 0) {
          const ar = await getAreas(ct[0]._id);
          setAreas(ar);
        }
      }
    }
  };

  const handleOpenCreate = () => {
    setEditUser(null);
    setEmail('');
    setPassword('');
    setRole('AREA_INCHARGE');
    setIsActive(true);
    setAssignments([]);
    setError(null);
    setIsOpen(true);
  };

  const handleOpenEdit = (user: UserItem) => {
    setEditUser(user);
    setEmail(user.email);
    setPassword('');
    setRole(user.role);
    setIsActive(user.isActive);
    setAssignments(user.assignments.map(a => ({
      ...a,
      validFrom: a.validFrom ? new Date(a.validFrom).toISOString().substring(0, 10) : '',
      validTo: a.validTo ? new Date(a.validTo).toISOString().substring(0, 10) : ''
    })));
    setError(null);
    setIsOpen(true);
  };

  const addAssignment = () => {
    if (!asgTarget && asgScope !== 'global') {
      alert('Please select a target city/area');
      return;
    }
    setAssignments([
      ...assignments,
      {
        scopeType: asgScope,
        targetId: asgScope === 'global' ? 'global' : asgTarget,
        validFrom: asgFrom,
        validTo: asgTo || undefined,
        isActive: true
      }
    ]);
    setAsgTarget('');
    setAsgTo('');
  };

  const removeAssignment = (index: number) => {
    setAssignments(assignments.filter((_, idx) => idx !== index));
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsLoading(true);
    setError(null);

    const cleanEmail = email.trim().toLowerCase();
    if (!cleanEmail.endsWith('@geetashyam.guru')) {
      setError('Administrative users must use @geetashyam.guru email addresses.');
      setIsLoading(false);
      return;
    }

    try {
      if (editUser) {
        await updateAdminUser(editUser._id, {
          role,
          isActive,
          password: password.trim() !== '' ? password : undefined,
          assignments
        });
      } else {
        if (!password) {
          setError('Password is required for new users.');
          setIsLoading(false);
          return;
        }
        await createAdminUser({
          email: cleanEmail,
          passwordHash: password,
          role,
          assignments
        });
      }
      setIsOpen(false);
      loadUsers();
    } catch (err: any) {
      setError(err.message);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <div>
          <h1 className="text-2xl md:text-3xl font-bold text-gray-900 font-sans">User Management</h1>
          <p className="mt-1 text-sm text-gray-500">Configure admin credentials, assignments, and roles hierarchy.</p>
        </div>
        <Button onClick={handleOpenCreate} className="bg-brand-primary text-white">
          + Create Admin User
        </Button>
      </div>

      <Card className="overflow-hidden">
        <div className="overflow-x-auto">
          <table className="min-w-full divide-y divide-gray-200 text-sm">
            <thead className="bg-gray-50 text-xs font-bold text-gray-500 uppercase tracking-wider text-left">
              <tr>
                <th className="px-6 py-3">Email Address</th>
                <th className="px-6 py-3">Assigned Role</th>
                <th className="px-6 py-3">Active Assignments</th>
                <th className="px-6 py-3">Account Status</th>
                <th className="px-6 py-3 text-right">Actions</th>
              </tr>
            </thead>
            <tbody className="bg-white divide-y divide-gray-200">
              {users.map((user) => (
                <tr key={user._id}>
                  <td className="px-6 py-4 font-semibold text-gray-900">{user.email}</td>
                  <td className="px-6 py-4">
                    <span className="inline-flex px-2.5 py-1 rounded bg-brand-primary bg-opacity-10 text-brand-primary font-bold uppercase tracking-wider text-xs">
                      {user.role.replace('_', ' ')}
                    </span>
                  </td>
                  <td className="px-6 py-4 font-medium text-gray-600">
                    {user.assignments.filter(a => a.isActive).length} active boundaries
                  </td>
                  <td className="px-6 py-4">
                    <span className={`inline-flex px-2.5 py-0.5 rounded-full text-xs font-bold ${
                      user.isActive ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
                    }`}>
                      {user.isActive ? 'Active' : 'Disabled'}
                    </span>
                  </td>
                  <td className="px-6 py-4 text-right">
                    <button
                      onClick={() => handleOpenEdit(user)}
                      className="text-brand-primary font-bold hover:underline touch-target"
                    >
                      Edit User
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </Card>

      {/* --- ADD/EDIT DIALOG --- */}
      {isOpen && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
          <div className="fixed inset-0 bg-gray-600 bg-opacity-75" onClick={() => setIsOpen(false)} />
          
          <div className="relative bg-white rounded-xl shadow-xl max-w-lg w-full p-6 border border-gray-150 overflow-y-auto max-h-[90vh] animate-slide-in">
            <h3 className="text-lg font-bold text-gray-950 mb-4">
              {editUser ? 'Edit Admin User Settings' : 'Create Administrative User'}
            </h3>

            {error && (
              <div className="mb-4 bg-red-50 border border-red-200 text-red-800 p-3 rounded-lg text-sm font-semibold">
                {error}
              </div>
            )}

            <form onSubmit={handleSubmit} className="space-y-4">
              <div>
                <label className="block text-sm font-semibold text-gray-700 mb-1">Administrative Email</label>
                <Input
                  required
                  type="email"
                  placeholder="name@geetashyam.guru"
                  disabled={!!editUser}
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                />
              </div>

              <div>
                <label className="block text-sm font-semibold text-gray-700 mb-1">
                  Password {editUser && '(Leave blank to retain current)'}
                </label>
                <Input
                  type="password"
                  placeholder="••••••••"
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                />
              </div>

              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-1">Role Hierarchy</label>
                  <select
                    value={role}
                    onChange={(e) => setRole(e.target.value as any)}
                    className="w-full rounded-lg border border-gray-250 p-2.5 bg-white text-sm"
                  >
                    <option value="SUPER_ADMIN">SUPER ADMIN</option>
                    <option value="CITY_HEAD">CITY HEAD</option>
                    <option value="AREA_INCHARGE">AREA INCHARGE</option>
                  </select>
                </div>
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-1">Account State</label>
                  <select
                    value={isActive ? 'true' : 'false'}
                    onChange={(e) => setIsActive(e.target.value === 'true')}
                    className="w-full rounded-lg border border-gray-250 p-2.5 bg-white text-sm"
                  >
                    <option value="true">Active / Enabled</option>
                    <option value="false">Disabled / Suspended</option>
                  </select>
                </div>
              </div>

              {/* Geographic Scope assignments builder */}
              <div className="border-t border-gray-200 pt-4 space-y-4">
                <h4 className="font-bold text-gray-900 text-sm">Geographical Scope Assignments</h4>
                
                {/* Current assignments list */}
                {assignments.length > 0 && (
                  <div className="space-y-1 bg-gray-50 p-2.5 rounded-lg border border-gray-150">
                    {assignments.map((asg, idx) => (
                      <div key={idx} className="flex justify-between items-center text-xs font-semibold text-gray-700 p-1 border-b border-gray-100 last:border-0">
                        <span>
                          [{asg.scopeType.toUpperCase()}] ID: {asg.targetId.substring(18)} (From {asg.validFrom} {asg.validTo ? `to ${asg.validTo}` : ''})
                        </span>
                        <button
                          type="button"
                          onClick={() => removeAssignment(idx)}
                          className="text-red-500 font-bold hover:underline"
                        >
                          Remove
                        </button>
                      </div>
                    ))}
                  </div>
                )}

                {/* Add new assignment UI */}
                <div className="p-3 border border-gray-200 rounded-lg bg-gray-50 space-y-3">
                  <div className="grid grid-cols-2 gap-2">
                    <div>
                      <label className="block text-xs font-bold text-gray-500 mb-1">Scope Boundary</label>
                      <select
                        value={asgScope}
                        onChange={(e) => setAsgScope(e.target.value as any)}
                        className="w-full rounded-lg border border-gray-250 p-2 bg-white text-xs"
                      >
                        <option value="city">City Scope</option>
                        <option value="area">Area Scope</option>
                      </select>
                    </div>

                    <div>
                      <label className="block text-xs font-bold text-gray-500 mb-1">Target Selector</label>
                      {asgScope === 'city' ? (
                        <select
                          value={asgTarget}
                          onChange={(e) => setAsgTarget(e.target.value)}
                          className="w-full rounded-lg border border-gray-250 p-2 bg-white text-xs"
                        >
                          <option value="">Select City</option>
                          {cities.map(c => <option key={c._id} value={c._id}>{c.name}</option>)}
                        </select>
                      ) : (
                        <select
                          value={asgTarget}
                          onChange={(e) => setAsgTarget(e.target.value)}
                          className="w-full rounded-lg border border-gray-250 p-2 bg-white text-xs"
                        >
                          <option value="">Select Area</option>
                          {areas.map(a => <option key={a._id} value={a._id}>{a.name}</option>)}
                        </select>
                      )}
                    </div>
                  </div>

                  <div className="grid grid-cols-2 gap-2">
                    <div>
                      <label className="block text-xs font-bold text-gray-500 mb-1">Valid From</label>
                      <Input
                        type="date"
                        value={asgFrom}
                        onChange={(e) => setAsgFrom(e.target.value)}
                        className="p-1.5 text-xs"
                      />
                    </div>
                    <div>
                      <label className="block text-xs font-bold text-gray-500 mb-1">Valid To (Temporary)</label>
                      <Input
                        type="date"
                        value={asgTo}
                        onChange={(e) => setAsgTo(e.target.value)}
                        className="p-1.5 text-xs"
                        placeholder="Optional"
                      />
                    </div>
                  </div>

                  <Button type="button" onClick={addAssignment} variant="secondary" className="w-full text-xs py-1">
                    + Add Assignment Boundary
                  </Button>
                </div>
              </div>

              <div className="flex justify-end gap-2 pt-2">
                <Button type="button" variant="secondary" onClick={() => setIsOpen(false)}>
                  Cancel
                </Button>
                <Button type="submit" isLoading={isLoading} className="bg-brand-primary text-white">
                  Save Settings
                </Button>
              </div>
            </form>
          </div>
        </div>
      )}
    </div>
  );
}