/* global React */
// Yomee — Radiografía icons + bottom nav.
// All icons are 20x20 stroke icons styled to match the existing app's
// hand-drawn-but-clean line style. Colors are passed in as `stroke`.

const RadioIcon = ({ name, stroke = "#1a6b3f", size = 20 }) => {
  const common = {
    width: size,
    height: size,
    viewBox: "0 0 24 24",
    fill: "none",
    stroke,
    strokeWidth: 1.8,
    strokeLinecap: "round",
    strokeLinejoin: "round",
    "aria-hidden": true,
  };
  switch (name) {
    case "plane":
      return (
        <svg {...common}>
          <path d="M2 13l8-1 4-8 2 0 -1 7 7 -1 0 2 -7 1 1 7 -2 0 -4-7 -7 1z" />
        </svg>
      );
    case "coffee":
      return (
        <svg {...common}>
          <path d="M5 9h11v6a4 4 0 0 1-4 4H9a4 4 0 0 1-4-4V9z" />
          <path d="M16 11h2a2 2 0 0 1 0 4h-2" />
          <path d="M8 5c0-1 1-1 1-2M11 5c0-1 1-1 1-2M14 5c0-1 1-1 1-2" />
        </svg>
      );
    case "split":
      return (
        <svg {...common}>
          <path d="M4 7h7M4 12h12M4 17h9" />
          <circle cx="18" cy="7" r="2" />
          <circle cx="18" cy="17" r="2" />
        </svg>
      );
    case "tag":
      return (
        <svg {...common}>
          <path d="M3 12V4h8l10 10-8 8L3 12z" />
          <circle cx="8" cy="9" r="1.4" />
        </svg>
      );
    case "alert":
      return (
        <svg {...common}>
          <path d="M12 3 2 20h20L12 3z" />
          <path d="M12 10v5M12 17.5v.5" />
        </svg>
      );
    case "subscriptions":
      return (
        <svg {...common}>
          <path d="M21 12a9 9 0 1 1-3-6.7" />
          <path d="M21 4v5h-5" />
        </svg>
      );
    case "calendar":
      return (
        <svg {...common}>
          <rect x="3" y="5" width="18" height="16" rx="2" />
          <path d="M8 3v4M16 3v4M3 10h18" />
          <circle cx="15" cy="15" r="1.2" fill={stroke} />
        </svg>
      );
    case "anchor":
      return (
        <svg {...common}>
          <circle cx="12" cy="6" r="2.5" />
          <path d="M12 8.5V21" />
          <path d="M5 14a7 7 0 0 0 14 0" />
          <path d="M9 11h6" />
        </svg>
      );
    case "eye":
      return (
        <svg {...common}>
          <path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z" />
          <circle cx="12" cy="12" r="2.5" />
        </svg>
      );
    case "eye-off":
      return (
        <svg {...common}>
          <path d="M3 3l18 18" />
          <path d="M10.6 6.2A11 11 0 0 1 12 6c6.5 0 10 7 10 7a14 14 0 0 1-3 3.5" />
          <path d="M6.2 7.4A14 14 0 0 0 2 12s3.5 7 10 7c1.6 0 3-.3 4.2-.8" />
          <path d="M9.5 10.5a3 3 0 0 0 4 4" />
        </svg>
      );
    case "chevron-right":
      return (
        <svg {...common}>
          <path d="M9 6l6 6-6 6" />
        </svg>
      );
    case "chevron-down":
      return (
        <svg {...common}>
          <path d="M6 9l6 6 6-6" />
        </svg>
      );
    case "warning-tri":
      return (
        <svg {...common}>
          <path d="M12 4 3 19h18L12 4z" />
          <path d="M12 11v3M12 16.5v.4" />
        </svg>
      );
    case "tab-radio":
      return (
        <svg {...common}>
          <circle cx="12" cy="12" r="9" />
          <circle cx="12" cy="12" r="5" />
          <circle cx="12" cy="12" r="1.6" fill={stroke} />
        </svg>
      );
    case "tab-help":
      return (
        <svg {...common}>
          <circle cx="12" cy="12" r="9" />
          <path d="M9.5 9a2.5 2.5 0 0 1 5 .2c0 1.5-2.5 1.8-2.5 3.3" />
          <circle cx="12" cy="16.2" r="0.8" fill={stroke} />
        </svg>
      );
    case "tab-profile":
      return (
        <svg {...common}>
          <circle cx="12" cy="9" r="3.5" />
          <path d="M5 20a7 7 0 0 1 14 0" />
        </svg>
      );
    case "arrow-up-pill":
      return (
        <svg width={size} height={size} viewBox="0 0 16 16" fill="none" stroke={stroke} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
          <path d="M8 13V3M4 7l4-4 4 4" />
        </svg>
      );
    default:
      return null;
  }
};

// ────────────────────────────────────────────────
// BottomNav — fixed bottom bar with 3 tabs.
// 64px tall, white surface, hairline top border.
// ────────────────────────────────────────────────
function BottomNav({ active = "radio", accent = "#1a6b3f" }) {
  const tabs = [
    { id: "radio",   label: "Radiografía", icon: "tab-radio"   },
    { id: "help",    label: "Ayuda",       icon: "tab-help"    },
    { id: "profile", label: "Perfil",      icon: "tab-profile" },
  ];
  return (
    <div
      style={{
        flexShrink: 0,
        background: "#fff",
        borderTop: "1px solid rgba(20,32,28,0.08)",
        paddingTop: 8,
        paddingBottom: 18,
        display: "grid",
        gridTemplateColumns: "1fr 1fr 1fr",
      }}
    >
      {tabs.map((t) => {
        const isActive = t.id === active;
        const color = isActive ? accent : "#9aa0a6";
        return (
          <button
            key={t.id}
            type="button"
            style={{
              background: "transparent",
              border: "none",
              padding: "6px 0 4px",
              display: "flex",
              flexDirection: "column",
              alignItems: "center",
              gap: 4,
              cursor: "pointer",
              color,
            }}
          >
            <RadioIcon name={t.icon} stroke={color} size={22} />
            <span
              style={{
                fontFamily: "var(--font-body)",
                fontSize: 11,
                fontWeight: isActive ? 700 : 500,
                letterSpacing: "0.01em",
              }}
            >
              {t.label}
            </span>
          </button>
        );
      })}
    </div>
  );
}

window.RadioIcon = RadioIcon;
window.RadioBottomNav = BottomNav;