// diagnostics/DiagExtensions.jsx — Extensions status + Copilot conflict cards.
// Depends on: React (global), Card (ui.jsx), _diagBadge, _diagWarnBadge (helpers.jsx)

function DiagExtensions({ t }) {
  if (!t) return null;
  const ok = t.missing_required?.length === 0 && t.conflicting?.length === 0;
  return (
    <Card title={`Rozszerzenia (${t.total_installed} zainstalowanych)`} badge={ok ? _diagBadge(true) : _diagWarnBadge()}>
      {t.missing_required?.length > 0 && (
        <div className="mb-2">
          <p className="text-xs font-semibold text-red-700 mb-1">Brak wymaganych (Open VSX):</p>
          {t.missing_required.map(e => <p key={e} className="text-xs text-red-600 font-mono pl-2">• {e}</p>)}
        </div>
      )}
      {t.missing_vsix?.length > 0 && (
        <div className="mb-2">
          <p className="text-xs font-semibold text-amber-700 mb-1">Wymaga .vsix (niedostępne w Open VSX):</p>
          {t.missing_vsix.map(e => <p key={e} className="text-xs text-amber-600 font-mono pl-2">• {e}</p>)}
        </div>
      )}
      {t.conflicting?.length > 0 && (
        <div className="mb-2">
          <p className="text-xs font-semibold text-red-700 mb-1">Konfliktowe rozszerzenia:</p>
          {t.conflicting.map(e => <p key={e} className="text-xs text-red-600 font-mono pl-2">• {e}</p>)}
        </div>
      )}
      {ok && t.missing_vsix?.length === 0 && <p className="text-xs text-emerald-700">Wszystkie rozszerzenia zainstalowane ✓</p>}
      {ok && t.missing_vsix?.length > 0 && <p className="text-xs text-emerald-700">Rozszerzenia Open VSX OK ✓</p>}
      {t.details?.error && <p className="text-xs text-red-600 mt-2">{t.details.error}</p>}
    </Card>
  );
}

function DiagCopilot({ t }) {
  if (!t) return null;
  if (t.details?.skipped) return null;
  return (
    <Card title="GitHub Copilot — konflikty" badge={_diagBadge(!t.has_conflict)}>
      {t.has_conflict ? (
        <div>
          {t.conflicting_extensions?.map(e => (
            <p key={e} className="text-xs text-red-600 font-mono mb-1">• {e}</p>
          ))}
          <p className="text-xs text-red-700 mt-2 leading-relaxed">{t.recommendation}</p>
        </div>
      ) : (
        <p className="text-xs text-emerald-700">{t.recommendation}</p>
      )}
    </Card>
  );
}
