Metamorph/frontend/src/pages/ProfilePage.tsx

import { useState } from 'react';

import { Alert } from '@/components/ui/Alert';
import { Button } from '@/components/ui/Button';
import { Card } from '@/components/ui/Card';
import { SectionHeader } from '@/components/ui/SectionHeader';
import { Tag } from '@/components/ui/Tag';
import { TextField } from '@/components/ui/TextField';
import { ApiError, apiPost } from '@/lib/api';
import { useAuth } from '@/lib/auth';

export function ProfilePage() {
  const { state, logout } = useAuth();
  const user = state.user!;
  const [current, setCurrent] = useState('');
  const [next, setNext] = useState('');
  const [confirm, setConfirm] = useState('');
  const [busy, setBusy] = useState(false);
  const [msg, setMsg] = useState<{ kind: 'ok' | 'err'; text: string } | null>(null);

  async function handleChangePassword(e: React.FormEvent) {
    e.preventDefault();
    setMsg(null);
    if (next !== confirm) {
      setMsg({ kind: 'err', text: 'New passwords do not match.' });
      return;
    }
    if (next.length < 8) {
      setMsg({ kind: 'err', text: 'New password must be at least 8 characters.' });
      return;
    }
    setBusy(true);
    try {
      await apiPost('/auth/change-password', {
        current_password: current,
        new_password: next,
      });
      setMsg({ kind: 'ok', text: 'Password updated. You will be signed out for security.' });
      setCurrent('');
      setNext('');
      setConfirm('');
      setTimeout(() => logout(), 1500);
    } catch (err) {
      if (err instanceof ApiError) {
        const payload = err.payload as { error?: string; message?: string } | null;
        setMsg({
          kind: 'err',
          text: payload?.message ?? payload?.error ?? `HTTP ${err.status}`,
        });
      } else {
        setMsg({ kind: 'err', text: err instanceof Error ? err.message : 'Update failed.' });
      }
    } finally {
      setBusy(false);
    }
  }

  return (
    <>
      <SectionHeader prefix="Account" highlight="Profile" accent="cyan" />
      <div className="grid gap-4 [grid-template-columns:repeat(auto-fill,minmax(420px,1fr))]">
        <Card accent="cyan" title="Identity" sub={user.is_admin ? 'admin account' : 'operator account'}>
          <p>
            <span className="text-text-dim">email&nbsp;</span>
            <code className="accent-fill-cyan px-2 py-[2px] rounded-sm font-mono text-4xs">
              {user.email}
            </code>
          </p>
          <p className="mt-2">
            <span className="text-text-dim">display&nbsp;</span>
            <code className="accent-fill-cyan px-2 py-[2px] rounded-sm font-mono text-4xs">
              {user.display_name ?? '—'}
            </code>
          </p>
          <p className="mt-2">
            <span className="text-text-dim">locale&nbsp;</span>
            <code className="accent-fill-cyan px-2 py-[2px] rounded-sm font-mono text-4xs">
              {user.locale}
            </code>
          </p>
        </Card>

        <Card accent="purple" title="Groups" sub={user.groups.length ? '' : 'no groups assigned'}>
          {user.groups.length === 0 && <p className="text-text-dim">No groups yet.</p>}
          {user.groups.map((g) => (
            <Tag key={g} accent="purple">
              {g}
            </Tag>
          ))}
        </Card>

        <Card accent="orange" title="Permissions" sub={user.permissions.length ? '' : user.is_admin ? 'admin (all)' : 'no perms'}>
          {user.is_admin && <Tag accent="orange">ADMIN — bypasses checks</Tag>}
          {user.permissions.map((p) => (
            <Tag key={p} accent="orange">
              {p}
            </Tag>
          ))}
        </Card>

        <Card accent="rose" title="Change password">
          <form onSubmit={handleChangePassword} className="space-y-3">
            <TextField
              label="Current password"
              type="password"
              autoComplete="current-password"
              value={current}
              onChange={(e) => setCurrent(e.target.value)}
              required
            />
            <TextField
              label="New password"
              type="password"
              autoComplete="new-password"
              value={next}
              onChange={(e) => setNext(e.target.value)}
              required
              hint="Min 8 characters."
            />
            <TextField
              label="Confirm new password"
              type="password"
              autoComplete="new-password"
              value={confirm}
              onChange={(e) => setConfirm(e.target.value)}
              required
            />
            {msg && <Alert accent={msg.kind === 'ok' ? 'green' : 'red'}>{msg.text}</Alert>}
            <Button type="submit" accent="rose" disabled={busy}>
              {busy ? 'Updating…' : 'Update password'}
            </Button>
          </form>
        </Card>
      </div>
    </>
  );
}