buildmymcpserver/apps/web/app/(dashboard)/settings/profile/page.tsx

'use client';

import { Input, Label } from '@/components/input';
import { Button } from '@/components/ui/button';
import { apiFetch } from '@/lib/api';
import { Loader2 } from 'lucide-react';
import Link from 'next/link';
import { useEffect, useState } from 'react';

interface Profile {
  id: string;
  email: string;
  name: string | null;
  phone: string | null;
  isAdmin: boolean;
  createdAt: string;
}

export default function ProfilePage() {
  const [profile, setProfile] = useState<Profile | null>(null);
  const [name, setName] = useState('');
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [saved, setSaved] = useState(false);

  function load() {
    apiFetch<{ profile: Profile }>('/v1/account/profile')
      .then((r) => {
        setProfile(r.profile);
        setName(r.profile.name ?? '');
      })
      .catch((e) => setError((e as Error).message));
  }

  useEffect(load, []);

  async function save(e: React.FormEvent) {
    e.preventDefault();
    if (!profile) return;
    setBusy(true);
    setError(null);
    setSaved(false);
    try {
      await apiFetch('/v1/account/profile', {
        method: 'PATCH',
        body: JSON.stringify({ name: name.trim() }),
      });
      setSaved(true);
      load();
    } catch (err) {
      setError((err as Error).message);
    } finally {
      setBusy(false);
    }
  }

  if (!profile && !error) {
    return (
      <div className="mx-auto max-w-2xl px-6 py-12 text-center">
        <Loader2 className="mx-auto animate-spin text-[--color-fg-muted]" size={20} />
      </div>
    );
  }
  if (!profile) {
    return (
      <div className="mx-auto max-w-2xl px-6 py-12">
        <p className="text-[13px] text-[--color-danger]">{error}</p>
      </div>
    );
  }

  return (
    <div className="mx-auto max-w-2xl px-6 py-10">
      <h1 className="text-[22px] font-semibold tracking-tight">Profile</h1>
      <p className="mt-1 text-[13px] text-[--color-fg-muted]">
        Personal details. Email and phone can&apos;t be changed self-service yet — open a{' '}
        <Link href="/settings/support" className="text-[--color-accent] hover:underline">
          support ticket
        </Link>
        {' '}
        if you need it changed.
      </p>

      <form onSubmit={save} className="panel mt-6 space-y-4 p-5">
        <div className="space-y-1.5">
          <Label htmlFor="name">Display name</Label>
          <Input
            id="name"
            value={name}
            onChange={(e) => setName(e.target.value)}
            maxLength={128}
            placeholder="How should we address you?"
          />
        </div>

        <div className="grid gap-3 md:grid-cols-2">
          <ReadField label="Email" value={profile.email} mono />
          <ReadField label="Phone" value={profile.phone ?? '—'} mono />
          <ReadField label="Account created" value={new Date(profile.createdAt).toLocaleString()} />
          <ReadField label="Role" value={profile.isAdmin ? 'Admin' : 'Member'} />
        </div>

        {error && <p className="text-[12.5px] text-[--color-danger]">{error}</p>}
        {saved && <p className="text-[12.5px] text-emerald-300">Saved.</p>}

        <div className="flex justify-end">
          <Button
            variant="primary"
            size="md"
            type="submit"
            disabled={busy || name.trim() === (profile.name ?? '')}
          >
            {busy ? 'Saving…' : 'Save changes'}
          </Button>
        </div>
      </form>

      <div className="mt-8 grid gap-3 sm:grid-cols-3 text-[12px]">
        <Link href="/settings/billing" className="panel p-3 text-[--color-fg-muted] transition-colors hover:text-[--color-fg]">
          Billing →
        </Link>
        <Link href="/settings/support" className="panel p-3 text-[--color-fg-muted] transition-colors hover:text-[--color-fg]">
          Support →
        </Link>
        <Link href="/settings/account" className="panel p-3 text-[--color-fg-muted] transition-colors hover:text-[--color-fg]">
          Your data →
        </Link>
      </div>
    </div>
  );
}

function ReadField({ label, value, mono }: { label: string; value: string; mono?: boolean }) {
  return (
    <div>
      <div className="text-[11px] uppercase tracking-wider text-[--color-fg-subtle]">{label}</div>
      <div className={`mt-1 text-[13px] text-[--color-fg] ${mono ? 'mono' : ''}`}>{value}</div>
    </div>
  );
}