"use client";

import { AppShell } from "@/components/app/AppShell";
import { AdminUser, getStoredUser } from "@/lib/api";
import { clearSessionContext, getActiveRoleLabel } from "@/lib/session-context";
import { useRouter } from "next/navigation";

export default function AccountPage() {
  const user = getStoredUser<AdminUser>();
  const router = useRouter();
  const activeRole = getActiveRoleLabel();

  const changeRole = () => {
    clearSessionContext();
    router.replace("/select-context");
  };

  return (
    <AppShell title="حساب کاربری" subtitle="اطلاعات ورود و نقش">
      <div className="rounded-2xl border border-[var(--border)] bg-white p-4 shadow-card">
        <dl className="space-y-3 text-sm">
          {[
            ["نام", user?.name ?? "—"],
            ["کد ملی", user?.national_code ?? "—"],
            ["نقش فعال", activeRole ?? "—"],
          ].map(([label, value]) => (
            <div key={label} className="flex justify-between gap-3 border-b border-[var(--border)] py-2">
              <dt className="text-[var(--muted)]">{label}</dt>
              <dd className="font-medium">{value}</dd>
            </div>
          ))}
        </dl>
        <a
          href="/change-password"
          className="mt-4 block w-full rounded-xl border border-primary/30 bg-teal-50 py-2.5 text-center text-sm font-semibold text-primary"
        >
          تغییر رمز عبور
        </a>
        <button
          type="button"
          onClick={changeRole}
          className="mt-4 w-full rounded-xl border border-primary/30 bg-teal-50 py-2.5 text-sm font-semibold text-primary"
        >
          تغییر نقش
        </button>
      </div>
    </AppShell>
  );
}