/* Brand app-logo tiles for the API view (IDE switcher + token panel).
   Simplified, recognizable marks rendered as rounded tiles. */

function VSCodeLogo({ size = 28 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" style={{ display: "block" }}>
      <rect width="32" height="32" rx="7" fill="#fff" />
      <path d="M23.3 6.2 25.8 7.4a1 1 0 0 1 .6.9v15.4a1 1 0 0 1-.6.9l-2.5 1.2a1 1 0 0 1-1.1-.2l-9.5-8.7-4.3 3.3a.7.7 0 0 1-.9 0l-1.3-1.2a.7.7 0 0 1 0-1l3.7-3.4-3.7-3.4a.7.7 0 0 1 0-1l1.3-1.2a.7.7 0 0 1 .9 0l4.3 3.3 9.5-8.7a1 1 0 0 1 1.1-.2Z" fill="#0E7DCF" />
      <path d="M22.6 10.3 16.2 16l6.4 5.7V10.3Z" fill="#1F9CF0" />
    </svg>
  );
}

function CursorLogo({ size = 28 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" style={{ display: "block" }}>
      <rect width="32" height="32" rx="7" fill="#0C0C0E" />
      <path d="M16 6 25 11v10l-9 5-9-5V11l9-5Z" fill="none" stroke="#4D4D55" strokeWidth="1.3" />
      <path d="M16 6v20M7 11l9 5 9-5M16 16l9 5" stroke="#6E6E78" strokeWidth="1.3" />
      <path d="M16 16 7 11v10l9 5V16Z" fill="#27272E" />
    </svg>
  );
}

function ClaudeLogo({ size = 28 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" style={{ display: "block" }}>
      <rect width="32" height="32" rx="7" fill="#D97757" />
      <g stroke="#fff" strokeWidth="2.1" strokeLinecap="round">
        <path d="M16 8.5v15M9.5 11.5l13 9M22.5 11.5l-13 9M8 16h16" />
      </g>
    </svg>
  );
}

function DevinLogo({ size = 28 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" style={{ display: "block" }}>
      <rect width="32" height="32" rx="7" fill="#EDE8DD" />
      <g stroke="#1B1B1F" strokeWidth="1.6">
        <path d="M11 11 21 21M11 21 21 11" />
        <circle cx="11" cy="11" r="2.4" fill="#1B1B1F" />
        <circle cx="21" cy="11" r="2.4" fill="#1B1B1F" />
        <circle cx="11" cy="21" r="2.4" fill="#1B1B1F" />
        <circle cx="21" cy="21" r="2.4" fill="#1B1B1F" />
        <circle cx="16" cy="16" r="2.8" fill="#EDE8DD" />
      </g>
    </svg>
  );
}

function AntigravityLogo({ size = 28 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" style={{ display: "block" }}>
      <rect width="32" height="32" rx="7" fill="#fff" stroke="#E7E7EA" strokeWidth="1" />
      <defs>
        <linearGradient id="ag-grad" x1="8" y1="24" x2="24" y2="8" gradientUnits="userSpaceOnUse">
          <stop stopColor="#4285F4" />
          <stop offset="0.5" stopColor="#9B72F2" />
          <stop offset="1" stopColor="#EA4C89" />
        </linearGradient>
      </defs>
      <path d="M16 7 24 24h-3.2l-1.5-3.4h-6.6L11.2 24H8L16 7Zm0 5.2-2.1 5.1h4.2L16 12.2Z" fill="url(#ag-grad)" />
    </svg>
  );
}

const APP_LOGOS = {
  vscode: VSCodeLogo,
  cursor: CursorLogo,
  claude: ClaudeLogo,
  devin: DevinLogo,
  antigravity: AntigravityLogo,
};

function AppLogo({ name, size = 28 }) {
  const C = APP_LOGOS[name];
  return C ? <C size={size} /> : null;
}

window.AppLogo = AppLogo;
