// cust-parts3.jsx — Customer Insights sections 5 & 6
const { HelpTitle: CustHelpTitle3 } = window.OV2_UI || {};

/* ============ SECTION 5 — Top guests / At-risk / Lost / Birthdays ============ */
function CustTopAtRisk({ lang, privacyMode, onOpenGuest, emptyBirthdays }) {
  const t = window.CUST_T[lang];
  const help = t.help || {};
  const top = window.CUST.topGuests;
  const atRisk = window.CUST.atRisk;
  const lost = window.CUST.recentlyLost;
  const birthdays = window.CUST.birthdays;

  return (
    <div className="cust-block">
      <div className="cust-block-head"><h2 className="cust-block-title">{t.sec5}</h2></div>

      {/* Top guests */}
      <div className="cust-card">
        <div className="cust-card-head">{CustHelpTitle3 ? <CustHelpTitle3 className="cust-card-title" help={help.topGuests}>{t.top.title}</CustHelpTitle3> : <span className="cust-card-title">{t.top.title}</span>}</div>
        <div className="cust-table-scroll">
          <table className="cust-table guest-table">
            <thead>
              <tr>
                <th>{t.top.cols.name}</th>
                <th>{t.top.cols.first}</th>
                <th>{t.top.cols.last}</th>
                <th className="num">{t.top.cols.visits}</th>
                <th className="num">{t.top.cols.spent}</th>
                <th>{t.top.cols.last_b}</th>
              </tr>
            </thead>
            <tbody>
              {top.map(g => (
                <tr key={g.name} className="clickable" onClick={() => onOpenGuest && onOpenGuest(g.name)}>
                  <td>
                    <span className="cust-guest-cell">
                      <window.CustAvatar name={g.name} size={28} />
                      <window.CustGuestName name={g.name} privacyMode={privacyMode} />
                    </span>
                  </td>
                  <td className="muted">{g.first}</td>
                  <td className="muted">{g.last}</td>
                  <td className="num"><strong>{g.visits}</strong></td>
                  <td className="num"><strong>€{window.fmtCust(g.spent)}</strong></td>
                  <td className="muted small">{g.lastB}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      {/* At-risk */}
      <div className="cust-card">
        <div className="cust-card-head">{CustHelpTitle3 ? <CustHelpTitle3 className="cust-card-title" help={help.atRiskGuests}>{t.top.atRiskTitle}</CustHelpTitle3> : <span className="cust-card-title">{t.top.atRiskTitle}</span>}</div>
        <div className="cust-table-scroll">
          <table className="cust-table guest-table">
            <thead>
              <tr>
                <th>{t.top.atRiskCols.name}</th>
                <th className="num">{t.top.atRiskCols.spent}</th>
                <th className="num">{t.top.atRiskCols.visits}</th>
                <th>{t.top.atRiskCols.last}</th>
                <th className="num">{t.top.atRiskCols.months}</th>
                <th>{t.top.atRiskCols.status}</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              {atRisk.map(g => (
                <tr key={g.name} className="clickable" onClick={() => onOpenGuest && onOpenGuest(g.name)}>
                  <td>
                    <span className="cust-guest-cell">
                      <window.CustAvatar name={g.name} size={28} />
                      <window.CustGuestName name={g.name} privacyMode={privacyMode} />
                    </span>
                  </td>
                  <td className="num"><strong>€{window.fmtCust(g.spent)}</strong></td>
                  <td className="num">{g.visits}</td>
                  <td className="muted">{g.last}</td>
                  <td className="num">{g.months}</td>
                  <td>
                    <span className={`cust-status ${g.status}`}>
                      {g.status === 'high-value' ? '🔥 High' : g.status === 'mid-value' ? 'Mid' : 'Low'}
                    </span>
                  </td>
                  <td onClick={(e) => e.stopPropagation()}>
                    <button className="cust-btn-mini">{t.top.reEngage}</button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      {/* Recently lost + Birthdays */}
      <div className="cust-2col">
        <div className="cust-card">
          <div className="cust-card-head">{CustHelpTitle3 ? <CustHelpTitle3 className="cust-card-title" help={help.recentlyLost}>{t.top.lostTitle}</CustHelpTitle3> : <span className="cust-card-title">{t.top.lostTitle}</span>}</div>
          <div className="cust-list">
            {lost.map(g => (
              <div key={g.name} className="cust-list-item clickable" onClick={() => onOpenGuest && onOpenGuest(g.name)}>
                <window.CustAvatar name={g.name} size={32} />
                <div className="cust-list-main">
                  <window.CustGuestName name={g.name} privacyMode={privacyMode} />
                  <div className="cust-list-sub">€{window.fmtCust(g.spent)} · last {g.last}</div>
                </div>
                <div className="cust-list-meta">{g.daysAgo}d ago</div>
              </div>
            ))}
          </div>
          <div className="cust-list-footer">{t.top.lostSub}</div>
        </div>

        <div className="cust-card">
          <div className="cust-card-head">{CustHelpTitle3 ? <CustHelpTitle3 className="cust-card-title" help={help.birthdays}>{t.top.birthTitle}</CustHelpTitle3> : <span className="cust-card-title">{t.top.birthTitle}</span>}</div>
          {emptyBirthdays ? (
            <div className="cust-empty">{t.top.birthEmpty}</div>
          ) : (
            <div className="cust-list">
              {birthdays.map(g => (
                <div key={g.name + g.date} className="cust-list-item">
                  <window.CustAvatar name={g.name} size={32} />
                  <div className="cust-list-main">
                    <window.CustGuestName name={g.name} privacyMode={privacyMode} />
                    <div className="cust-list-sub">
                      {g.kind === 'birthday' ? '🎂 Birthday' : '✨ Anniversary'} · {g.date} · €{window.fmtCust(g.spent)}
                    </div>
                  </div>
                  <button className="cust-btn-mini">{t.top.sendGreeting}</button>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

/* ============ SECTION 6 — Demographics ============ */
function CustDemographics({ lang }) {
  const t = window.CUST_T[lang];
  const help = t.help || {};
  const compLbl = window.CUST.compositionLabels[lang];
  const geo = window.CUST.geo;
  const comp = window.CUST.composition;
  const maxGeo = Math.max(...geo.map(g => g.pct));

  return (
    <div className="cust-block">
      <div className="cust-block-head"><h2 className="cust-block-title">{t.sec6}</h2></div>

      <div className="cust-2col">
        {/* Geography */}
        <div className="cust-card">
          <div className="cust-card-head">{CustHelpTitle3 ? <CustHelpTitle3 className="cust-card-title" help={help.geo}>{t.demo.geoTitle}</CustHelpTitle3> : <span className="cust-card-title">{t.demo.geoTitle}</span>}</div>
          <div className="cust-geo">
            {geo.map(g => (
              <div key={g.country} className="cust-geo-row">
                <div className="cust-geo-name">{g.country}</div>
                <div className="cust-geo-bar">
                  <div className="cust-geo-fill" style={{ width: `${(g.pct / maxGeo) * 100}%` }} />
                  <span className="cust-geo-pct">{g.pct}%</span>
                </div>
                <div className="cust-geo-n">{g.n}</div>
              </div>
            ))}
            {geo[0].regions && (
              <div className="cust-geo-sub">
                <span className="cust-geo-sub-h">↳ {geo[0].country}:</span>
                <span>{geo[0].regions.join(' · ')}</span>
              </div>
            )}
          </div>
        </div>

        {/* Composition donut */}
        <div className="cust-card">
          <div className="cust-card-head">{CustHelpTitle3 ? <CustHelpTitle3 className="cust-card-title" help={help.composition}>{t.demo.compTitle}</CustHelpTitle3> : <span className="cust-card-title">{t.demo.compTitle}</span>}</div>
          <CustCompositionDonut data={comp} labels={compLbl} />
          <p className="cust-insight">💡 {t.demo.compInsight}</p>
        </div>
      </div>

      {/* Booking patterns */}
      <div className="cust-card">
        <div className="cust-card-head">{CustHelpTitle3 ? <CustHelpTitle3 className="cust-card-title" help={help.behaviorPatterns}>{t.demo.patternsTitle}</CustHelpTitle3> : <span className="cust-card-title">{t.demo.patternsTitle}</span>}</div>
        <div className="cust-patterns-grid">
          {window.CUST.patterns.map(p => (
            <div key={p.k} className="cust-pattern-stat">
              <div className="cust-pattern-lbl">{t.demo.patterns[p.k]}</div>
              <div className="cust-pattern-val">{p.v}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Repeat vs New */}
      <div className="cust-card">
        <div className="cust-card-head">{CustHelpTitle3 ? <CustHelpTitle3 className="cust-card-title" help={help.repeatVsNew}>{t.demo.compareTitle}</CustHelpTitle3> : <span className="cust-card-title">{t.demo.compareTitle}</span>}</div>
        <table className="cust-table">
          <thead>
            <tr>
              <th>{t.demo.compareCols.metric}</th>
              <th className="num">{t.demo.compareCols.n}</th>
              <th className="num">{t.demo.compareCols.r}</th>
              <th className="num">{t.demo.compareCols.d}</th>
            </tr>
          </thead>
          <tbody>
            {window.CUST.compare.map(c => {
              const fmtV = (v) => c.isMoney ? `€${v}` : c.isPct ? `${v}%` : (typeof v === 'number' ? v.toString() : v);
              const delta = c.r - c.n;
              const positive = c.invert ? delta < 0 : delta > 0;
              const sign = delta > 0 ? '+' : delta < 0 ? '−' : '';
              const fmtD = c.isMoney ? `${sign}€${Math.abs(delta)}` : c.isPct ? `${sign}${Math.abs(delta)}pp` : `${sign}${Math.abs(delta).toFixed(c.n % 1 === 0 ? 0 : 1)}`;
              return (
                <tr key={c.metric}>
                  <td>{c.metric}</td>
                  <td className="num">{fmtV(c.n)}</td>
                  <td className="num"><strong>{fmtV(c.r)}</strong></td>
                  <td className={`num ${positive ? 'pos' : 'neg'}`}><strong>{fmtD}</strong></td>
                </tr>
              );
            })}
          </tbody>
        </table>
        <p className="cust-insight">💡 {t.demo.compareSummary}</p>
      </div>
    </div>
  );
}

function CustCompositionDonut({ data, labels }) {
  const cx = 80, cy = 80, r = 56, sw = 18;
  const circ = 2 * Math.PI * r;
  const total = data.reduce((s, d) => s + d.pct, 0);
  let off = 0;
  return (
    <div className="cust-donut-wrap">
      <svg viewBox="0 0 160 160" className="cust-donut-svg">
        <circle cx={cx} cy={cy} r={r} fill="none" stroke="var(--surface-alt)" strokeWidth={sw} />
        {data.map((d, i) => {
          const len = (d.pct / total) * circ;
          const dasharray = `${len} ${circ - len}`;
          const dashoffset = -off;
          off += len;
          return (
            <circle key={i} cx={cx} cy={cy} r={r} fill="none" stroke={d.color} strokeWidth={sw}
              strokeDasharray={dasharray} strokeDashoffset={dashoffset}
              transform={`rotate(-90 ${cx} ${cy})`} />
          );
        })}
        <text x={cx} y={cy - 4} textAnchor="middle" fontSize="22" fontWeight="600" fill="var(--text)">{data.reduce((s, d) => s + d.n, 0)}</text>
        <text x={cx} y={cy + 14} textAnchor="middle" fontSize="10" fill="var(--text-3)">guests</text>
      </svg>
      <div className="cust-donut-legend">
        {data.map(d => (
          <div key={d.id} className="cust-donut-legend-row">
            <span className="cust-dot" style={{ background: d.color }} />
            <span className="cust-donut-lbl">{labels[d.id]}</span>
            <span className="cust-donut-val">{d.pct}% <span className="muted">({d.n})</span></span>
          </div>
        ))}
      </div>
    </div>
  );
}

window.CustTopAtRisk = CustTopAtRisk;
window.CustDemographics = CustDemographics;