"use client";

import { AccountForm } from "@/components/auth/account-form";
import { ChangePasswordForm } from "@/components/auth/change-password-form";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Card } from "@/components/ui/card";
import { useLanguage } from "@/lib/i18n/context";

const COPY = {
  en: {
    title: "Settings",
    description: "Manage your profile, language, timezone, country, and password settings.",
  },
  es: {
    title: "Configuración",
    description: "Administra tu perfil, idioma, zona horaria, país y contraseña.",
  },
} as const;

export function SettingsPageContent({
  user,
  hasPassword,
}: {
  user: {
    firstName: string;
    lastName: string;
    email: string;
    avatarUrl: string | null;
    timezone: string;
    language: "EN" | "ES";
    country: string | null;
  };
  hasPassword: boolean;
}) {
  const { locale, t } = useLanguage();
  const copy = COPY[locale];
  const a = t.app.account;

  return (
    <div className="flex w-full max-w-[1500px] flex-col gap-4 pb-8">
      <div className="pt-0.5">
        <h1 className="text-[26px] font-semibold tracking-tight text-foreground sm:text-[28px]">{copy.title}</h1>
        <p className="mt-1 max-w-2xl text-sm text-muted-foreground">{copy.description}</p>
      </div>

      <Card className="rounded-2xl p-5">
        <Tabs defaultValue="profile">
          <TabsList>
            <TabsTrigger value="profile">{a.tabProfile}</TabsTrigger>
            <TabsTrigger value="password">{a.tabPassword}</TabsTrigger>
          </TabsList>
          <TabsContent value="profile" className="pt-5">
            <AccountForm user={user} />
          </TabsContent>
          <TabsContent value="password" className="pt-5">
            {hasPassword ? <ChangePasswordForm /> : <p className="text-sm text-muted-foreground">{a.noPasswordAccount}</p>}
          </TabsContent>
        </Tabs>
      </Card>
    </div>
  );
}