import { Activity, RefreshCw } from 'lucide-react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { useTranslation } from '@/contexts/language';
import { useRelayDivergence } from '@/hooks/useRelayDivergence';

/**
 * Settings diagnostic: compare the community relay with the user's read relays.
 * No merge, no vote, no data mutation.
 */
export function RelayDivergenceCard() {
  const { t } = useTranslation();
  const { result, checking, error, check } = useRelayDivergence();

  const differences = result?.differences.length ?? 0;

  return (
    <Card className="bg-black/90 border-white/10">
      <CardHeader className="pb-2">
        <CardTitle className="flex items-center gap-2 text-sm font-bold text-white">
          <Activity className="h-4 w-4 text-[#ccff00]" />
          {t('settingsUi.relayList.relayDiagTitle')}
        </CardTitle>
      </CardHeader>
      <CardContent className="space-y-3">
        <p className="text-xs leading-relaxed text-gray-400">
          {t('settingsUi.relayList.relayDiagDesc')}
        </p>

        <Button
          size="sm"
          variant="outline"
          onClick={() => void check()}
          disabled={checking}
          className="gap-1.5"
        >
          <RefreshCw className={checking ? 'h-3.5 w-3.5 animate-spin' : 'h-3.5 w-3.5'} />
          {checking
            ? t('settingsUi.relayList.relayDiagChecking')
            : t('settingsUi.relayList.relayDiagCheck')}
        </Button>

        {error && (
          <p className="text-xs text-red-400">
            {t('settingsUi.relayList.relayDiagFailed')}
          </p>
        )}

        {result && !error && (
          <div className="space-y-1 text-xs">
            <p className={differences > 0 ? 'font-bold text-amber-300' : 'text-green-400'}>
              {differences > 0
                ? t('settingsUi.relayList.relayDiagDiff', { count: differences })
                : t('settingsUi.relayList.relayDiagAgree')}
            </p>
            {differences > 0 && (
              <p className="text-gray-500">{t('settingsUi.relayList.relayDiagDetails')}</p>
            )}
            {result.errors.length > 0 && (
              <p className="text-gray-500">
                {result.errors.length} {t('settingsUi.relayList.offline')}
              </p>
            )}
          </div>
        )}
      </CardContent>
    </Card>
  );
}