import { useEffect, useState } from 'react';
import { Trash2, UserPlus } from 'lucide-react';
import { api } from '../lib/api.js';

const fieldCls = 'w-full rounded-md border px-3 py-2 text-sm bg-transparent border-slate-300 dark:border-slate-700';

function PasswordForm() {
  const [form, setForm] = useState({ currentPassword: '', newPassword: '', confirm: '' });
  const [message, setMessage] = useState(null); // { type: 'ok' | 'error', text }
  const [busy, setBusy] = useState(false);

  async function handleSubmit(e) {
    e.preventDefault();
    setMessage(null);

    if (form.newPassword !== form.confirm) {
      setMessage({ type: 'error', text: 'Новые пароли не совпадают' });
      return;
    }
    if (form.newPassword.length < 8) {
      setMessage({ type: 'error', text: 'Новый пароль должен быть не короче 8 символов' });
      return;
    }

    setBusy(true);
    try {
      await api.changePassword(form.currentPassword, form.newPassword);
      setMessage({ type: 'ok', text: 'Пароль изменён' });
      setForm({ currentPassword: '', newPassword: '', confirm: '' });
    } catch (err) {
      setMessage({
        type: 'error',
        text: err.message === 'current password is incorrect' ? 'Текущий пароль указан неверно' : 'Не удалось изменить пароль',
      });
    } finally {
      setBusy(false);
    }
  }

  return (
    <form onSubmit={handleSubmit} className="max-w-sm rounded-lg border p-5 space-y-3 bg-white border-slate-200 dark:bg-slate-900 dark:border-slate-800">
      <h2 className="text-sm font-medium mb-1">Сменить пароль</h2>

      <div>
        <label className="text-xs block mb-1">Текущий пароль</label>
        <input
          type="password"
          required
          value={form.currentPassword}
          onChange={(e) => setForm({ ...form, currentPassword: e.target.value })}
          className={fieldCls}
        />
      </div>
      <div>
        <label className="text-xs block mb-1">Новый пароль</label>
        <input
          type="password"
          required
          value={form.newPassword}
          onChange={(e) => setForm({ ...form, newPassword: e.target.value })}
          className={fieldCls}
        />
      </div>
      <div>
        <label className="text-xs block mb-1">Повторите новый пароль</label>
        <input
          type="password"
          required
          value={form.confirm}
          onChange={(e) => setForm({ ...form, confirm: e.target.value })}
          className={fieldCls}
        />
      </div>

      {message && (
        <p className={message.type === 'ok' ? 'text-xs text-emerald-500' : 'text-xs text-rose-500'}>{message.text}</p>
      )}

      <button
        type="submit"
        disabled={busy}
        className="w-full py-2.5 rounded-md bg-emerald-500 text-white text-sm font-medium hover:bg-emerald-600 transition-colors disabled:opacity-60"
      >
        {busy ? 'Сохраняем...' : 'Сохранить'}
      </button>
    </form>
  );
}

function AdminsSection() {
  const [admins, setAdmins] = useState([]);
  const [me, setMe] = useState(null);
  const [loading, setLoading] = useState(true);
  const [form, setForm] = useState({ username: '', password: '' });
  const [error, setError] = useState('');
  const [busy, setBusy] = useState(false);

  async function load() {
    setLoading(true);
    const [list, meData] = await Promise.all([api.adminGetAdmins(), api.me()]);
    setAdmins(list);
    setMe(meData);
    setLoading(false);
  }

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

  async function handleCreate(e) {
    e.preventDefault();
    setError('');
    if (!form.username.trim()) {
      setError('Укажите логин');
      return;
    }
    if (form.password.length < 8) {
      setError('Пароль должен быть не короче 8 символов');
      return;
    }
    setBusy(true);
    try {
      await api.adminCreateAdminUser(form.username.trim(), form.password);
      setForm({ username: '', password: '' });
      load();
    } catch (err) {
      setError(err.message === 'this username is already taken' ? 'Такой логин уже занят' : 'Не удалось создать администратора');
    } finally {
      setBusy(false);
    }
  }

  async function handleDelete(id) {
    if (!window.confirm('Удалить этого администратора без возможности восстановления?')) return;
    try {
      await api.adminDeleteAdminUser(id);
      load();
    } catch (err) {
      window.alert(
        err.message === 'you cannot delete your own account while logged in'
          ? 'Нельзя удалить самого себя, пока вы вошли под этим аккаунтом'
          : err.message === 'cannot delete the last remaining admin'
          ? 'Нельзя удалить последнего администратора - должен остаться хотя бы один'
          : 'Не удалось удалить'
      );
    }
  }

  if (loading) return <p className="text-sm text-slate-400">Загружаем список администраторов...</p>;

  return (
    <div className="max-w-sm rounded-lg border p-5 space-y-4 bg-white border-slate-200 dark:bg-slate-900 dark:border-slate-800">
      <h2 className="text-sm font-medium">Администраторы</h2>

      <div className="space-y-2">
        {admins.map((a) => (
          <div key={a.id} className="flex items-center justify-between gap-2 text-sm">
            <span>
              {a.username}
              {me?.id === a.id && <span className="text-slate-400 dark:text-slate-500"> (вы)</span>}
            </span>
            {me?.id !== a.id && (
              <button
                onClick={() => handleDelete(a.id)}
                className="p-1.5 rounded-md text-rose-500 hover:bg-rose-50 dark:hover:bg-rose-950/30"
                title="Удалить администратора"
              >
                <Trash2 className="h-3.5 w-3.5" />
              </button>
            )}
          </div>
        ))}
      </div>

      <form onSubmit={handleCreate} className="space-y-2 pt-3 border-t border-slate-100 dark:border-slate-800">
        <label className="text-xs block mb-1">Новый администратор</label>
        <input
          placeholder="Логин"
          value={form.username}
          onChange={(e) => setForm({ ...form, username: e.target.value })}
          className={fieldCls}
        />
        <input
          type="password"
          placeholder="Пароль (от 8 символов)"
          value={form.password}
          onChange={(e) => setForm({ ...form, password: e.target.value })}
          className={fieldCls}
        />
        {error && <p className="text-xs text-rose-500">{error}</p>}
        <button
          type="submit"
          disabled={busy}
          className="w-full py-2 rounded-md bg-emerald-500 text-white text-sm font-medium hover:bg-emerald-600 disabled:opacity-60 inline-flex items-center justify-center gap-1.5"
        >
          <UserPlus className="h-3.5 w-3.5" /> {busy ? 'Создаём...' : 'Добавить'}
        </button>
      </form>
    </div>
  );
}

export default function Settings() {
  return (
    <div>
      <h1 className="font-bold mb-5 font-display text-lg">Настройки</h1>
      <div className="grid sm:grid-cols-2 gap-5 items-start">
        <PasswordForm />
        <AdminsSection />
      </div>
    </div>
  );
}