"use client";

import { PageHeader } from "@/components/shared/page-header";
import { Badge } from "@/components/ui/badge";
import { Card } from "@/components/ui/card";
import { usePortalSession } from "@/features/portal/portal-session";
import { useI18n, useT } from "@/i18n";
import { formatDateTime } from "@/lib/format";

function Row({ label, children }: { label: string; children: React.ReactNode }) {
  return (
    <div className="flex flex-col gap-0.5 py-3 sm:flex-row sm:items-center sm:justify-between sm:gap-6">
      <dt className="text-xs font-medium text-muted-foreground">{label}</dt>
      <dd className="text-sm text-foreground">{children}</dd>
    </div>
  );
}

export default function PortalProfilePage() {
  const t = useT();
  const { locale } = useI18n();
  const { user } = usePortalSession();
  if (!user) return null;

  const store = user.store;

  return (
    <div className="mx-auto max-w-2xl">
      <PageHeader title={t("portal.profile.title")} subtitle={user.email} />
      <Card className="divide-y px-5">
        <dl className="divide-y">
          <Row label={t("portal.register.ownerName")}>{user.name}</Row>
          <Row label={t("auth.email")}>
            <span dir="ltr">{user.email}</span>
          </Row>
          <Row label={t("portal.profile.phone")}>
            <span dir="ltr">{user.phone}</span>
          </Row>
          <Row label={t("portal.profile.role")}>{user.role_label}</Row>
          <Row label={t("portal.profile.lastLogin")}>
            {user.last_login_at ? formatDateTime(user.last_login_at, locale) : t("portal.profile.never")}
          </Row>
          {store ? (
            <>
              <Row label={t("portal.profile.store")}>{store.name}</Row>
              <Row label={t("portal.profile.storeStatus")}>
                <Badge variant={store.status === "approved" ? "success" : store.status === "pending" ? "warning" : "destructive"}>
                  {store.status_label}
                </Badge>
              </Row>
              <Row label={t("portal.profile.currency")}>{store.default_currency}</Row>
              <Row label={t("portal.profile.timezone")}>
                <span dir="ltr">{store.timezone}</span>
              </Row>
            </>
          ) : null}
        </dl>
      </Card>
    </div>
  );
}