// Recursive MLS — product mini-dashboards + tasteful placeholders for
// not-yet-built pages. Depends on Chrome.jsx globals (Icon, Pill, PRODUCTS, ADMIN).

// ---- per-product overview content ----
const DASH = {
  properties: {
    lead: "Everything on your listings, showings, offers and compliance — at a glance.",
    kpis: [
      { label: "Active listings", value: "4", sub: "2 pending", icon: "home" },
      { label: "Showings this week", value: "12", sub: "2 need a reply", icon: "calendar-clock", tone: "pending" },
      { label: "Open offers", value: "3", sub: "1 counter due", icon: "file-signature", tone: "pending" },
      { label: "Compliance", value: "98%", sub: "1 open issue", icon: "shield-check" },
    ],
    attention: [
      { icon: "calendar-clock", text: "2 showing requests awaiting your response", cta: "Showings", screen: "showings", tone: "pending" },
      { icon: "file-signature", text: "Counter due on 4821 Palm Bay Ct by 5:00pm", cta: "Offers", screen: "offers", tone: "drop" },
      { icon: "shield-check", text: "Missing flood-zone disclosure on 1 listing", cta: "Compliance", screen: "compliance", tone: "pending" },
    ],
  },
  marketing: {
    lead: "Comparative market analyses and the branded listing marketing kit.",
    kpis: [
      { label: "CMAs this month", value: "6", sub: "2 shared", icon: "line-chart" },
      { label: "Kits published", value: "9", sub: "4 live sites", icon: "palette" },
      { label: "Post engagements", value: "1.4k", sub: "+18% MoM", icon: "megaphone" },
      { label: "Leads from kits", value: "23", sub: "5 this week", icon: "user-plus", tone: "active" },
    ],
    attention: [
      { icon: "line-chart", text: "Draft CMA for the Alvarez listing is 80% complete", cta: "CMAs", screen: "cmas", tone: "pending" },
      { icon: "palette", text: "New marketing kit ready to publish for 88 Coral Way", cta: "Listing Marketing", screen: "listing_marketing", tone: "active" },
    ],
  },
  leads: {
    lead: "Your clients, follow-ups, tours and deal pipeline.",
    kpis: [
      { label: "Active clients", value: "38", sub: "6 hot leads", icon: "users", tone: "active" },
      { label: "New this week", value: "5", sub: "3 unassigned", icon: "user-plus", tone: "pending" },
      { label: "In pipeline", value: "$4.2M", sub: "11 deals", icon: "briefcase" },
      { label: "Follow-ups due", value: "7", sub: "2 overdue", icon: "list-checks", tone: "pending" },
    ],
    attention: [
      { icon: "users", text: "3 new leads haven't been contacted in 48 hours", cta: "Clients", screen: "clients", tone: "drop" },
      { icon: "briefcase", text: "2 deals stalled in \u201cnegotiation\u201d for 7+ days", cta: "Pipeline", screen: "pipeline", tone: "pending" },
    ],
  },
  learning: {
    lead: "Training, knowledge base and MLS support in one place.",
    kpis: [
      { label: "Courses done", value: "7", sub: "2 in progress", icon: "book-open" },
      { label: "CE credits", value: "12", sub: "of 18 required", icon: "graduation-cap", tone: "pending" },
      { label: "Open tickets", value: "2", sub: "1 awaiting you", icon: "life-buoy", tone: "pending" },
      { label: "New guides", value: "5", sub: "this month", icon: "sparkles" },
    ],
    attention: [
      { icon: "graduation-cap", text: "6 CE credits still required before renewal", cta: "Knowledge Base", screen: "knowledge", tone: "pending" },
      { icon: "life-buoy", text: "MLS support replied to your feed-access ticket", cta: "Help & Support", screen: "support", tone: "active" },
    ],
  },
  admin: {
    lead: "MLS-wide operations, governance and membership insights.",
    kpis: [
      { label: "Members", value: "104,200", sub: "+312 this month", icon: "users-round" },
      { label: "Open compliance", value: "12", sub: "3 escalated", icon: "shield-check", tone: "pending" },
      { label: "Moderation queue", value: "5", sub: "2 Fair Housing", icon: "message-square-warning", tone: "drop" },
      { label: "Support backlog", value: "3", sub: "avg 2.1h reply", icon: "life-buoy" },
    ],
    attention: [
      { icon: "message-square-warning", text: "5 messages flagged for review in moderation", cta: "Moderation", screen: "admin_moderation", tone: "drop" },
      { icon: "shield-check", text: "3 compliance cases escalated past SLA", cta: "Compliance", screen: "admin_compliance", tone: "pending" },
      { icon: "users-round", text: "18 members have licenses expiring in 30 days", cta: "Agents & Users", screen: "admin_users", tone: "pending" },
    ],
  },
};

function ProductDashboard({ productId, go }) {
  const p = productId === "admin" ? window.ADMIN : (window.PRODUCTS.find((x) => x.id === productId) || window.PRODUCTS[0]);
  const d = DASH[productId] || DASH.properties;
  const feats = [];
  p.groups.forEach((g) => g.items.forEach((it) => { if (it.screen) feats.push({ ...it, group: g.label }); }));

  return (
    <div style={{ padding: "26px 30px 40px", maxWidth: 1180, margin: "0 auto" }}>
      {/* hero */}
      <div style={{ display: "flex", alignItems: "flex-start", gap: 16, marginBottom: 22 }}>
        <span style={{ width: 46, height: 46, borderRadius: 12, background: "#1C1C1C", display: "flex", alignItems: "center", justifyContent: "center", flex: "none" }}>
          <Icon name={p.icon} size={23} color="#fff" />
        </span>
        <div style={{ flex: 1 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <h1 style={{ margin: 0, fontSize: 25, fontWeight: 600, letterSpacing: "-0.6px", color: "#1d241f" }}>{p.label}</h1>
            <Pill tone="neutral" style={{ fontSize: 10 }}>OVERVIEW</Pill>
          </div>
          <p style={{ margin: "5px 0 0", fontSize: 14, color: "#6b706a", maxWidth: 640, lineHeight: 1.5 }}>{d.lead}</p>
        </div>
      </div>

      {/* KPIs */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 14, marginBottom: 20 }}>
        {d.kpis.map((k, i) => (
          <div key={i} style={{ background: "#fff", borderRadius: 3, padding: "16px 17px", boxShadow: "inset 0 0 0 1px rgba(0,0,0,.06)" }}>
            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 12 }}>
              <span style={{ width: 34, height: 34, borderRadius: 9, background: "#eef4f1", display: "flex", alignItems: "center", justifyContent: "center" }}><Icon name={k.icon} size={17} color="#006747" /></span>
              {k.tone && <span style={{ width: 8, height: 8, borderRadius: "50%", background: k.tone === "drop" ? "#c0612f" : k.tone === "pending" ? "#e0a020" : "#1f8a5b" }} />}
            </div>
            <div style={{ fontSize: 26, fontWeight: 700, color: "#1d241f", letterSpacing: "-0.5px" }}>{k.value}</div>
            <div style={{ fontSize: 12.5, color: "#6b706a", marginTop: 2 }}>{k.label}</div>
            <div style={{ fontSize: 11.5, color: "#a8aca6", marginTop: 6 }}>{k.sub}</div>
          </div>
        ))}
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 20 }}>
        {/* needs attention */}
        <div style={{ background: "#fff", borderRadius: 3, boxShadow: "inset 0 0 0 1px rgba(0,0,0,.06)", overflow: "hidden" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 9, padding: "15px 18px", borderBottom: "1px solid #f0efe9" }}>
            <Icon name="triangle-alert" size={16} color="#c0612f" />
            <span style={{ fontSize: 14.5, fontWeight: 600, color: "#1d241f", flex: 1 }}>Needs attention</span>
            <span style={{ fontSize: 12, color: "#a8aca6" }}>{d.attention.length} items</span>
          </div>
          {d.attention.map((a, i) => (
            <div key={i} className="rc-row" onClick={() => go(a.screen)} style={{ display: "flex", alignItems: "center", gap: 13, padding: "13px 18px", borderBottom: i < d.attention.length - 1 ? "1px solid #f4f3ee" : "none", cursor: "pointer" }}>
              <span style={{ width: 34, height: 34, borderRadius: 9, flex: "none", display: "flex", alignItems: "center", justifyContent: "center", background: a.tone === "drop" ? "#faece3" : a.tone === "active" ? "#e8f4ee" : "#fbf2dc" }}>
                <Icon name={a.icon} size={16} color={a.tone === "drop" ? "#c0612f" : a.tone === "active" ? "#1f8a5b" : "#9a6a12"} />
              </span>
              <span style={{ flex: 1, fontSize: 13.5, color: "#1d241f", lineHeight: 1.4 }}>{a.text}</span>
              <span style={{ display: "inline-flex", alignItems: "center", gap: 5, fontSize: 12.5, fontWeight: 600, color: "#006747", whiteSpace: "nowrap" }}>{a.cta}<Icon name="arrow-right" size={14} color="#006747" /></span>
            </div>
          ))}
        </div>

        {/* jump into features */}
        <div style={{ background: "#fff", borderRadius: 3, boxShadow: "inset 0 0 0 1px rgba(0,0,0,.06)", overflow: "hidden" }}>
          <div style={{ padding: "15px 18px", borderBottom: "1px solid #f0efe9", fontSize: 14.5, fontWeight: 600, color: "#1d241f" }}>Jump into {p.label}</div>
          <div style={{ padding: 10 }}>
            {feats.map((f, i) => (
              <div key={i} className="rc-nav-item" onClick={() => go(f.screen)} style={{ display: "flex", alignItems: "center", gap: 12, padding: "10px 11px", borderRadius: 9, cursor: "pointer" }}>
                <span style={{ width: 32, height: 32, borderRadius: 8, background: "#f4f3ee", display: "flex", alignItems: "center", justifyContent: "center", flex: "none" }}><Icon name={f.icon} size={16} color="#6b706a" /></span>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 13.5, fontWeight: 500, color: "#1d241f" }}>{f.label}</div>
                  {f.group && <div style={{ fontSize: 11, color: "#a8aca6" }}>{f.group}</div>}
                </div>
                {f.badge && <span style={{ fontSize: 11, fontWeight: 600, color: "#006747", background: "#e8f1ec", borderRadius: 999, padding: "1px 7px" }}>{f.badge}</span>}
                <Icon name="chevron-right" size={15} color="#c4c2b8" />
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

// ---- tasteful placeholder for not-yet-built leaf pages ----
const STUBS = {
  saved: { title: "Saved & Alerts", icon: "heart", product: "Properties · Search",
    lead: "Saved searches and the alerts that keep your buyers in the loop.",
    bullets: ["Save any Find Homes search with one click", "Choose instant, daily or weekly alert cadence", "See which clients each saved search feeds"],
    preview: "saved-searches" },
  compliance: { title: "Compliance", icon: "shield-check", product: "Properties · Add-on",
    lead: "Your listings' compliance status — issues and one-click fixes, no fines.",
    bullets: ["Live rule checks the moment you edit a listing", "Plain-language fixes for every flagged issue", "History of resolved issues per listing"],
    preview: "checklist" },
  pipeline: { title: "Pipeline", icon: "briefcase", product: "Leads & Contacts",
    lead: "A kanban of every active deal, from first contact to closing.",
    bullets: ["Drag deals across stages as they progress", "Forecast commission by stage and month", "Auto-links to the client, offer and listing"],
    preview: "kanban" },
  design_studio: { title: "Design Studio", icon: "palette", product: "Marketing · Add-on",
    lead: "Auto-branded flyers, postcards, social posts and single-property sites.",
    bullets: ["Templates pre-filled from the listing record", "Your brokerage branding applied automatically", "Publish, schedule and track every asset"],
    preview: "gallery" },
  settings: { title: "Settings", icon: "settings", product: "Account",
    lead: "Manage your profile, notifications, branding and connected tools.",
    bullets: ["Profile, license and office details", "Notification and alert preferences", "Connected calendars, e-sign and data feeds"],
    preview: "list" },
};

function PreviewSkeleton({ kind }) {
  const bar = (w, h = 10) => <div style={{ width: w, height: h, borderRadius: 4, background: "#eceae2" }} />;
  if (kind === "kanban") {
    return (
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 12 }}>
        {["New", "Active", "Negotiation", "Closing"].map((c, i) => (
          <div key={i} style={{ background: "#faf9f5", border: "1px solid #eceae2", borderRadius: 10, padding: 10 }}>
            <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: ".5px", textTransform: "uppercase", color: "#a8aca6", marginBottom: 10 }}>{c}</div>
            {[0, 1].map((j) => <div key={j} style={{ background: "#fff", border: "1px solid #eceae2", borderRadius: 8, padding: 10, marginBottom: 8, display: "flex", flexDirection: "column", gap: 7 }}>{bar("70%")}{bar("45%", 8)}</div>)}
          </div>
        ))}
      </div>
    );
  }
  if (kind === "gallery") {
    return (
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 12 }}>
        {[0, 1, 2, 3, 4, 5].map((i) => (
          <div key={i} style={{ border: "1px solid #eceae2", borderRadius: 10, overflow: "hidden" }}>
            <div style={{ height: 74, background: "linear-gradient(135deg,#eef4f1,#e7e5df)" }} />
            <div style={{ padding: 10, display: "flex", flexDirection: "column", gap: 7 }}>{bar("80%")}{bar("50%", 8)}</div>
          </div>
        ))}
      </div>
    );
  }
  // list / checklist / saved-searches
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
      {[0, 1, 2, 3].map((i) => (
        <div key={i} style={{ display: "flex", alignItems: "center", gap: 13, background: "#fff", border: "1px solid #eceae2", borderRadius: 10, padding: "13px 15px" }}>
          <span style={{ width: 22, height: 22, borderRadius: kind === "checklist" ? 6 : "50%", background: i === 0 ? "#006747" : "#f0efe9", flex: "none", display: "flex", alignItems: "center", justifyContent: "center" }}>{i === 0 && <Icon name="check" size={13} color="#fff" />}</span>
          <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: 7 }}>{bar((60 + i * 8) + "%")}{bar("35%", 8)}</div>
          {bar("48px", 22)}
        </div>
      ))}
    </div>
  );
}

function FeatureStub({ id, go }) {
  const s = STUBS[id] || STUBS.settings;
  return (
    <div style={{ padding: "26px 30px 40px", maxWidth: 940, margin: "0 auto" }}>
      <div style={{ display: "flex", alignItems: "flex-start", gap: 16, marginBottom: 22 }}>
        <span style={{ width: 46, height: 46, borderRadius: 12, background: "#006747", display: "flex", alignItems: "center", justifyContent: "center", flex: "none" }}><Icon name={s.icon} size={23} color="#fff" /></span>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: "1.5px", textTransform: "uppercase", color: "#a8aca6", marginBottom: 3 }}>{s.product}</div>
          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <h1 style={{ margin: 0, fontSize: 25, fontWeight: 600, letterSpacing: "-0.6px", color: "#1d241f" }}>{s.title}</h1>
            <Pill tone="pending" style={{ fontSize: 10 }}>IN DEVELOPMENT</Pill>
          </div>
          <p style={{ margin: "6px 0 0", fontSize: 14.5, color: "#6b706a", maxWidth: 620, lineHeight: 1.55 }}>{s.lead}</p>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 12, marginBottom: 20 }}>
        {s.bullets.map((b, i) => (
          <div key={i} style={{ background: "#fff", borderRadius: 3, padding: "15px 16px", boxShadow: "inset 0 0 0 1px rgba(0,0,0,.06)", display: "flex", flexDirection: "column", gap: 9 }}>
            <Icon name="check-circle-2" size={18} color="#006747" />
            <span style={{ fontSize: 13, color: "#4a504a", lineHeight: 1.5 }}>{b}</span>
          </div>
        ))}
      </div>

      <div style={{ background: "#fff", borderRadius: 3, boxShadow: "inset 0 0 0 1px rgba(0,0,0,.06)", padding: 20 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 16 }}>
          <span style={{ fontSize: 12, fontWeight: 600, letterSpacing: ".5px", textTransform: "uppercase", color: "#a8aca6" }}>Preview</span>
          <div style={{ flex: 1, height: 1, background: "#f0efe9" }} />
        </div>
        <div style={{ position: "relative" }}>
          <div style={{ opacity: .6, filter: "grayscale(.2)", pointerEvents: "none" }}><PreviewSkeleton kind={s.preview} /></div>
        </div>
      </div>

      <div style={{ marginTop: 18, display: "flex", alignItems: "center", gap: 12 }}>
        <button onClick={() => go("dashboard")} style={{ border: "1px solid #e0ded6", background: "#fff", borderRadius: 8, padding: "10px 16px", fontFamily: "inherit", fontSize: 13, fontWeight: 600, color: "#4a504a", cursor: "pointer", display: "inline-flex", alignItems: "center", gap: 7 }}><Icon name="arrow-left" size={15} color="#8a8e88" /> Back to dashboard</button>
        <span style={{ fontSize: 12.5, color: "#a8aca6" }}>This module is enabled for your MLS — the full experience is on the way.</span>
      </div>
    </div>
  );
}

function IframeScreen({ src }) {
  return <iframe title="embedded" src={src} style={{ width: "100%", height: "100%", border: 0, display: "block" }} />;
}

Object.assign(window, { ProductDashboard, FeatureStub, IframeScreen });