import React, { type Dispatch, type MutableRefObject, type SetStateAction } from 'react';
import { AlertTriangle, Cloud, Database, Download, History, Key, Loader2, ShieldCheck, Trash2 } from 'lucide-react';
import type { CloudProvider, ConflictResolution, SyncPayload, SyncResult, WebDAVAuthType } from '../../domain/sync';
import type { ShrinkFinding } from '../../domain/syncGuards';
import { stripSyncPayloadEncryptedCredentials } from '../../domain/credentials';
import type { useCloudSync } from '../../application/state/useCloudSync';
import { cn } from '../../lib/utils';
import { Button } from '../ui/button';
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '../ui/dialog';
import { Input } from '../ui/input';
import { Label } from '../ui/label';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select';
import { toast } from '../ui/toast';
import { ConflictModal, GitHubDeviceFlowModal } from './CloudSyncControls';

type SyncController = ReturnType<typeof useCloudSync>;
type TextValues = Record<string, string | number>;
type Translate = (key: string, values?: TextValues) => string;
type StringSetter = Dispatch<SetStateAction<string>>;
type BooleanSetter = Dispatch<SetStateAction<boolean>>;

type HistoryPreview = {
  sha: string;
  payload: SyncPayload;
  preview: {
    hostCount: number;
    keyCount: number;
    snippetCount: number;
    noteCount: number;
    identityCount: number;
    portForwardingRuleCount: number;
  };
  deviceName?: string;
  version?: number;
} | null;

interface CloudSyncDialogsProps {
  t: Translate;
  sync: SyncController;
  showGitHubModal: boolean;
  gitHubUserCode: string;
  gitHubVerificationUri: string;
  isPollingGitHub: boolean;
  activeGitHubAttemptIdRef: MutableRefObject<number | null>;
  setShowGitHubModal: BooleanSetter;
  setIsPollingGitHub: BooleanSetter;
  endPendingConnect: (provider: CloudProvider) => void;
  showConflictModal: boolean;
  setShowConflictModal: BooleanSetter;
  handleResolveConflict: (resolution: ConflictResolution) => Promise<void>;
  showHistoryModal: boolean;
  setShowHistoryModal: BooleanSetter;
  historyError: string | null;
  historyLoading: boolean;
  historyPreview: HistoryPreview;
  setHistoryPreview: Dispatch<SetStateAction<HistoryPreview>>;
  historyPreviewLoading: boolean;
  historyRevisions: Array<{ version: string; date: Date }>;
  handlePreviewRevision: (sha: string) => Promise<void>;
  handleRestoreRevision: () => Promise<void>;
  showWebdavDialog: boolean;
  setShowWebdavDialog: BooleanSetter;
  webdavEndpoint: string;
  setWebdavEndpoint: StringSetter;
  webdavAuthType: WebDAVAuthType;
  setWebdavAuthType: Dispatch<SetStateAction<WebDAVAuthType>>;
  webdavUsername: string;
  setWebdavUsername: StringSetter;
  webdavPassword: string;
  setWebdavPassword: StringSetter;
  webdavToken: string;
  setWebdavToken: StringSetter;
  showWebdavSecret: boolean;
  setShowWebdavSecret: BooleanSetter;
  webdavAllowInsecure: boolean;
  setWebdavAllowInsecure: BooleanSetter;
  webdavError: string | null;
  webdavErrorDetail: string | null;
  isSavingWebdav: boolean;
  handleSaveWebdav: () => Promise<void>;
  showS3Dialog: boolean;
  setShowS3Dialog: BooleanSetter;
  s3Endpoint: string;
  setS3Endpoint: StringSetter;
  s3Region: string;
  setS3Region: StringSetter;
  s3Bucket: string;
  setS3Bucket: StringSetter;
  s3AccessKeyId: string;
  setS3AccessKeyId: StringSetter;
  s3SecretAccessKey: string;
  setS3SecretAccessKey: StringSetter;
  s3SessionToken: string;
  setS3SessionToken: StringSetter;
  s3Prefix: string;
  setS3Prefix: StringSetter;
  s3ForcePathStyle: boolean;
  setS3ForcePathStyle: BooleanSetter;
  s3AllowInsecure: boolean;
  setS3AllowInsecure: BooleanSetter;
  showS3Secret: boolean;
  setShowS3Secret: BooleanSetter;
  s3Error: string | null;
  s3ErrorDetail: string | null;
  isSavingS3: boolean;
  handleSaveS3: () => Promise<void>;
  showChangeKeyDialog: boolean;
  setShowChangeKeyDialog: BooleanSetter;
  currentMasterKey: string;
  setCurrentMasterKey: StringSetter;
  newMasterKey: string;
  setNewMasterKey: StringSetter;
  confirmNewMasterKey: string;
  setConfirmNewMasterKey: StringSetter;
  showMasterKey: boolean;
  setShowMasterKey: BooleanSetter;
  changeKeyError: string | null;
  setChangeKeyError: Dispatch<SetStateAction<string | null>>;
  isChangingKey: boolean;
  setIsChangingKey: BooleanSetter;
  showUnlockDialog: boolean;
  setShowUnlockDialog: BooleanSetter;
  unlockMasterKey: string;
  setUnlockMasterKey: StringSetter;
  showUnlockMasterKey: boolean;
  setShowUnlockMasterKey: BooleanSetter;
  unlockError: string | null;
  setUnlockError: Dispatch<SetStateAction<string | null>>;
  isUnlocking: boolean;
  setIsUnlocking: BooleanSetter;
  showClearLocalDialog: boolean;
  setShowClearLocalDialog: BooleanSetter;
  onBuildPayload: () => SyncPayload | Promise<SyncPayload>;
  onApplyPayload: (payload: SyncPayload) => void | Promise<void>;
  onApplyConvergentPayload: (
    payload: SyncPayload,
    commitReplica: () => Promise<void>,
  ) => Promise<void>;
  onClearLocalData?: () => void;
  ensureSyncablePayload: (payload: SyncPayload) => boolean;
  showForcePushConfirm: boolean;
  setShowForcePushConfirm: BooleanSetter;
  blockedFinding: Extract<ShrinkFinding, { suspicious: true }> | null;
  setBlockedFinding: Dispatch<SetStateAction<Extract<ShrinkFinding, { suspicious: true }> | null>>;
}

export const CloudSyncDialogs: React.FC<CloudSyncDialogsProps> = ({
  t,
  sync,
  showGitHubModal,
  gitHubUserCode,
  gitHubVerificationUri,
  isPollingGitHub,
  activeGitHubAttemptIdRef,
  setShowGitHubModal,
  setIsPollingGitHub,
  endPendingConnect,
  showConflictModal,
  setShowConflictModal,
  handleResolveConflict,
  showHistoryModal,
  setShowHistoryModal,
  historyError,
  historyLoading,
  historyPreview,
  setHistoryPreview,
  historyPreviewLoading,
  historyRevisions,
  handlePreviewRevision,
  handleRestoreRevision,
  showWebdavDialog,
  setShowWebdavDialog,
  webdavEndpoint,
  setWebdavEndpoint,
  webdavAuthType,
  setWebdavAuthType,
  webdavUsername,
  setWebdavUsername,
  webdavPassword,
  setWebdavPassword,
  webdavToken,
  setWebdavToken,
  showWebdavSecret,
  setShowWebdavSecret,
  webdavAllowInsecure,
  setWebdavAllowInsecure,
  webdavError,
  webdavErrorDetail,
  isSavingWebdav,
  handleSaveWebdav,
  showS3Dialog,
  setShowS3Dialog,
  s3Endpoint,
  setS3Endpoint,
  s3Region,
  setS3Region,
  s3Bucket,
  setS3Bucket,
  s3AccessKeyId,
  setS3AccessKeyId,
  s3SecretAccessKey,
  setS3SecretAccessKey,
  s3SessionToken,
  setS3SessionToken,
  s3Prefix,
  setS3Prefix,
  s3ForcePathStyle,
  setS3ForcePathStyle,
  s3AllowInsecure,
  setS3AllowInsecure,
  showS3Secret,
  setShowS3Secret,
  s3Error,
  s3ErrorDetail,
  isSavingS3,
  handleSaveS3,
  showChangeKeyDialog,
  setShowChangeKeyDialog,
  currentMasterKey,
  setCurrentMasterKey,
  newMasterKey,
  setNewMasterKey,
  confirmNewMasterKey,
  setConfirmNewMasterKey,
  showMasterKey,
  setShowMasterKey,
  changeKeyError,
  setChangeKeyError,
  isChangingKey,
  setIsChangingKey,
  showUnlockDialog,
  setShowUnlockDialog,
  unlockMasterKey,
  setUnlockMasterKey,
  showUnlockMasterKey,
  setShowUnlockMasterKey,
  unlockError,
  setUnlockError,
  isUnlocking,
  setIsUnlocking,
  showClearLocalDialog,
  setShowClearLocalDialog,
  onBuildPayload,
  onApplyPayload,
  onApplyConvergentPayload,
  onClearLocalData,
  ensureSyncablePayload,
  showForcePushConfirm,
  setShowForcePushConfirm,
  blockedFinding,
  setBlockedFinding
}) => (
  <>
            {/* Modals */}
            <GitHubDeviceFlowModal
                isOpen={showGitHubModal}
                userCode={gitHubUserCode}
                verificationUri={gitHubVerificationUri}
                isPolling={isPollingGitHub}
                onClose={() => {
                    activeGitHubAttemptIdRef.current = null;
                    setShowGitHubModal(false);
                    setIsPollingGitHub(false);
                    endPendingConnect('github');
                    sync.cancelOAuthConnect();
                }}
            />

            <ConflictModal
                open={showConflictModal}
                conflict={sync.currentConflict}
                onResolve={handleResolveConflict}
                onClose={() => setShowConflictModal(false)}
            />

            {/* Gist Revision History Modal (#679) */}
            <Dialog open={showHistoryModal} onOpenChange={setShowHistoryModal}>
                <DialogContent className="sm:max-w-[520px] max-h-[80vh] overflow-hidden flex flex-col z-[70]">
                    <DialogHeader>
                        <DialogTitle className="flex items-center gap-2">
                            <History size={18} />
                            {t('cloudSync.revisionHistory.title')}
                        </DialogTitle>
                        <DialogDescription>{t('cloudSync.revisionHistory.description')}</DialogDescription>
                    </DialogHeader>

                    {historyError && (
                        <div className="rounded-lg bg-red-500/10 border border-red-500/20 p-3 text-sm text-red-500">
                            {historyError}
                        </div>
                    )}

                    {historyLoading ? (
                        <div className="flex items-center justify-center py-8">
                            <Loader2 size={24} className="animate-spin text-muted-foreground" />
                        </div>
                    ) : historyPreview ? (
                        // Preview of a selected revision
                        <div className="space-y-4 overflow-y-auto flex-1 min-h-0">
                            <div className="rounded-lg border p-4 space-y-2">
                                <div className="text-sm font-medium">{t('cloudSync.revisionHistory.revisionPreview')}</div>
                                {historyPreview.deviceName && (
                                    <div className="text-xs text-muted-foreground">
                                        {t('cloudSync.revisionHistory.device')}: {historyPreview.deviceName}
                                        {historyPreview.version != null && ` · v${historyPreview.version}`}
                                    </div>
                                )}
                                <div className="grid grid-cols-2 gap-2 text-sm">
                                    <div className="flex justify-between px-2 py-1 bg-muted/30 rounded">
                                        <span className="text-muted-foreground">{t('cloudSync.revisionHistory.hosts')}</span>
                                        <span className="font-medium">{historyPreview.preview.hostCount}</span>
                                    </div>
                                    <div className="flex justify-between px-2 py-1 bg-muted/30 rounded">
                                        <span className="text-muted-foreground">{t('cloudSync.revisionHistory.keys')}</span>
                                        <span className="font-medium">{historyPreview.preview.keyCount}</span>
                                    </div>
                                    <div className="flex justify-between px-2 py-1 bg-muted/30 rounded">
                                        <span className="text-muted-foreground">{t('cloudSync.revisionHistory.snippets')}</span>
                                        <span className="font-medium">{historyPreview.preview.snippetCount}</span>
                                    </div>
                                    <div className="flex justify-between px-2 py-1 bg-muted/30 rounded">
                                        <span className="text-muted-foreground">{t('cloudSync.revisionHistory.notes')}</span>
                                        <span className="font-medium">{historyPreview.preview.noteCount}</span>
                                    </div>
                                    <div className="flex justify-between px-2 py-1 bg-muted/30 rounded">
                                        <span className="text-muted-foreground">{t('cloudSync.revisionHistory.identities')}</span>
                                        <span className="font-medium">{historyPreview.preview.identityCount}</span>
                                    </div>
                                </div>
                            </div>
                            <DialogFooter className="gap-2">
                                <Button variant="outline" onClick={() => setHistoryPreview(null)}>
                                    {t('common.back')}
                                </Button>
                                <Button onClick={handleRestoreRevision} className="gap-1">
                                    <Download size={14} />
                                    {t('cloudSync.revisionHistory.restoreButton')}
                                </Button>
                            </DialogFooter>
                        </div>
                    ) : (
                        // Revision list
                        <div className="overflow-y-auto flex-1 min-h-0 -mx-1">
                            {historyRevisions.length === 0 ? (
                                <div className="text-sm text-muted-foreground text-center py-8">
                                    {t('cloudSync.revisionHistory.empty')}
                                </div>
                            ) : (
                                <div className="space-y-1 px-1">
                                    {historyRevisions.map((rev, index) => (
                                        <button
                                            key={rev.version}
                                            onClick={() => handlePreviewRevision(rev.version)}
                                            disabled={historyPreviewLoading}
                                            className={cn(
                                                "w-full flex items-center justify-between p-2.5 rounded-lg text-left text-sm transition-colors",
                                                "hover:bg-muted/50 border border-transparent hover:border-border",
                                                index === 0 && "bg-primary/5 border-primary/20",
                                            )}
                                        >
                                            <div>
                                                <div className="font-medium">
                                                    {index === 0 ? t('cloudSync.revisionHistory.current') : `${t('cloudSync.revisionHistory.revision')} #${historyRevisions.length - index}`}
                                                </div>
                                                <div className="text-xs text-muted-foreground">
                                                    {rev.date.toLocaleString()}
                                                </div>
                                            </div>
                                            <div className="text-xs text-muted-foreground font-mono">
                                                {rev.version.slice(0, 7)}
                                            </div>
                                        </button>
                                    ))}
                                </div>
                            )}
                        </div>
                    )}

                    {historyPreviewLoading && (
                        <div className="absolute inset-0 bg-background/50 flex items-center justify-center rounded-lg">
                            <Loader2 size={24} className="animate-spin" />
                        </div>
                    )}
                </DialogContent>
            </Dialog>

            <Dialog open={showWebdavDialog} onOpenChange={setShowWebdavDialog}>
                <DialogContent className="sm:max-w-[460px] max-h-[80vh] overflow-y-auto z-[70]">
                    <DialogHeader>
                        <DialogTitle>{t('cloudSync.webdav.title')}</DialogTitle>
                        <DialogDescription>{t('cloudSync.webdav.desc')}</DialogDescription>
                    </DialogHeader>

                    <div className="space-y-4">
                        <div className="space-y-2">
                            <Label>{t('cloudSync.webdav.endpoint')}</Label>
                            <Input
                                value={webdavEndpoint}
                                onChange={(e) => setWebdavEndpoint(e.target.value)}
                                placeholder="https://dav.example.com/remote.php/webdav/"
                            />
                        </div>

                        <div className="space-y-2">
                            <Label>{t('cloudSync.webdav.authType')}</Label>
                            <Select value={webdavAuthType} onValueChange={(value) => setWebdavAuthType(value as WebDAVAuthType)}>
                                <SelectTrigger>
                                    <SelectValue />
                                </SelectTrigger>
                                <SelectContent>
                                    <SelectItem value="basic">{t('cloudSync.webdav.auth.basic')}</SelectItem>
                                    <SelectItem value="digest">{t('cloudSync.webdav.auth.digest')}</SelectItem>
                                    <SelectItem value="token">{t('cloudSync.webdav.auth.token')}</SelectItem>
                                </SelectContent>
                            </Select>
                        </div>

                        {webdavAuthType !== 'token' ? (
                            <>
                                <div className="space-y-2">
                                    <Label>{t('cloudSync.webdav.username')}</Label>
                                    <Input
                                        value={webdavUsername}
                                        onChange={(e) => setWebdavUsername(e.target.value)}
                                        autoComplete="username"
                                    />
                                </div>
                                <div className="space-y-2">
                                    <Label>{t('cloudSync.webdav.password')}</Label>
                                    <Input
                                        type={showWebdavSecret ? 'text' : 'password'}
                                        value={webdavPassword}
                                        onChange={(e) => setWebdavPassword(e.target.value)}
                                        autoComplete="current-password"
                                    />
                                </div>
                            </>
                        ) : (
                            <div className="space-y-2">
                                <Label>{t('cloudSync.webdav.token')}</Label>
                                <Input
                                    type={showWebdavSecret ? 'text' : 'password'}
                                    value={webdavToken}
                                    onChange={(e) => setWebdavToken(e.target.value)}
                                />
                            </div>
                        )}

                        <label className="flex items-center gap-2 text-sm text-muted-foreground select-none">
                            <input
                                type="checkbox"
                                checked={showWebdavSecret}
                                onChange={(e) => setShowWebdavSecret(e.target.checked)}
                                className="accent-primary"
                            />
                            {t('cloudSync.webdav.showSecret')}
                        </label>

                        <label className="flex items-center gap-2 text-sm text-muted-foreground select-none">
                            <input
                                type="checkbox"
                                checked={webdavAllowInsecure}
                                onChange={(e) => setWebdavAllowInsecure(e.target.checked)}
                                className="accent-primary"
                            />
                            {t('cloudSync.webdav.allowInsecure')}
                        </label>

                        {webdavError && (
                            <p className="text-sm text-red-500">{webdavError}</p>
                        )}
                        {webdavErrorDetail && (
                            <pre className="text-xs text-red-400 whitespace-pre-wrap rounded-md border border-red-500/30 bg-red-500/10 p-2">
                                {webdavErrorDetail}
                            </pre>
                        )}
                    </div>

                    <DialogFooter>
                        <Button
                            variant="outline"
                            onClick={() => setShowWebdavDialog(false)}
                            disabled={isSavingWebdav}
                        >
                            {t('common.cancel')}
                        </Button>
                        <Button
                            onClick={handleSaveWebdav}
                            disabled={isSavingWebdav}
                            className="gap-2"
                        >
                            {isSavingWebdav ? <Loader2 size={16} className="animate-spin" /> : <Cloud size={16} />}
                            {t('common.save')}
                        </Button>
                    </DialogFooter>
                </DialogContent>
            </Dialog>

            <Dialog open={showS3Dialog} onOpenChange={setShowS3Dialog}>
                <DialogContent className="sm:max-w-[520px] max-h-[80vh] overflow-y-auto z-[70]">
                    <DialogHeader>
                        <DialogTitle>{t('cloudSync.s3.title')}</DialogTitle>
                        <DialogDescription>{t('cloudSync.s3.desc')}</DialogDescription>
                    </DialogHeader>

                    <div className="space-y-4">
                        <div className="space-y-2">
                            <Label>{t('cloudSync.s3.endpoint')}</Label>
                            <Input
                                value={s3Endpoint}
                                onChange={(e) => setS3Endpoint(e.target.value)}
                                placeholder="https://s3.example.com"
                            />
                        </div>

                        <div className="grid grid-cols-2 gap-3">
                            <div className="space-y-2">
                                <Label>{t('cloudSync.s3.region')}</Label>
                                <Input
                                    value={s3Region}
                                    onChange={(e) => setS3Region(e.target.value)}
                                    placeholder="us-east-1"
                                />
                            </div>
                            <div className="space-y-2">
                                <Label>{t('cloudSync.s3.bucket')}</Label>
                                <Input
                                    value={s3Bucket}
                                    onChange={(e) => setS3Bucket(e.target.value)}
                                    placeholder="netcatty-backups"
                                />
                            </div>
                        </div>

                        <div className="space-y-2">
                            <Label>{t('cloudSync.s3.accessKeyId')}</Label>
                            <Input
                                value={s3AccessKeyId}
                                onChange={(e) => setS3AccessKeyId(e.target.value)}
                                autoComplete="off"
                            />
                        </div>

                        <div className="space-y-2">
                            <Label>{t('cloudSync.s3.secretAccessKey')}</Label>
                            <Input
                                type={showS3Secret ? 'text' : 'password'}
                                value={s3SecretAccessKey}
                                onChange={(e) => setS3SecretAccessKey(e.target.value)}
                                autoComplete="off"
                            />
                        </div>

                        <div className="space-y-2">
                            <Label>{t('cloudSync.s3.sessionToken')}</Label>
                            <Input
                                type={showS3Secret ? 'text' : 'password'}
                                value={s3SessionToken}
                                onChange={(e) => setS3SessionToken(e.target.value)}
                                autoComplete="off"
                            />
                        </div>

                        <div className="space-y-2">
                            <Label>{t('cloudSync.s3.prefix')}</Label>
                            <Input
                                value={s3Prefix}
                                onChange={(e) => setS3Prefix(e.target.value)}
                                placeholder="backups/netcatty"
                            />
                        </div>

                        <label className="flex items-center gap-2 text-sm text-muted-foreground select-none">
                            <input
                                type="checkbox"
                                checked={s3ForcePathStyle}
                                onChange={(e) => setS3ForcePathStyle(e.target.checked)}
                                className="accent-primary"
                            />
                            {t('cloudSync.s3.forcePathStyle')}
                        </label>

                        <label className="flex items-center gap-2 text-sm text-muted-foreground select-none">
                            <input
                                type="checkbox"
                                checked={s3AllowInsecure}
                                onChange={(e) => setS3AllowInsecure(e.target.checked)}
                                className="accent-primary"
                            />
                            {t('cloudSync.s3.allowInsecure')}
                        </label>

                        <label className="flex items-center gap-2 text-sm text-muted-foreground select-none">
                            <input
                                type="checkbox"
                                checked={showS3Secret}
                                onChange={(e) => setShowS3Secret(e.target.checked)}
                                className="accent-primary"
                            />
                            {t('cloudSync.s3.showSecret')}
                        </label>

                        {s3Error && (
                            <p className="text-sm text-red-500">{s3Error}</p>
                        )}
                        {s3ErrorDetail && (
                            <pre className="text-xs text-red-400 whitespace-pre-wrap rounded-md border border-red-500/30 bg-red-500/10 p-2">
                                {s3ErrorDetail}
                            </pre>
                        )}
                    </div>

                    <DialogFooter>
                        <Button
                            variant="outline"
                            onClick={() => setShowS3Dialog(false)}
                            disabled={isSavingS3}
                        >
                            {t('common.cancel')}
                        </Button>
                        <Button
                            onClick={handleSaveS3}
                            disabled={isSavingS3}
                            className="gap-2"
                        >
                            {isSavingS3 ? <Loader2 size={16} className="animate-spin" /> : <Database size={16} />}
                            {t('common.save')}
                        </Button>
                    </DialogFooter>
                </DialogContent>
            </Dialog>

            <Dialog open={showChangeKeyDialog} onOpenChange={setShowChangeKeyDialog}>
                <DialogContent className="sm:max-w-[420px]">
                    <DialogHeader>
                        <DialogTitle>{t('cloudSync.changeKey.title')}</DialogTitle>
                        <DialogDescription>
                            {t('cloudSync.changeKey.desc')}
                        </DialogDescription>
                    </DialogHeader>

                    <div className="space-y-4">
                        <div className="space-y-2">
                            <Label>{t('cloudSync.changeKey.current')}</Label>
                            <Input
                                type={showMasterKey ? 'text' : 'password'}
                                value={currentMasterKey}
                                onChange={(e) => setCurrentMasterKey(e.target.value)}
                                placeholder={t('cloudSync.changeKey.currentPlaceholder')}
                                autoFocus
                            />
                        </div>

                        <div className="space-y-2">
                            <Label>{t('cloudSync.changeKey.new')}</Label>
                            <Input
                                type={showMasterKey ? 'text' : 'password'}
                                value={newMasterKey}
                                onChange={(e) => setNewMasterKey(e.target.value)}
                                placeholder={t('cloudSync.changeKey.newPlaceholder')}
                            />
                        </div>

                        <div className="space-y-2">
                            <Label>{t('cloudSync.changeKey.confirmNew')}</Label>
                            <Input
                                type={showMasterKey ? 'text' : 'password'}
                                value={confirmNewMasterKey}
                                onChange={(e) => setConfirmNewMasterKey(e.target.value)}
                                placeholder={t('cloudSync.changeKey.confirmPlaceholder')}
                            />
                        </div>

                        <label className="flex items-center gap-2 text-sm text-muted-foreground select-none">
                            <input
                                type="checkbox"
                                checked={showMasterKey}
                                onChange={(e) => setShowMasterKey(e.target.checked)}
                                className="accent-primary"
                            />
                            {t('cloudSync.changeKey.showKeys')}
                        </label>

                        {changeKeyError && (
                            <p className="text-sm text-red-500">{changeKeyError}</p>
                        )}
                    </div>

                    <DialogFooter>
                        <Button
                            variant="outline"
                            onClick={() => setShowChangeKeyDialog(false)}
                            disabled={isChangingKey}
                        >
                            {t('common.cancel')}
                        </Button>
                        <Button
                            onClick={async () => {
                                setChangeKeyError(null);
                                if (!currentMasterKey || !newMasterKey || !confirmNewMasterKey) {
                                    setChangeKeyError(t('cloudSync.changeKey.fillAll'));
                                    return;
                                }
                                if (newMasterKey.length < 8) {
                                    setChangeKeyError(t('cloudSync.changeKey.minLength'));
                                    return;
                                }
                                if (newMasterKey !== confirmNewMasterKey) {
                                    setChangeKeyError(t('cloudSync.changeKey.notMatch'));
                                    return;
                                }

                                let payloadForReencrypt: SyncPayload | null = null;
                                if (sync.hasAnyConnectedProvider) {
                                    const payload = await onBuildPayload();
                                    if (!ensureSyncablePayload(payload)) {
                                        setChangeKeyError(t('sync.credentialsUnavailable'));
                                        return;
                                    }
                                    payloadForReencrypt = payload;
                                }

                                setIsChangingKey(true);
                                try {
                                    const ok = await sync.changeMasterKey(currentMasterKey, newMasterKey);
                                    if (!ok) {
                                        setChangeKeyError(t('cloudSync.changeKey.incorrectCurrent'));
                                        return;
                                    }

                                    if (payloadForReencrypt) {
                                        await sync.syncNow(payloadForReencrypt, {
                                            applyConvergentPayload: onApplyConvergentPayload,
                                        });
                                    }

                                    toast.success(t('cloudSync.changeKey.updatedToast'));
                                    setShowChangeKeyDialog(false);
                                } catch (error) {
                                    setChangeKeyError(error instanceof Error ? error.message : t('cloudSync.changeKey.failed'));
                                } finally {
                                    setIsChangingKey(false);
                                }
                            }}
                            disabled={isChangingKey}
                            className="gap-2"
                        >
                            {isChangingKey ? <Loader2 size={16} className="animate-spin" /> : <Key size={16} />}
                            {t('cloudSync.changeKey.updateButton')}
                        </Button>
                    </DialogFooter>
                </DialogContent>
            </Dialog>

            <Dialog open={showUnlockDialog} onOpenChange={setShowUnlockDialog}>
                <DialogContent className="sm:max-w-[420px]">
                    <DialogHeader>
                        <DialogTitle>{t('cloudSync.unlock.title')}</DialogTitle>
                        <DialogDescription>
                            {t('cloudSync.unlock.desc')}
                        </DialogDescription>
                    </DialogHeader>

                    <div className="space-y-4">
                        <div className="space-y-2">
                            <Label>{t('cloudSync.unlock.masterKey')}</Label>
                            <Input
                                type={showUnlockMasterKey ? 'text' : 'password'}
                                value={unlockMasterKey}
                                onChange={(e) => setUnlockMasterKey(e.target.value)}
                                placeholder={t('cloudSync.unlock.placeholder')}
                                autoFocus
                            />
                        </div>

                        <label className="flex items-center gap-2 text-sm text-muted-foreground select-none">
                            <input
                                type="checkbox"
                                checked={showUnlockMasterKey}
                                onChange={(e) => setShowUnlockMasterKey(e.target.checked)}
                                className="accent-primary"
                            />
                            {t('cloudSync.unlock.showKey')}
                        </label>

                        {unlockError && (
                            <p className="text-sm text-red-500">{unlockError}</p>
                        )}
                    </div>

                    <DialogFooter>
                        <Button
                            variant="outline"
                            onClick={() => setShowUnlockDialog(false)}
                            disabled={isUnlocking}
                        >
                            {t('cloudSync.unlock.notNow')}
                        </Button>
                        <Button
                            onClick={async () => {
                                setUnlockError(null);
                                if (!unlockMasterKey) {
                                    setUnlockError(t('cloudSync.unlock.empty'));
                                    return;
                                }
                                setIsUnlocking(true);
                                try {
                                    const ok = await sync.unlock(unlockMasterKey);
                                    if (!ok) {
                                        setUnlockError(t('cloudSync.unlock.incorrect'));
                                        return;
                                    }
                                    toast.success(t('cloudSync.unlock.readyToast'));
                                    setShowUnlockDialog(false);
                                    setUnlockMasterKey('');
                                } catch (error) {
                                    setUnlockError(error instanceof Error ? error.message : t('cloudSync.unlock.failed'));
                                } finally {
                                    setIsUnlocking(false);
                                }
                            }}
                            disabled={isUnlocking}
                            className="gap-2"
                        >
                            {isUnlocking ? <Loader2 size={16} className="animate-spin" /> : <ShieldCheck size={16} />}
                            {t('cloudSync.unlock.unlockButton')}
                        </Button>
                    </DialogFooter>
                </DialogContent>
            </Dialog>

            {/* Clear Local Data Confirmation Dialog */}
            <Dialog open={showClearLocalDialog} onOpenChange={setShowClearLocalDialog}>
                <DialogContent className="sm:max-w-[400px] z-[70]">
                    <DialogHeader>
                        <DialogTitle className="flex items-center gap-2 text-destructive">
                            <AlertTriangle size={20} />
                            {t('cloudSync.clearLocal.dialog.title')}
                        </DialogTitle>
                        <DialogDescription>
                            {t('cloudSync.clearLocal.dialog.desc')}
                        </DialogDescription>
                    </DialogHeader>
                    <DialogFooter className="gap-2 sm:gap-0">
                        <Button
                            variant="outline"
                            onClick={() => setShowClearLocalDialog(false)}
                        >
                            {t('cloudSync.clearLocal.dialog.cancel')}
                        </Button>
                        <Button
                            variant="destructive"
                            onClick={() => {
                                onClearLocalData?.();
                                sync.resetLocalVersion();
                                setShowClearLocalDialog(false);
                                toast.success(t('cloudSync.clearLocal.toast.desc'), t('cloudSync.clearLocal.toast.title'));
                            }}
                        >
                            <Trash2 size={14} className="mr-1" />
                            {t('cloudSync.clearLocal.dialog.confirm')}
                        </Button>
                    </DialogFooter>
                </DialogContent>
            </Dialog>

            {/* Force-push confirmation modal (Task 8) */}
            {showForcePushConfirm && blockedFinding && (
                <Dialog open onOpenChange={(open) => !open && setShowForcePushConfirm(false)}>
                    <DialogContent>
                        <DialogHeader>
                            <DialogTitle>{t('sync.forcePush.title')}</DialogTitle>
                        </DialogHeader>
                        <p className="text-sm">
                            {t('sync.forcePush.body', {
                                lost: blockedFinding.lost,
                                entityType: t(`sync.entityType.${blockedFinding.entityType}`),
                            })}
                        </p>
                        <DialogFooter>
                            <Button variant="outline" onClick={() => setShowForcePushConfirm(false)}>
                                {t('sync.forcePush.cancel')}
                            </Button>
                            <Button
                                variant="destructive"
                                onClick={async () => {
                                    const localPayload = await onBuildPayload();
                                    if (!ensureSyncablePayload(localPayload)) {
                                        setShowForcePushConfirm(false);
                                        return;
                                    }
                                    setShowForcePushConfirm(false);
                                    try {
                                        const results = await sync.syncNow(localPayload, {
                                            overrideShrink: true,
                                            applyConvergentPayload: onApplyConvergentPayload,
                                        });

                                        // Apply any merged payload BEFORE clearing the banner. If a merge happened
                                        // during force-push (remote changed), the merged result is what the cloud
                                        // now has — applying it to local state prevents the next sync from
                                        // re-deleting the remote additions we just merged in.
                                        for (const result of results.values()) {
                                            if (result.mergedPayload && !result.mergedPayloadApplied) {
                                                const portableMerged = stripSyncPayloadEncryptedCredentials(result.mergedPayload);
                                                await Promise.resolve(onApplyPayload(portableMerged));
                                                if (result.remoteFile) {
                                                    await sync.commitRemoteInspection(result.provider, result.remoteFile, portableMerged, {
                                                        recordDownload: true,
                                                    });
                                                }
                                                break; // All providers share the same merged payload
                                            }
                                        }

                                        const syncResults = Array.from(results.values()) as SyncResult[];
                                        const allOk = syncResults.every((r) => r.success);
                                        if (allOk) {
                                            setBlockedFinding(null);
                                        } else {
                                            // Surface the failure but KEEP the banner so the user can retry or
                                            // restore. Find the first error string to display.
                                            const firstError = syncResults
                                                .find((r) => !r.success)
                                                ?.error ?? t('sync.toast.errorTitle');
                                            toast.error(firstError, t('sync.toast.errorTitle'));
                                        }
                                    } catch (err) {
                                        toast.error(String(err), t('sync.toast.errorTitle'));
                                    }
                                }}
                            >
                                {t('sync.forcePush.confirm')}
                            </Button>
                        </DialogFooter>
                    </DialogContent>
                </Dialog>
            )}
  </>
);