Epicure/apps/web/components/settings/settings-form.tsx

"use client";

import { useState } from "react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { useTranslations } from "next-intl";
import { useLocale, SUPPORTED_LOCALES, type Locale } from "@/lib/i18n/provider";

type UserProps = {
  name: string;
  email: string;
  image: string | null;
  locale: string;
  bio: string | null;
  privateBio: string | null;
};

export function SettingsForm({ user }: { user: UserProps }) {
  const t = useTranslations("settingsForm");
  const t_common = useTranslations("common");
  const { setLocale } = useLocale();

  const [name, setName] = useState(user.name);
  const [bio, setBio] = useState(user.bio ?? "");
  const [privateBio, setPrivateBio] = useState(user.privateBio ?? "");
  const [saving, setSaving] = useState(false);
  const [savingBio, setSavingBio] = useState(false);

  async function saveProfile() {
    setSaving(true);
    try {
      const res = await fetch("/api/v1/users/me", {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ name }),
      });
      if (res.ok) toast.success(t_common("saved"));
      else toast.error(t_common("saveFailed"));
    } finally {
      setSaving(false);
    }
  }

  async function saveBios() {
    setSavingBio(true);
    try {
      const res = await fetch("/api/v1/users/me", {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          bio: bio.trim() || null,
          privateBio: privateBio.trim() || null,
        }),
      });
      if (res.ok) toast.success(t_common("saved"));
      else toast.error(t_common("saveFailed"));
    } finally {
      setSavingBio(false);
    }
  }

  const bioUnchanged = bio === (user.bio ?? "") && privateBio === (user.privateBio ?? "");

  return (
    <div className="space-y-6">
      <section className="rounded-xl border p-6 space-y-4">
        <h2 className="font-semibold text-lg">{t("profile")}</h2>
        <div className="space-y-2">
          <Label>{t("displayName")}</Label>
          <Input value={name} onChange={(e) => setName(e.target.value)} />
        </div>
        <div className="space-y-2">
          <Label>{t("email")}</Label>
          <Input value={user.email} disabled className="opacity-70" />
        </div>
        <Button onClick={saveProfile} disabled={saving || name === user.name}>
          {saving ? t("saving") : t_common("save")}
        </Button>
      </section>

      <section className="rounded-xl border p-6 space-y-4">
        <h2 className="font-semibold text-lg">{t("bio")}</h2>
        <div className="space-y-2">
          <Label>{t("publicBio")}</Label>
          <p className="text-xs text-muted-foreground">{t("publicBioDescription")}</p>
          <Textarea
            value={bio}
            onChange={(e) => setBio(e.target.value)}
            placeholder={t("publicBioPlaceholder")}
            rows={3}
            maxLength={500}
            className="resize-none"
          />
          <p className="text-xs text-muted-foreground text-right">{bio.length}/500</p>
        </div>
        <div className="space-y-2">
          <Label>{t("privateBio")}</Label>
          <p className="text-xs text-muted-foreground">{t("privateBioDescription")}</p>
          <Textarea
            value={privateBio}
            onChange={(e) => setPrivateBio(e.target.value)}
            placeholder={t("privateBioPlaceholder")}
            rows={5}
            maxLength={2000}
            className="resize-none"
          />
          <p className="text-xs text-muted-foreground text-right">{privateBio.length}/2000</p>
        </div>
        <Button onClick={saveBios} disabled={savingBio || bioUnchanged}>
          {savingBio ? t("saving") : t_common("save")}
        </Button>
      </section>

      <section className="rounded-xl border p-6 space-y-4">
        <h2 className="font-semibold text-lg">{t("language")}</h2>
        <p className="text-sm text-muted-foreground">{t("languageDescription")}</p>
        <Select defaultValue={user.locale} onValueChange={(v) => setLocale(v as Locale)}>
          <SelectTrigger className="w-48">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            {SUPPORTED_LOCALES.map((l) => (
              <SelectItem key={l.code} value={l.code}>
                {l.label}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </section>
    </div>
  );
}