// Hub-level "Get started with a template" empty state — used for a hub whose
// Dashboard tab has no artifact yet (Sales, Operations today). Mirrors the
// New-Record templates picker (tpl-grid / tpl-card, same CSS) but surfaces a
// curated set of templates for the hub, plus two follow-on paths: generate a
// custom dashboard with the agent, or pick an existing artifact from the
// hub's Library.
//
// Deliberately references TemplateThumb / ProxaP / icons as bare identifiers
// (not destructured at module scope) so load order relative to templates.jsx
// and chat_panel.jsx doesn't matter — they only need to exist on window by
// the time this component actually renders.

const HUB_TEMPLATE_CATALOG = {
  Sales: [
    { key: 'pipeline',     title: 'Pipeline & bookings overview', thumb: 'kpi' },
    { key: 'winloss',      title: 'Win / loss review',            thumb: 'bars' },
    { key: 'territory',    title: 'Territory performance',        thumb: 'area' },
    { key: 'quota',        title: 'Quota attainment',             thumb: 'waterfall' },
    { key: 'renewals',     title: 'Renewals & expansion',         thumb: 'grid' },
    { key: 'leaderboard',  title: 'Rep leaderboard',              thumb: 'kpi' },
  ],
  Operations: [
    { key: 'opsoverview',  title: 'Operations performance overview', thumb: 'kpi' },
    { key: 'utilization',  title: 'Utilization & margin',            thumb: 'area' },
    { key: 'resourcing',   title: 'Resource allocation',             thumb: 'grid' },
    { key: 'riskreg',      title: 'Delivery risk register',          thumb: 'bars' },
    { key: 'cotracker',    title: 'Change order tracker',            thumb: 'waterfall' },
    { key: 'capacity',     title: 'Capacity planning',               thumb: 'kpi' },
  ],
};

const HUB_AGENT_PROMPT = {
  Sales: 'Build a Sales dashboard from this hub\u2019s knowledge base.',
  Operations: 'Build an Operations dashboard from this hub\u2019s knowledge base.',
};

function HubTemplatesEmpty({ hub, onOpenAgentChat, onPickLibrary }) {
  const templates = HUB_TEMPLATE_CATALOG[hub] || HUB_TEMPLATE_CATALOG.Sales;

  const handleTemplateClick = (tpl) => {
    if (onOpenAgentChat) onOpenAgentChat(`Build a ${tpl.title} dashboard for the ${hub} hub.`);
  };
  const handleAgent = () => {
    if (onOpenAgentChat) onOpenAgentChat(HUB_AGENT_PROMPT[hub] || HUB_AGENT_PROMPT.Sales);
  };

  return (
    <section className="rec-empty rec-empty--templates hub-tpl-empty" aria-label={`${hub} dashboard — get started with a template`}>
      <div className="rec-empty__inner rec-empty__inner--wide">
        <div className="rec-empty__getstart">Add a Dashboard</div>

        <div className="tpl-grid" role="list">
          {templates.map((tpl) => (
            <button
              key={tpl.key}
              type="button"
              role="listitem"
              className="tpl-card"
              onClick={() => handleTemplateClick(tpl)}>
              <span className="tpl-card__preview"><TemplateThumb variant={tpl.thumb} /></span>
              <span className="tpl-card__title">{tpl.title}</span>
            </button>
          ))}
        </div>

        <button type="button" className="tpl-explore" onClick={(e) => e.preventDefault()}>
          Explore more templates
        </button>

        <div className="tpl-or"><span>or</span></div>

        <div className="hub-tpl-empty__row">
          <button type="button" className="rec-empty__card hub-tpl-empty__card" onClick={handleAgent}>
            <span className="rec-empty__card-ico" aria-hidden="true"><ProxaP size={18} color="currentColor" /></span>
            <span className="rec-empty__card-body">
              <span className="rec-empty__card-title">Create custom with Agent</span>
              <span className="rec-empty__card-desc">Describe the dashboard you want, or drop in a website, spreadsheet, report or doc — the agent designs the artifacts for you to iterate on.</span>
            </span>
            <span className="rec-empty__card-arrow" aria-hidden="true"><IconArrowRt size={14} /></span>
          </button>

          <button type="button" className="rec-empty__card hub-tpl-empty__card" onClick={onPickLibrary}>
            <span className="rec-empty__card-ico" aria-hidden="true"><IconLibrary size={18} /></span>
            <span className="rec-empty__card-body">
              <span className="rec-empty__card-title">Pick from your library</span>
              <span className="rec-empty__card-desc">Choose a collection you already have and display it on this dashboard.</span>
            </span>
            <span className="rec-empty__card-arrow" aria-hidden="true"><IconArrowRt size={14} /></span>
          </button>
        </div>
      </div>
    </section>
  );
}

window.HubTemplatesEmpty = HubTemplatesEmpty;