import React, { useCallback, useEffect, useState } from 'react';
import { api, errorMessage } from '../services/apiClient.ts';
import { useAuth } from '../context/AuthContext.tsx';
import type { User, UserStatus } from '../types/api.ts';
import { Banner, PageHeader, Spinner } from './ui/Feedback.tsx';

const inputClass =
  'border border-gray-300 rounded-md px-3 py-2 text-sm w-full focus:ring-red-500 focus:border-red-500';

const ROLE_LABELS: Record<UserStatus, string> = {
  inactive: 'Inactive',
  gm: 'GM',
  gm_admin: 'GM Admin',
  buh: 'BUH',
  bu_admin: 'BU Admin',
  director: 'Director',
  director_admin: 'Director Admin',
  account_admin: 'Account Admin',
  superuser: 'Superuser',
};

const ASSIGNABLE_STATUSES: UserStatus[] = [
  'gm',
  'gm_admin',
  'buh',
  'bu_admin',
  'director',
  'director_admin',
  'account_admin',
  'inactive',
];

const UserManagementPage: React.FC = () => {
  const { user: currentUser } = useAuth();
  const [users, setUsers] = useState<User[]>([]);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [busyId, setBusyId] = useState<number | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [notice, setNotice] = useState<string | null>(null);

  const [userLogin, setUserLogin] = useState('');
  const [userName, setUserName] = useState('');
  const [status, setStatus] = useState<UserStatus>('gm');
  const [password, setPassword] = useState('');

  const [editId, setEditId] = useState<number | null>(null);
  const [editStatus, setEditStatus] = useState<UserStatus>('gm');
  const [resetId, setResetId] = useState<number | null>(null);
  const [resetPassword, setResetPassword] = useState('');

  const reload = useCallback(async () => {
    setLoading(true);
    setError(null);
    try {
      setUsers(await api.users.list());
    } catch (err) {
      setError(errorMessage(err));
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    void reload();
  }, [reload]);

  const wrap = async (fn: () => Promise<void>) => {
    setError(null);
    setNotice(null);
    try {
      await fn();
    } catch (err) {
      setError(errorMessage(err));
    }
  };

  const onCreate = (e: React.FormEvent) => {
    e.preventDefault();
    void wrap(async () => {
      setSaving(true);
      try {
        await api.users.create({
          user_name: userLogin.trim(),
          display_name: userName.trim(),
          status,
          password,
        });
        setNotice(
          `Akun "${userName.trim()}" dibuat. Bagikan password sementara secara aman (di luar sistem).`
        );
        setUserLogin('');
        setUserName('');
        setPassword('');
        setStatus('gm');
        await reload();
      } finally {
        setSaving(false);
      }
    });
  };

  const onSaveStatus = (id: number) => {
    void wrap(async () => {
      setBusyId(id);
      try {
        await api.users.update(id, { status: editStatus });
        setNotice('Status pengguna diperbarui.');
        setEditId(null);
        await reload();
      } finally {
        setBusyId(null);
      }
    });
  };

  const onDeactivate = (user: User) => {
    if (!window.confirm(`Nonaktifkan akun "${user.display_name}"?`)) return;
    void wrap(async () => {
      setBusyId(user.id);
      try {
        await api.users.update(user.id, { status: 'inactive' });
        setNotice(`Akun "${user.display_name}" dinonaktifkan.`);
        await reload();
      } finally {
        setBusyId(null);
      }
    });
  };

  const onResetPassword = (id: number) => {
    void wrap(async () => {
      setBusyId(id);
      try {
        await api.users.setPassword(id, resetPassword);
        setNotice('Password direset. Bagikan password baru secara aman (di luar sistem).');
        setResetId(null);
        setResetPassword('');
        await reload();
      } finally {
        setBusyId(null);
      }
    });
  };

  return (
    <div className="space-y-6">
      <PageHeader
        title="Manajemen Akun"
        subtitle="Buat, ubah status, nonaktifkan, dan reset password pengguna executive."
      />
      {error && <Banner kind="error">{error}</Banner>}
      {notice && <Banner kind="success">{notice}</Banner>}

      <section className="bg-white rounded-xl shadow-sm p-5 space-y-4">
        <h2 className="text-base font-semibold text-gray-900">Buat pengguna baru</h2>
        <form onSubmit={onCreate} className="grid gap-3 sm:grid-cols-2 lg:grid-cols-5">
          <label className="block text-sm">
            <span className="text-gray-600">Login</span>
            <input
              className={inputClass}
              value={userLogin}
              onChange={(e) => setUserLogin(e.target.value)}
              required
              maxLength={30}
              autoComplete="off"
            />
          </label>
          <label className="block text-sm">
            <span className="text-gray-600">Nama</span>
            <input
              className={inputClass}
              value={userName}
              onChange={(e) => setUserName(e.target.value)}
              required
              maxLength={30}
              autoComplete="off"
            />
          </label>
          <label className="block text-sm">
            <span className="text-gray-600">Role</span>
            <select
              className={inputClass}
              value={status}
              onChange={(e) => setStatus(e.target.value as UserStatus)}
            >
              {ASSIGNABLE_STATUSES.filter((s) => s !== 'inactive').map((s) => (
                <option key={s} value={s}>
                  {ROLE_LABELS[s]}
                </option>
              ))}
            </select>
          </label>
          <label className="block text-sm">
            <span className="text-gray-600">Password sementara</span>
            <input
              className={inputClass}
              type="password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              required
              autoComplete="new-password"
            />
          </label>
          <div className="flex items-end">
            <button
              type="submit"
              disabled={saving}
              className="w-full rounded-md bg-red-600 text-white text-sm font-medium px-4 py-2 hover:bg-red-700 disabled:opacity-60"
            >
              {saving ? 'Menyimpan…' : 'Buat akun'}
            </button>
          </div>
        </form>
        <p className="text-xs text-gray-500">
          Password tidak dikirim lewat email. Bagikan secara terpisah ke pengguna.
        </p>
      </section>

      <section className="bg-white rounded-xl shadow-sm p-5">
        <h2 className="text-base font-semibold text-gray-900 mb-4">Daftar pengguna</h2>
        {loading ? (
          <div className="flex justify-center py-8">
            <Spinner />
          </div>
        ) : (
          <div className="overflow-x-auto">
            <table className="min-w-full text-sm">
              <thead>
                <tr className="text-left text-gray-500 border-b">
                  <th className="py-2 pr-4 font-medium">Nama</th>
                  <th className="py-2 pr-4 font-medium">Role</th>
                  <th className="py-2 pr-4 font-medium">Managed by</th>
                  <th className="py-2 font-medium">Aksi</th>
                </tr>
              </thead>
              <tbody>
                {users.map((user) => {
                  const isSelf = currentUser?.id === user.id;
                  return (
                  <tr key={user.id} className="border-b border-gray-100 align-top">
                    <td className="py-3 pr-4">
                      <div className="font-medium text-gray-900">
                        {user.display_name}
                        {isSelf ? (
                          <span className="ml-2 text-xs font-normal text-gray-500">(Anda)</span>
                        ) : null}
                      </div>
                      <div className="text-xs text-gray-500">{user.user_name}</div>
                    </td>
                    <td className="py-3 pr-4">
                      {!isSelf && editId === user.id ? (
                        <select
                          className={inputClass}
                          value={editStatus}
                          onChange={(e) => setEditStatus(e.target.value as UserStatus)}
                        >
                          {ASSIGNABLE_STATUSES.map((s) => (
                            <option key={s} value={s}>
                              {ROLE_LABELS[s]}
                            </option>
                          ))}
                        </select>
                      ) : (
                        ROLE_LABELS[user.status] ?? user.status
                      )}
                    </td>
                    <td className="py-3 pr-4 text-gray-600">
                      {user.managed_by_name ?? '—'}
                    </td>
                    <td className="py-3">
                      <div className="flex flex-col gap-2 sm:flex-row sm:flex-wrap">
                        {!isSelf && editId === user.id ? (
                          <>
                            <button
                              type="button"
                              disabled={busyId === user.id}
                              onClick={() => onSaveStatus(user.id)}
                              className="rounded-md bg-red-600 text-white text-xs px-3 py-1.5 hover:bg-red-700 disabled:opacity-60"
                            >
                              Simpan
                            </button>
                            <button
                              type="button"
                              onClick={() => setEditId(null)}
                              className="rounded-md border border-gray-300 text-xs px-3 py-1.5"
                            >
                              Batal
                            </button>
                          </>
                        ) : null}
                        {!isSelf && editId !== user.id ? (
                          <button
                            type="button"
                            onClick={() => {
                              setEditId(user.id);
                              setEditStatus(user.status);
                              setResetId(null);
                            }}
                            className="rounded-md border border-gray-300 text-xs px-3 py-1.5"
                          >
                            Ubah role
                          </button>
                        ) : null}
                        {!isSelf && user.status !== 'inactive' ? (
                          <button
                            type="button"
                            disabled={busyId === user.id}
                            onClick={() => onDeactivate(user)}
                            className="rounded-md border border-gray-300 text-xs px-3 py-1.5 text-red-700"
                          >
                            Nonaktifkan
                          </button>
                        ) : null}
                        {isSelf ? (
                          <span className="text-xs text-gray-500 self-center">
                            Role & status akun sendiri tidak bisa diubah di sini.
                          </span>
                        ) : null}
                        {resetId === user.id ? (
                          <div className="flex flex-wrap gap-2 items-center">
                            <input
                              className={`${inputClass} w-40`}
                              type="password"
                              placeholder="Password baru"
                              value={resetPassword}
                              onChange={(e) => setResetPassword(e.target.value)}
                              autoComplete="new-password"
                            />
                            <button
                              type="button"
                              disabled={busyId === user.id || !resetPassword.trim()}
                              onClick={() => onResetPassword(user.id)}
                              className="rounded-md bg-red-600 text-white text-xs px-3 py-1.5 hover:bg-red-700 disabled:opacity-60"
                            >
                              Reset
                            </button>
                            <button
                              type="button"
                              onClick={() => {
                                setResetId(null);
                                setResetPassword('');
                              }}
                              className="rounded-md border border-gray-300 text-xs px-3 py-1.5"
                            >
                              Batal
                            </button>
                          </div>
                        ) : (
                          <button
                            type="button"
                            onClick={() => {
                              setResetId(user.id);
                              setResetPassword('');
                              setEditId(null);
                            }}
                            className="rounded-md border border-gray-300 text-xs px-3 py-1.5"
                          >
                            Reset password
                          </button>
                        )}
                      </div>
                    </td>
                  </tr>
                  );
                })}
              </tbody>
            </table>
            {users.length === 0 && (
              <p className="text-sm text-gray-500 py-4">Belum ada pengguna.</p>
            )}
          </div>
        )}
      </section>
    </div>
  );
};

export default UserManagementPage;