/* eslint-disable */
// marketplace-guide.jsx
// The one-click Marketplace walkthrough: "Installing Mike from the Azure Marketplace".
// Loaded as its own script tag so app.jsx stays readable. The component is
// defined at top-level scope so app.jsx can reference it directly. Styling
// helpers mirror install-guide.jsx so the two guides read identically.

function MarketplaceGuide() {
  const { useState, useEffect } = React;

  /* ----- design helpers, mirrored from InstallGuide ----- */
  const H2 = ({ n, id, children }) => (
    <h2 id={id} style={{ fontFamily: 'var(--serif)', fontWeight: 400, fontSize: 34, margin: '64px 0 16px', letterSpacing: '-0.01em', scrollMarginTop: 80, color: 'var(--ink)', display: 'flex', alignItems: 'baseline', gap: 14 }}>
      <span style={{ fontFamily: 'var(--mono)', fontSize: 14, color: 'var(--ink-3)' }}>{n}.</span>
      <span>{children}</span>
    </h2>
  );
  const P = ({ children, narrow }) => (
    <p style={{ fontSize: 15, lineHeight: 1.7, color: 'var(--ink-2)', margin: '0 0 14px', maxWidth: narrow ? 720 : 'none' }}>{children}</p>
  );
  const Ul = ({ children }) => (
    <ul style={{ fontSize: 15, lineHeight: 1.7, color: 'var(--ink-2)', margin: '0 0 14px', paddingLeft: 22 }}>{children}</ul>
  );
  const Code = ({ children }) => (
    <code style={{ fontFamily: 'var(--mono)', fontSize: '0.92em', background: 'var(--paper-2)', border: '1px solid var(--line)', padding: '1px 6px', borderRadius: 4, color: 'var(--ink)', wordBreak: 'break-all' }}>{children}</code>
  );
  const H3 = ({ children }) => (
    <h3 style={{ fontFamily: 'var(--ui)', fontWeight: 500, fontSize: 17, margin: '32px 0 10px', color: 'var(--ink)' }}>{children}</h3>
  );
  const Pre = ({ children }) => (
    <pre style={{ fontFamily: 'var(--mono)', fontSize: 12.5, lineHeight: 1.55, background: 'var(--paper-2)', border: '1px solid var(--line)', padding: '12px 14px', borderRadius: 8, color: 'var(--ink)', margin: '0 0 14px', overflowX: 'auto', whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>{children}</pre>
  );
  const Note = ({ tone = 'azure', children }) => {
    const palette = {
      azure: { border: 'var(--azure)', bg: 'var(--azure-soft)' },
      warn:  { border: '#c7942b', bg: 'rgba(255,210,80,0.18)' },
      ink:   { border: 'var(--ink-3)', bg: 'var(--paper-2)' },
    }[tone] || { border: 'var(--azure)', bg: 'var(--azure-soft)' };
    return (
      <div style={{ padding: '14px 18px', borderLeft: `3px solid ${palette.border}`, background: palette.bg, fontSize: 14, lineHeight: 1.65, color: 'var(--ink)', margin: '18px 0', borderRadius: '0 6px 6px 0' }}>{children}</div>
    );
  };

  /* ----- lightbox: click any screenshot to view full size ----- */
  const [lightbox, setLightbox] = useState(null); // string filename or null
  useEffect(() => {
    if (!lightbox) return;
    const onKey = (e) => { if (e.key === 'Escape') setLightbox(null); };
    document.addEventListener('keydown', onKey);
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => {
      document.removeEventListener('keydown', onKey);
      document.body.style.overflow = prev;
    };
  }, [lightbox]);

  /* ----- Shot: one screenshot with click-to-zoom + caption ----- */
  const Shot = ({ src, alt }) => (
    <figure style={{ margin: '20px 0 26px', padding: 0 }}>
      <button
        onClick={() => setLightbox(src)}
        style={{
          appearance: 'none', border: '1px solid var(--line)', background: 'var(--paper)',
          padding: 6, borderRadius: 8, cursor: 'zoom-in', display: 'block', width: '100%',
          boxShadow: '0 1px 0 rgba(0,0,0,0.02)'
        }}
        aria-label={`Open screenshot at full size: ${alt}`}
      >
        <img
          src={`/marketplace-install-images/${src}`}
          alt={alt}
          loading="lazy"
          style={{ display: 'block', width: '100%', height: 'auto', borderRadius: 4 }}
        />
      </button>
      <figcaption style={{ fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--ink-3)', marginTop: 8, lineHeight: 1.5 }}>{alt}</figcaption>
    </figure>
  );

  /* A pair/row of screenshots shown side by side on wide screens. */
  const Row = ({ children }) => (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 12, margin: '20px 0 26px' }}>{children}</div>
  );

  const sections = [
    ['1', 'Find the listing in Azure Marketplace', 's1'],
    ['2', 'Choose your subscription, resource group and region', 's2'],
    ['3', 'Review and deploy', 's3'],
    ['4', 'Open the install URL', 's4'],
    ['5', 'Set your secrets and configuration', 's5'],
    ['6', 'Set up Microsoft (Entra ID) sign-in', 's6'],
    ['7', 'Assign the admin and user groups', 's7'],
    ['8', 'Sign in as a user', 's8'],
  ];

  const AZURE_CREATE_URL = 'https://portal.azure.com/#create/altien.altien_mike_ossfree';

  return (
    <section style={{ padding: '72px 32px 120px', background: 'var(--paper)' }}>
      <div style={{ maxWidth: 880, margin: '0 auto' }}>
        <div style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--ink-3)', marginBottom: 16 }}>Marketplace install guide</div>
        <h1 style={{ fontFamily: 'var(--serif)', fontWeight: 400, fontSize: 'clamp(40px, 5vw, 64px)', lineHeight: 1.05, letterSpacing: '-0.02em', margin: '0 0 12px', color: 'var(--ink)' }}>
          Installing Mike from the Azure Marketplace
        </h1>
        <div style={{ fontFamily: 'var(--mono)', fontSize: 12, color: 'var(--ink-3)', marginBottom: 32 }}>
          One‑click deploy into your own Azure subscription.
        </div>

        <P narrow>
          The easiest way to install Mike in your Azure tenancy is to click any <b>“Install from Marketplace”</b> button
          on <a href="https://mikeossazure.com" target="_blank" rel="noopener" style={{ borderBottom: '1px dotted currentColor' }}>mikeossazure.com</a>.
        </P>
        <P narrow>
          You’ll see a brief message confirming you’re being taken directly to your own Azure portal, and that you’ll
          likely be asked to sign in. The hand‑off is seamless enough that it can look as though our site is asking for
          your login — it isn’t. That sign‑in is Azure’s, and <b style={{ color: 'var(--ink)' }}>we never see or receive those credentials.</b>
        </P>
        <P narrow>
          This lands you on the Marketplace listing, ready to install into one of your subscriptions.
        </P>
        <Shot src="mp-01.png" alt="The Mike OSS Legal AI listing open in the Azure portal, ready to deploy into a subscription." />
        <Note tone="ink">
          If you don’t have permission to deploy resources in Azure, just send your Azure administrator a link to this
          guide — they can complete the install on your behalf.
        </Note>

        {/* ----- TOC ----- */}
        <div style={{ margin: '36px 0 8px', padding: '22px 24px', border: '1px solid var(--line)', borderRadius: 12, background: 'var(--paper-2)' }}>
          <div style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--ink-3)', marginBottom: 14 }}>On this page</div>
          <ol style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '8px 24px' }}>
            {sections.map(([n, label, id]) => (
              <li key={id} style={{ fontSize: 14, lineHeight: 1.5 }}>
                <a href={`#${id}`} style={{ color: 'var(--ink-2)', textDecoration: 'none', display: 'flex', gap: 10, alignItems: 'baseline' }}>
                  <span style={{ fontFamily: 'var(--mono)', fontSize: 12, color: 'var(--ink-3)' }}>{n}.</span>
                  <span style={{ borderBottom: '1px dotted var(--ink-3)' }}>{label}</span>
                </a>
              </li>
            ))}
          </ol>
        </div>

        {/* ===== 1 ===== */}
        <H2 n="1" id="s1">Find the listing in Azure Marketplace</H2>
        <P>In Azure Marketplace, find the <b>Mike OSS Legal AI</b> listing — searching <Code>altien</Code> should take you straight there.</P>
        <Shot src="mp-02.png" alt="Searching the Azure Marketplace for ‘altien’ surfaces the Mike OSS Legal AI listing." />

        {/* ===== 2 ===== */}
        <H2 n="2" id="s2">Choose your subscription, resource group and region</H2>
        <P>Select the Azure subscription you want to install into.</P>
        <Shot src="mp-03.png" alt="Selecting the target Azure subscription on the create blade." />
        <Note tone="azure">
          Wherever possible we’ve defaulted to an Azure architecture that <b>scales to zero</b> — meaning it won’t bill you
          while no one is using it. Our assumption is that, at this early stage, many organisations will want to dip a toe
          in without suffering eye‑watering cloud bills. As we progress, we’ll work with customers to provision more
          scalable architectures. That said, electrons and silicon aren’t free yet, so expect to pay a modest amount to
          own the architecture this install deploys.
        </Note>
        <P>Pick your subscription, create a new resource group, and choose your region.</P>
        <Row>
          <Shot src="mp-04.png" alt="Choosing the subscription and creating a new resource group." />
          <Shot src="mp-05.png" alt="Naming the new resource group." />
          <Shot src="mp-06.png" alt="Selecting the Azure region for the deployment." />
          <Shot src="mp-07.png" alt="The basics tab completed with subscription, resource group and region." />
        </Row>
        <Note tone="ink">
          <b>“Burstable”</b> means the database resource will scale to zero — effectively turning off — when it isn’t being used.
        </Note>
        <Row>
          <Shot src="mp-08.png" alt="The Postgres tier set to a burstable, scale-to-zero option." />
          <Shot src="mp-09.png" alt="Reviewing the database configuration." />
          <Shot src="mp-10.png" alt="Remaining configuration defaults left in place." />
        </Row>

        {/* ===== 3 ===== */}
        <H2 n="3" id="s3">Review and deploy</H2>
        <P>
          Before you deploy you can review the full automation template that defines every resource. Azure builds the
          deployment from an ARM / Bicep template — you can view, download or copy it from the <b>“View automation template”</b> link.
        </P>
        <Shot src="mp-11.png" alt="The automation (ARM/Bicep) template behind the deployment, with Download, Copy and Deploy options." />
        <P>Work through the remaining tabs, then choose <b>Review + create</b>. Azure validates the configuration and begins deploying the resources.</P>
        <Row>
          <Shot src="mp-12.png" alt="Reviewing the deployment configuration." />
          <Shot src="mp-13.png" alt="Validation of the deployment parameters." />
          <Shot src="mp-14.png" alt="Starting the deployment." />
          <Shot src="mp-15.png" alt="Deployment in progress." />
        </Row>

        {/* ===== 4 ===== */}
        <H2 n="4" id="s4">Open the install URL</H2>
        <P>When deployment finishes you’ll see <b>“Your deployment is complete”</b>, with every resource marked OK.</P>
        <Shot src="mp-16.png" alt="The deployment overview showing every resource provisioned successfully." />
        <P>
          Open <b>Outputs</b> in the left‑hand menu. The <Code>installUrl</Code> is listed as a value — it looks like
          {' '}<Code>https://backend.&lt;your-id&gt;.uksouth.azurecontainerapps.io/install</Code>. Copy it and open it in a new browser tab.
        </P>
        <Shot src="mp-17.png" alt="The deployment Outputs panel, with the installUrl value highlighted." />
        <Note tone="ink">
          The first load can take a little while as the application starts up. This is expected — the app server scales to
          zero quite aggressively when idle. You can tune this, or keep it always‑on, if the initial wait frustrates your users.
        </Note>
        <Row>
          <Shot src="mp-18.png" alt="Opening the install URL in the browser." />
          <Shot src="mp-19.png" alt="The application starting up on first load." />
        </Row>

        {/* ===== 5 ===== */}
        <H2 n="5" id="s5">Set your secrets and configuration</H2>
        <P>Tick the box to accept responsibility, then continue. You’ll be shown a screen that lets administrators set secret and config values.</P>
        <Shot src="mp-20.png" alt="The bootstrap configuration screen for setting secrets and config values." />
        <P>Scroll down to the values highlighted in <b>yellow</b> — these are unset and need values.</P>
        <Shot src="mp-21.png" alt="Unset configuration values highlighted in yellow." />
        <P>Set at least one model‑provider key — <b>Anthropic or OpenAI</b> — <b>and</b> a <b>Google</b> key. As you paste each value, it’s captured for saving.</P>
        <Shot src="mp-22.png" alt="Pasting a model-provider API key into a config value." />
        <Note tone="azure">
          <b>Save to Key Vault.</b> Your secrets are written to your own Azure Key Vault, inside your subscription — they
          never leave your tenant.
        </Note>

        {/* ===== 6 ===== */}
        <H2 n="6" id="s6">Set up Microsoft (Entra ID) sign-in</H2>
        <P>
          Once the configuration has run you’re ready to set up Microsoft Entra ID sign‑in. After this you’ll set the
          admin group and the users group.
        </P>

        <H3>Before you begin</H3>
        <P>Make sure you have <Code>az</Code>, the Microsoft Azure command‑line tool, available. To check, run:</P>
        <Pre>az login</Pre>
        <P>If <Code>az</Code> isn’t recognised, install it:</P>
        <Pre>winget install -e --id Microsoft.AzureCLI</Pre>
        <P>Sign in to the <b>same subscription</b>, and as the same account, you used to install the application.</P>

        <H3>Run the Entra setup script</H3>
        <P>
          When <Code>az</Code> is in place, download the first script — <Code>create-entra-apps.ps1</Code> — offered on the
          first row of the Microsoft sign‑in panel. This is the recommended path: it sets up the Entra app registrations
          in one go. (The manual paste forms below it are for advanced operators with existing registrations.)
        </P>
        <Shot src="entra-01.png" alt="The Microsoft sign-in panel, with the Download create-entra-apps.ps1 button and the ready-made PowerShell command to run it." />
        <P>Save it somewhere, open a PowerShell console, and <Code>cd</Code> into that directory. Use the copy icon to grab the exact command line:</P>
        <Shot src="entra-02.png" alt="Copying the ready-made PowerShell command for create-entra-apps.ps1 with the copy icon." />
        <P>Run the script. It runs a few pre‑flight checks and wires up the Entra app registrations:</P>
        <Shot src="entra-03.png" alt="create-entra-apps.ps1 running in a PowerShell console, finishing with the Entra ID items ready to go green." />
        <P>Back on the install page, press <b>F5</b> to refresh — the Entra sign‑in items should now go green.</P>
        <Shot src="entra-04.png" alt="After refreshing, the Microsoft sign-in items show green; the callback-URLs item remains amber." />
        <Note tone="warn">
          The <b>“Sign‑in callback URLs registered”</b> indicator shows amber — that’s expected and fine. It’s normally
          just an Entra propagation delay after the script finishes; refresh again in a minute or two.
        </Note>

        <P>Go to the top of the page and log out of Bootstrap, then choose the Microsoft sign‑in option.</P>
        <Shot src="mp-24.png" alt="Logging out of the bootstrap session from the top of the page." />
        <Row>
          <Shot src="mp-25.png" alt="Choosing the Microsoft sign-in option." />
          <Shot src="mp-26.png" alt="The Microsoft sign-in prompt." />
          <Shot src="mp-27.png" alt="Completing Microsoft sign-in." />
        </Row>

        {/* ===== 7 ===== */}
        <H2 n="7" id="s7">Assign the admin and user groups</H2>
        <P>Now set the <b>admin group</b>. Pick a group, confirm the team members, then click <b>Use this group</b>.</P>
        <Row>
          <Shot src="mp-28.png" alt="Opening the admin group assignment." />
          <Shot src="mp-29.png" alt="Picking the admin group." />
        </Row>
        <P>Next, choose the <b>user group</b>.</P>
        <Shot src="mp-30.png" alt="Opening the user group assignment." />
        <Note tone="warn">
          You can leave the user group unset, but we very much advise against it.
        </Note>
        <Shot src="mp-31.png" alt="The user group assignment, unset." />
        <P>Pick the group — it will list some (or all, if the group is small) of its users. Click <b>Use this group</b>, then log out and back in to confirm.</P>
        <Row>
          <Shot src="mp-32.png" alt="Picking the user group and reviewing its members." />
          <Shot src="mp-33.png" alt="Confirming the users group." />
        </Row>

        {/* ===== 8 ===== */}
        <H2 n="8" id="s8">Sign in as a user</H2>
        <P>
          You’re now ready to try Mike as a user. Open the application URL — the same backend host as before, but
          <b> without</b> <Code>/install</Code> at the end: <Code>https://backend.&lt;your-id&gt;.uksouth.azurecontainerapps.io/</Code>
        </P>
        <Shot src="mp-34.png" alt="Opening the application URL without the /install path." />
        <P>If everything has gone well, Mike welcomes you by your full name.</P>
        <Shot src="mp-35.png" alt="Mike welcoming the signed-in user by their full name." />
        <P>And you can start testing the interface.</P>
        <Shot src="mp-36.png" alt="The Mike chat interface, ready to use." />

        {/* ----- closing CTA ----- */}
        <div style={{ marginTop: 56, padding: '28px 30px', border: '1px solid var(--line)', borderRadius: 14, background: 'var(--paper-2)', display: 'flex', flexWrap: 'wrap', gap: 18, alignItems: 'center', justifyContent: 'space-between' }}>
          <div>
            <div style={{ fontFamily: 'var(--serif)', fontSize: 22, color: 'var(--ink)', marginBottom: 4 }}>Ready to deploy?</div>
            <div style={{ fontSize: 14, color: 'var(--ink-3)' }}>Opens the Mike OSS listing in your own Azure portal.</div>
          </div>
          <a href={AZURE_CREATE_URL} target="_blank" rel="noopener noreferrer" style={{ background: 'var(--azure)', color: '#fff', borderRadius: 8, fontSize: 14, fontWeight: 500, padding: '13px 24px', textDecoration: 'none', whiteSpace: 'nowrap' }}>
            Install from Marketplace →
          </a>
        </div>
      </div>

      {/* ----- lightbox overlay ----- */}
      {lightbox && (
        <div
          onClick={() => setLightbox(null)}
          style={{ position: 'fixed', inset: 0, zIndex: 1100, background: 'rgba(0,0,0,0.82)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24, cursor: 'zoom-out' }}
        >
          <img src={`/marketplace-install-images/${lightbox}`} alt="" style={{ maxWidth: '100%', maxHeight: '100%', borderRadius: 6, boxShadow: '0 24px 64px rgba(0,0,0,0.5)' }} />
          <button
            onClick={() => setLightbox(null)}
            aria-label="Close"
            style={{ position: 'fixed', top: 18, right: 22, appearance: 'none', border: 'none', background: 'transparent', color: '#fff', fontSize: 30, lineHeight: 1, cursor: 'pointer' }}
          >✕</button>
        </div>
      )}
    </section>
  );
}