/**
 * CloudSyncSettings - End-to-End Encrypted Cloud Sync UI
 * 
 * Handles:
 * - Master key setup (gatekeeper screen)
 * - Provider connections (GitHub, Google, OneDrive)
 * - Sync status and conflict resolution
 */

import React, { useState, useCallback } from 'react';
import {
    AlertTriangle,
    Check,
    Cloud,
    CloudOff,
    Copy,
    Download,
    ExternalLink,
    Eye,
    EyeOff,
    Github,
    Loader2,
    RefreshCw,
    Settings,
    Shield,
    ShieldCheck,
    X,
} from 'lucide-react';


import { useI18n } from '../../application/i18n/I18nProvider';
import { useCloudSync } from '../../application/state/useCloudSync';


import { type CloudProvider, type ConflictInfo, type SyncChangeEntityKey, type SyncEntityChangeCounts, formatLastSync } from '../../domain/sync';
import { cn } from '../../lib/utils';
import { Button } from '../ui/button';
import { ConfirmDialog } from '../ui/confirm-dialog';
import { Input } from '../ui/input';
import { Label } from '../ui/label';
import { toast } from '../ui/toast';
import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';

// ============================================================================
// Provider Icons
// ============================================================================

export const GoogleDriveIcon: React.FC<{ className?: string }> = ({ className }) => (
    <svg className={className} viewBox="0 0 24 24" fill="currentColor">
        <path d="M7.71 3.5L1.15 15l3.43 6 6.55-11.5L7.71 3.5zm1.73 0l6.55 11.5H23L16.45 3.5H9.44zM8 15l-3.43 6h13.72l3.43-6H8z" />
    </svg>
);

export const OneDriveIcon: React.FC<{ className?: string }> = ({ className }) => (
    <svg className={className} viewBox="0 0 24 24" fill="currentColor">
        <path d="M10.5 18.5c0 .55-.45 1-1 1h-5c-2.21 0-4-1.79-4-4 0-1.86 1.28-3.41 3-3.86v-.14c0-2.21 1.79-4 4-4 1.1 0 2.1.45 2.82 1.18A5.003 5.003 0 0 1 15 4c2.76 0 5 2.24 5 5 0 .16 0 .32-.02.47A4.5 4.5 0 0 1 24 13.5c0 2.49-2.01 4.5-4.5 4.5h-8c-.55 0-1-.45-1-1s.45-1 1-1h8c1.38 0 2.5-1.12 2.5-2.5s-1.12-2.5-2.5-2.5H19c-.28 0-.5-.22-.5-.5 0-2.21-1.79-4-4-4-1.87 0-3.44 1.28-3.88 3.02-.09.37-.41.63-.79.63-1.66 0-3 1.34-3 3v.5c0 .28-.22.5-.5.5-1.38 0-2.5 1.12-2.5 2.5s1.12 2.5 2.5 2.5h5c.55 0 1 .45 1 1z" />
    </svg>
);

// ============================================================================
// Toggle Component
// ============================================================================

interface ToggleProps {
    checked: boolean;
    onChange: (checked: boolean) => void;
    disabled?: boolean;
}

export const Toggle: React.FC<ToggleProps> = ({ checked, onChange, disabled }) => (
    <button
        type="button"
        role="switch"
        aria-checked={checked}
        disabled={disabled}
        onClick={() => onChange(!checked)}
        className={cn(
            "relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
            checked ? "bg-primary" : "bg-input"
        )}
    >
        <span
            className={cn(
                "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform",
                checked ? "translate-x-4" : "translate-x-0"
            )}
        />
    </button>
);

// ============================================================================
// Status Dot Component
// ============================================================================

interface StatusDotProps {
    status: 'connected' | 'syncing' | 'error' | 'disconnected' | 'connecting';
    className?: string;
}

export const StatusDot: React.FC<StatusDotProps> = ({ status, className }) => {
    if (status === 'connecting') {
        return <Loader2 className={cn('w-3.5 h-3.5 animate-spin text-muted-foreground', className)} />;
    }

    const colors = {
        connected: 'bg-green-500',
        syncing: 'bg-blue-500 animate-pulse',
        error: 'bg-red-500',
        disconnected: 'bg-muted-foreground/50',
    };

    return (
        <span className={cn('inline-block w-2 h-2 rounded-full', colors[status], className)} />
    );
};

// ============================================================================
// Gatekeeper Screen (NO_KEY state)
// ============================================================================

interface GatekeeperScreenProps {
    onSetupComplete: () => void;
}

export const GatekeeperScreen: React.FC<GatekeeperScreenProps> = ({ onSetupComplete }) => {
    const { t } = useI18n();
    const { setupMasterKey } = useCloudSync();
    const [password, setPassword] = useState('');
    const [confirmPassword, setConfirmPassword] = useState('');
    const [showPassword, setShowPassword] = useState(false);
    const [acknowledged, setAcknowledged] = useState(false);
    const [isLoading, setIsLoading] = useState(false);
    const [error, setError] = useState<string | null>(null);

    const passwordStrength = React.useMemo(() => {
        if (password.length < 8) return { level: 0, text: t('cloudSync.passwordStrength.tooShort') };
        let score = 0;
        if (password.length >= 12) score++;
        if (/[A-Z]/.test(password)) score++;
        if (/[a-z]/.test(password)) score++;
        if (/[0-9]/.test(password)) score++;
        if (/[^A-Za-z0-9]/.test(password)) score++;

        if (score <= 2) return { level: 1, text: t('cloudSync.passwordStrength.weak') };
        if (score <= 3) return { level: 2, text: t('cloudSync.passwordStrength.moderate') };
        if (score <= 4) return { level: 3, text: t('cloudSync.passwordStrength.strong') };
        return { level: 4, text: t('cloudSync.passwordStrength.veryStrong') };
    }, [password, t]);

    const canSubmit = password.length >= 8 && password === confirmPassword && acknowledged;

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        if (!canSubmit) return;

        setIsLoading(true);
        setError(null);

        try {
            await setupMasterKey(password, confirmPassword);
            toast.success(t('cloudSync.gate.enabledToast'));
            onSetupComplete();
        } catch (err) {
            setError(err instanceof Error ? err.message : t('cloudSync.gate.setupFailed'));
        } finally {
            setIsLoading(false);
        }
    };

    return (
        <div className="flex flex-col items-center justify-center py-12 px-4 text-center">
            <div className="w-20 h-20 rounded-full bg-primary/10 flex items-center justify-center mb-6">
                <Shield className="w-10 h-10 text-primary" />
            </div>

            <h2 className="text-xl font-semibold mb-2">{t('cloudSync.gate.title')}</h2>
            <p className="text-sm text-muted-foreground max-w-md mb-8">
                {t('cloudSync.gate.desc')}
            </p>

            <form onSubmit={handleSubmit} className="w-full max-w-sm space-y-4">
                <div className="space-y-2">
                    <Label className="text-left block">{t('cloudSync.gate.masterKey')}</Label>
                    <div className="relative">
                        <Input
                            type={showPassword ? 'text' : 'password'}
                            value={password}
                            onChange={(e) => setPassword(e.target.value)}
                            placeholder={t('cloudSync.gate.placeholder')}
                            className="pr-10"
                        />
                        <button
                            type="button"
                            onClick={() => setShowPassword(!showPassword)}
                            className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
                        >
                            {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
                        </button>
                    </div>
                    {password.length > 0 && (
                        <div className="flex items-center gap-2">
                            <div className="flex-1 h-1 rounded-full bg-muted overflow-hidden">
                                <div
                                    className={cn(
                                        'h-full transition-all',
                                        passwordStrength.level === 1 && 'w-1/4 bg-red-500',
                                        passwordStrength.level === 2 && 'w-2/4 bg-yellow-500',
                                        passwordStrength.level === 3 && 'w-3/4 bg-green-500',
                                        passwordStrength.level === 4 && 'w-full bg-green-600',
                                    )}
                                />
                            </div>
                            <span className="text-xs text-muted-foreground">{passwordStrength.text}</span>
                        </div>
                    )}
                </div>

                <div className="space-y-2">
                    <Label className="text-left block">{t('cloudSync.gate.confirmMasterKey')}</Label>
                    <Input
                        type={showPassword ? 'text' : 'password'}
                        value={confirmPassword}
                        onChange={(e) => setConfirmPassword(e.target.value)}
                        placeholder={t('cloudSync.gate.confirmPlaceholder')}
                    />
                    {confirmPassword && password !== confirmPassword && (
                        <p className="text-xs text-red-500 text-left">{t('cloudSync.gate.mismatch')}</p>
                    )}
                </div>

                <label className="flex items-start gap-3 p-3 rounded-lg border border-red-200 bg-red-50 dark:border-red-900 dark:bg-red-950/50 cursor-pointer text-left">
                    <input
                        type="checkbox"
                        checked={acknowledged}
                        onChange={(e) => setAcknowledged(e.target.checked)}
                        className="mt-0.5 accent-red-500"
                    />
                    <span className="text-xs text-red-700 dark:text-red-400">
                        {t('cloudSync.gate.warning')}
                    </span>
                </label>

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

                <Button
                    type="submit"
                    disabled={!canSubmit || isLoading}
                    className="w-full gap-2"
                >
                    {isLoading ? (
                        <Loader2 size={16} className="animate-spin" />
                    ) : (
                        <ShieldCheck size={16} />
                    )}
                    {t('cloudSync.gate.enableVault')}
                </Button>
            </form>
        </div>
    );
};

// ============================================================================
// Provider Card Component
// ============================================================================

interface ProviderCardProps {
    provider: CloudProvider;
    name: string;
    icon: React.ReactNode;
    isConnected: boolean;
    isSyncing: boolean;
    isConnecting?: boolean;
    account?: { name?: string; email?: string; avatarUrl?: string };
    lastSync?: number;
    error?: string;
    disabled?: boolean; // Disable connect button when another provider is connected
    onEdit?: () => void;
    onConnect: () => void;
    onCancelConnect?: () => void;
    onDisconnect: () => void;
    onSync: () => void;
    extraActions?: React.ReactNode;
}

export const ProviderCard: React.FC<ProviderCardProps> = ({
    provider: _provider,
    name,
    icon,
    isConnected,
    isSyncing,
    isConnecting,
    account,
    lastSync,
    error,
    disabled,
    onEdit,
    onConnect,
    onCancelConnect,
    onDisconnect,
    onSync,
    extraActions,
}) => {
    const { t } = useI18n();
    const [disconnectConfirmOpen, setDisconnectConfirmOpen] = useState(false);
    const formatLastSyncLabel = (timestamp?: number): string => {
        if (!timestamp) return t('cloudSync.lastSync.never');
        const now = Date.now();
        const diff = now - timestamp;

        if (diff < 60000) return t('cloudSync.lastSync.justNow');
        if (diff < 3600000) return t('cloudSync.lastSync.minutesAgo', { minutes: Math.floor(diff / 60000) });

        return formatLastSync(timestamp);
    };

    const status = error
        ? 'error'
        : isSyncing
            ? 'syncing'
            : isConnected
                ? 'connected'
                : isConnecting
                    ? 'connecting'
                    : 'disconnected';

    return (
        <div className={cn(
            "flex items-center gap-4 p-4 rounded-lg border transition-colors",
            isConnected ? "bg-card" : "bg-muted/30",
            error && "border-red-300 dark:border-red-900"
        )}>
            <div className={cn(
                "w-12 h-12 rounded-lg flex items-center justify-center",
                isConnected ? "bg-primary/10 text-primary" : "bg-muted text-muted-foreground"
            )}>
                {icon}
            </div>

            <div className="flex-1 min-w-0">
                <div className="flex items-center gap-2">
                    <span className="font-medium">{name}</span>
                    <StatusDot status={status} />
                </div>

                {isConnected && account ? (
                    <div className="flex items-center gap-2 mt-1">
                        {account.avatarUrl && (
                            <img
                                src={account.avatarUrl}
                                alt=""
                                className="w-4 h-4 rounded-full"
                                referrerPolicy="no-referrer"
                                crossOrigin="anonymous"
                            />
                        )}
                        <span className="text-xs text-muted-foreground truncate">
                            {account.name || account.email}
                        </span>
                        <span className="text-xs text-muted-foreground">
                            · {formatLastSyncLabel(lastSync)}
                        </span>
                    </div>
                ) : error ? (
                    <Tooltip>
                        <TooltipTrigger asChild>
                            <p className="text-xs text-red-500 truncate mt-1 max-w-[360px] cursor-help">
                                {error}
                            </p>
                        </TooltipTrigger>
                        <TooltipContent>{error}</TooltipContent>
                    </Tooltip>
                ) : (
                    <p className="text-xs text-muted-foreground mt-1">
                        {isConnecting ? t('cloudSync.provider.connecting') : t('cloudSync.provider.notConnected')}
                    </p>
                )}
            </div>

            <div className="flex items-center gap-2">
                {isConnected ? (
                    <>
                        <Button
                            size="sm"
                            variant="ghost"
                            onClick={onSync}
                            disabled={isSyncing}
                            className="gap-1"
                        >
                            {isSyncing ? (
                                <Loader2 size={14} className="animate-spin" />
                            ) : (
                                <RefreshCw size={14} />
                            )}
                            {t('cloudSync.provider.sync')}
                        </Button>
                        {extraActions}
                        {onEdit && (
                            <Button
                                size="sm"
                                variant="ghost"
                                onClick={onEdit}
                                className="gap-1"
                            >
                                <Settings size={14} />
                                {t('action.edit')}
                            </Button>
                        )}
                        <Button
                            size="sm"
                            variant="ghost"
                            onClick={() => setDisconnectConfirmOpen(true)}
                            className="text-muted-foreground hover:text-red-500"
                            aria-label={t('cloudSync.provider.disconnect')}
                        >
                            <CloudOff size={14} />
                        </Button>
                    </>
                ) : isConnecting && onCancelConnect ? (
                    <Button
                        size="sm"
                        variant="outline"
                        onClick={onCancelConnect}
                        className="gap-1 min-w-[136px] justify-center"
                    >
                        <X size={14} />
                        {t('common.cancel')}
                    </Button>
                ) : (
                    <Button
                        size="sm"
                        onClick={() => { onConnect(); }}
                        className="gap-1 min-w-[136px] justify-center"
                        disabled={disabled || isConnecting}
                    >
                        {isConnecting ? <Loader2 size={14} className="animate-spin" /> : <Cloud size={14} />}
                        {isConnecting ? t('cloudSync.provider.connecting') : t('cloudSync.provider.connect')}
                    </Button>
                )}
            </div>
            <ConfirmDialog
                open={disconnectConfirmOpen}
                title={t('cloudSync.provider.disconnect.confirmTitle', { name })}
                message={t('cloudSync.provider.disconnect.confirmMessage', { name })}
                confirmLabel={t('cloudSync.provider.disconnect.confirmAction')}
                destructive
                onOpenChange={setDisconnectConfirmOpen}
                onConfirm={() => {
                    setDisconnectConfirmOpen(false);
                    onDisconnect();
                }}
            />
        </div>
    );
};

// ============================================================================
// GitHub Device Flow Modal
// ============================================================================

interface GitHubDeviceFlowModalProps {
    isOpen: boolean;
    userCode: string;
    verificationUri: string;
    isPolling: boolean;
    onClose: () => void;
}

export const GitHubDeviceFlowModal: React.FC<GitHubDeviceFlowModalProps> = ({
    isOpen,
    userCode,
    verificationUri,
    isPolling,
    onClose,
}) => {
    const { t } = useI18n();
    const [copied, setCopied] = useState(false);

    const copyCode = useCallback(() => {
        navigator.clipboard.writeText(userCode);
        setCopied(true);
        setTimeout(() => setCopied(false), 2000);
    }, [userCode]);

    if (!isOpen) return null;

    return (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
            <div className="bg-background rounded-lg shadow-xl w-full max-w-md p-6 relative">
                <button
                    onClick={onClose}
                    className="absolute top-4 right-4 text-muted-foreground hover:text-foreground"
                >
                    <X size={18} />
                </button>

                <div className="text-center">
                    <div className="w-16 h-16 rounded-full bg-[#24292e] flex items-center justify-center mx-auto mb-4">
                        <Github className="w-8 h-8 text-white" />
                    </div>

                    <h3 className="text-lg font-semibold mb-2">{t('cloudSync.githubFlow.title')}</h3>
                    <p className="text-sm text-muted-foreground mb-6">
                        {t('cloudSync.githubFlow.desc')}
                    </p>

                    <div className="bg-muted rounded-lg p-4 mb-4">
                        <div className="font-mono text-2xl font-bold tracking-widest mb-2">
                            {userCode}
                        </div>
                        <Button size="sm" variant="ghost" onClick={copyCode} className="gap-2">
                            {copied ? <Check size={14} /> : <Copy size={14} />}
                            {copied ? t('cloudSync.githubFlow.copied') : t('cloudSync.githubFlow.copyCode')}
                        </Button>
                    </div>

                    <Button
                        onClick={() => window.open(verificationUri, "_blank", "noopener,noreferrer")}
                        className="w-full gap-2 mb-4"
                    >
                        <ExternalLink size={14} />
                        {t('cloudSync.githubFlow.openGitHub')}
                    </Button>

                    {isPolling && (
                        <div className="flex items-center justify-center gap-2 text-sm text-muted-foreground">
                            <Loader2 size={14} className="animate-spin" />
                            {t('cloudSync.githubFlow.waiting')}
                        </div>
                    )}
                </div>
            </div>
        </div>
    );
};

// ============================================================================
// Conflict Resolution Modal
// ============================================================================

interface ConflictModalProps {
    open: boolean;
    conflict: ConflictInfo | null;
    onResolve: (resolution: 'USE_LOCAL' | 'USE_REMOTE') => void;
    onClose: () => void;
}

const CONFLICT_ENTITY_LABEL_KEYS: Record<SyncChangeEntityKey, string> = {
    hosts: 'cloudSync.conflict.entity.hosts',
    keys: 'cloudSync.conflict.entity.keys',
    identities: 'cloudSync.conflict.entity.identities',
    proxyProfiles: 'cloudSync.conflict.entity.proxyProfiles',
    snippets: 'cloudSync.conflict.entity.snippets',
    notes: 'cloudSync.conflict.entity.notes',
    noteGroups: 'cloudSync.conflict.entity.noteGroups',
    customGroups: 'cloudSync.conflict.entity.customGroups',
    snippetPackages: 'cloudSync.conflict.entity.snippetPackages',
    portForwardingRules: 'cloudSync.conflict.entity.portForwardingRules',
    groupConfigs: 'cloudSync.conflict.entity.groupConfigs',
    settings: 'cloudSync.conflict.entity.settings',
};

export const ConflictModal: React.FC<ConflictModalProps> = ({
    open,
    conflict,
    onResolve,
    onClose,
}) => {
    const { t, resolvedLocale } = useI18n();

    if (!open || !conflict) return null;

    const formatDate = (timestamp: number) => {
        return new Date(timestamp).toLocaleString(resolvedLocale || undefined);
    };
    const changeRows = conflict.changeSummary
        ? (Object.entries(conflict.changeSummary.byEntity) as Array<[SyncChangeEntityKey, SyncEntityChangeCounts | undefined]>)
            .flatMap(([entityType, counts]) => {
                if (!counts) return [];
                return [{
                    entityType,
                    localTotal: counts.added.local + counts.modified.local + counts.deleted.local,
                    remoteTotal: counts.added.remote + counts.modified.remote + counts.deleted.remote,
                    conflictTotal: conflict.changeSummary?.conflicts.filter((item) => item.entityType === entityType).length ?? 0,
                }];
            })
            .filter((row) => row.localTotal > 0 || row.remoteTotal > 0 || row.conflictTotal > 0)
        : [];

    return (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
            <div className="bg-background rounded-lg shadow-xl w-full max-w-lg max-h-[calc(100vh-2rem)] p-6 relative flex flex-col">
                <button
                    onClick={onClose}
                    className="absolute top-4 right-4 text-muted-foreground hover:text-foreground"
                >
                    <X size={18} />
                </button>

                <div className="flex-1 overflow-y-auto pr-1">
                    <div className="flex items-center gap-3 mb-4">
                        <div className="w-10 h-10 rounded-full bg-amber-500/10 flex items-center justify-center shrink-0">
                            <AlertTriangle className="w-5 h-5 text-amber-500" />
                        </div>
                        <div className="min-w-0">
                            <h3 className="text-lg font-semibold">{t('cloudSync.conflict.title')}</h3>
                            <p className="text-sm text-muted-foreground">
                                {t('cloudSync.conflict.desc')}
                            </p>
                        </div>
                    </div>

                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6">
                        <div className="p-4 rounded-lg border bg-muted/30 min-w-0">
                            <div className="text-xs font-medium text-muted-foreground mb-2">{t('cloudSync.conflict.local')}</div>
                            <div className="text-sm font-medium">v{conflict.localVersion}</div>
                            <div className="text-xs text-muted-foreground mt-1 break-words">
                                {formatDate(conflict.localUpdatedAt)}
                            </div>
                            {conflict.localDeviceName && (
                                <div className="text-xs text-muted-foreground break-words">
                                    {conflict.localDeviceName}
                                </div>
                            )}
                        </div>

                        <div className="p-4 rounded-lg border bg-muted/30 min-w-0">
                            <div className="text-xs font-medium text-muted-foreground mb-2">{t('cloudSync.conflict.cloud')}</div>
                            <div className="text-sm font-medium">v{conflict.remoteVersion}</div>
                            <div className="text-xs text-muted-foreground mt-1 break-words">
                                {formatDate(conflict.remoteUpdatedAt)}
                            </div>
                            {conflict.remoteDeviceName && (
                                <div className="text-xs text-muted-foreground break-words">
                                    {conflict.remoteDeviceName}
                                </div>
                            )}
                        </div>
                    </div>

                    {changeRows.length > 0 && (
                        <div className="rounded-lg border bg-muted/20 p-3 mb-6 space-y-2">
                            <div className="text-xs font-medium text-muted-foreground">
                                {t('cloudSync.conflict.detailsTitle')}
                            </div>
                            <div className="space-y-2">
                                {changeRows.map((row) => (
                                    <div key={row.entityType} className="grid gap-1 text-sm">
                                        <span className="font-medium break-words">
                                            {t(CONFLICT_ENTITY_LABEL_KEYS[row.entityType])}
                                        </span>
                                        <span className="text-xs text-muted-foreground break-words">
                                            {t('cloudSync.conflict.detailsCounts', {
                                                local: row.localTotal,
                                                cloud: row.remoteTotal,
                                                conflicts: row.conflictTotal,
                                            })}
                                        </span>
                                    </div>
                                ))}
                            </div>
                        </div>
                    )}
                </div>

                <div className="flex flex-col gap-2 pt-4 shrink-0">
                    <Button
                        variant="outline"
                        className="w-full gap-2"
                        onClick={() => onResolve('USE_LOCAL')}
                    >
                        <Cloud size={14} />
                        {t('cloudSync.conflict.keepLocal')}
                    </Button>
                    <Button
                        className="w-full gap-2"
                        onClick={() => onResolve('USE_REMOTE')}
                    >
                        <Download size={14} />
                        {t('cloudSync.conflict.useCloud')}
                    </Button>
                </div>
            </div>
        </div>
    );
};

// ============================================================================
// Main Dashboard (UNLOCKED state)
// ============================================================================