import { FormEvent, useCallback, useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { api } from "../api/client";
import { describeApiError, type ApiErrorInfo } from "../api/errorMessages";
import type { Role, UserRecord } from "../api/types";
import { useAuth } from "../context/AuthContext";
import { ApiErrorNotice, LoadingState, PageHeader } from "../components/PageChrome";

export function Users() {
  const { t } = useTranslation(["operations", "errors"]);
  const { user: currentUser } = useAuth();
  const [users, setUsers] = useState<UserRecord[] | null>(null);
  const [displayName, setDisplayName] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [role, setRole] = useState<Role>("rental_employee");
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<ApiErrorInfo | null>(null);

  const load = useCallback(() => {
    api.get<UserRecord[]>("/api/v1/users").then(setUsers).catch((err) => setError(describeApiError(t, err)));
  }, [t]);
  useEffect(load, [load]);

  async function create(event: FormEvent) {
    event.preventDefault(); setSaving(true); setError(null);
    try {
      await api.post<UserRecord>("/api/v1/users", { email, display_name: displayName, password, role });
      setDisplayName(""); setEmail(""); setPassword(""); setRole("rental_employee"); load();
    } catch (err) { setError(describeApiError(t, err, "operations:users.createFailed")); }
    finally { setSaving(false); }
  }

  async function toggleActive(record: UserRecord) {
    setError(null);
    try { await api.patch(`/api/v1/users/${record.public_ref}`, { active: !record.active }); load(); }
    catch (err) { setError(describeApiError(t, err, "operations:users.updateFailed")); }
  }

  return <div className="page">
    <PageHeader eyebrow={t("users.eyebrow")} title={t("users.title")} description={t("users.description")} />
    <ApiErrorNotice error={error} />
    <section className="record-surface user-create"><h2>{t("users.addTitle")}</h2><form onSubmit={create}><div className="form-grid">
      <label>{t("users.name")}<input required minLength={2} value={displayName} onChange={(event) => setDisplayName(event.target.value)} /></label>
      <label>{t("users.email")}<input required type="email" value={email} onChange={(event) => setEmail(event.target.value)} /></label>
      <label>{t("users.role")}<select value={role} onChange={(event) => setRole(event.target.value as Role)}><option value="rental_employee">{t("roles.rental_employee")}</option><option value="operations_manager">{t("roles.operations_manager")}</option></select></label>
      <label>{t("users.password")}<input required type="password" minLength={8} autoComplete="new-password" value={password} onChange={(event) => setPassword(event.target.value)} /></label>
    </div><div className="form-actions"><button className="button button-primary" disabled={saving}>{saving ? t("users.saving") : t("users.add")}</button></div></form></section>
    {!users && <LoadingState label={t("users.loading")} />}
    {users && <div className="table-shell"><table className="data-table"><caption className="visually-hidden">{t("users.title")}</caption><thead><tr><th>{t("users.name")}</th><th>{t("users.email")}</th><th>{t("users.role")}</th><th>{t("users.status")}</th><th>{t("users.action")}</th></tr></thead><tbody>{users.map((record) => <tr key={record.public_ref}><th>{record.display_name}<span className="table-secondary">{record.public_ref}</span></th><td>{record.email ?? "—"}</td><td>{t(`roles.${record.role}`)}</td><td><span className={`badge ${record.active ? "status-available" : "status-blocked"}`}>{t(record.active ? "users.active" : "users.inactive")}</span></td><td><button type="button" className="button button-secondary" disabled={record.public_ref === currentUser?.public_ref} onClick={() => toggleActive(record)}>{t(record.active ? "users.deactivate" : "users.activate")}</button></td></tr>)}</tbody></table></div>}
  </div>;
}