// bkg-drawers.jsx — Booking Analytics drill-down drawers (Cabin, Pattern, Cancel, Pickup)

const BkgChDot = ({ ch }) => {
  const colors = {
    direct: '#22C55E', booking: '#003580', airbnb: '#FF5A5F',
    instagram: '#E4405F', whatsapp: '#25D366', expedia: '#FFC600',
  };
  return <span className="md-chdot"><span className="md-chdot-bullet" style={{ background: colors[ch] || '#999' }}></span></span>;
};

/* -------- DrawerShell (booking-flavored) -------- */
function BkgDrawerShell({ d, onClose, children }) {
  return (
    <div className="md-drawer">
      <div className="md-head">
        <div className="md-head-main">
          {d.ch && <span className="md-head-ch"><BkgChDot ch={d.ch} /></span>}
          <div className="md-head-title">{d.header}</div>
          <div className="md-head-path">{d.path.join(' › ')}</div>
          <div className="md-head-period">{d.period}</div>
        </div>
        <button className="md-close" onClick={onClose}>×</button>
      </div>

      <div className="md-body">
        {/* Quick stats */}
        <div className="md-stats">
          {d.stats.map((s, i) => (
            <div key={i} className={`md-stat ${s.accent ? 'accent' : ''}`}>
              <div className="md-stat-lbl">{s.lbl}</div>
              <div className="md-stat-val">{s.val}</div>
              <div className="md-stat-meta">
                {s.delta && <span className={`md-stat-delta ${s.sign}`}>{s.delta}</span>}
                {s.sub && <span className="md-stat-sub">{s.sub}</span>}
              </div>
            </div>
          ))}
        </div>

        {children}

        {/* Recommendation card */}
        {d.reco && (
          <div className="md-reco">
            <div className="md-reco-h">💡 Recommendation</div>
            <div className="md-reco-body">{d.reco}</div>
          </div>
        )}
      </div>

      <div className="md-actions">
        {d.actions.primary && (
          <button className="md-btn primary">
            {d.actions.primary}
            {/Cloudbeds|Partner|Hub/.test(d.actions.primary) && <span className="md-ext">↗</span>}
          </button>
        )}
        {d.actions.secondary && <button className="md-btn">{d.actions.secondary}</button>}
        {d.actions.export && <button className="md-btn ghost">{d.actions.export}</button>}
      </div>
    </div>
  );
}

/* -------- Two-line trend chart -------- */
function BkgTwoLine({ labels, a, b, h = 110 }) {
  const w = 420;
  const pad = { l: 6, r: 6, t: 8, b: 18 };
  const maxV = Math.max(...a, ...(b || [0]));
  const minV = Math.min(...a, ...(b || [0]));
  const sx = (i, n) => pad.l + (i / (n - 1)) * (w - pad.l - pad.r);
  const sy = (v) => pad.t + (1 - (v - minV) / (maxV - minV || 1)) * (h - pad.t - pad.b);
  const path = (arr) => arr.map((v, i) => `${i ? 'L' : 'M'}${sx(i, arr.length).toFixed(1)},${sy(v).toFixed(1)}`).join(' ');
  return (
    <svg viewBox={`0 0 ${w} ${h}`} className="bkd-chart">
      {b && <path d={path(b)} stroke="var(--text-3)" strokeWidth="1.2" strokeDasharray="3 3" fill="none" />}
      <path d={path(a)} stroke="var(--text)" strokeWidth="1.6" fill="none" />
      {labels.map((lb, i) => (
        <text key={i} x={sx(i, labels.length)} y={h - 4} textAnchor="middle" fontSize="9" fill="var(--text-3)">{lb}</text>
      ))}
    </svg>
  );
}

/* -------- Single-line area trend -------- */
function BkgArea({ labels, values, h = 100 }) {
  const w = 420;
  const pad = { l: 6, r: 6, t: 8, b: 18 };
  const maxV = Math.max(...values);
  const minV = Math.min(...values);
  const sx = (i, n) => pad.l + (i / (n - 1)) * (w - pad.l - pad.r);
  const sy = (v) => pad.t + (1 - (v - minV) / (maxV - minV || 1)) * (h - pad.t - pad.b);
  const line = values.map((v, i) => `${i ? 'L' : 'M'}${sx(i, values.length).toFixed(1)},${sy(v).toFixed(1)}`).join(' ');
  const area = `${line} L${sx(values.length - 1, values.length).toFixed(1)},${h - pad.b} L${sx(0, values.length)},${h - pad.b} Z`;
  return (
    <svg viewBox={`0 0 ${w} ${h}`} className="bkd-chart">
      <path d={area} fill="rgba(66,133,244,0.10)" />
      <path d={line} stroke="#4285F4" strokeWidth="1.6" fill="none" />
      {labels.map((lb, i) => (
        <text key={i} x={sx(i, labels.length)} y={h - 4} textAnchor="middle" fontSize="9" fill="var(--text-3)">{lb}</text>
      ))}
    </svg>
  );
}

/* ============== Drawer 1 — Cabin ============== */
function BkgCabinDrawer({ d, onClose, onBooking }) {
  return (
    <BkgDrawerShell d={d} onClose={onClose}>
      <div className="md-section-h">{d.peers.title}</div>
      <div className="md-card md-tbl-card">
        <table className="md-tbl bkd-peers">
          <thead><tr>{d.peers.cols.map((c, i) => <th key={i} className={i === 0 ? '' : 'r'}>{c}</th>)}</tr></thead>
          <tbody>
            {d.peers.rows.map((r, i) => (
              <tr key={i} className={`${r.self ? 'self' : ''} ${r.avg ? 'avg' : ''}`}>
                <td>{r.name}</td>
                <td className="r">{r.occ}</td>
                <td className="r">{r.adr}</td>
                <td className="r">{r.revpar}</td>
                <td className="r">{r.cancel}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <div className="md-section-h">{d.trend.title}</div>
      <div className="md-card">
        <div className="md-insight"><span>↳</span>{d.trend.insight}</div>
        <BkgTwoLine labels={d.trend.labels} a={d.trend.self} b={d.trend.avg} />
        <div className="bkd-legend">
          <span className="bkd-leg-item"><span className="bkd-leg-line solid"></span>{d.path[2]}</span>
          <span className="bkd-leg-item"><span className="bkd-leg-line dashed"></span>Avg Standard</span>
        </div>
      </div>

      <div className="md-section-h">{d.recent.title}</div>
      <div className="md-card md-tbl-card">
        <table className="md-tbl">
          <thead><tr><th>Date</th><th>Guest</th><th>Source</th><th className="r">N</th><th className="r">Rev</th><th></th></tr></thead>
          <tbody>
            {d.recent.rows.map((r, i) => (
              <tr key={i} onClick={() => onBooking && onBooking()}>
                <td>{r.dt}</td>
                <td>{r.guest}</td>
                <td><BkgChDot ch={r.src} /></td>
                <td className="r">{r.nights}</td>
                <td className="r">{r.rev}</td>
                <td><span className={`bkd-status-dot ${r.status}`} title={r.status}></span></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <div className="md-section-h">{d.reviews.title}</div>
      <div className="md-card bkd-reviews">
        {d.reviews.items.map((rv, i) => (
          <div key={i} className="bkd-review">
            <div className="bkd-review-head">
              <span className="bkd-rate">★ {rv.rate.toFixed(1)}</span>
              <span className="bkd-review-meta">{rv.src} · {rv.date}</span>
            </div>
            <div className="bkd-review-text">{rv.text}</div>
          </div>
        ))}
      </div>
    </BkgDrawerShell>
  );
}

/* ============== Drawer 2 — Stay pattern ============== */
function BkgPatternDrawer({ d, onClose }) {
  const guestMax = Math.max(...d.guests.types.map(g => g.pct));
  return (
    <BkgDrawerShell d={d} onClose={onClose}>
      <div className="md-section-h">{d.trend.title}</div>
      <div className="md-card">
        <div className="md-insight"><span>↳</span>{d.trend.insight}</div>
        <BkgArea labels={d.trend.labels} values={d.trend.values} />
      </div>

      <div className="md-section-h">{d.guests.title}</div>
      <div className="bkd-guests">
        <div className="md-card">
          <div className="bkd-guest-h">Guest type</div>
          {d.guests.types.map((g, i) => (
            <div key={i} className="bkd-guest-row">
              <div className="bkd-guest-lbl">{g.lbl}</div>
              <div className="bkd-guest-bar-wrap"><div className="bkd-guest-bar" style={{ width: `${(g.pct / guestMax) * 100}%` }}></div></div>
              <div className="bkd-guest-val">{g.pct}%</div>
            </div>
          ))}
        </div>
        <div className="md-card">
          <div className="bkd-guest-h">New vs Repeat</div>
          <div className="bkd-split">
            <div className="bkd-split-bar">
              <div className="bkd-split-new" style={{ width: `${d.guests.repeat.newPct}%` }}>{d.guests.repeat.newPct}%</div>
              <div className="bkd-split-rep" style={{ width: `${d.guests.repeat.repeatPct}%` }}>{d.guests.repeat.repeatPct}%</div>
            </div>
            <div className="bkd-split-leg"><span><i className="d-new"></i>New</span><span><i className="d-rep"></i>Repeat</span></div>
          </div>
        </div>
      </div>

      <div className="md-section-h">{d.finance.title}</div>
      <div className="md-card">
        <div className="bkd-fin">
          {d.finance.rows.map((r, i) => (
            <div key={i} className={`bkd-fin-row ${r.strong ? 'strong' : ''}`}>
              <span className="bkd-fin-lbl">{r.lbl}</span>
              <span className="bkd-fin-val">{r.val}</span>
            </div>
          ))}
        </div>
        <div className="bkd-fin-compare">{d.finance.compare}</div>
        <div className="bkd-fin-note">{d.finance.compareNote}</div>
      </div>

      <div className="md-section-h">{d.sources.title}</div>
      <div className="md-card md-tbl-card">
        <table className="md-tbl">
          <thead><tr><th>Channel</th><th className="r">Bookings</th><th className="r">% pattern</th></tr></thead>
          <tbody>
            {d.sources.rows.map((r, i) => (
              <tr key={i}>
                <td><BkgChDot ch={r.ch} /> {r.name}</td>
                <td className="r">{r.count}</td>
                <td className="r">{r.pct}%</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </BkgDrawerShell>
  );
}

/* ============== Drawer 3 — Cancellation ============== */
function BkgCancelDrawer({ d, onClose, onBooking }) {
  const timingMax = Math.max(...d.timing.bins.map(b => b.pct));
  return (
    <BkgDrawerShell d={d} onClose={onClose}>
      <div className="md-section-h">{d.timing.title}</div>
      <div className="md-card">
        <div className="bkd-timing">
          {d.timing.bins.map((b, i) => (
            <div key={i} className="bkd-timing-row">
              <div className="bkd-timing-lbl">{b.lbl}</div>
              <div className="bkd-timing-bar-wrap"><div className="bkd-timing-bar" style={{ width: `${(b.pct / timingMax) * 100}%` }}></div></div>
              <div className="bkd-timing-val">{b.pct}%</div>
            </div>
          ))}
        </div>
        <div className="md-insight"><span>↳</span>{d.timing.bench}</div>
      </div>

      <div className="md-section-h">{d.cancelled.title}</div>
      <div className="md-card md-tbl-card">
        <table className="md-tbl">
          <thead><tr>{d.cancelled.cols.map((c, i) => <th key={i} className={i >= 4 ? 'r' : ''}>{c}</th>)}</tr></thead>
          <tbody>
            {d.cancelled.rows.map((r, i) => (
              <tr key={i} onClick={() => onBooking && onBooking()}>
                <td>{r.booked}</td>
                <td>{r.cancelled}</td>
                <td>{r.lead}</td>
                <td>{r.stay}</td>
                <td className="r">{r.cabin}</td>
                <td className="r" style={{ color: 'var(--neg)' }}>{r.lost}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <div className="md-section-h">{d.otaCompare.title}</div>
      <div className="md-card md-tbl-card">
        <table className="md-tbl">
          <thead><tr>{d.otaCompare.cols.map((c, i) => <th key={i} className={i === 0 ? '' : 'r'}>{c}</th>)}</tr></thead>
          <tbody>
            {d.otaCompare.rows.map((r, i) => (
              <tr key={i} className={`bkd-ota ${r.tone}`}>
                <td>{r.name}</td>
                <td className="r">{r.count}</td>
                <td className="r">{r.rate}</td>
                <td className="r">{r.avgTime}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <div className="md-section-h">{d.economics.title}</div>
      <div className="bkd-econ">
        {d.economics.rows.map((r, i) => (
          <div key={i} className={`bkd-econ-row ${r.strong ? 'strong' : ''} ${r.accent ? 'accent' : ''}`}>
            <span className="bkd-econ-lbl">{r.lbl}</span>
            <span className={`bkd-econ-val ${r.neg ? 'neg' : ''}`}>{r.val}</span>
          </div>
        ))}
        <div className="bkd-econ-compare">{d.economics.compare}</div>
      </div>
    </BkgDrawerShell>
  );
}

/* ============== Drawer 4 — Pickup interval ============== */
function BkgPickupDrawer({ d, onClose }) {
  // Pace curve: synthesize 60-day current vs LY series
  const days = d.paceCurve.days;
  const currentSeries = Array.from({ length: days }, (_, i) => {
    const t = i / (days - 1);
    return Math.round(184 / (1 + Math.exp(-5 * (t - 0.55))));
  });
  const lySeries = Array.from({ length: days }, (_, i) => {
    const t = (i + 4) / (days - 1);
    return Math.round(212 / (1 + Math.exp(-5 * (t - 0.55))));
  });
  // X-axis: -60..0 days to arrival
  const w = 420, h = 130, pad = { l: 30, r: 6, t: 8, b: 22 };
  const maxV = Math.max(...currentSeries, ...lySeries);
  const sx = (i) => pad.l + (i / (days - 1)) * (w - pad.l - pad.r);
  const sy = (v) => pad.t + (1 - v / maxV) * (h - pad.t - pad.b);
  const path = (arr) => arr.map((v, i) => `${i ? 'L' : 'M'}${sx(i).toFixed(1)},${sy(v).toFixed(1)}`).join(' ');

  // Heatmap synthetic: 5 cabins × 30 days
  const heatGrid = d.heatmap.cabins.map((cab, ci) =>
    Array.from({ length: 30 }, (_, di) => {
      // Wednesdays (di % 7 === 2 if month starts Sun) sparse
      const dow = (di + 1) % 7; // jun 1 = Mon (1)
      let p = 0.65 - di / 60 - ci * 0.04;
      if (dow === 2 || dow === 3) p -= 0.35; // Wed/Thu weak
      return Math.random() < p ? 'b' : 'a';
    })
  );

  return (
    <BkgDrawerShell d={d} onClose={onClose}>
      <div className="md-section-h">{d.paceCurve.title}</div>
      <div className="md-card">
        <div className="md-insight"><span>↳</span>{d.paceCurve.insight}</div>
        <svg viewBox={`0 0 ${w} ${h}`} className="bkd-chart">
          {[0, 0.5, 1].map((t, i) => (
            <line key={i} x1={pad.l} x2={w - pad.r} y1={pad.t + t * (h - pad.t - pad.b)} y2={pad.t + t * (h - pad.t - pad.b)} stroke="var(--border)" strokeWidth="0.5" />
          ))}
          <path d={path(lySeries)} stroke="var(--text-3)" strokeWidth="1.2" strokeDasharray="3 3" fill="none" />
          <path d={path(currentSeries)} stroke="var(--text)" strokeWidth="1.6" fill="none" />
          <text x={pad.l} y={h - 6} fontSize="9" fill="var(--text-3)">−60д</text>
          <text x={(w + pad.l) / 2} y={h - 6} fontSize="9" fill="var(--text-3)" textAnchor="middle">−30д</text>
          <text x={w - pad.r} y={h - 6} fontSize="9" fill="var(--text-3)" textAnchor="end">заезд</text>
          <text x={4} y={pad.t + 8} fontSize="9" fill="var(--text-3)">{maxV}</text>
          <text x={4} y={h - pad.b} fontSize="9" fill="var(--text-3)">0</text>
        </svg>
        <div className="bkd-legend">
          <span className="bkd-leg-item"><span className="bkd-leg-line solid"></span>Current OTB</span>
          <span className="bkd-leg-item"><span className="bkd-leg-line dashed"></span>Same-time LY</span>
        </div>
      </div>

      <div className="md-section-h">{d.heatmap.title}</div>
      <div className="md-card">
        <div className="bkd-heat-mini">
          <div className="bkd-heat-row bkd-heat-head">
            <div className="bkd-heat-lbl"></div>
            {Array.from({ length: 30 }, (_, i) => <div key={i} className="bkd-heat-cell-h">{(i + 1) % 5 === 0 || i === 0 ? i + 1 : ''}</div>)}
          </div>
          {heatGrid.map((row, ri) => (
            <div key={ri} className="bkd-heat-row">
              <div className="bkd-heat-lbl">{d.heatmap.cabins[ri]}</div>
              {row.map((s, ci) => <div key={ci} className={`bkd-heat-cell s-${s}`} title={`Day ${ci + 1}`}></div>)}
            </div>
          ))}
        </div>
        <div className="bkd-heat-leg">
          <span><i className="bkd-heat-cell s-b"></i>Booked</span>
          <span><i className="bkd-heat-cell s-a"></i>Available</span>
        </div>
      </div>

      <div className="md-section-h">{d.weakest.title}</div>
      <div className="md-card md-tbl-card">
        <table className="md-tbl">
          <thead><tr>{d.weakest.cols.map((c, i) => <th key={i} className={i >= 2 ? 'r' : ''}>{c}</th>)}</tr></thead>
          <tbody>
            {d.weakest.rows.map((r, i) => (
              <tr key={i}>
                <td>{r.dt}</td>
                <td>{r.dow}</td>
                <td className="r">{r.otb}</td>
                <td className="r">{r.avg}</td>
                <td className="r" style={{ color: 'var(--neg)' }}>{r.gap}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      <div className="md-insight" style={{ marginTop: 8 }}><span>↳</span>{d.weakest.pattern}</div>

      <div className="md-section-h">{d.leadStats.title}</div>
      <div className="md-card">
        {d.leadStats.rows.map((r, i) => (
          <div key={i} className={`bkd-lead-row ${r.accent ? 'accent' : ''}`}>
            <span>{r.lbl}</span><strong>{r.val}</strong>
          </div>
        ))}
        <div className="bkd-lead-note">{d.leadStats.note}</div>
      </div>
    </BkgDrawerShell>
  );
}

/* ============== Skeleton ============== */
function BkgDrawerSkeleton({ onClose }) {
  return (
    <div className="md-drawer">
      <div className="md-head">
        <div className="md-head-main">
          <div className="sk" style={{ width: 200, height: 18, marginBottom: 6 }}></div>
          <div className="sk" style={{ width: 240, height: 11, marginBottom: 4 }}></div>
          <div className="sk" style={{ width: 180, height: 11 }}></div>
        </div>
        <button className="md-close" onClick={onClose}>×</button>
      </div>
      <div className="md-body">
        <div className="md-stats">
          {[0, 1, 2].map(i => (
            <div key={i} className="md-stat">
              <div className="sk" style={{ width: 50, height: 9, marginBottom: 8 }}></div>
              <div className="sk" style={{ width: 80, height: 22, marginBottom: 6 }}></div>
              <div className="sk" style={{ width: 60, height: 11 }}></div>
            </div>
          ))}
        </div>
        {[0, 1, 2].map(i => (
          <React.Fragment key={i}>
            <div className="sk" style={{ width: 160, height: 11, margin: '20px 0 10px' }}></div>
            <div className="sk" style={{ width: '100%', height: 130, borderRadius: 10 }}></div>
          </React.Fragment>
        ))}
      </div>
    </div>
  );
}

/* ============== Host ============== */
function BkgDrawerHost({ openKey, onClose, lang, skeleton }) {
  if (!openKey && !skeleton) return null;
  const data = (window.BKG_DRAWERS[lang] || window.BKG_DRAWERS.ru)[openKey];

  let drawer;
  if (skeleton) drawer = <BkgDrawerSkeleton onClose={onClose} />;
  else if (!data) return null;
  else if (openKey === 'cabin')   drawer = <BkgCabinDrawer  d={data} onClose={onClose} />;
  else if (openKey === 'pattern') drawer = <BkgPatternDrawer d={data} onClose={onClose} />;
  else if (openKey === 'cancel')  drawer = <BkgCancelDrawer  d={data} onClose={onClose} />;
  else if (openKey === 'pickup')  drawer = <BkgPickupDrawer  d={data} onClose={onClose} />;
  else return null;

  return (
    <>
      <div className="md-overlay" onClick={onClose}></div>
      {drawer}
    </>
  );
}

window.BkgDrawerHost = BkgDrawerHost;
window.BkgCabinDrawer = BkgCabinDrawer;
window.BkgPatternDrawer = BkgPatternDrawer;
window.BkgCancelDrawer = BkgCancelDrawer;
window.BkgPickupDrawer = BkgPickupDrawer;
window.BkgDrawerSkeleton = BkgDrawerSkeleton;