import { Download, FileText, Trash2, ShieldCheck, ExternalLink } from "@/components/ui/icons";
import { Panel, PanelHeader } from "@/components/ui/panel";
import { Button } from "@/components/ui/button";

export default function PrivacyPage() {
  return (
    <div className="space-y-6">
      {/* RGPD intro */}
      <Panel className="border-accent/20 bg-accent/[0.03]">
        <div className="px-6 py-5 flex items-start gap-4">
          <span className="size-10 shrink-0 rounded-md bg-accent/15 border border-accent/40 flex items-center justify-center text-accent">
            <ShieldCheck className="size-5" />
          </span>
          <div className="flex-1">
            <h3 className="text-sm font-semibold text-text">Conformité RGPD</h3>
            <p className="mt-1.5 text-sm text-text-muted leading-relaxed max-w-3xl">
              Vos données sont hébergées en France et traitées conformément au Règlement Général sur la Protection
              des Données. Vous pouvez à tout moment exporter ou demander la suppression de vos informations.
            </p>
            <a
              href="#"
              className="mt-3 inline-flex items-center gap-1 text-xs text-accent hover:underline"
            >
              <FileText className="size-3.5" />
              Lire notre politique de confidentialité
              <ExternalLink className="size-3" />
            </a>
          </div>
        </div>
      </Panel>

      {/* Export */}
      <Panel>
        <PanelHeader
          title="Exporter mes données"
          subtitle="Recevez par email une archive ZIP contenant l'ensemble des données associées à votre compte"
        />
        <div className="px-6 py-5 flex items-start gap-4">
          <span className="size-10 shrink-0 rounded-md border border-border bg-stone-900/[0.03] flex items-center justify-center text-text-muted">
            <Download className="size-4" />
          </span>
          <div className="flex-1">
            <p className="text-sm text-text-muted leading-relaxed max-w-2xl">
              L'archive contiendra : informations personnelles, factures, historique de paiement, configuration de votre
              site, données analytiques importées sur les 12 derniers mois. Préparation sous 24 h ouvrées.
            </p>
            <div className="mt-4">
              <Button variant="outline" size="sm">
                <Download className="size-3.5" />
                Demander l'export
              </Button>
            </div>
          </div>
        </div>
      </Panel>

      {/* Suppression : danger zone */}
      <Panel className="border-danger/20">
        <div className="px-6 py-5 border-b border-danger/15 bg-danger/[0.03]">
          <h3 className="text-sm font-semibold text-danger">Zone à risque</h3>
          <p className="mt-0.5 text-xs text-text-dim">
            Les actions ci-dessous sont irréversibles.
          </p>
        </div>
        <div className="px-6 py-5 flex items-start gap-4">
          <span className="size-10 shrink-0 rounded-md border border-danger/25 bg-danger/10 flex items-center justify-center text-danger">
            <Trash2 className="size-4" />
          </span>
          <div className="flex-1">
            <h4 className="text-sm font-semibold text-text">Supprimer définitivement mon compte</h4>
            <p className="mt-1.5 text-sm text-text-muted leading-relaxed max-w-2xl">
              Cette action résilie votre abonnement, retire votre site en ligne et supprime l'ensemble de vos données
              sous 30 jours. Aucune récupération n'est possible une fois la procédure lancée.
            </p>
            <div className="mt-4">
              <Button variant="danger" size="sm">
                <Trash2 className="size-3.5" />
                Supprimer mon compte
              </Button>
            </div>
          </div>
        </div>
      </Panel>
    </div>
  );
}