import React, { useEffect, useState } from "react";
import { Button, Checkbox, Input } from "@heroui/react";
import { useTranslation } from "react-i18next";

type UserItem = {
  id: number;
  name: string;
  email: string;
  is_admin: boolean;
  is_active: boolean;
};

type FormMode = "create" | "edit";

type Props = {
  mode: FormMode;
  editing: UserItem | null;
  submitting: boolean;
  serverError: string | null;
  onSubmit: (payload: {
    name: string;
    email: string;
    password?: string;
    is_admin: boolean;
    is_active: boolean;
  }) => void;
  onCancel: () => void;
};

export default function AdminUserForm({
  mode,
  editing,
  submitting,
  serverError,
  onSubmit,
  onCancel,
}: Props) {
  const { t } = useTranslation("common");
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [isAdmin, setIsAdmin] = useState(false);
  const [isActive, setIsActive] = useState(true);

  useEffect(() => {
    if (mode === "edit" && editing) {
      setName(editing.name);
      setEmail(editing.email);
      setPassword("");
      setIsAdmin(editing.is_admin);
      setIsActive(editing.is_active);
    } else {
      setName("");
      setEmail("");
      setPassword("");
      setIsAdmin(false);
      setIsActive(true);
    }
  }, [mode, editing]);

  const handleSubmit = () => {
    const payload = {
      name: name.trim(),
      email: email.trim(),
      is_admin: isAdmin,
      is_active: isActive,
    } as {
      name: string;
      email: string;
      password?: string;
      is_admin: boolean;
      is_active: boolean;
    };

    if (password.trim()) {
      payload.password = password.trim();
    }

    onSubmit(payload);
  };

  return (
    <div className="rounded border border-divider p-4 space-y-3">
      <div className="text-sm font-semibold">
        {mode === "edit"
          ? t("admin_users_edit_title") ?? "Upravit uživatele"
          : t("admin_users_create_title") ?? "Nový uživatel"}
      </div>

      <div className="grid gap-3">
        <Input
          label={t("admin_users_name") ?? "Jméno"}
          value={name}
          onChange={(e) => setName(e.target.value)}
          size="sm"
        />
        <Input
          label={t("admin_users_email") ?? "Email"}
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          size="sm"
        />
        <Input
          label={t("admin_users_password") ?? "Heslo"}
          type="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          size="sm"
          placeholder={
            mode === "edit"
              ? t("admin_users_password_hint") ?? "Nech prázdné pro beze změny"
              : undefined
          }
        />
        <div className="flex gap-6">
          <Checkbox isSelected={isAdmin} onValueChange={setIsAdmin}>
            {t("admin_users_is_admin") ?? "Admin"}
          </Checkbox>
          <Checkbox isSelected={isActive} onValueChange={setIsActive}>
            {t("admin_users_is_active") ?? "Aktivní"}
          </Checkbox>
        </div>
      </div>

      {serverError && <div className="text-red-600 text-sm">{serverError}</div>}

      <div className="flex gap-2">
        <Button color="primary" isDisabled={submitting} onPress={handleSubmit}>
          {submitting ? t("admin_users_saving") ?? "Ukládám…" : t("admin_users_save") ?? "Uložit"}
        </Button>
        <Button variant="light" onPress={onCancel}>
          {t("admin_form_close") ?? "Zavřít formulář"}
        </Button>
      </div>
    </div>
  );
}