"use client";

/** ویرایش نام و خروج از حساب */
import { useRouter } from "next/navigation";
import { useState, useTransition } from "react";
import { reloadUserState } from "@/lib/client/store";
import { signOutAction } from "@/server/actions/auth";
import { updateNameAction } from "@/server/actions/account";
import { Icon } from "@/components/ui/Icon";

export function NameEditor({ name }: { name?: string | null }) {
  const router = useRouter();
  const [editing, setEditing] = useState(false);
  const [value, setValue] = useState(name ?? "");
  const [error, setError] = useState("");
  const [pending, start] = useTransition();

  if (!editing) {
    return (
      <button className="mt-1 flex items-center gap-1 text-xs text-paper/70 underline" onClick={() => setEditing(true)}>
        <Icon name="edit" size={12} /> {name ? "ویرایش نام" : "افزودن نام"}
      </button>
    );
  }
  return (
    <form
      className="mt-2 flex gap-2"
      onSubmit={(e) => {
        e.preventDefault();
        start(async () => {
          const res = await updateNameAction(value);
          if (!res.ok) return setError(Object.values(res.errors)[0]);
          setEditing(false);
          router.refresh();
        });
      }}
    >
      <input className="h-9 min-w-0 flex-1 rounded-full bg-paper px-3 text-sm text-ink outline-none" value={value} onChange={(e) => setValue(e.target.value)} maxLength={60} autoFocus aria-label="نام" />
      <button className="h-9 rounded-full border border-paper/40 px-3 text-xs" disabled={pending}>ذخیره</button>
      {error && <p className="text-xs">⚠ {error}</p>}
    </form>
  );
}

export function SignOutButton() {
  const router = useRouter();
  const [pending, start] = useTransition();
  return (
    <button
      className="flex w-full items-center gap-4 py-4 text-sm"
      disabled={pending}
      onClick={() =>
        start(async () => {
          await signOutAction();
          await reloadUserState(); // سبد و آدرس‌های حساب از مرورگر پاک شود
          router.replace("/");
          router.refresh();
        })
      }
    >
      <Icon name="logout" />
      {pending ? "در حال خروج…" : "خروج از حساب"}
    </button>
  );
}