import React from 'react';
import { AlertTriangle, FlaskConical, RotateCcw, ShieldCheck } from 'lucide-react';

import type {
  ConvergentFieldConflict,
  ConvergentMigrationPreview,
} from '../../domain/sync';
import {
  convergentConflictAddressKey,
  dotKey,
  isConvergentConflictSecret,
} from '../../domain/convergentSync';
import { Button } from '../ui/button';

type Translate = (key: string, values?: Record<string, string | number>) => string;

const ConvergentToggle: React.FC<{
  checked: boolean;
  disabled: boolean;
  label: string;
  onChange: (checked: boolean) => void | Promise<void>;
}> = ({ checked, disabled, label, onChange }) => (
  <button
    type="button"
    role="switch"
    aria-label={label}
    aria-checked={checked}
    disabled={disabled}
    onClick={() => onChange(!checked)}
    className={`relative inline-flex h-5 w-9 shrink-0 rounded-full border-2 transition-colors ${
      checked ? 'border-amber-500 bg-amber-500' : 'border-border bg-muted'
    } disabled:cursor-not-allowed disabled:opacity-50`}
  >
    <span
      className={`pointer-events-none block h-4 w-4 rounded-full bg-white shadow-sm transition-transform ${
        checked ? 'translate-x-4' : 'translate-x-0'
      }`}
    />
  </button>
);

function conflictLabel(conflict: ConvergentFieldConflict, t: Translate): string {
  const { address } = conflict;
  switch (address.kind) {
    case 'entity-presence':
      return `${address.collection}/${address.entityId} · ${t('cloudSync.convergent.field.presence')}`;
    case 'entity-position':
      return `${address.collection}/${address.entityId} · ${t('cloudSync.convergent.field.position')}`;
    case 'entity-field':
      return `${address.collection}/${address.entityId} · ${address.field}`;
    case 'setting':
      return `settings.${address.path.join('.')}`;
    case 'setting-structure':
      return address.paths.map((path) => `settings.${path.join('.')}`).join(' ↔ ');
    case 'string-entry-presence':
      return `${address.collection}/${address.value} · ${t('cloudSync.convergent.field.presence')}`;
    case 'string-entry-position':
      return `${address.collection}/${address.value} · ${t('cloudSync.convergent.field.position')}`;
  }
}

function candidateValue(
  conflict: ConvergentFieldConflict,
  candidate: ConvergentFieldConflict['candidates'][number],
  t: Translate,
): string {
  if (candidate.tombstone) return t('cloudSync.convergent.conflict.empty');
  if (isConvergentConflictSecret(conflict)) {
    return candidate.value == null
      ? t('cloudSync.convergent.conflict.empty')
      : t('cloudSync.convergent.conflict.secretSet');
  }
  const encoded = JSON.stringify(candidate.value);
  if (!encoded) return t('cloudSync.convergent.conflict.empty');
  return encoded.length > 180 ? `${encoded.slice(0, 177)}...` : encoded;
}

export interface ConvergentSyncPanelProps {
  t: Translate;
  resolvedLocale: string | null;
  config: { enabled: boolean; initialized: boolean };
  preview: ConvergentMigrationPreview | null;
  busy: boolean;
  error: string | null;
  conflicts: ConvergentFieldConflict[];
  onToggle: (enabled: boolean) => void | Promise<void>;
  onConfirmMigration: () => void | Promise<void>;
  onCancelMigration: () => void;
  onResolveConflict: (addressKey: string, candidateDot: string) => void | Promise<void>;
  onDowngrade: () => void | Promise<void>;
}

export const ConvergentSyncPanel: React.FC<ConvergentSyncPanelProps> = ({
  t,
  resolvedLocale,
  config,
  preview,
  busy,
  error,
  conflicts,
  onToggle,
  onConfirmMigration,
  onCancelMigration,
  onResolveConflict,
  onDowngrade,
}) => (
  <div className="space-y-4 overflow-hidden rounded-xl border border-amber-500/25 bg-gradient-to-br from-amber-500/[0.07] via-card to-card p-4 shadow-sm">
    <div className="flex items-start justify-between gap-3">
      <div className="flex min-w-0 items-start gap-3">
        <div
          data-testid="convergent-sync-icon"
          className="mt-0.5 flex h-9 w-9 shrink-0 self-start items-center justify-center rounded-lg border border-amber-500/20 bg-amber-500/10 text-amber-600 dark:text-amber-400"
        >
          <FlaskConical size={18} />
        </div>
        <div className="min-w-0 flex-1">
          <div className="flex flex-wrap items-center gap-2">
            <span className="text-sm font-semibold">{t('cloudSync.convergent.title')}</span>
            <span className="inline-flex rounded-full border border-amber-500/20 bg-amber-500/10 px-2 py-0.5 text-[10px] font-medium uppercase tracking-wide text-amber-700 dark:text-amber-300">
              {t('cloudSync.convergent.experimental')}
            </span>
          </div>
          <div className="mt-1 max-w-3xl text-xs leading-relaxed text-muted-foreground">
            {t('cloudSync.convergent.desc')}
          </div>
        </div>
      </div>
      <ConvergentToggle
        checked={config.enabled}
        onChange={onToggle}
        disabled={busy}
        label={t('cloudSync.convergent.title')}
      />
    </div>

    {config.initialized && (
      <div className="flex items-center gap-2 text-xs text-muted-foreground">
        <ShieldCheck size={14} className="text-green-500" />
        {config.enabled
          ? t('cloudSync.convergent.active')
          : t('cloudSync.convergent.paused')}
      </div>
    )}

    {preview && (
      <div className="space-y-3 rounded-lg border border-border/70 bg-background/65 p-3.5 shadow-sm">
        <div className="text-sm font-semibold">{t('cloudSync.convergent.preview.title')}</div>
        <div className="grid grid-cols-1 gap-2 text-center sm:grid-cols-3">
          <div className="rounded-md border border-border/70 bg-muted/20 px-3 py-2.5">
            <div className="text-lg font-semibold tabular-nums">
              {Object.values(preview.entityCounts).reduce((sum, count) => sum + (count ?? 0), 0)}
            </div>
            <div className="text-[10px] text-muted-foreground">{t('cloudSync.convergent.preview.entities')}</div>
          </div>
          <div className="rounded-md border border-border/70 bg-muted/20 px-3 py-2.5">
            <div className="text-lg font-semibold tabular-nums">{preview.providers.length}</div>
            <div className="text-[10px] text-muted-foreground">{t('cloudSync.convergent.preview.providers')}</div>
          </div>
          <div className="rounded-md border border-border/70 bg-muted/20 px-3 py-2.5">
            <div className="text-lg font-semibold tabular-nums">{preview.conflictCount}</div>
            <div className="text-[10px] text-muted-foreground">{t('cloudSync.convergent.preview.conflicts')}</div>
          </div>
        </div>
        <div className="rounded-md bg-muted/25 px-3 py-2 text-xs leading-relaxed text-muted-foreground">
          {t('cloudSync.convergent.preview.compatibility')}
        </div>
        {preview.providers.length > 0 && (
          <div className="divide-y rounded border text-xs">
            {preview.providers.map((provider) => (
              <div key={provider.provider} className="flex items-start justify-between gap-3 px-2 py-1.5">
                <span className="font-medium">{provider.provider}</span>
                <span className="text-right text-muted-foreground">
                  {t(`cloudSync.convergent.preview.status.${provider.status}`)} · {t('cloudSync.convergent.preview.schema')} {provider.schemaVersion}
                  {provider.message ? ` · ${provider.message}` : ''}
                </span>
              </div>
            ))}
          </div>
        )}
        {preview.blockedReasons.length > 0 && (
          <div className="rounded border border-destructive/30 bg-destructive/5 p-2 text-xs text-destructive">
            {preview.blockedReasons.join(' · ')}
          </div>
        )}
        <div className="flex flex-wrap justify-end gap-2 border-t border-border/60 pt-3">
          <Button variant="ghost" size="sm" onClick={onCancelMigration} disabled={busy}>
            {t('common.cancel')}
          </Button>
          <Button size="sm" onClick={onConfirmMigration} disabled={busy || !preview.canInitialize}>
            {t('cloudSync.convergent.preview.confirm')}
          </Button>
        </div>
      </div>
    )}

    {error && (
      <div className="flex gap-2 rounded-md border border-destructive/30 bg-destructive/5 p-2 text-xs text-destructive">
        <AlertTriangle size={14} className="mt-0.5 shrink-0" />
        <span>{error}</span>
      </div>
    )}

    {config.initialized && conflicts.length > 0 && (
      <div className="space-y-2">
        <div className="text-sm font-medium">
          {t('cloudSync.convergent.conflicts.title', { count: conflicts.length })}
        </div>
        <div className="space-y-2">
          {conflicts.map((conflict) => {
            const addressKey = convergentConflictAddressKey(conflict.address);
            return (
              <div key={addressKey} className="space-y-2 rounded-lg border border-border/70 bg-background/65 p-3 shadow-sm">
                <div className="break-all font-mono text-xs">{conflictLabel(conflict, t)}</div>
                <div className="space-y-1.5">
                  {conflict.candidates.map((candidate) => (
                    <div
                      key={dotKey(candidate.dot)}
                      className="flex flex-wrap items-center justify-between gap-3 rounded-md border border-border/60 bg-muted/15 p-2.5"
                    >
                      <div className="min-w-0">
                        <div className="truncate text-xs font-medium">
                          {candidateValue(conflict, candidate, t)}
                        </div>
                        <div className="text-[10px] text-muted-foreground">
                          {candidate.dot.deviceId} · {new Date(candidate.hlc.wallTime).toLocaleString(resolvedLocale || undefined)}
                          {candidate.selected ? ` · ${t('cloudSync.convergent.conflict.current')}` : ''}
                        </div>
                      </div>
                      <Button
                        size="sm"
                        variant={candidate.selected ? 'secondary' : 'outline'}
                        disabled={busy}
                        onClick={() => onResolveConflict(addressKey, dotKey(candidate.dot))}
                      >
                        {t('cloudSync.convergent.conflict.choose')}
                      </Button>
                    </div>
                  ))}
                </div>
              </div>
            );
          })}
        </div>
      </div>
    )}

    {config.initialized && (
      <div className="flex flex-wrap items-center justify-between gap-2 border-t border-border/60 pt-3">
        <div className="min-w-0 flex-1 text-xs leading-relaxed text-muted-foreground">{t('cloudSync.convergent.downgrade.desc')}</div>
        <Button variant="ghost" size="sm" className="text-destructive" onClick={onDowngrade} disabled={busy}>
          <RotateCcw size={14} className="mr-1" />
          {t('cloudSync.convergent.downgrade.button')}
        </Button>
      </div>
    )}
  </div>
);