import { ShieldCheck, Save, KeyRound, Monitor } from "@/components/ui/icons";
import { Panel, PanelHeader } from "@/components/ui/panel";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Field } from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import { EmptyState } from "@/components/ui/empty-state";
import { requireUser } from "@/lib/auth/server";

export default async function ProfilePage() {
  const session = await requireUser();
  const { user } = session;

  // Le champ "name" Better Auth est libre : on tente un split simple
  // pour pre-remplir les inputs prenom/nom sans deviner.
  const fullName = user.name ?? "";
  const [firstName = "", ...rest] = fullName.split(" ");
  const lastName = rest.join(" ");

  return (
    <div className="space-y-6">
      {/* Informations personnelles */}
      <Panel>
        <PanelHeader
          title="Informations personnelles"
          subtitle="Le nom et l'email associés à votre accès au portail"
        />
        <div className="px-6 py-6 grid grid-cols-1 md:grid-cols-2 gap-5">
          <Field id="firstName" label="Prénom">
            <Input type="text" defaultValue={firstName} autoComplete="given-name" />
          </Field>
          <Field id="lastName" label="Nom">
            <Input type="text" defaultValue={lastName} autoComplete="family-name" />
          </Field>
          <Field id="email" label="Adresse e-mail" className="md:col-span-2">
            <Input type="email" defaultValue={user.email} autoComplete="email" inputMode="email" />
          </Field>
        </div>
        <div className="px-6 py-4 border-t border-border bg-stone-900/[0.02] flex justify-end">
          <Button variant="primary" size="sm">
            <Save className="size-3.5" />
            Enregistrer
          </Button>
        </div>
      </Panel>

      {/* Mot de passe */}
      <Panel>
        <PanelHeader
          title="Mot de passe"
          subtitle="Changez votre mot de passe régulièrement pour sécuriser votre compte"
        />
        <div className="px-6 py-6 space-y-5 max-w-xl">
          <Field id="currentPassword" label="Mot de passe actuel">
            <Input type="password" placeholder="••••••••" autoComplete="current-password" />
          </Field>
          <Field id="newPassword" label="Nouveau mot de passe">
            <Input type="password" placeholder="••••••••" autoComplete="new-password" />
          </Field>
          <Field id="confirmPassword" label="Confirmation">
            <Input type="password" placeholder="••••••••" autoComplete="new-password" />
          </Field>
        </div>
        <div className="px-6 py-4 border-t border-border bg-stone-900/[0.02] flex justify-end">
          <Button variant="primary" size="sm">
            <KeyRound className="size-3.5" />
            Mettre à jour
          </Button>
        </div>
      </Panel>

      {/* 2FA */}
      <Panel>
        <PanelHeader
          title="Authentification à deux facteurs"
          subtitle="Ajoutez une seconde couche de sécurité à votre compte"
          trailing={<Badge tone="muted">Non configuré</Badge>}
        />
        <div className="px-6 py-6 flex items-start gap-5">
          <span className="size-12 shrink-0 rounded-md bg-accent/10 border border-accent/20 flex items-center justify-center text-accent">
            <ShieldCheck className="size-6" />
          </span>
          <div className="flex-1">
            <h4 className="text-sm font-semibold text-text">Application d'authentification</h4>
            <p className="mt-1 text-sm text-text-muted leading-relaxed max-w-2xl">
              Utilisez Google Authenticator, 1Password ou toute autre application TOTP pour générer un code à 6 chiffres
              à chaque connexion. Recommandé.
            </p>
            <div className="mt-4 flex items-center gap-2">
              <Button variant="primary" size="sm">
                <ShieldCheck className="size-3.5" />
                Activer la 2FA
              </Button>
            </div>
          </div>
        </div>
      </Panel>

      {/* Sessions actives */}
      <Panel>
        <PanelHeader
          title="Sessions actives"
          subtitle="Les appareils connectés à votre compte"
        />
        <EmptyState
          icon={Monitor}
          title="Aucune autre session"
          description="Seule votre session courante est active. Vos prochaines connexions seront listées ici."
          compact
        />
      </Panel>
    </div>
  );
}