"use client";

import Link from "next/link";
import { BadgeCheck, ShieldAlert, Pencil } from "lucide-react";
import { Container } from "@/components/container";
import { SectionHeading } from "@/components/section-heading";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { SUPPORTED_LANGUAGES, SUPPORTED_COUNTRIES } from "@/validators/account";
import { useLanguage } from "@/lib/i18n/context";

function initials(firstName: string, lastName: string) {
  return `${firstName[0] ?? ""}${lastName[0] ?? ""}`.toUpperCase() || "?";
}

export function ProfilePageContent({
  user,
}: {
  user: {
    firstName: string;
    lastName: string;
    email: string;
    avatarUrl: string | null;
    timezone: string;
    language: "EN" | "ES";
    country: string | null;
    emailVerified: Date | null;
    createdAt: Date;
  };
}) {
  const { t, locale } = useLanguage();
  const p = t.app.profile;

  const languageLabel =
    SUPPORTED_LANGUAGES.find((l) => l.value === user.language)?.label ?? user.language;
  const countryLabel =
    SUPPORTED_COUNTRIES.find((c) => c.value === user.country)?.label ?? user.country;

  return (
    <div className="min-h-[calc(100dvh-4rem)] bg-radial-spotlight py-16">
      <Container className="max-w-2xl">
        <SectionHeading align="left" eyebrow={p.eyebrow} title={p.title} className="mb-8" />

        <div className="flex flex-col gap-6 rounded-2xl border border-border bg-card/60 p-6 glass-panel sm:p-8">
          <div className="flex items-center gap-4">
            <Avatar size="lg">
              <AvatarImage src={user.avatarUrl ?? undefined} alt="" />
              <AvatarFallback>{initials(user.firstName, user.lastName)}</AvatarFallback>
            </Avatar>
            <div className="flex-1">
              <p className="text-lg font-semibold text-foreground">
                {user.firstName} {user.lastName}
              </p>
              <p className="text-sm text-muted-foreground">{user.email}</p>
            </div>
            <Button asChild variant="outline" size="sm">
              <Link href="/account">
                <Pencil className="size-3.5" />
                {p.edit}
              </Link>
            </Button>
          </div>

          <div className="flex items-center gap-2">
            {user.emailVerified ? (
              <Badge variant="outline" className="border-success/30 bg-success/15 text-success">
                <BadgeCheck className="size-3.5" />
                {p.emailVerified}
              </Badge>
            ) : (
              <Badge variant="outline" className="border-warning/30 bg-warning/15 text-warning">
                <ShieldAlert className="size-3.5" />
                {p.emailNotVerified}
              </Badge>
            )}
          </div>

          <dl className="grid grid-cols-2 gap-x-4 gap-y-4 border-t border-border pt-6 text-sm sm:grid-cols-3">
            <div>
              <dt className="text-muted-foreground">{p.timezone}</dt>
              <dd className="mt-0.5 text-foreground">{user.timezone}</dd>
            </div>
            <div>
              <dt className="text-muted-foreground">{p.language}</dt>
              <dd className="mt-0.5 text-foreground">{languageLabel}</dd>
            </div>
            <div>
              <dt className="text-muted-foreground">{p.country}</dt>
              <dd className="mt-0.5 text-foreground">{countryLabel ?? "—"}</dd>
            </div>
            <div>
              <dt className="text-muted-foreground">{p.memberSince}</dt>
              <dd className="mt-0.5 text-foreground">
                {new Intl.DateTimeFormat(locale === "es" ? "es-ES" : "en-US", {
                  month: "long",
                  year: "numeric",
                }).format(user.createdAt)}
              </dd>
            </div>
          </dl>
        </div>
      </Container>
    </div>
  );
}