app/tiktok/page.tsx

@@ -22,6 +22,7 @@ export default function TikTokPage() {
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState<string | null>(null);
     const [disconnecting, setDisconnecting] = useState(false);
+    const [showDisconnectConfirm, setShowDisconnectConfirm] = useState(false);
     const searchParams = useSearchParams();
     const router = useRouter();
 
@@ -51,10 +52,12 @@ export default function TikTokPage() {
     }, []);
 
     async function handleDisconnect() {
+        if (disconnecting) return;
         setDisconnecting(true);
         try {
             await fetch("/api/tiktok/disconnect", { method: "POST" });
             setStats(null);
+            setShowDisconnectConfirm(false);
             router.replace("/tiktok");
         } finally {
             setDisconnecting(false);
@@ -79,7 +82,7 @@ export default function TikTokPage() {
 
                 {stats && !loading && (
                     <button
-                        onClick={handleDisconnect}
+                        onClick={() => setShowDisconnectConfirm(true)}
                         disabled={disconnecting}
                         className="flex items-center gap-2 px-4 py-2 text-[10px] font-mono tracking-widest uppercase border border-red-500/30 text-red-400/70 hover:text-red-400 hover:border-red-500/60 rounded-sm transition-colors disabled:opacity-50"
                     >
@@ -187,6 +190,40 @@ export default function TikTokPage() {
                     </button>
                 </div>
             )}
+
+            {showDisconnectConfirm && (
+                <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 px-4">
+                    <div className="w-full max-w-md rounded-sm border p-5" style={{ background: "var(--surface)", borderColor: "var(--border)" }}>
+                        <div className="flex items-center gap-2 mb-3 text-red-400">
+                            <AlertTriangle size={16} />
+                            <p className="text-xs font-mono tracking-widest uppercase">Confirmer la déconnexion</p>
+                        </div>
+                        <p className="text-sm mb-5" style={{ color: "var(--text-secondary)" }}>
+                            Êtes-vous sûr de vouloir déconnecter votre compte TikTok ?
+                        </p>
+                        <div className="flex items-center justify-end gap-2">
+                            <button
+                                type="button"
+                                onClick={() => setShowDisconnectConfirm(false)}
+                                disabled={disconnecting}
+                                className="px-3 py-2 text-[10px] font-mono tracking-widest uppercase border rounded-sm transition-colors disabled:opacity-50"
+                                style={{ borderColor: "var(--border)", color: "var(--text-secondary)" }}
+                            >
+                                Annuler
+                            </button>
+                            <button
+                                type="button"
+                                onClick={handleDisconnect}
+                                disabled={disconnecting}
+                                className="flex items-center gap-2 px-3 py-2 text-[10px] font-mono tracking-widest uppercase border border-red-500/40 text-red-300 hover:text-red-200 hover:border-red-500/70 rounded-sm transition-colors disabled:opacity-50"
+                            >
+                                {disconnecting ? <Loader2 size={12} className="animate-spin" /> : <Unlink size={12} />}
+                                Confirmer
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            )}
         </div>
     );
 }