'use client';

import { useEffect, useState } from 'react';
import { Loader2 } from 'lucide-react';

import { fetchMe, type AuthUser } from '@/lib/api';

const fields: { label: string; key: keyof AuthUser }[] = [
  { label: 'Nom', key: 'nom' },
  { label: 'Adresse e-mail', key: 'email' },
  { label: 'Profil utilisateur', key: 'role_ccfn' },
];

export function AccountSettings() {
  const [user, setUser] = useState<AuthUser | null>(null);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    let cancelled = false;

    fetchMe()
      .then((me) => {
        if (!cancelled) {
          setUser(me);
        }
      })
      .catch(() => {
        if (!cancelled) {
          setError('Impossible de charger les informations du compte.');
        }
      });

    return () => {
      cancelled = true;
    };
  }, []);

  if (error) {
    return (
      <p className="rounded-md bg-destructive/10 px-3 py-2 text-sm text-destructive">
        {error}
      </p>
    );
  }

  if (!user) {
    return (
      <div className="flex items-center gap-2 text-sm text-muted-foreground">
        <Loader2 className="h-4 w-4 animate-spin" aria-hidden />
        Chargement…
      </div>
    );
  }

  return (
    <div className="rounded-xl border bg-card p-6 shadow-sm">
      <dl className="grid gap-5 sm:grid-cols-2">
        {fields.map((field) => (
          <div key={field.key}>
            <dt className="text-xs uppercase tracking-wide text-muted-foreground">
              {field.label}
            </dt>
            <dd className="mt-1 text-sm font-medium">
              {String(user[field.key] ?? '—')}
            </dd>
          </div>
        ))}
      </dl>
    </div>
  );
}