'use client';

import { useState, FormEvent, useEffect } from 'react';
import { X, User, Loader2 } from 'lucide-react';
import type { User as UserType } from '@/lib/types';

interface Props {
  user?:    UserType | null;
  onClose:  () => void;
  onSaved:  () => void;
}

export default function UserModal({ user, onClose, onSaved }: Props) {
  const isEdit = !!user;
  const [form,    setForm]    = useState({ username: '', password: '', role: 'user' as 'admin' | 'user' });
  const [loading, setLoading] = useState(false);
  const [error,   setError]   = useState('');

  useEffect(() => {
    if (user) setForm({ username: user.username, password: '', role: user.role });
  }, [user]);

  async function submit(e: FormEvent) {
    e.preventDefault();
    setLoading(true);
    setError('');

    const body: Record<string, string> = { username: form.username, role: form.role };
    if (form.password) body.password = form.password;

    try {
      const res = await fetch(
        isEdit ? `/api/admin/users/${user!.id}` : '/api/admin/users',
        {
          method:  isEdit ? 'PUT' : 'POST',
          headers: { 'Content-Type': 'application/json' },
          body:    JSON.stringify(body),
        }
      );
      if (!res.ok) throw new Error((await res.json()).error ?? 'Failed');
      onSaved();
    } catch (err: unknown) {
      setError(err instanceof Error ? err.message : 'Something went wrong');
    } finally {
      setLoading(false);
    }
  }

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/40">
      <div className="card w-full max-w-sm animate-in fade-in zoom-in-95">
        <div className="flex items-center justify-between border-b border-slate-200 px-5 py-4">
          <h2 className="font-semibold text-slate-800">{isEdit ? 'Edit User' : 'Create User'}</h2>
          <button onClick={onClose} className="rounded-lg p-1.5 hover:bg-slate-100">
            <X className="h-4 w-4" />
          </button>
        </div>

        <form onSubmit={submit} className="p-5 space-y-4">
          {error && (
            <p className="rounded-lg bg-red-50 px-3 py-2 text-sm text-red-600 border border-red-100">{error}</p>
          )}

          <div>
            <label className="mb-1 block text-sm font-medium text-slate-700">Username</label>
            <input
              autoFocus
              type="text"
              value={form.username}
              onChange={(e) => setForm({ ...form, username: e.target.value })}
              className="input"
              required
              maxLength={100}
            />
          </div>

          <div>
            <label className="mb-1 block text-sm font-medium text-slate-700">
              Password {isEdit && <span className="text-slate-400 font-normal">(leave blank to keep)</span>}
            </label>
            <input
              type="password"
              value={form.password}
              onChange={(e) => setForm({ ...form, password: e.target.value })}
              className="input"
              required={!isEdit}
              minLength={6}
              placeholder={isEdit ? '••••••' : 'Minimum 6 characters'}
            />
          </div>

          <div>
            <label className="mb-1 block text-sm font-medium text-slate-700">Role</label>
            <select
              value={form.role}
              onChange={(e) => setForm({ ...form, role: e.target.value as 'admin' | 'user' })}
              className="input"
            >
              <option value="user">User</option>
              <option value="admin">Admin</option>
            </select>
          </div>

          <div className="flex justify-end gap-2">
            <button type="button" onClick={onClose} className="btn-secondary">Cancel</button>
            <button type="submit" disabled={loading} className="btn-primary">
              {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <User className="h-4 w-4" />}
              {isEdit ? 'Save Changes' : 'Create'}
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}