/* NutriDMS — Organization Customer CRM (screens/customer-crm.jsx)
   Dashboard KPIs, customer list/profiles, purchase timeline, reviews, loyalty
   & promotions admin. Reads window.CustomerEngagement. Exports window.CustomerCRM. */
(function () {
  const { useState: crmS, useMemo: crmM } = React;
  const CE = () => window.CustomerEngagement;
  const I = (n, s, st) => <Icon name={n} size={s || 15} stroke={st || 2} />;
  const money = (n) => "$" + (Math.round((n || 0) * 100) / 100).toFixed(2);
  const when = (t) => { const d = new Date(t), n = Date.now(); const days = Math.floor((n - t) / 864e5); if (days === 0) return "Today"; if (days === 1) return "Yesterday"; if (days < 30) return days + "d ago"; return d.toLocaleDateString(); };

  function KpiCard({ icon, label, value, tone }) {
    return <div className={"crm-kpi" + (tone ? " " + tone : "")}><span className="crm-kpi-ic">{I(icon, 16, 2.2)}</span><div><b>{value}</b><span>{label}</span></div></div>;
  }
  function Stars({ n }) { return <span className="crm-stars">{[1, 2, 3, 4, 5].map((i) => <span key={i} className={i <= Math.round(n) ? "on" : ""}>★</span>)}</span>; }

  function CustomerCRM() {
    const ce = CE();
    const [tab, setTab] = crmS("dashboard");
    const [openC, setOpenC] = crmS(null);
    const [q, setQ] = crmS("");
    const [tick, setTick] = crmS(0);
    React.useEffect(() => { const b = () => setTick((t) => t + 1); window.addEventListener("nutridms-cep", b); return () => window.removeEventListener("nutridms-cep", b); }, []);
    if (!ce) return <div className="page"><div className="empty">Customer engagement engine not loaded.</div></div>;

    const k = ce.crmKpis();
    const custs = ce.customers();
    const rev = ce.reviewStats();
    const filtered = custs.filter((c) => !q || (c.firstName + " " + c.lastName + " " + (c.email || "")).toLowerCase().includes(q.toLowerCase()));
    const cust = openC && ce.customer(openC);

    const TABS = [["dashboard", "Dashboard", "layout-dashboard"], ["customers", "Customers", "users"], ["reviews", "Reviews", "star"], ["loyalty", "Loyalty", "award"], ["promotions", "Promotions", "megaphone"]];

    return (
      <div className="page crm-page">
        <div className="page-head">
          <div><h1 className="page-title">Customer CRM</h1><p className="page-sub">Customers, loyalty, reviews and promotions from your QR engagement portal.</p></div>
        </div>
        <div className="crm-tabs">{TABS.map(([id, l, ic]) => <button key={id} className={"crm-tab" + (tab === id ? " on" : "")} onClick={() => { setTab(id); setOpenC(null); }}>{I(ic, 14)} {l}</button>)}</div>

        {tab === "dashboard" && (
          <div className="crm-body">
            <div className="crm-kpis">
              <KpiCard icon="users" label="Total customers" value={k.total} />
              <KpiCard icon="user-check" label="Registered" value={k.registered} tone="green" />
              <KpiCard icon="user" label="Guests" value={k.guest} />
              <KpiCard icon="repeat" label="Repeat customers" value={k.repeat} tone="green" />
              <KpiCard icon="user-plus" label="New this month" value={k.newThisMonth} />
              <KpiCard icon="dollar-sign" label="Avg spend" value={money(k.avgSpend)} />
              <KpiCard icon="award" label="Points issued" value={k.pointsIssued.toLocaleString()} />
              <KpiCard icon="mail" label="Email subscribers" value={k.emailSubs} />
              <KpiCard icon="star" label="Review rating" value={(k.rating || 0).toFixed(1)} tone="amber" />
            </div>
            <div className="crm-two">
              <div className="crm-card">
                <div className="crm-card-h">Recent reviews <span>{rev.count} published · {rev.pending} pending</span></div>
                {ce.reviews().slice(0, 5).map((r) => (
                  <div key={r.id} className="crm-revrow">
                    <Stars n={r.overall} />
                    <div className="crm-revmeta"><b>{r.guest ? "Anonymous Guest" : (ce.customer(r.customerId) || {}).firstName || "Customer"}</b><span>{r.meal} · {when(r.at)}</span></div>
                    <span className={"crm-badge " + (r.status === "published" ? "ok" : "warn")}>{r.status}</span>
                  </div>
                ))}
              </div>
              <div className="crm-card">
                <div className="crm-card-h">Active promotions</div>
                {ce.promos().filter((p) => p.active).map((p) => (
                  <div key={p.id} className="crm-promorow"><span className="crm-promo-ic">{I("megaphone", 14)}</span><div><b>{p.name}</b><span>{(p.channels || []).join(" · ")}</span></div><span className="crm-reach">{p.reach.toLocaleString()} reached</span></div>
                ))}
              </div>
            </div>
          </div>
        )}

        {tab === "customers" && !cust && (
          <div className="crm-body">
            <div className="crm-searchbar">{I("search", 15)}<input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Search customers by name or email…" /></div>
            <div className="crm-card pad0">
              <table className="crm-table">
                <thead><tr><th>Customer</th><th>Type</th><th>Tier</th><th>Orders</th><th>Points</th><th>Last visit</th></tr></thead>
                <tbody>
                  {filtered.map((c) => (
                    <tr key={c.id} onClick={() => setOpenC(c.id)} className="crm-crow">
                      <td><div className="crm-cname"><span className="crm-av">{(c.firstName || "?")[0]}{(c.lastName || "")[0]}</span><div><b>{c.type === "guest" ? "Anonymous Guest" : c.firstName + " " + c.lastName}</b><span>{c.email || "No account"}</span></div></div></td>
                      <td><span className={"crm-badge " + (c.type === "registered" ? "ok" : "")}>{c.type}</span></td>
                      <td>{c.type === "registered" ? <span className="crm-tier">{c.tier}</span> : "—"}</td>
                      <td>{ce.orders(c.id).length}</td>
                      <td>{(c.points || 0).toLocaleString()}</td>
                      <td className="crm-muted">{when(c.lastVisit)}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        )}

        {tab === "customers" && cust && (
          <div className="crm-body">
            <button className="crm-back" onClick={() => setOpenC(null)}>{I("arrow-left", 15)} All customers</button>
            <div className="crm-profile">
              <div className="crm-prof-head">
                <span className="crm-av lg">{(cust.firstName || "?")[0]}{(cust.lastName || "")[0]}</span>
                <div><h2>{cust.type === "guest" ? "Anonymous Guest" : cust.firstName + " " + cust.lastName}</h2><p>{cust.email || "Guest — no account"} {cust.phone ? "· " + cust.phone : ""}</p>
                  <div className="crm-prof-tags">{cust.type === "registered" && <span className="crm-tier">{cust.tier}</span>}{(cust.allergies || []).map((a) => <span key={a} className="crm-badge warn">{a}</span>)}{(cust.diet || []).map((d) => <span key={d} className="crm-badge">{d}</span>)}</div>
                </div>
                <div className="crm-prof-stats"><div><b>{(cust.points || 0).toLocaleString()}</b><span>Points</span></div><div><b>{ce.orders(cust.id).length}</b><span>Orders</span></div><div><b>{money(ce.orders(cust.id).reduce((a, o) => a + o.price, 0))}</b><span>Lifetime</span></div></div>
              </div>
              <div className="crm-card-h" style={{ marginTop: 18 }}>Purchase timeline</div>
              <div className="crm-timeline">
                {ce.orders(cust.id).map((o) => (
                  <div key={o.id} className="crm-tl-row"><span className="crm-tl-dot" /><div className="crm-tl-body"><div className="crm-tl-top"><b>{o.meal}</b><span>{money(o.price)}</span></div><div className="crm-tl-meta">{o.calories} kcal · {o.protein}g protein · {o.channel} · +{o.points} pts · {when(o.at)}</div></div></div>
                ))}
                {ce.orders(cust.id).length === 0 && <div className="crm-muted" style={{ padding: 16 }}>No orders yet.</div>}
              </div>
              {(cust.consent || []).length > 0 && <div className="crm-consent">{I("check-circle-2", 13)} Marketing consent: {cust.consent.join(", ")}</div>}
            </div>
          </div>
        )}

        {tab === "reviews" && (
          <div className="crm-body">
            <div className="crm-kpis">
              <KpiCard icon="star" label="Overall" value={(rev.overall || 0).toFixed(1)} tone="amber" />
              <KpiCard icon="utensils-crossed" label="Food quality" value={(rev.food || 0).toFixed(1)} tone="amber" />
              <KpiCard icon="scale" label="Portion" value={(rev.portion || 0).toFixed(1)} tone="amber" />
              <KpiCard icon="message-square" label="Published" value={rev.count} tone="green" />
              <KpiCard icon="clock" label="Pending" value={rev.pending} tone="warn" />
            </div>
            <div className="crm-card pad0">
              <table className="crm-table">
                <thead><tr><th>Reviewer</th><th>Meal</th><th>Rating</th><th>Comment</th><th>Status</th><th></th></tr></thead>
                <tbody>
                  {ce.reviews().map((r) => (
                    <tr key={r.id}>
                      <td>{r.guest ? "Anonymous Guest" : ((ce.customer(r.customerId) || {}).firstName || "Customer")}</td>
                      <td>{r.meal}</td><td><Stars n={r.overall} /></td>
                      <td className="crm-muted" style={{ maxWidth: 240 }}>{r.text}</td>
                      <td><span className={"crm-badge " + (r.status === "published" ? "ok" : "warn")}>{r.status}</span></td>
                      <td>{r.status === "pending" && <button className="crm-mini" onClick={() => ce.setReviewStatus(r.id, "published")}>Publish</button>}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        )}

        {tab === "loyalty" && (() => {
          const s = ce.settings().loyalty;
          return (
            <div className="crm-body">
              <div className="crm-card"><div className="crm-card-h">Program</div>
                <div className="crm-loyrow"><span>Points per dollar</span><b>{s.pointsPerDollar}</b></div>
                <div className="crm-loyrow"><span>Birthday reward</span><b>{s.birthdayReward} pts</b></div>
                <div className="crm-loyrow"><span>Referral reward</span><b>{s.referralReward} pts</b></div>
                <div className="crm-loyrow"><span>Double-point day</span><b>{s.doublePointDay}</b></div>
                <p className="crm-hint">{I("info", 12)} Configure these in Settings → Customer Experience → Loyalty.</p>
              </div>
              <div className="crm-tiergrid">
                {s.tiers.map((t) => <div key={t.name} className={"crm-tiercard t-" + t.name.toLowerCase()}><b>{t.name}</b><span>{t.min.toLocaleString()}+ pts</span><em>{t.perk}</em></div>)}
              </div>
            </div>
          );
        })()}

        {tab === "promotions" && (
          <div className="crm-body">
            <div className="crm-card pad0">
              <table className="crm-table">
                <thead><tr><th>Promotion</th><th>Type</th><th>Channels</th><th>Status</th><th>Reach</th><th></th></tr></thead>
                <tbody>
                  {ce.promos().map((p) => (
                    <tr key={p.id}>
                      <td><b>{p.name}</b></td><td>{p.type}</td><td className="crm-muted">{(p.channels || []).join(", ")}</td>
                      <td><span className={"crm-badge " + (p.active ? "ok" : "")}>{p.active ? "Active" : "Paused"}</span></td>
                      <td>{p.reach.toLocaleString()}</td>
                      <td><button className="crm-mini" onClick={() => ce.upsertPromo({ id: p.id, active: !p.active })}>{p.active ? "Pause" : "Activate"}</button></td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
            <p className="crm-hint">{I("shield-check", 12)} Promotions are only delivered to customers who opted in per channel (marketing consent).</p>
          </div>
        )}
      </div>
    );
  }
  window.CustomerCRM = CustomerCRM;
})();