// New Hub workflow — the empty state of a freshly created hub (see NEW-HUB.md).
// One loop: Start a Hub → Upload your content → Work with Claude on a Playbook → Go.
// Stage 1 builds the `template` picker; upload/review/playbook are stubs the later
// stages fill. Rendered by app_evergreen when the active hub is in onboarding.
//
// Proxa-branded surface (the platform doing the creating); the built hub carries the
// Cascade Ridge org identity.

// Templates, files and data products now come from the domain pack (domains.jsx)
// so the same flow serves a company or a lab. NH_GROUPS is the company set,
// kept as the default for callers that don't pass a domain.
const NH_GROUPS_FALLBACK = [
  { label: 'Org templates', items: [
    { id: 'finance', name: 'Finance', live: true,
      desc: 'Statements, working capital, budget vs. actual, capacity and forecast — from your financial model.',
      icon: '<rect x="3" y="3" width="18" height="18" rx="2"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="9" y1="21" x2="9" y2="9"/>' },
    { id: 'contracts', name: 'Contracts', live: false,
      desc: 'Customer agreements, renewals, obligations and pricing — from your MSAs and SOWs.',
      icon: '<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="8" y1="13" x2="16" y2="13"/><line x1="8" y1="17" x2="16" y2="17"/>' },
    { id: 'people', name: 'People', live: false,
      desc: 'Headcount, org, compensation and safety — from your roster and payroll exports.',
      icon: '<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>' },
    { id: 'commercial', name: 'Commercial', live: false,
      desc: 'A 360 per customer — contracts, pipeline, volume, revenue and margin, merged.',
      icon: '<circle cx="12" cy="12" r="10"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/><line x1="2" y1="12" x2="22" y2="12"/>' },
    { id: 'sales', name: 'Sales', live: false,
      desc: 'Pipeline, bookings, win-rate and forecast across the commercial organization.',
      icon: '<polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/>' },
    { id: 'marketing', name: 'Marketing', live: false,
      desc: 'Campaigns, spend, funnel and attribution across channels.',
      icon: '<path d="M3 11l18-5v12L3 14v-3z"/><path d="M11.6 16.8a3 3 0 1 1-5.8-1.6"/>' },
  ] },
  { label: 'Project templates', items: [
    { id: 'diligence', name: 'Diligence', live: true,
      desc: 'Upload a DDQ — Claude turns every request into a tracked data product, answered from the model.',
      icon: '<path d="M9 2h6a1 1 0 0 1 1 1v1h2a2 2 0 0 1 2 2v13a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1z"/><path d="M9 4h6"/><path d="M8.5 12l2 2 4-4"/>' },
    { id: 'audit', name: 'Audit', live: false,
      desc: 'A PBC list, encoded — requests, evidence and status against your model.',
      icon: '<circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>' },
  ] },
];

// Resolve a domain key to its pack, falling back to the company set above if
// domains.jsx hasn't loaded (script order) or the key is unknown.
function nhPack(domain) {
  const pack = window.proxaDomain ? window.proxaDomain(domain) : null;
  return pack || { groups: NH_GROUPS_FALLBACK, orgName: 'Cascade Ridge' };
}

function NHTemplateCard({ t, onPick, onPropose }) {
  // Live cards open the hub; non-live cards are inert unless onPropose is given
  // (then a click asks the assistant to build that hub).
  const clickable = t.live || !!onPropose;
  return (
    <button
      type="button"
      className={`nh-card ${t.live ? 'is-live' : 'is-soon'}${(!t.live && onPropose) ? ' is-proposable' : ''}`}
      disabled={!clickable}
      onClick={() => { if (t.live) onPick(t.id); else if (onPropose) onPropose(t); }}>
      <span className="nh-card-ic">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7"
             strokeLinecap="round" strokeLinejoin="round"
             dangerouslySetInnerHTML={{ __html: t.icon }} />
      </span>
      <span className="nh-card-name">{t.name}</span>
      <span className="nh-card-desc">{t.desc}</span>
      {t.live
        ? <span className="nh-card-badge live">Ready</span>
        : <span className={`nh-card-badge ${t.badgeClass || 'soon'}`}>{t.badgeLabel || 'Coming soon'}</span>}
    </button>
  );
}

function NHTemplatePicker({ onPick, compact, domain }) {
  return (
    <div className="nh-wrap">
      {!compact && (
      <div className="nh-hero">
        <div className="nh-eyebrow">
          <img src="assets/proxa-logo-icon.svg" alt="" className="nh-proxa" />
          <span>New hub · Proxa</span>
        </div>
        <h1 className="nh-title">What should we build?</h1>
        <p className="nh-sub">
          Pick a template, or tell Claude what you would like to model. Start with what you
          have — a website, spreadsheet, report or docs — and it proposes the data structure
          so we can iterate.
        </p>
      </div>
      )}
      {nhPack(domain).groups.map((g) => (
        <div key={g.label} className="nh-group">
          <div className="nh-group-label">{g.label}</div>
          <div className="nh-grid">
            {g.items.map((t) => <NHTemplateCard key={t.id} t={t} onPick={onPick} />)}
          </div>
        </div>
      ))}
    </div>
  );
}

// ── The "What should we build?" create-from-scratch entry (the + button) ─────
// Prompt-first page: describe-box + Knowledge Base/Template chips + template
// grid + the Template→Hub→Context→Products→Report stepper. Picking a live
// template routes into the hub, landing on Model → Context (see pickTemplate).
function NHBuildStepper({ active }) {
  const steps = ['Template', 'Hub', 'Context', 'Products', 'Report'];
  return (
    <div className="nhb-stepper">
      {steps.map((l, i) => (
        <span key={l} className={`nhb-step ${i === active ? 'is-active' : ''}`}>
          <span className="nhb-step-n">{i + 1}</span>{l}
        </span>
      ))}
    </div>
  );
}

function NHCreateTemplateCard({ onPick }) {
  return (
    <button type="button" className="nh-card nhb-create" onClick={() => onPick && onPick('__create__')}>
      <span className="nh-card-ic">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
      </span>
      <span className="nh-card-name">Create New Template</span>
      <span className="nh-card-desc">Describe any hub — Claude writes its general context and it becomes a template you can iterate on.</span>
    </button>
  );
}

function NewHubBuild({ orgName, onPick, domain }) {
  const pack = nhPack(domain);
  const firstLive = pack.groups.flatMap((g) => g.items).find((t) => t.live);
  return (
    <main className="main nhb-main" data-screen-label="New Hub">
      <div className="nhb-wrap">
        <h1 className="nhb-title">What should we build?</h1>

        <div className="nhb-box">
          <textarea className="nhb-input" rows={2} placeholder="What would you like to model?" />
          <div className="nhb-box-row">
            <button type="button" className="nhb-chip nhb-chip--icon" aria-label="Add">
              <svg viewBox="0 0 20 20" width="15" height="15" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"><line x1="10" y1="5" x2="10" y2="15"/><line x1="5" y1="10" x2="15" y2="10"/></svg>
            </button>
            <button type="button" className="nhb-chip">
              <svg viewBox="0 0 20 20" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M10 2l1.8 4.2L16 8l-4.2 1.8L10 14l-1.8-4.2L4 8l4.2-1.8z"/></svg>
              Knowledge Base <span className="nhb-chip-dim">· {orgName || pack.orgName}</span>
            </button>
            <button type="button" className="nhb-chip">
              <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="3" y1="9" x2="21" y2="9"/></svg>
              Template <span className="nhb-chip-dim">· None</span>
            </button>
            <button type="button" className="nhb-send" aria-label="Send">
              <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
            </button>
          </div>
        </div>

        <div className="nhb-tpl-label">Use a template</div>
        {pack.groups.map((g) => (
          <div key={g.label} className="nh-group">
            <div className="nh-group-label">{g.label}</div>
            <div className="nh-grid">
              {g.items.map((t) => <NHTemplateCard key={t.id} t={t} onPick={onPick} />)}
              {g.label === 'Project templates' && <NHCreateTemplateCard onPick={onPick} />}
            </div>
          </div>
        ))}
        <p className="nhb-hint">Click <strong>{firstLive ? firstLive.name : 'Finance'}</strong> to continue</p>
      </div>
      <NHBuildStepper active={0} />
    </main>
  );
}
window.NewHubBuild = NewHubBuild;

// ── Step 2: Upload ─────────────────────────────────────────────────────────
// Scripted reveal of the real Cascade Ridge files (see NEW-HUB.md honesty note):
// clicking / dropping streams them in with a per-file spinner, then settles.
const NH_FILE_IC = {
  xlsx: '<rect x="3" y="3" width="18" height="18" rx="2"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="3" y1="15" x2="21" y2="15"/><line x1="12" y1="3" x2="12" y2="21"/>',
  csv: '<rect x="3" y="3" width="18" height="18" rx="2"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="3" y1="15" x2="21" y2="15"/><line x1="12" y1="3" x2="12" y2="21"/>',
  json: '<path d="M8 3H7a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2 2 2 0 0 1 2 2v5a2 2 0 0 0 2 2h1"/><path d="M16 3h1a2 2 0 0 1 2 2v5a2 2 0 0 0 2 2 2 2 0 0 0-2 2v5a2 2 0 0 1-2 2h-1"/>',
  txt: '<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="8" y1="13" x2="16" y2="13"/><line x1="8" y1="17" x2="16" y2="17"/>',
  zip: '<path d="M21 8v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h6l2 3h6a2 2 0 0 1 2 2z"/><line x1="12" y1="11" x2="12" y2="13"/><line x1="12" y1="15" x2="12" y2="17"/>',
};
function nhSize(b) {
  return b >= 1e6 ? (b / 1e6).toFixed(1) + ' MB' : Math.round(b / 1e3) + ' KB';
}
const NH_SPINNER = '<circle cx="12" cy="12" r="9" stroke-opacity="0.25"/><path d="M21 12a9 9 0 0 0-9-9"/>';
const NH_CHECK = '<circle cx="12" cy="12" r="10" stroke-opacity="0.3"/><polyline points="8.5 12 11 14.5 15.5 9.5"/>';

// Upload zone — dropzone → scripted file reveal → "Review". No hero of its own;
// it embeds inside the Finance hub's Dashboard empty state.
function NHUploadZone({ onAdvance, domain }) {
  const pack = nhPack(domain);
  const NH_FILES = pack.files || [];
  const [started, setStarted] = React.useState(false);
  const [doneCount, setDoneCount] = React.useState(0);
  const timers = React.useRef([]);

  const begin = () => {
    if (started) return;
    setStarted(true);
    NH_FILES.forEach((_, i) => {
      const t = setTimeout(() => setDoneCount((c) => c + 1), 600 + i * 550);
      timers.current.push(t);
    });
  };
  React.useEffect(() => () => timers.current.forEach(clearTimeout), []);
  const allDone = started && doneCount >= NH_FILES.length;

  return (
    <React.Fragment>
      {!started &&
        <div
          className="nh-drop"
          role="button"
          tabIndex={0}
          onClick={begin}
          onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') begin(); }}
          onDragOver={(e) => { e.preventDefault(); e.currentTarget.classList.add('over'); }}
          onDragLeave={(e) => e.currentTarget.classList.remove('over')}
          onDrop={(e) => { e.preventDefault(); begin(); }}>
          <span className="nh-drop-ic">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"
                 strokeLinecap="round" strokeLinejoin="round">
              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
              <polyline points="17 8 12 3 7 8" /><line x1="12" y1="3" x2="12" y2="15" />
            </svg>
          </span>
          <div className="nh-drop-title">Drop files here, or click to upload</div>
          <div className="nh-drop-hint">{pack.uploadHint || 'Workbooks, models, data exports'}</div>
        </div>}

      {started &&
        <div className="nh-files">
          {NH_FILES.map((f, i) => {
            const done = i < doneCount;
            return (
              <div className={`nh-file ${done ? 'done' : 'loading'}`} key={f.name}>
                <span className="nh-file-ic">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7"
                       strokeLinecap="round" strokeLinejoin="round"
                       dangerouslySetInnerHTML={{ __html: NH_FILE_IC[f.type] }} />
                </span>
                <div className="nh-file-meta">
                  <div className="nh-file-name">{f.name}</div>
                  <div className="nh-file-sub">{nhSize(f.bytes)} · {done ? 'Ready' : 'Uploading…'}</div>
                </div>
                <span className={`nh-file-status ${done ? 'ok' : 'spin'}`}>
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9"
                       strokeLinecap="round" strokeLinejoin="round"
                       dangerouslySetInnerHTML={{ __html: done ? NH_CHECK : NH_SPINNER }} />
                </span>
              </div>
            );
          })}
        </div>}

      {started &&
        <div className="nh-actions">
          <span className="nh-actions-note">
            {allDone ? `${NH_FILES.length} files ready` : `Uploading ${doneCount}/${NH_FILES.length}…`}
          </span>
          <button className="nh-btn primary" disabled={!allDone} onClick={() => onAdvance('review')}>
            Review with Proxa
          </button>
        </div>}
    </React.Fragment>
  );
}

// Generic instructional empty state (dashed card) for the non-Dashboard tabs.
function NHEmptyState({ icon, title, body }) {
  return (
    <div className="nh-empty">
      <span className="nh-empty-ic">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"
             strokeLinecap="round" strokeLinejoin="round" dangerouslySetInnerHTML={{ __html: icon }} />
      </span>
      <div className="nh-empty-title">{title}</div>
      <p className="nh-empty-body">{body}</p>
    </div>
  );
}

// Dashboard empty state — describes what the hub will build, then hosts the upload,
// then the (stubbed) review/playbook steps as the hub fills in.
function NHDashboardOnboard({ flow, onAdvance, domain }) {
  const pack = nhPack(domain);
  const step = flow.step;
  if (step === 'review' || step === 'playbook') {
    return (
      <NHEmptyState
        icon={step === 'review'
          ? '<circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>'
          : '<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/>'}
        title={step === 'review' ? 'Reading your files…' : 'Hub Playbook'}
        body={step === 'review'
          ? 'Claude is reading your model and drafting the hub — the review sequence lands here next.'
          : 'Confirm the context and choose which data products to build — the playbook lands here next.'} />
    );
  }
  // 'upload' — the instructional Dashboard empty state
  return (
    <div className="nh-onboard">
      <div className="nh-onboard-lead">
        <h2 className="nh-onboard-h">{pack.onboard.title}</h2>
        <p className="nh-onboard-p">{pack.onboard.body}</p>
      </div>
      <div className="nh-dp-grid">
        {pack.products.map(([n, d]) =>
          <div className="nh-dp-ghost" key={n}>
            <span className="nh-dp-dot" aria-hidden="true"></span>
            <div><div className="nh-dp-name">{n}</div><div className="nh-dp-desc">{d}</div></div>
          </div>
        )}
      </div>
      <div className="nh-upload-block">
        <NHUploadZone onAdvance={onAdvance} domain={domain} />
      </div>
    </div>
  );
}

// Onboarding panel content, rendered inside the real hub shell (HubHome) per active tile.
function NHOnboardPanel({ tileTab, flow, onAdvance, domain }) {
  if (tileTab === 'dashboard') return <NHDashboardOnboard flow={flow} onAdvance={onAdvance} domain={domain} />;
  const states = {
    control: {
      icon: '<line x1="4" y1="21" x2="4" y2="14"/><line x1="4" y1="10" x2="4" y2="3"/><line x1="12" y1="21" x2="12" y2="12"/><line x1="12" y1="8" x2="12" y2="3"/><line x1="20" y1="21" x2="20" y2="16"/><line x1="20" y1="12" x2="20" y2="3"/><line x1="1" y1="14" x2="7" y2="14"/><line x1="9" y1="8" x2="15" y2="8"/><line x1="17" y1="16" x2="23" y2="16"/>',
      title: 'Control',
      body: 'Once your hub is built, a data-product agent maintains each product and surfaces source changes here for you to review and accept.',
    },
    library: {
      icon: '<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/>',
      title: 'Library',
      body: 'The files you upload and the reports Proxa generates will be organized here — with lineage back to every data product.',
    },
    calendar: {
      icon: '<rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/>',
      title: 'Calendar',
      body: 'Your month-end close checklist and key financial dates will live here once the hub is set up.',
    },
  };
  const s = states[tileTab] || states.control;
  return <NHEmptyState icon={s.icon} title={s.title} body={s.body} />;
}

// The template picker is the only full-screen step; once a template is chosen the
// new hub renders through the real hub shell (HubHome) in onboarding mode.
function NewHubFlow({ flow, onPickTemplate, domain }) {
  return (
    <main className="main nh-main" data-screen-label="New Hub">
      <NHTemplatePicker onPick={onPickTemplate} domain={domain} />
    </main>
  );
}

window.NewHubFlow = NewHubFlow;
window.NHOnboardPanel = NHOnboardPanel;
window.NHTemplatePicker = NHTemplatePicker;