import { signOutOthers } from '../../actions';
import { ChangeEmailForm, ChangePasswordForm, DeleteAccountForm } from '@/components/AccountForms';
import { accountApi, type ClientMe } from '@/lib/session';
import { Notice, PageTitle } from '@/components/AccountUi';

export default async function Settings({ searchParams }: { searchParams: Promise<{ ok?: string; err?: string }> }) {
  const sp = await searchParams;
  const user = await accountApi<ClientMe>('/auth/me');
  return (
    <>
      <PageTitle title="Settings & privacy" />
      <Notice ok={sp.ok} err={sp.err} />
      <div className="space-y-6">
        <section className="card p-6">
          <h2 className="font-serif text-lg font-semibold">Login email</h2>
          <p className="mb-4 mt-1 text-sm text-muted">{user.email} stays active until you verify your new address. Confirmation signs out all sessions.</p>
          <ChangeEmailForm mfaEnabled={user.mfaEnabled} />
        </section>
        <section className="card p-6">
          <h2 className="font-serif text-lg font-semibold">Password</h2>
          <p className="mb-4 mt-1 text-sm text-muted">Changing it signs out your other devices.</p>
          <ChangePasswordForm mfaEnabled={user.mfaEnabled} />
        </section>
        <section className="card p-6">
          <h2 className="font-serif text-lg font-semibold">Devices</h2>
          <p className="mb-4 mt-1 text-sm text-muted">Signed in somewhere you don’t recognise? Sign out everywhere else.</p>
          <form action={signOutOthers}>
            <button className="btn btn-quiet btn-sm">Sign out all other devices</button>
          </form>
        </section>
        <section className="card p-6">
          <h2 className="font-serif text-lg font-semibold">Your data</h2>
          <p className="mb-4 mt-1 text-sm text-muted">Download everything we hold about your account: profile, saved items, searches, enquiries and reviews (JSON).</p>
          <a href="/account/export/" className="btn btn-quiet btn-sm">
            Download my data
          </a>
        </section>
        <section className="card border-danger/30 p-6">
          <h2 className="font-serif text-lg font-semibold text-danger">Delete account</h2>
          <p className="mb-4 mt-1 text-sm text-muted">Removes your saved lawyers and searches and anonymises your enquiries. This can’t be undone.</p>
          <DeleteAccountForm />
        </section>
      </div>
    </>
  );
}