import { PasswordForm, ProfileForm, SignOutEverywhere } from "@/components/features/accounts";
import { Card, PageHeader } from "@/components/ui";
import { getProfile } from "@/lib/services/account";
import { formatDateTime } from "@/lib/utils";

export async function ProfileScreen() {
  const p = await getProfile();
  const access = [
    ...(p.isSuperAdmin ? ["Platform super admin"] : []),
    ...p.organizationMemberships.map((m) => `${m.role.name} · ${m.organization.name}`),
    ...p.siteMemberships.map((m) => `${m.role.name} · ${m.site.name}`),
  ];
  return (
    <>
      <PageHeader title="My profile" description="Your own account. Only you can change your password here." />
      <div className="grid gap-4 lg:grid-cols-2">
        <div className="space-y-4">
          <Card className="space-y-2 p-4 text-sm">
            <h2 className="text-sm font-semibold">Account</h2>
            <p><span className="text-muted-foreground">Email: </span>{p.email}</p>
            <p><span className="text-muted-foreground">Last sign-in: </span>{p.lastLoginAt ? formatDateTime(p.lastLoginAt) : "—"}</p>
            <p><span className="text-muted-foreground">Created: </span>{formatDateTime(p.createdAt)}</p>
            <div><span className="text-muted-foreground">Access:</span><ul className="mt-1 list-disc pl-5">{access.length ? access.map((a) => <li key={a}>{a}</li>) : <li>None</li>}</ul></div>
          </Card>
          <ProfileForm name={p.name} />
        </div>
        <div className="space-y-4"><PasswordForm /><SignOutEverywhere /></div>
      </div>
    </>
  );
}