/* global React, useLang */
// Seamew dashboard mockup — redesigned, more polished version of the existing admin
// Used in the Hero (compact) and the showcase section (full)

const SeamewMockupSidebar = ({ active = "modules" }) => {
  const { t } = useLang();
  return (
    <aside className="mw-side">
      <div className="mw-brand">
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4">
          <path d="M3 14 L7 10 L11 13 L15 7 L21 11" />
          <path d="M11 13 L13 17 L9 18 Z" fill="currentColor" opacity=".25"/>
        </svg>
        <div className="mw-brand-text">
          <div className="mw-brand-name">Seamew</div>
          <div className="mw-brand-sub">{t("mw.brand.sub")}</div>
        </div>
      </div>

      <nav className="mw-nav">
        {[
          ["modules", t("mw.nav.modules"), "M3 12h18M3 6h18M3 18h18"],
          ["inbox", t("mw.nav.inbox"), "M3 7l9 6 9-6M3 7v10h18V7"],
          ["sms-test", t("mw.nav.smsTest"), "M21 11.5a8.4 8.4 0 0 1-8.5 8.5L3 21l1-3.5A8.4 8.4 0 1 1 21 11.5z"],
          ["devices", t("mw.nav.devices"), "M5 12h14M12 5l7 7-7 7"],
          ["accounts", t("mw.nav.accounts"), "M16 21v-2a4 4 0 0 0-8 0v2M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z"],
          ["settings", t("mw.nav.settings"), "M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1-1.5"],
        ].map(([k, label, d]) => (
          <a key={k} className={`mw-nav-item ${active === k ? "active" : ""}`}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
              <path d={d} />
            </svg>
            <span>{label}</span>
          </a>
        ))}
      </nav>

      <div className="mw-user">
        <div className="mw-avatar">A</div>
        <div className="mw-user-meta">
          <div className="mw-user-name">admin</div>
          <div className="mw-user-role">{t("mw.user.role")}</div>
        </div>
      </div>
    </aside>
  );
};

const SeamewMockupTopbar = () => {
  const { t } = useLang();
  return (
    <div className="mw-top">
      <div className="mw-crumb">
        <span className="mw-crumb-mute">{t("mw.crumb.dash")}</span>
        <span className="mw-crumb-sep">/</span>
        <span>{t("mw.crumb.modules")}</span>
      </div>
      <div className="mw-top-actions">
        <div className="mw-search">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
            <circle cx="11" cy="11" r="7" />
            <path d="m21 21-4.3-4.3" />
          </svg>
          <span>{t("mw.search")}</span>
          <span className="mw-kbd">⌘ K</span>
        </div>
        <button className="mw-icon-btn">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
            <path d="M18 8a6 6 0 1 0-12 0c0 7-3 9-3 9h18s-3-2-3-9" />
            <path d="M13.7 21a2 2 0 0 1-3.4 0" />
          </svg>
          <span className="mw-dot-red"></span>
        </button>
      </div>
    </div>
  );
};

const SeamewMockupGateway = () => {
  const { t } = useLang();
  return (
    <div className="mw-gw">
      <div className="mw-gw-head">
        <div className="mw-gw-id">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
            <rect x="3" y="4" width="18" height="6" rx="1.5" />
            <rect x="3" y="14" width="18" height="6" rx="1.5" />
            <path d="M7 7h.01M7 17h.01" />
          </svg>
          <span>Gateway · </span>
          <span className="mono">F3CC8</span>
          <span className="mw-status mw-status-ok">
            <span className="mw-pulse"></span>
            {t("mw.gw.status")}
          </span>
        </div>
        <div className="mw-gw-actions">
          <button className="mw-chip">{t("mw.gw.firmware")}</button>
        </div>
      </div>
      <div className="mw-gw-grid">
        <div className="mw-gw-stat">
          <div className="mw-gw-stat-lbl">{t("mw.gw.signal")}</div>
          <div className="mw-gw-stat-val">
            <SignalBars active={4} />
            <span>{t("mw.gw.signalVal")}</span>
          </div>
        </div>
        <div className="mw-gw-stat">
          <div className="mw-gw-stat-lbl">{t("mw.gw.paired")}</div>
          <div className="mw-gw-stat-val mono">4 / 4</div>
        </div>
        <div className="mw-gw-stat">
          <div className="mw-gw-stat-lbl">{t("mw.gw.todayMsgs")}</div>
          <div className="mw-gw-stat-val mono">128</div>
        </div>
        <div className="mw-gw-stat">
          <div className="mw-gw-stat-lbl">{t("mw.gw.lastSeen")}</div>
          <div className="mw-gw-stat-val mono">{t("mw.gw.lastSeenVal")}</div>
        </div>
      </div>
    </div>
  );
};

const SignalBars = ({ active = 4 }) => (
  <div className="mw-bars">
    {[1, 2, 3, 4, 5].map((i) => (
      <span key={i} className={`mw-bar ${i <= active ? "on" : ""}`} style={{ height: 4 + i * 2 }} />
    ))}
  </div>
);

const SeamewMockupTable = () => {
  const { t } = useLang();
  const rows = [
    { num: "0987-***-321", id: "62930", gw: "F3CC8", sig: 4, msgs: 38, time: t("mw.tbl.time1"), status: "ok" },
    { num: "0912-***-815", id: "61135", gw: "F3CC8", sig: 5, msgs: 24, time: t("mw.tbl.time2"), status: "ok" },
    { num: "0966-***-178", id: "81753", gw: "F3CC8", sig: 3, msgs: 56, time: t("mw.tbl.time3"), status: "ok" },
    { num: "0933-***-402", id: "97241", gw: "F3CC8", sig: 2, msgs: 10, time: t("mw.tbl.time4"), status: "warn" },
  ];

  return (
    <div className="mw-tbl">
      <div className="mw-tbl-head">
        <div className="mw-tbl-title">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
            <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7S2 12 2 12z" />
            <circle cx="12" cy="12" r="3" />
          </svg>
          {t("mw.tbl.title")} <span className="mw-tbl-count">(4)</span>
        </div>
        <div className="mw-tbl-tabs">
          <button className="mw-tab active">{t("mw.tbl.tabAll")}</button>
          <button className="mw-tab">{t("mw.tbl.tabOnline")}</button>
          <button className="mw-tab">{t("mw.tbl.tabOffline")}</button>
        </div>
      </div>
      <div className="mw-tbl-body">
        <div className="mw-tbl-row mw-tbl-row-head">
          <div>{t("mw.tbl.col.num")}</div>
          <div>{t("mw.tbl.col.id")}</div>
          <div>{t("mw.tbl.col.gw")}</div>
          <div>{t("mw.tbl.col.sig")}</div>
          <div>{t("mw.tbl.col.msgs")}</div>
          <div>{t("mw.tbl.col.time")}</div>
          <div></div>
        </div>
        {rows.map((r) => (
          <div key={r.id} className="mw-tbl-row">
            <div className="mw-tbl-num">
              <span className={`mw-dot ${r.status === "ok" ? "ok" : "warn"}`}></span>
              <span className="mono">{r.num}</span>
            </div>
            <div className="mono mw-mute">{r.id}</div>
            <div className="mono mw-mute">{r.gw}</div>
            <div><SignalBars active={r.sig} /></div>
            <div className="mono">{r.msgs}</div>
            <div className="mw-mute mono">{r.time}</div>
            <div className="mw-tbl-actions">
              <button className="mw-icon-btn-sm">
                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
                  <path d="m22 2-7 20-4-9-9-4z" />
                </svg>
              </button>
              <button className="mw-icon-btn-sm">
                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M3 3v18h18" />
                  <path d="m19 9-5 5-4-4-3 3" />
                </svg>
              </button>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

const SeamewMockupDesktop = ({ scale = 1 }) => {
  const { t } = useLang();
  return (
    <div className="mw-frame" style={{ transform: `scale(${scale})`, transformOrigin: "top left" }}>
      <div className="mw-app">
        <SeamewMockupSidebar />
        <div className="mw-main">
          <SeamewMockupTopbar />
          <div className="mw-content">
            <div className="mw-page-head">
              <div>
                <div className="mw-eyebrow">{t("mw.page.eyebrow")}</div>
                <h1 className="mw-h1">{t("mw.page.title")}</h1>
              </div>
              <div className="mw-page-actions">
                <button className="mw-btn-ghost">
                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M21 12a9 9 0 1 1-3-6.7L21 8" />
                    <path d="M21 3v5h-5" />
                  </svg>
                  {t("mw.page.refresh")}
                </button>
                <button className="mw-btn-primary">
                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
                    <path d="M12 5v14M5 12h14" />
                  </svg>
                  {t("mw.page.add")}
                </button>
              </div>
            </div>

            <SeamewMockupGateway />
            <SeamewMockupTable />
          </div>
        </div>
      </div>
    </div>
  );
};

// Phone mockup — shows the inbox view, ties in mobile companion concept
const SeamewMockupPhone = () => {
  const { t } = useLang();
  const items = [
    { from: t("mw.phone.from1"), num: "0987-***-321", msg: t("mw.phone.msg1"), time: t("mw.phone.time1"), unread: true, tag: "OTP" },
    { from: t("mw.phone.from2"), num: "0912-***-815", msg: t("mw.phone.msg2"), time: "12m", unread: true },
    { from: t("mw.phone.from3"), num: "0987-***-321", msg: t("mw.phone.msg3"), time: "1h" },
    { from: t("mw.phone.from4"), num: "0966-***-178", msg: t("mw.phone.msg4"), time: "2h" },
    { from: t("mw.phone.from5"), num: "0933-***-402", msg: t("mw.phone.msg5"), time: t("mw.phone.time5") },
  ];
  return (
    <div className="mw-phone">
      <div className="mw-phone-notch"></div>
      <div className="mw-phone-screen">
        <div className="mw-phone-status">
          <span>9:41</span>
          <span className="mw-phone-icons">
            <svg width="14" height="10" viewBox="0 0 14 10" fill="currentColor"><rect x="0" y="6" width="2" height="4" rx="0.5"/><rect x="3" y="4" width="2" height="6" rx="0.5"/><rect x="6" y="2" width="2" height="8" rx="0.5"/><rect x="9" y="0" width="2" height="10" rx="0.5"/></svg>
            <svg width="14" height="10" viewBox="0 0 14 10" fill="none" stroke="currentColor" strokeWidth="1"><rect x="0.5" y="2" width="11" height="6" rx="1"/><rect x="2" y="3.5" width="8" height="3" fill="currentColor"/><rect x="12" y="4" width="1.5" height="2" fill="currentColor"/></svg>
          </span>
        </div>
        <div className="mw-phone-head">
          <div>
            <div className="mw-phone-title">{t("mw.phone.title")}</div>
            <div className="mw-phone-sub">{t("mw.phone.sub")}</div>
          </div>
          <div className="mw-phone-avatar">S</div>
        </div>

        <div className="mw-phone-tabs">
          <span className="active">{t("mw.phone.tabAll")}</span>
          <span>{t("mw.phone.tabUnread")}</span>
          <span>{t("mw.phone.tabOTP")}</span>
        </div>

        <div className="mw-phone-list">
          {items.map((it, i) => (
            <div key={i} className={`mw-phone-msg ${it.unread ? "unread" : ""}`}>
              <div className="mw-phone-msg-from">
                <span>{it.from}</span>
                {it.tag && <span className="mw-phone-msg-tag">{it.tag}</span>}
                <span className="mw-phone-msg-time">{it.time}</span>
              </div>
              <div className="mw-phone-msg-num mono">{it.num}</div>
              <div className="mw-phone-msg-body">{it.msg}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

window.SeamewMockupDesktop = SeamewMockupDesktop;
window.SeamewMockupPhone = SeamewMockupPhone;