// Onboarding Step 3 — Choose AI engine
// 800x600 centered window. 3 horizontal selectable cards (radio).

const IconLaptop = ({ size = 24 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
       stroke="currentColor" strokeWidth="1.75" strokeLinecap="round"
       strokeLinejoin="round">
    <rect x="3" y="4" width="18" height="12" rx="2" ry="2" />
    <line x1="2" y1="20" x2="22" y2="20" />
  </svg>
);
const IconCloud = ({ size = 24 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
       stroke="currentColor" strokeWidth="1.75" strokeLinecap="round"
       strokeLinejoin="round">
    <path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z" />
  </svg>
);
const IconKey = ({ size = 24 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
       stroke="currentColor" strokeWidth="1.75" strokeLinecap="round"
       strokeLinejoin="round">
    <path d="M21 2l-9.6 9.6" />
    <circle cx="7.5" cy="15.5" r="5.5" />
    <path d="M15.5 7.5l3 3" />
    <path d="M11.5 11.5l2 2" />
  </svg>
);
const IconCheck3 = ({ size = 12 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
       stroke="currentColor" strokeWidth="3" strokeLinecap="round"
       strokeLinejoin="round">
    <polyline points="20 6 9 17 4 12" />
  </svg>
);
const IconArrL2 = ({ size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
       stroke="currentColor" strokeWidth="2" strokeLinecap="round"
       strokeLinejoin="round">
    <line x1="19" y1="12" x2="5" y2="12" />
    <polyline points="12 19 5 12 12 5" />
  </svg>
);
const IconArrR2 = ({ size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
       stroke="currentColor" strokeWidth="2" strokeLinecap="round"
       strokeLinejoin="round">
    <line x1="5" y1="12" x2="19" y2="12" />
    <polyline points="12 5 19 12 12 19" />
  </svg>
);

const ENGINES = [
  {
    id: "local",
    Icon: IconLaptop,
    title: "IA Local",
    badge: { label: "Privacidad máxima", kind: "info" },
    description: "La IA se ejecuta en tu PC. Nada sale de tu ordenador.",
    sub: "Requiere Ollama instalado",
    detection: { kind: "success", label: "Ollama detectado" },
  },
  {
    id: "cloud",
    Icon: IconCloud,
    title: "IA Cloud",
    badge: { label: "Recomendado", kind: "primary" },
    description: "Usa Claude o GPT desde la nube. Más potente y rápido.",
    sub: "Incluido en tu plan de suscripción",
  },
  {
    id: "byok",
    Icon: IconKey,
    title: "Tu propia API key",
    badge: { label: "BYOK", kind: "neutral" },
    description: "Conecta tu cuenta de Anthropic, OpenAI u otro proveedor.",
    sub: "Para usuarios técnicos",
  },
];

const EngineCard = ({ engine, selected, onSelect }) => {
  const { Icon: Ic, badge, detection } = engine;
  return (
    <button
      className={`engine-card ${selected ? "is-selected" : ""}`}
      onClick={() => onSelect(engine.id)}
      type="button"
    >
      <div className="engine-radio">
        {selected && <span className="engine-radio-dot" />}
      </div>

      <div className="engine-icon">
        <Ic size={24} />
      </div>

      <div className="engine-title-row">
        <span className="engine-title">{engine.title}</span>
        <span className={`engine-badge bdg-${badge.kind}`}>{badge.label}</span>
      </div>

      <p className="engine-desc">{engine.description}</p>

      <div className="engine-foot">
        <span className="engine-sub">{engine.sub}</span>
        {detection && (
          <span className={`engine-detect detect-${detection.kind}`}>
            <IconCheck3 size={11} />
            {detection.label}
          </span>
        )}
      </div>
    </button>
  );
};

const OnboardingEngine = () => {
  const [selected, setSelected] = React.useState("cloud");

  return (
    <div className="ob-stage">
      <div className="ob-window ob3-window" data-screen-label="04 Onboarding · Motor IA">
        <div className="ob-grain" aria-hidden="true" />

        <div className="ob3-content">
          <div className="ob2-header">
            <h1 className="ob2-title">¿Cómo quieres usar la IA?</h1>
            <p className="ob2-subtitle">Puedes cambiarlo en cualquier momento desde Configuración.</p>
          </div>

          <div className="engine-grid">
            {ENGINES.map((e) => (
              <EngineCard
                key={e.id}
                engine={e}
                selected={selected === e.id}
                onSelect={setSelected}
              />
            ))}
          </div>
        </div>

        <div className="ob2-footer">
          <button className="btn-ghost">
            <IconArrL2 size={14} />
            <span>Atrás</span>
          </button>

          <div className="ob-step ob2-step-inline">
            <span className="ob-step-dots">
              <span className="ob-dot" />
              <span className="ob-dot" />
              <span className="ob-dot active" />
            </span>
            <span className="ob-step-text">3 de 3</span>
          </div>

          <button className="btn-primary">
            <span>Empezar a usar la app</span>
            <IconArrR2 size={14} />
          </button>
        </div>
      </div>
    </div>
  );
};

window.OnboardingEngine = OnboardingEngine;