"use client";

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@hexahost/ui";
import { useTranslations } from "next-intl";
import { Link } from "@/i18n/navigation";
import { useAuth } from "@/components/providers/auth-provider";

export function ProfileContent() {
  const t = useTranslations("account.profile");
  const { user, isLoading } = useAuth();

  if (isLoading) {
    return <p className="text-sm text-zinc-600 dark:text-zinc-400">{t("loading")}</p>;
  }

  if (!user) {
    return <p className="text-sm text-zinc-600 dark:text-zinc-400">{t("notSignedIn")}</p>;
  }

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-semibold tracking-tight text-zinc-900 dark:text-zinc-50">
          {t("title")}
        </h1>
        <p className="mt-1 text-sm text-zinc-600 dark:text-zinc-400">{t("subtitle")}</p>
      </div>

      <Card>
        <CardHeader>
          <CardTitle>{t("accountInfo")}</CardTitle>
          <CardDescription>{t("accountInfoDescription")}</CardDescription>
        </CardHeader>
        <CardContent className="space-y-3 text-sm">
          <div className="flex justify-between gap-4">
            <span className="text-zinc-600 dark:text-zinc-400">{t("fields.email")}</span>
            <span className="font-mono text-zinc-900 dark:text-zinc-50">{user.email}</span>
          </div>
          <div className="flex justify-between gap-4">
            <span className="text-zinc-600 dark:text-zinc-400">{t("fields.username")}</span>
            <span className="font-mono text-zinc-900 dark:text-zinc-50">{user.username}</span>
          </div>
          {user.displayName ? (
            <div className="flex justify-between gap-4">
              <span className="text-zinc-600 dark:text-zinc-400">{t("fields.displayName")}</span>
              <span className="text-zinc-900 dark:text-zinc-50">{user.displayName}</span>
            </div>
          ) : null}
          <div className="flex justify-between gap-4">
            <span className="text-zinc-600 dark:text-zinc-400">{t("fields.emailVerified")}</span>
            <span className="font-mono text-zinc-900 dark:text-zinc-50">
              {user.emailVerified || user.emailVerifiedAt ? t("yes") : t("no")}
            </span>
          </div>
          <div className="flex justify-between gap-4">
            <span className="text-zinc-600 dark:text-zinc-400">{t("fields.twoFactor")}</span>
            <span className="font-mono text-zinc-900 dark:text-zinc-50">
              {user.twoFactorEnabled ? t("enabled") : t("disabled")}
            </span>
          </div>
        </CardContent>
      </Card>

      <p className="text-sm text-zinc-600 dark:text-zinc-400">
        {t("securityHint")}{" "}
        <Link href="/security" className="font-medium text-sky-600 hover:underline dark:text-sky-400">
          {t("securityLink")}
        </Link>
      </p>
    </div>
  );
}