import { LogOut } from 'lucide-react';
import { prisma } from '@/lib/prisma';
import { requireUser } from '@/lib/auth/dal';
import { logout } from '@/app/actions/auth';
import { initials } from '@/lib/initials';
import { LanguageSwitcher } from '@/components/layout/LanguageSwitcher';
import { NameForm, PasswordForm } from '@/components/account/ProfileForms';
import { PageHeader, Panel, ShellPage } from '@/components/layout/DashboardPage';
import { INTL_LOCALE } from '@/i18n/config';
import { getLocale, getMessages } from '@/i18n/server';

export default async function ProfilePage() {
  const user = await requireUser('/akun/profil');
  const locale = await getLocale();
  const all = await getMessages();
  const t = all.dash.profile;
  const row = await prisma.user.findUnique({ where: { id: user.id }, select: { createdAt: true } });
  const since = row
    ? new Intl.DateTimeFormat(INTL_LOCALE[locale], { month: 'long', year: 'numeric' }).format(row.createdAt)
    : '';

  return (
    <ShellPage className="max-w-[820px]">
      <PageHeader eyebrow={t.eyebrow} title={t.title} />

      <div className="mt-8 flex items-center gap-4 rounded-panel bg-surface p-5 shadow-card ring-1 ring-line/70 sm:p-6">
        <span className="inline-flex size-14 shrink-0 items-center justify-center rounded-full bg-ink text-lg font-semibold text-white">
          {initials(user.name)}
        </span>
        <div className="min-w-0">
          <p className="truncate text-lg font-semibold text-ink">{user.name}</p>
          <p className="truncate text-[13px] text-muted">
            {user.email} · {all.dash.roles[user.role]}
          </p>
          {since && <p className="mt-0.5 text-xs text-subtle">{t.memberSince(since)}</p>}
        </div>
      </div>

      <div className="mt-6 space-y-6">
        <Panel title={t.nameTitle} bodyClassName="p-5 sm:p-6">
          <NameForm name={user.name} email={user.email} />
        </Panel>

        <Panel title={t.passwordTitle} bodyClassName="p-5 sm:p-6">
          <p className="mb-5 text-sm text-muted">{t.passwordText}</p>
          <PasswordForm />
        </Panel>

        <Panel title={t.languageTitle} bodyClassName="flex flex-col gap-4 p-5 sm:flex-row sm:items-center sm:justify-between sm:p-6">
          <p className="text-sm text-muted">{t.languageText}</p>
          <LanguageSwitcher tone="dark" />
        </Panel>

        <Panel title={t.signOutTitle} bodyClassName="flex flex-col gap-4 p-5 sm:flex-row sm:items-center sm:justify-between sm:p-6">
          <p className="text-sm text-muted">{t.signOutText}</p>
          <form action={logout}>
            <button
              type="submit"
              className="inline-flex h-10 items-center gap-2 rounded-full px-5 text-[13px] font-semibold text-fire ring-1 ring-fire/30 transition-colors hover:bg-fire/5"
            >
              <LogOut className="size-4" aria-hidden />
              {t.signOut}
            </button>
          </form>
        </Panel>
      </div>
    </ShellPage>
  );
}