import { useState } from "react";
import { Sparkles, Power } from "lucide-react";
import { toast } from "sonner";

import { useDemoEnd, useDemoStart, useDemoState } from "@/lib/demo";
import { Button } from "@/components/ui/Button";
import { Card } from "@/components/ui/Card";

/**
 * Bouton "Mode démo" pour /parametres.
 *
 * Active le flag `demo_mode` sur l'org du user, qui :
 *  - Diverte les emails vers une boîte capturée (pas de Resend)
 *  - Active l'horloge virtuelle (top-right)
 *  - Permet d'avancer le temps en accéléré
 *
 * À désactiver après une démo pour repasser en prod normale.
 */
export function DemoToggle() {
  const { data: state } = useDemoState();
  const startMutation = useDemoStart();
  const endMutation = useDemoEnd();
  const [confirmEnd, setConfirmEnd] = useState(false);

  const isDemo = state?.demoMode === true;

  if (isDemo) {
    return (
      <Card padding="md" className="border-rubis bg-rubis-glow/30">
        <div className="flex items-start justify-between gap-4">
          <div>
            <p className="text-[10.5px] uppercase tracking-[0.12em] text-rubis font-semibold">
              Mode démo actif
            </p>
            <p className="mt-1 font-display text-[16px] font-bold text-ink">
              L'horloge virtuelle tourne
            </p>
            <p className="mt-1.5 text-[12.5px] text-ink-2 leading-snug max-w-md">
              Les emails sont capturés dans la boîte démo (pas envoyés à de
              vrais clients). Vos KPIs et le DSO suivent l'horloge virtuelle.
              Quittez le mode démo pour revenir au temps réel.
            </p>
          </div>
        </div>
        <div className="mt-4 flex items-center gap-3">
          {confirmEnd ? (
            <>
              <p className="text-[12.5px] text-ink-2">
                Sûr ? L'inbox démo sera conservée mais l'horloge revient au
                temps réel.
              </p>
              <Button
                variant="danger"
                size="sm"
                loading={endMutation.isPending}
                onClick={() => {
                  endMutation.mutate(undefined, {
                    onSuccess: () => {
                      toast.success("Mode démo désactivé.");
                      setConfirmEnd(false);
                    },
                  });
                }}
              >
                <Power size={13} /> Quitter le mode démo
              </Button>
              <Button variant="ghost" size="sm" onClick={() => setConfirmEnd(false)}>
                Annuler
              </Button>
            </>
          ) : (
            <Button variant="secondary" size="sm" onClick={() => setConfirmEnd(true)}>
              <Power size={13} /> Quitter le mode démo
            </Button>
          )}
        </div>
      </Card>
    );
  }

  return (
    <Card padding="md">
      <p className="text-[12.5px] text-ink-2 leading-snug max-w-md mb-3">
        Active une horloge virtuelle qui permet d'avancer dans le temps en
        accéléré. Idéal pour montrer Rubis en condition réelle pendant une
        démo : les emails apparaissent en direct, ne partent pas chez de vrais
        clients.
      </p>
      <Button
        size="sm"
        loading={startMutation.isPending}
        onClick={() => {
          startMutation.mutate(undefined, {
            onSuccess: () => toast.success("Mode démo activé. Horloge en pause."),
          });
        }}
      >
        <Sparkles size={13} /> Démarrer une démo
      </Button>
    </Card>
  );
}
