// landing-platform.jsx — single full-width Wisbid platform preview
// Real components, real interactions. Mirrors the actual product screenshot.

(function () {
  // React hooks already destructured upstream in landing-mockups.jsx.
  const usePlatformT = () => {
    const i18n = (typeof window !== "undefined" && window.Wisbid && window.Wisbid.i18n) || null;
    const [, force] = useState(0);
    useEffect(() => {
      if (!i18n) return;
      return i18n.subscribe(() => force((v) => v + 1));
    }, [i18n]);
    return (k, fb) => i18n ? i18n.t(k, fb) : fb;
  };

  /* ---------- small svg helpers ---------- */
  const S = (props) => (
    <svg width={props.size || 18} height={props.size || 18} viewBox="0 0 24 24"
         fill="none" stroke="currentColor" strokeWidth={props.sw || 1.7}
         strokeLinecap="round" strokeLinejoin="round" {...props.svg}>
      {props.children}
    </svg>
  );

  const Ico = {
    Wlogo: (p) => <img src="assets/wisbid-icon.png" alt="" {...p} />,
    Dash:    (p) => <S {...p}><path d="M3 13h8V3H3zM13 21h8V11h-8zM3 21h8v-6H3zM13 9h8V3h-8z"/></S>,
    Vendor:  (p) => <S {...p}><path d="M4 21V8l8-5 8 5v13"/><path d="M9 21v-7h6v7"/></S>,
    Req:     (p) => <S {...p}><rect x="4" y="3" width="16" height="18" rx="2"/><path d="M8 8h8M8 12h8M8 16h5"/></S>,
    WO:      (p) => <S {...p}><path d="M14 7h6v6"/><path d="M4 11V5h6"/><path d="M4 19h6v-6"/><path d="M14 13v6h6"/></S>,
    Sched:   (p) => <S {...p}><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 9h18M8 3v4M16 3v4"/></S>,
    Asset:   (p) => <S {...p}><path d="M3 8l9-4 9 4v8l-9 4-9-4z"/><path d="M3 8l9 4 9-4M12 12v8"/></S>,
    Check:   (p) => <S {...p}><rect x="4" y="4" width="16" height="16" rx="2"/><path d="m8 12 3 3 5-6"/></S>,
    Chevron: (p) => <S {...p}><path d="m9 6 6 6-6 6"/></S>,
    ChevDown:(p) => <S {...p}><path d="m6 9 6 6 6-6"/></S>,
    Search:  (p) => <S {...p}><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></S>,
    Bell:    (p) => <S {...p}><path d="M6 18V11a6 6 0 1 1 12 0v7"/><path d="M4 18h16"/><path d="M10 21a2 2 0 0 0 4 0"/></S>,
    Out:     (p) => <S {...p}><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><path d="m16 17 5-5-5-5"/><path d="M21 12H9"/></S>,
    Plus:    (p) => <S {...p}><path d="M12 5v14M5 12h14"/></S>,
    Settings:(p) => <S {...p}><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.6 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></S>,
    Edit:    (p) => <S {...p}><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="m18.5 2.5 3 3L12 15l-4 1 1-4z"/></S>,
    Expand:  (p) => <S {...p}><path d="M4 4h6M4 4v6M20 20h-6M20 20v-6M20 4l-7 7M4 20l7-7"/></S>,
    Close:   (p) => <S {...p}><path d="M6 6l12 12M6 18 18 6"/></S>,
    Send:    (p) => <S {...p}><path d="m4 12 16-8-6 18-3-8z"/></S>,
    Arrow:   (p) => <S {...p}><path d="M5 12h14M13 6l6 6-6 6"/></S>,
    Gear:    (p) => <S {...p}><circle cx="12" cy="12" r="3"/><path d="M12 1v6M12 17v6M4 12H1M23 12h-6"/></S>,
  };

  /* ---------- the platform card ---------- */
  const PlatformPreview = () => {
    const t = usePlatformT();
    const intakeQueue = [
      { id: 'REQ-2026-225805', t: t('platform.queue.1.title', 'Water leak at unit #45-21 of QA Operations Tower — …'), site: t('platform.site', 'QA Operations Tower'), age: t('platform.age.1d', '1d ago') },
      { id: 'REQ-2026-28D280', t: t('platform.queue.2.title', 'Tower F lobby fire alarm panel showing trouble light'), site: t('platform.site', 'QA Operations Tower'), age: t('platform.age.1d', '1d ago') },
      { id: 'REQ-2026-FA7BA5', t: t('platform.queue.3.title', 'Tower D rooftop water tank overflow valve is stuck o…'), site: t('platform.site', 'QA Operations Tower'), age: t('platform.age.1d', '1d ago') },
      { id: 'REQ-2026-3EB4B2', t: t('platform.queue.4.title', 'Tower C generator alarm tripped during load test'), site: t('platform.site', 'QA Operations Tower'), age: t('platform.age.1d', '1d ago') },
      { id: 'REQ-2026-87D92B', t: t('platform.queue.5.title', 'Tower B basement chiller is leaking water and tripped…'), site: t('platform.site', 'QA Operations Tower'), age: t('platform.age.1d', '1d ago') },
      { id: 'REQ-2026-CB56CF', t: t('platform.queue.6.title', 'Tower A lobby elevator is stuck between floors, reside…'), site: t('platform.site', 'QA Operations Tower'), age: t('platform.age.1d', '1d ago') },
      { id: 'REQ-2026-67E986', t: t('platform.queue.7.title', 'Carpark gantry at Tower A is malfunctioning and cars …'), site: t('platform.site', 'QA Operations Tower'), age: t('platform.age.1d', '1d ago') },
      { id: 'REQ-2026-0CD684', t: t('platform.queue.8.title', 'QA deeplink and UI polish check'), site: t('platform.site', 'QA Operations Tower'), age: t('platform.age.1d', '1d ago') },
    ];
    const recentRequests = [
      { id: 'REQ-2026-225805', t: t('platform.recent.1.title', 'Water leak at unit #45-…') },
      { id: 'REQ-2026-28D280', t: t('platform.recent.2.title', 'Tower F lobby fire alarm…') },
      { id: 'REQ-2026-FA7BA5', t: t('platform.recent.3.title', 'Tower D rooftop water t…') },
      { id: 'REQ-2026-3EB4B2', t: t('platform.recent.4.title', 'Tower C generator alar…') },
      { id: 'REQ-2026-87D92B', t: t('platform.recent.5.title', 'Tower B basement chille…') },
    ];
    const recentActivity = [
      { type: t('platform.activity.1.type', 'New request received'), id: 'REQ-2026-225805', detail: t('platform.activity.1.detail', 'Water leak at unit #45-21 of QA Operations Tower — 2nd occurrence'), age: t('platform.age.1d', '1d ago') },
      { type: t('platform.activity.2.type', 'New request received'), id: 'REQ-2026-28D280', detail: t('platform.activity.2.detail', 'Tower F lobby fire alarm panel showing trouble light'), age: t('platform.age.1d', '1d ago') },
      { type: t('platform.activity.3.type', 'Vendor sign-off captured'), id: 'WO-04412', detail: t('platform.activity.3.detail', 'Quarterly fire alarm inspection · C. Tan · MCST 4881'), age: t('platform.age.2d', '2d ago') },
    ];
    const wisaiPrompts = [
      t('platform.prompt.1', 'Summarise this request'),
      t('platform.prompt.2', 'Check what is blocking this work order'),
      t('platform.prompt.3', 'Draft an update to the requestor'),
      t('platform.prompt.4', 'Find missing evidence'),
    ];

    const [selected, setSelected] = useState(intakeQueue[0].id);
    const [openHighlight, setOpenHighlight] = useState(false);
    const [composer, setComposer] = useState("");
    const [drawerMode, setDrawerMode] = useState("default"); // default | expanded | collapsed
    const [toast, setToast] = useState(null);

    const onNewRequest = () => {
      setToast(t("platform.toast.draft", "Draft started · REQ-2026-225806"));
      setTimeout(() => setToast(null), 2200);
    };

    const onOpenRequests = () => {
      setOpenHighlight(true);
      setTimeout(() => setOpenHighlight(false), 1400);
    };

    const onPromptClick = (p) => setComposer(p);

    const canSend = composer.trim().length > 0;

    return (
      <div className="lp-pp lp-pp--with-phone">
        <div className={`lp-pp-card lp-pp-card--drawer-${drawerMode}`}>
          {/* ============== Sidebar ============== */}
          <aside className="lp-pp-side">
            <div className="lp-pp-side-head">
              <div className="lp-pp-side-logo">
                <span className="mark"><Ico.Wlogo /></span>
                <span className="word">Wisbid</span>
              </div>
              <button className="lp-pp-side-collapse" aria-label={t("platform.aria.collapse", "Collapse")}>
                <Ico.Chevron size={16} svg={{ style: { transform: 'rotate(180deg)' } }} />
              </button>
            </div>

            <div className="lp-pp-side-group">
              <div className="lp-pp-side-label">{t("platform.workspace", "WORKSPACE")}</div>
              <a className="lp-pp-side-item is-active" href="#dashboard">
                <Ico.Dash size={18} /><span>{t("platform.dashboard", "Dashboard")}</span>
              </a>
              <a className="lp-pp-side-item" href="#vendors">
                <Ico.Vendor size={18} /><span>{t("platform.vendorManagement", "Vendor management")}</span>
                <Ico.Chevron size={14} svg={{ className: 'caret' }} />
              </a>
            </div>

            <div className="lp-pp-side-group">
              <div className="lp-pp-side-label">{t("platform.maintenanceSuite", "MAINTENANCE SUITE")}</div>
              {[
                [t("platform.nav.requests", "Requests"), Ico.Req],
                [t("platform.nav.workOrders", "Work orders"), Ico.WO],
                [t("platform.nav.scheduler", "Scheduler"), Ico.Sched],
                [t("platform.nav.assets", "Assets"), Ico.Asset],
                [t("platform.nav.checklists", "Checklists"), Ico.Check],
              ].map(([label, I]) => (
                <a key={label} className="lp-pp-side-item" href={`#${label.toLowerCase()}`}>
                  <I size={18} /><span>{label}</span>
                </a>
              ))}
            </div>

            <div className="lp-pp-side-foot">
              <div className="lp-pp-side-avatar">QT</div>
              <div className="lp-pp-side-who">
                <div className="lp-pp-side-name">{t("platform.user.name", "QA Tenant Admin")}</div>
                <div className="lp-pp-side-role">{t("platform.user.role", "Facilities manager")}</div>
                <div className="lp-pp-side-mail">qa.tenant.admin@wisbid.test</div>
              </div>
              <button className="lp-pp-side-gear" aria-label={t("aria.settings", "Settings")}>
                <Ico.Gear size={14} />
              </button>
            </div>
          </aside>

          {/* ============== Main dashboard ============== */}
          <main className="lp-pp-main">
            {/* Top bar */}
            <header className="lp-pp-top">
              <div className="lp-pp-top-label">{t("platform.maintenance", "MAINTENANCE")}</div>
              <div className="lp-pp-top-search">
                <Ico.Search size={16} />
                <input placeholder={t("platform.search", "Search")} />
              </div>
              <button className="lp-pp-top-bell" aria-label={t("platform.aria.notifications", "Notifications")}>
                <Ico.Bell size={18} />
                <span className="badge">26</span>
              </button>
              <button className="lp-pp-top-signout">
                <Ico.Out size={14} />{t("platform.signOut", "Sign out")}
              </button>
            </header>

            {/* Skyline intake hero */}
            <section className="lp-pp-intake">
              <div className="lp-pp-intake-sky" aria-hidden="true">
                <div className="sky-grad" />
                <div className="sky-city" />
              </div>
              <div className="lp-pp-intake-copy">
                <div className="lp-pp-intake-eyebrow">{t("platform.intake", "INTAKE")}</div>
                <h2>{t("platform.greetingEvening", "Good evening")}</h2>
                <div className="lp-pp-intake-meta">
                  <span>{t("platform.date", "Thursday, May 21")}</span>
                  <span className="dot">·</span>
                  <span>{t("platform.site", "QA Operations Tower")}</span>
                  <span className="lp-pp-pill-role">{t("platform.dispatcher", "DISPATCHER")}</span>
                </div>
              </div>
              <div className="lp-pp-intake-cta">
                <button className="lp-pp-btn lp-pp-btn--ghost" onClick={onNewRequest}>{t("platform.newRequest", "New request")}</button>
                <button className="lp-pp-btn lp-pp-btn--solid" onClick={onOpenRequests}>
                  <Ico.Plus size={14} /> {t("platform.openRequests", "Open requests")}
                </button>
              </div>
            </section>

            {/* Metrics row */}
            <section className="lp-pp-metrics">
              {[
                [t("platform.metric.awaitingTriage", "AWAITING TRIAGE"), '21', 'warn'],
                [t("platform.metric.openRequests", "OPEN REQUESTS"), '22', 'open'],
                [t("platform.metric.overdueWos", "OVERDUE WOS"), '0', 'mute'],
                [t("platform.metric.complianceExpiring", "COMPLIANCE EXPIRING"), '1', 'mute'],
              ].map(([k, v, tone]) => (
                <div key={k} className="lp-pp-metric">
                  <div className="k">{k}</div>
                  <div className={`v v--${tone}`}>{v}</div>
                </div>
              ))}
            </section>

            {/* Queue + recent grid */}
            <section className="lp-pp-grid">
              <div className={`lp-pp-panel ${openHighlight ? 'is-pulse' : ''}`}>
                <div className="lp-pp-panel-head">
                  <h3>{t("platform.openIntakeQueue", "Open intake queue")}</h3>
                  <a href="#open-requests" className="lp-pp-panel-link">{t("platform.openRequests", "Open requests")} <Ico.Arrow size={12} /></a>
                </div>
                <div className="lp-pp-queue">
                  {intakeQueue.map((r) => (
                    <button
                      key={r.id}
                      type="button"
                      className={`lp-pp-queue-row ${selected === r.id ? 'is-selected' : ''}`}
                      onClick={() => setSelected(r.id)}
                    >
                      <span className="id">{r.id}</span>
                      <span className="body">
                        <span className="t">{r.t}</span>
                        <span className="s">{r.site} · {r.age}</span>
                      </span>
                      <span className="tag">{t("platform.newTag", "NEW")}</span>
                    </button>
                  ))}
                </div>
              </div>

              <div className="lp-pp-panel">
                <div className="lp-pp-panel-head">
                  <h3>{t("platform.recentRequests", "Recent requests")}</h3>
                  <a href="#inbox" className="lp-pp-panel-link">{t("platform.openInbox", "Open inbox")} <Ico.Arrow size={12} /></a>
                </div>
                <div className="lp-pp-recent">
                  {recentRequests.map((r) => (
                    <div key={r.id} className="lp-pp-recent-row">
                      <span className="id">{r.id}</span>
                      <span className="t">{r.t}</span>
                      <span className="tag">{t("platform.newTag", "NEW")}</span>
                    </div>
                  ))}
                </div>
              </div>
            </section>

            {/* Recent activity */}
            <section className="lp-pp-activity">
              <div className="lp-pp-panel-head">
                <h3>{t("platform.recentActivity", "Recent activity")}</h3>
              </div>
              {recentActivity.map((a, i) => (
                <div key={i} className="lp-pp-activity-row">
                  <div className="lp-pp-activity-dot" />
                  <div className="lp-pp-activity-body">
                    <div className="lp-pp-activity-head">
                      <span className="type">{a.type}</span>
                      <span className="id">{a.id}</span>
                    </div>
                    <div className="lp-pp-activity-detail">{a.detail}</div>
                  </div>
                  <div className="lp-pp-activity-age">{a.age}</div>
                </div>
              ))}
            </section>

            {toast && <div className="lp-pp-toast">{toast}</div>}
          </main>

          {/* ============== WisAI drawer ============== */}
          <aside className="lp-pp-wis">
            <div className="lp-pp-wis-head">
              <div className="lp-pp-wis-mark"><Ico.Wlogo /></div>
              <span className="lp-pp-wis-title">{t("wai.title", "WisAI Assistant")}</span>
              <div className="lp-pp-wis-actions">
                <button
                  className="lp-pp-iconbtn"
                  aria-label={t("aria.expand", "Expand")}
                  onClick={() => setDrawerMode(drawerMode === 'expanded' ? 'default' : 'expanded')}
                >
                  <Ico.Expand size={15} />
                </button>
                <button
                  className="lp-pp-iconbtn"
                  aria-label={t("aria.closeMenu", "Close")}
                  onClick={() => setDrawerMode(drawerMode === 'collapsed' ? 'default' : 'collapsed')}
                >
                  <Ico.Close size={15} />
                </button>
              </div>
            </div>

            <div className="lp-pp-wis-sub">
              <button className="lp-pp-wis-conv">
                {t("platform.newConversation", "New conversation")}
                <Ico.ChevDown size={13} />
              </button>
              <div className="lp-pp-wis-tools">
                <button className="lp-pp-iconbtn" aria-label={t("aria.settings", "Settings")}><Ico.Settings size={15} /></button>
                <button className="lp-pp-iconbtn" aria-label={t("aria.edit", "Edit")}><Ico.Edit size={15} /></button>
              </div>
            </div>

            <div className="lp-pp-wis-body">
              <div className="lp-pp-wis-greet">
                <div className="lp-pp-wis-mark lp-pp-wis-mark--lg"><Ico.Wlogo /></div>
                <h4>{t("platform.greetingMorning", "Good morning")}</h4>
                <p>{t("platform.helpPrompt", "How can I help with your operations today?")}</p>
              </div>
              <div className="lp-pp-wis-prompts">
                {wisaiPrompts.map((p) => (
                  <button key={p} className="lp-pp-wis-prompt" onClick={() => onPromptClick(p)}>
                    {p}
                  </button>
                ))}
              </div>
            </div>

            <div className="lp-pp-wis-input">
              <button className="lp-pp-iconbtn" aria-label={t("aria.attach", "Attach")}><Ico.Plus size={16} /></button>
              <input
                type="text"
                value={composer}
                placeholder={t("platform.askPlaceholder", "Ask, search, or explain…")}
                onChange={(e) => setComposer(e.target.value)}
              />
              <button
                className={`lp-pp-wis-send ${canSend ? 'is-active' : ''}`}
                aria-label={t("aria.send", "Send")}
                disabled={!canSend}
              >
                <Ico.Send size={14} />
              </button>
            </div>
          </aside>

          {/* Collapsed drawer rail */}
          {drawerMode === 'collapsed' && (
            <button
              className="lp-pp-wis-rail"
              onClick={() => setDrawerMode('default')}
              aria-label={t("platform.aria.openWisAI", "Open WisAI")}
            >
              <Ico.Wlogo />
              <span className="lp-pp-wis-rail-label">WisAI</span>
            </button>
          )}
        </div>
        <img
          className="lp-pp-phone-overlay"
          src="fm_app.webp"
          alt={t("platform.mobileAlt", "Wisbid mobile FM operations app")}
          loading="lazy"
        />
      </div>
    );
  };

  window.PlatformPreview = PlatformPreview;
})();