// Malbec Live — Live Nation (parent workspace) views
// One file, four panes: Productoras, Aggregated P&L, Aggregated Calendar,
// Aggregated Tickets. All follow the existing visual vocabulary — same card,
// same table grid, same pills, same banner-bg metrics row as PLPane / CalPane.

const { useState: useStateLN, useEffect: useEffectLN } = React;

// ─────────────────────────────────────────────────────────────
// Productora seed data — used across every LN pane
// ─────────────────────────────────────────────────────────────
const LN_PRODUCTORAS = [
  {
    id: "dale-play",
    name: "Dale Play Live",
    region: "LATAM South · AR / UY / CL",
    shows: 28,
    revenue: 12480200,
    costs: 8240900,
    swatch: "linear-gradient(135deg, #A98BE8 0%, #F39AB8 50%, #F2C56D 100%)",
  },
  {
    id: "productora-1",
    name: "Productora 1",
    region: "LATAM North · MX",
    shows: 41,
    revenue: 18920400,
    costs: 12480200,
    swatch: "linear-gradient(135deg, #6F8FE8 0%, #8FB7F2 50%, #C5DDF6 100%)",
  },
  {
    id: "productora-2",
    name: "Productora 2",
    region: "LATAM · regional",
    shows: 16,
    revenue: 7240880,
    costs: 5120300,
    swatch: "linear-gradient(135deg, #F2A26D 0%, #F39A8B 50%, #E8867F 100%)",
  },
];

const fmtEUR = (n) => "€ " + n.toLocaleString("en-US", { maximumFractionDigits: 0 });
const fmtPct = (rev, costs) => (((rev - costs) / rev) * 100).toFixed(1) + "%";

// ─────────────────────────────────────────────────────────────
// Header — shared across LN panes (matches PLPane / VenuesPane vocab)
// ─────────────────────────────────────────────────────────────
function LNPaneHeader({ title, subtitle, right }) {
  return (
    <div style={{
      marginBottom: 24,
      display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 24,
    }}>
      <div>
        <h1 style={{
          fontFamily: "var(--font-sans)",
          fontSize: 22, fontWeight: 700,
          letterSpacing: "-0.015em",
          color: "var(--live-heading)",
          margin: 0, marginBottom: 4,
        }}>{title}</h1>
        <p style={{ fontSize: 13, color: "var(--live-muted)", margin: 0 }}>{subtitle}</p>
      </div>
      {right}
    </div>
  );
}

// Aggregated KPI strip (matches CalMetrics shape)
function LNMetrics({ items }) {
  useEffectLN(() => { if (window.lucide) window.lucide.createIcons(); }, [items]);
  return (
    <div style={{
      background: "var(--live-banner-bg)",
      border: "1px solid var(--live-border)",
      borderTop: "3px solid var(--live-primary)",
      borderRadius: 10,
      padding: "20px 28px",
      marginBottom: 24,
      display: "grid",
      gridTemplateColumns: `repeat(${items.length}, 1fr)`,
      gap: 16,
    }}>
      {items.map((m, i) => (
        <div key={i} style={{
          display: "flex", alignItems: "center", gap: 14,
          paddingLeft: i === 0 ? 0 : 24,
          borderLeft: i === 0 ? "none" : "1px solid var(--live-border)",
        }}>
          <div style={{
            width: 36, height: 36, borderRadius: 999,
            border: "1px dashed var(--live-border-strong)",
            display: "grid", placeItems: "center", color: "var(--live-muted)", flexShrink: 0,
          }}>
            <i data-lucide={m.icon} style={{ width: 16, height: 16 }} />
          </div>
          <div>
            <div style={{ fontSize: 12, color: "var(--live-muted)", marginBottom: 2 }}>{m.label}</div>
            <div style={{
              fontSize: 20, fontWeight: 700,
              color: "var(--live-heading)", letterSpacing: "-0.01em",
            }}>{m.value}</div>
          </div>
        </div>
      ))}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Pane 1 — Productoras (table)
// ─────────────────────────────────────────────────────────────
function LNProductorasPane({ onOpenProductora }) {
  const totalShows   = LN_PRODUCTORAS.reduce((s, p) => s + p.shows, 0);
  const totalRevenue = LN_PRODUCTORAS.reduce((s, p) => s + p.revenue, 0);
  const totalCosts   = LN_PRODUCTORAS.reduce((s, p) => s + p.costs, 0);

  return (
    <div style={{ padding: "32px 48px 48px", overflow: "auto", height: "100%" }}>
      <LNPaneHeader
        title="Productoras"
        subtitle="All operating companies across the Live Nation portfolio."
      />

      <LNMetrics items={[
        { label: "Productoras", value: String(LN_PRODUCTORAS.length), icon: "building-2" },
        { label: "Shows YTD",   value: totalShows.toLocaleString(),   icon: "calendar" },
        { label: "Revenue YTD", value: fmtEUR(totalRevenue),          icon: "trending-up" },
        { label: "Margin",      value: fmtPct(totalRevenue, totalCosts), icon: "percent" },
      ]} />

      <div style={{
        background: "var(--live-card)",
        border: "1px solid var(--live-border)",
        borderRadius: 10, overflow: "hidden",
      }}>
        <div style={{
          display: "grid",
          gridTemplateColumns: "1.4fr 1fr 90px 1fr 1fr 110px 80px",
          padding: "11px 20px",
          background: "var(--live-banner-bg)",
          borderBottom: "1px solid var(--live-border)",
          fontSize: 11, fontWeight: 600,
          color: "var(--live-muted)",
          textTransform: "uppercase", letterSpacing: "0.04em",
        }}>
          <div>Productora</div>
          <div>Region</div>
          <div>Shows</div>
          <div>Revenue YTD</div>
          <div>Costs YTD</div>
          <div>Margin</div>
          <div></div>
        </div>
        {LN_PRODUCTORAS.map((p, i) => (
          <div
            key={p.id}
            onClick={() => onOpenProductora && onOpenProductora(p)}
            style={{
              display: "grid",
              gridTemplateColumns: "1.4fr 1fr 90px 1fr 1fr 110px 80px",
              padding: "16px 20px",
              borderTop: i === 0 ? "none" : "1px solid var(--live-border)",
              alignItems: "center",
              fontSize: 13,
              cursor: "pointer",
              transition: "background 140ms ease-out",
            }}
            onMouseEnter={(e) => (e.currentTarget.style.background = "var(--live-row-hover)")}
            onMouseLeave={(e) => (e.currentTarget.style.background = "transparent")}
          >
            <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
              <div style={{
                width: 30, height: 30, borderRadius: 6,
                background: p.swatch, flexShrink: 0,
                border: "1px solid var(--live-border)",
              }} />
              <div style={{ fontWeight: 600, color: "var(--live-heading)" }}>{p.name}</div>
            </div>
            <div style={{ color: "var(--live-body)" }}>{p.region}</div>
            <div style={{ color: "var(--live-body)", fontVariantNumeric: "tabular-nums" }}>{p.shows}</div>
            <div style={{ color: "var(--live-body)", fontVariantNumeric: "tabular-nums" }}>{fmtEUR(p.revenue)}</div>
            <div style={{ color: "var(--live-body)", fontVariantNumeric: "tabular-nums" }}>{fmtEUR(p.costs)}</div>
            <div style={{ color: "var(--live-heading)", fontWeight: 600, fontVariantNumeric: "tabular-nums" }}>
              {fmtPct(p.revenue, p.costs)}
            </div>
            <div style={{ display: "flex", justifyContent: "flex-end" }}>
              <span style={{
                fontSize: 11.5, fontWeight: 500,
                color: "var(--live-primary)",
                display: "inline-flex", alignItems: "center", gap: 4,
              }}>
                Open <i data-lucide="arrow-right" style={{ width: 12, height: 12 }} />
              </span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Pane 2 — Aggregated P&L (KPIs + table by productora)
// ─────────────────────────────────────────────────────────────
function LNAggregatedPLPane({ onOpenProductora }) {
  // Aggregated rollup across all productoras + click-thru to per-productora detail.
  const totalRevenue = LN_PRODUCTORAS.reduce((s, p) => s + p.revenue, 0);
  const totalCosts   = LN_PRODUCTORAS.reduce((s, p) => s + p.costs, 0);
  const totalProfit  = totalRevenue - totalCosts;

  return (
    <div style={{ padding: "32px 48px 48px", overflow: "auto", height: "100%" }}>
      <LNPaneHeader
        title="Business · P&L"
        subtitle="Aggregated performance across all Live Nation productoras."
      />

      <LNMetrics items={[
        { label: "Revenue YTD", value: fmtEUR(totalRevenue),  icon: "trending-up" },
        { label: "Costs YTD",   value: fmtEUR(totalCosts),    icon: "trending-down" },
        { label: "Profit YTD",  value: fmtEUR(totalProfit),   icon: "wallet" },
        { label: "Avg. Margin", value: fmtPct(totalRevenue, totalCosts), icon: "percent" },
      ]} />

      <div style={{
        background: "var(--live-card)",
        border: "1px solid var(--live-border)",
        borderRadius: 10, overflow: "hidden",
      }}>
        <div style={{
          display: "grid",
          gridTemplateColumns: "1.3fr 1fr 1fr 1fr 110px 140px",
          padding: "11px 20px",
          background: "var(--live-banner-bg)",
          borderBottom: "1px solid var(--live-border)",
          fontSize: 11, fontWeight: 600,
          color: "var(--live-muted)",
          textTransform: "uppercase", letterSpacing: "0.04em",
        }}>
          <div>Productora</div>
          <div>Revenue</div>
          <div>Costs</div>
          <div>Profit</div>
          <div>Margin</div>
          <div style={{ textAlign: "right" }}>Status</div>
        </div>
        {LN_PRODUCTORAS.map((p, i) => {
          const profit = p.revenue - p.costs;
          // Pretend the smallest productora is still in-progress for this period
          const inProgress = p.id === "productora-2";
          return (
            <div key={p.id}
              onClick={() => onOpenProductora && onOpenProductora(p)}
              style={{
                display: "grid",
                gridTemplateColumns: "1.3fr 1fr 1fr 1fr 110px 140px",
                padding: "14px 20px",
                borderTop: i === 0 ? "none" : "1px solid var(--live-border)",
                alignItems: "center", fontSize: 13,
                cursor: onOpenProductora ? "pointer" : "default",
                transition: "background 140ms ease-out",
              }}
              onMouseEnter={(e) => { if (onOpenProductora) e.currentTarget.style.background = "var(--live-row-hover)"; }}
              onMouseLeave={(e) => { if (onOpenProductora) e.currentTarget.style.background = "transparent"; }}
            >
              <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                <div style={{
                  width: 26, height: 26, borderRadius: 6,
                  background: p.swatch, flexShrink: 0,
                  border: "1px solid var(--live-border)",
                }} />
                <div style={{ fontWeight: 600, color: "var(--live-heading)" }}>{p.name}</div>
              </div>
              <div style={{ color: "var(--live-body)", fontVariantNumeric: "tabular-nums" }}>{fmtEUR(p.revenue)}</div>
              <div style={{ color: "var(--live-body)", fontVariantNumeric: "tabular-nums" }}>{fmtEUR(p.costs)}</div>
              <div style={{ color: "var(--live-body)", fontVariantNumeric: "tabular-nums" }}>{fmtEUR(profit)}</div>
              <div style={{ color: "var(--live-body)", fontVariantNumeric: "tabular-nums" }}>{fmtPct(p.revenue, p.costs)}</div>
              <div style={{ textAlign: "right" }}>
                <span style={{
                  display: "inline-flex", alignItems: "center", gap: 6,
                  fontSize: 11.5, fontWeight: 500,
                  padding: "3px 10px", borderRadius: 999,
                  background: inProgress ? "var(--live-pill-open-bg)" : "var(--live-pill-closed-bg)",
                  color:      inProgress ? "var(--live-pill-open-fg)" : "var(--live-pill-closed-fg)",
                }}>
                  {inProgress ? "In progress" : "Closed"}
                </span>
              </div>
            </div>
          );
        })}
        {/* Totals row */}
        <div style={{
          display: "grid",
          gridTemplateColumns: "1.3fr 1fr 1fr 1fr 110px 140px",
          padding: "14px 20px",
          borderTop: "1px solid var(--live-border)",
          background: "var(--live-banner-bg)",
          alignItems: "center", fontSize: 13,
        }}>
          <div style={{ fontWeight: 700, color: "var(--live-heading)", textTransform: "uppercase", fontSize: 11, letterSpacing: "0.04em" }}>Total</div>
          <div style={{ fontWeight: 700, color: "var(--live-heading)", fontVariantNumeric: "tabular-nums" }}>{fmtEUR(totalRevenue)}</div>
          <div style={{ fontWeight: 700, color: "var(--live-heading)", fontVariantNumeric: "tabular-nums" }}>{fmtEUR(totalCosts)}</div>
          <div style={{ fontWeight: 700, color: "var(--live-heading)", fontVariantNumeric: "tabular-nums" }}>{fmtEUR(totalProfit)}</div>
          <div style={{ fontWeight: 700, color: "var(--live-heading)", fontVariantNumeric: "tabular-nums" }}>{fmtPct(totalRevenue, totalCosts)}</div>
          <div></div>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Pane 3 — Aggregated Calendar
// Reuses the look of the calendar grid w/ events colored by productora.
// ─────────────────────────────────────────────────────────────

// June 2026 starts on a Monday — same anchor used by the per-productora calendar.
// Cells are 6 weeks × 7 days, day 1 starts at index 0.
const LN_CAL_DAYS = (() => {
  // index 0 = Mon June 1
  const out = [];
  for (let i = 0; i < 35; i++) out.push(i + 1); // 1..35 (we'll cap at 30)
  return out;
})();

const LN_CAL_EVENTS = [
  // Dale Play
  { day: 3,  productoraId: "dale-play", artist: "Bad Bunny",   venue: "River Plate" },
  { day: 11, productoraId: "dale-play", artist: "Duki",        venue: "Movistar Arena" },
  { day: 18, productoraId: "dale-play", artist: "Nicki Nicole",venue: "Hipódromo" },
  { day: 26, productoraId: "dale-play", artist: "Bizarrap",    venue: "Vélez" },
  // Productora 1
  { day: 4,  productoraId: "productora-1", artist: "Karol G",     venue: "Foro Sol" },
  { day: 9,  productoraId: "productora-1", artist: "Peso Pluma",  venue: "Foro Sol" },
  { day: 12, productoraId: "productora-1", artist: "Rosalía",     venue: "Palacio Deportes" },
  { day: 17, productoraId: "productora-1", artist: "Maluma",      venue: "Auditorio Nacional" },
  { day: 23, productoraId: "productora-1", artist: "Grupo Frontera", venue: "Foro Sol" },
  { day: 28, productoraId: "productora-1", artist: "Fuerza Regida", venue: "Estadio Azteca" },
  // Productora 2
  { day: 6,  productoraId: "productora-2", artist: "Manuel Turizo", venue: "Movistar Arena BO" },
  { day: 14, productoraId: "productora-2", artist: "Sebastián Yatra",venue: "Coliseo de Puerto Rico" },
  { day: 21, productoraId: "productora-2", artist: "Juanes",        venue: "Movistar Arena CO" },
];

const LN_PROD_COLORS = {
  "dale-play":     { bg: "#ECE9F5", fg: "#1E1562", dot: "#7B6CE6" },
  "productora-1":  { bg: "#E5EEF8", fg: "#1B3D6B", dot: "#4A7BB8" },
  "productora-2":  { bg: "#F8E9DD", fg: "#7A3B17", dot: "#D8722B" },
};

function LNCalendarPane() {
  const dayNames = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
  const eventsByDay = {};
  for (const e of LN_CAL_EVENTS) {
    (eventsByDay[e.day] = eventsByDay[e.day] || []).push(e);
  }

  return (
    <div style={{ padding: "32px 48px 48px", overflow: "auto", height: "100%" }}>
      <LNPaneHeader
        title="Calendar"
        subtitle="All shows across Live Nation productoras — June 2026."
        right={
          <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
            {LN_PRODUCTORAS.map((p) => (
              <div key={p.id} style={{ display: "flex", alignItems: "center", gap: 6, fontSize: 12, color: "var(--live-body)" }}>
                <span style={{
                  width: 9, height: 9, borderRadius: 999,
                  background: LN_PROD_COLORS[p.id].dot,
                  display: "inline-block",
                }} />
                {p.name}
              </div>
            ))}
          </div>
        }
      />

      <div style={{
        background: "var(--live-card)",
        border: "1px solid var(--live-border)",
        borderRadius: 10, overflow: "hidden",
      }}>
        {/* Day-of-week header */}
        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(7, 1fr)",
          background: "var(--live-banner-bg)",
          borderBottom: "1px solid var(--live-border)",
        }}>
          {dayNames.map((d) => (
            <div key={d} style={{
              padding: "10px 14px",
              fontSize: 11, fontWeight: 600,
              color: "var(--live-muted)",
              textTransform: "uppercase", letterSpacing: "0.04em",
            }}>{d}</div>
          ))}
        </div>

        {/* Grid */}
        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(7, 1fr)",
          gridAutoRows: "minmax(110px, auto)",
        }}>
          {LN_CAL_DAYS.map((day, idx) => {
            const inMonth = day <= 30;
            const events = inMonth ? (eventsByDay[day] || []) : [];
            return (
              <div key={idx} style={{
                borderRight: (idx + 1) % 7 === 0 ? "none" : "1px solid var(--live-border)",
                borderBottom: idx < 28 ? "1px solid var(--live-border)" : "none",
                padding: "10px 12px",
                minHeight: 110,
                background: inMonth ? "transparent" : "var(--live-banner-bg)",
                opacity: inMonth ? 1 : 0.5,
                display: "flex", flexDirection: "column", gap: 6,
              }}>
                <div style={{
                  fontSize: 12, fontWeight: 600,
                  color: inMonth ? "var(--live-heading)" : "var(--live-muted)",
                }}>{inMonth ? day : ""}</div>
                {events.map((e, i) => {
                  const c = LN_PROD_COLORS[e.productoraId];
                  return (
                    <div key={i} style={{
                      background: c.bg,
                      borderLeft: `2px solid ${c.dot}`,
                      borderRadius: 4,
                      padding: "4px 7px",
                      fontSize: 11.5,
                      lineHeight: 1.3,
                      color: c.fg,
                    }}>
                      <div style={{ fontWeight: 600 }}>{e.artist}</div>
                      <div style={{ opacity: 0.75 }}>{e.venue}</div>
                    </div>
                  );
                })}
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Pane 4 — Aggregated Tickets / sales
// ─────────────────────────────────────────────────────────────
function LNTicketingPane() {
  // Sales rows (per productora)
  const rows = LN_PRODUCTORAS.map((p) => {
    // Synthetic but coherent — capacity ~ shows × ~22k seats avg
    const capacity = p.shows * 22000;
    const sold = Math.round(capacity * (p.id === "productora-1" ? 0.91 : p.id === "dale-play" ? 0.84 : 0.71));
    const grossPerTicket = p.id === "productora-1" ? 78 : p.id === "dale-play" ? 92 : 64;
    const gross = sold * grossPerTicket;
    return { ...p, capacity, sold, gross, sellThru: sold / capacity };
  });

  const totalCapacity = rows.reduce((s, r) => s + r.capacity, 0);
  const totalSold     = rows.reduce((s, r) => s + r.sold, 0);
  const totalGross    = rows.reduce((s, r) => s + r.gross, 0);
  const avgSellThru   = totalSold / totalCapacity;

  const sellThruPill = (n) => {
    let bg, fg;
    if (n >= 0.85)      { bg = "#E3F3E3"; fg = "#1F6B2F"; }
    else if (n >= 0.70) { bg = "#FBE8D0"; fg = "#8A5A1B"; }
    else if (n >= 0.50) { bg = "#E5E2F3"; fg = "#4A3E9E"; }
    else                { bg = "#F5DADA"; fg = "#8E2323"; }
    return (
      <span style={{
        display: "inline-block", padding: "3px 10px",
        background: bg, color: fg, borderRadius: 4,
        fontSize: 11.5, fontWeight: 500,
      }}>{Math.round(n * 100)}%</span>
    );
  };

  return (
    <div style={{ padding: "32px 48px 48px", overflow: "auto", height: "100%" }}>
      <LNPaneHeader
        title="Ticketing"
        subtitle="Aggregated ticket sales across all productoras — current cycle."
      />

      <LNMetrics items={[
        { label: "Tickets sold",    value: totalSold.toLocaleString(),                        icon: "ticket" },
        { label: "Capacity",        value: totalCapacity.toLocaleString(),                    icon: "users" },
        { label: "Avg. sell-thru",  value: Math.round(avgSellThru * 100) + "%",               icon: "bar-chart-3" },
        { label: "Gross sales",     value: fmtEUR(totalGross),                                icon: "trending-up" },
      ]} />

      <div style={{
        background: "var(--live-card)",
        border: "1px solid var(--live-border)",
        borderRadius: 10, overflow: "hidden",
      }}>
        <div style={{
          display: "grid",
          gridTemplateColumns: "1.4fr 90px 1fr 1fr 110px 1fr",
          padding: "11px 20px",
          background: "var(--live-banner-bg)",
          borderBottom: "1px solid var(--live-border)",
          fontSize: 11, fontWeight: 600,
          color: "var(--live-muted)",
          textTransform: "uppercase", letterSpacing: "0.04em",
        }}>
          <div>Productora</div>
          <div>Shows</div>
          <div>Sold</div>
          <div>Capacity</div>
          <div>Sell-thru</div>
          <div>Gross</div>
        </div>
        {rows.map((r, i) => (
          <div key={r.id} style={{
            display: "grid",
            gridTemplateColumns: "1.4fr 90px 1fr 1fr 110px 1fr",
            padding: "16px 20px",
            borderTop: i === 0 ? "none" : "1px solid var(--live-border)",
            alignItems: "center", fontSize: 13,
          }}>
            <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
              <div style={{
                width: 26, height: 26, borderRadius: 6,
                background: r.swatch, flexShrink: 0,
                border: "1px solid var(--live-border)",
              }} />
              <div style={{ fontWeight: 600, color: "var(--live-heading)" }}>{r.name}</div>
            </div>
            <div style={{ color: "var(--live-body)", fontVariantNumeric: "tabular-nums" }}>{r.shows}</div>
            <div style={{ color: "var(--live-body)", fontVariantNumeric: "tabular-nums" }}>{r.sold.toLocaleString()}</div>
            <div style={{ color: "var(--live-body)", fontVariantNumeric: "tabular-nums" }}>{r.capacity.toLocaleString()}</div>
            <div>{sellThruPill(r.sellThru)}</div>
            <div style={{ color: "var(--live-heading)", fontWeight: 600, fontVariantNumeric: "tabular-nums" }}>{fmtEUR(r.gross)}</div>
          </div>
        ))}
        {/* Totals */}
        <div style={{
          display: "grid",
          gridTemplateColumns: "1.4fr 90px 1fr 1fr 110px 1fr",
          padding: "14px 20px",
          borderTop: "1px solid var(--live-border)",
          background: "var(--live-banner-bg)",
          alignItems: "center", fontSize: 13,
        }}>
          <div style={{ fontWeight: 700, color: "var(--live-heading)", textTransform: "uppercase", fontSize: 11, letterSpacing: "0.04em" }}>Total</div>
          <div style={{ fontWeight: 700, color: "var(--live-heading)", fontVariantNumeric: "tabular-nums" }}>
            {rows.reduce((s, r) => s + r.shows, 0)}
          </div>
          <div style={{ fontWeight: 700, color: "var(--live-heading)", fontVariantNumeric: "tabular-nums" }}>{totalSold.toLocaleString()}</div>
          <div style={{ fontWeight: 700, color: "var(--live-heading)", fontVariantNumeric: "tabular-nums" }}>{totalCapacity.toLocaleString()}</div>
          <div>{sellThruPill(avgSellThru)}</div>
          <div style={{ fontWeight: 700, color: "var(--live-heading)", fontVariantNumeric: "tabular-nums" }}>{fmtEUR(totalGross)}</div>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Per-productora P&L detail (drill-down from aggregated table).
// Shown only inside the Live Nation workspace.
// ─────────────────────────────────────────────────────────────

// Last 4 months of monthly P&L per productora (synthetic but coherent w/ YTD totals)
const LN_PRODUCTORA_MONTHS = {
  "dale-play": [
    { period: "March 2026",    revenue: 3420900, costs: 2180440, status: "closed" },
    { period: "February 2026", revenue: 2980120, costs: 1990210, status: "closed" },
    { period: "January 2026",  revenue: 2140800, costs: 1640080, status: "closed" },
    { period: "December 2025", revenue: 1870440, costs: 1210030, status: "closed" },
    { period: "April 2026",    revenue: 1120600, costs:  780220, status: "in-progress" },
  ],
  "productora-1": [
    { period: "March 2026",    revenue: 5420400, costs: 3520100, status: "closed" },
    { period: "February 2026", revenue: 4880200, costs: 3120800, status: "closed" },
    { period: "January 2026",  revenue: 3920100, costs: 2640200, status: "closed" },
    { period: "December 2025", revenue: 2840500, costs: 2120800, status: "closed" },
    { period: "April 2026",    revenue: 1860100, costs: 1080300, status: "in-progress" },
  ],
  "productora-2": [
    { period: "March 2026",    revenue: 2120300, costs: 1480200, status: "closed" },
    { period: "February 2026", revenue: 1840200, costs: 1320100, status: "closed" },
    { period: "January 2026",  revenue: 1560180, costs: 1180400, status: "closed" },
    { period: "December 2025", revenue: 1140800, costs:  920100, status: "closed" },
    { period: "April 2026",    revenue:  580400, costs:  220500, status: "in-progress" },
  ],
};

// Sample shows per productora — drill into Show Detail
const LN_PRODUCTORA_SHOWS = {
  "dale-play": [
    { id: "s1", artist: "Bad Bunny",     date: "13/02/2026", venue: "River Plate",       sold: 86420,  revenue: 7950640, costs: 5120300 },
    { id: "s2", artist: "Duki",          date: "07/03/2026", venue: "Movistar Arena",    sold: 14200,  revenue:  980400, costs:  610200 },
    { id: "s3", artist: "Nicki Nicole",  date: "21/03/2026", venue: "Hipódromo Palermo", sold: 38400,  revenue: 2840100, costs: 1820400 },
    { id: "s4", artist: "Bizarrap",      date: "04/04/2026", venue: "Estadio Vélez",     sold: 42100,  revenue:  710060, costs:  690000 },
  ],
  "productora-1": [
    { id: "o1", artist: "Karol G",        date: "04/06/2026", venue: "Foro Sol",            sold: 65800, revenue: 5840200, costs: 3920100 },
    { id: "o2", artist: "Peso Pluma",     date: "09/06/2026", venue: "Foro Sol",            sold: 58200, revenue: 4520100, costs: 2980400 },
    { id: "o3", artist: "Rosalía",        date: "12/06/2026", venue: "Palacio Deportes",    sold: 19400, revenue: 2140600, costs: 1340200 },
    { id: "o4", artist: "Maluma",         date: "17/06/2026", venue: "Auditorio Nacional",  sold:  9800, revenue: 1480200, costs:  920400 },
    { id: "o5", artist: "Grupo Frontera", date: "23/06/2026", venue: "Foro Sol",            sold: 52100, revenue: 3920100, costs: 2640100 },
    { id: "o6", artist: "Fuerza Regida",  date: "28/06/2026", venue: "Estadio Azteca",      sold: 78400, revenue: 1020200, costs:  680000 },
  ],
  "productora-2": [
    { id: "m1", artist: "Manuel Turizo",   date: "06/06/2026", venue: "Movistar Arena BO",     sold: 14200, revenue: 1180400, costs:  720100 },
    { id: "m2", artist: "Sebastián Yatra", date: "14/06/2026", venue: "Coliseo Puerto Rico",   sold: 12600, revenue: 1480200, costs: 1020400 },
    { id: "m3", artist: "Juanes",          date: "21/06/2026", venue: "Movistar Arena CO",     sold: 11800, revenue: 1320100, costs:  920400 },
    { id: "m4", artist: "Camilo",          date: "29/06/2026", venue: "Coliseo MedPlus",       sold: 10400, revenue:  920400, costs:  610200 },
  ],
};

function LNProductoraDetailPane({ productoraId, onBack, onOpenShow }) {
  const p = LN_PRODUCTORAS.find((x) => x.id === productoraId) || LN_PRODUCTORAS[0];
  const months = LN_PRODUCTORA_MONTHS[p.id] || [];
  const shows  = LN_PRODUCTORA_SHOWS[p.id]  || [];

  const totalProfit = p.revenue - p.costs;

  useEffectLN(() => { if (window.lucide) window.lucide.createIcons(); }, [p.id]);

  const fmtN = (n) => "€ " + n.toLocaleString("en-US", { maximumFractionDigits: 0 });

  return (
    <div style={{ padding: "32px 48px 48px", overflow: "auto", height: "100%" }}>
      {/* Breadcrumb + back */}
      <div style={{
        display: "flex", alignItems: "center", gap: 8,
        fontSize: 12, color: "var(--live-muted)",
        marginBottom: 14,
      }}>
        <button onClick={onBack} style={{
          appearance: "none", border: "none", background: "transparent",
          padding: 0, cursor: "pointer",
          display: "inline-flex", alignItems: "center", gap: 5,
          color: "var(--live-muted)", fontSize: 12, fontFamily: "var(--font-sans)",
          transition: "color 140ms ease-out",
        }}
        onMouseEnter={(e) => (e.currentTarget.style.color = "var(--live-heading)")}
        onMouseLeave={(e) => (e.currentTarget.style.color = "var(--live-muted)")}
        >
          <i data-lucide="arrow-left" style={{ width: 12, height: 12 }} />
          Live Nation · P&L
        </button>
        <span style={{ opacity: 0.5 }}>/</span>
        <span style={{ color: "var(--live-heading)", fontWeight: 500 }}>{p.name}</span>
      </div>

      {/* Header w/ swatch + name */}
      <div style={{
        display: "flex", alignItems: "center", gap: 14,
        marginBottom: 24,
      }}>
        <div style={{
          width: 44, height: 44, borderRadius: 8,
          background: p.swatch, flexShrink: 0,
          border: "1px solid var(--live-border)",
        }} />
        <div>
          <h1 style={{
            fontFamily: "var(--font-sans)",
            fontSize: 22, fontWeight: 700,
            letterSpacing: "-0.015em",
            color: "var(--live-heading)",
            margin: 0, marginBottom: 4,
          }}>{p.name} · P&L</h1>
          <p style={{ fontSize: 13, color: "var(--live-muted)", margin: 0 }}>
            {p.region} · {p.shows} shows YTD
          </p>
        </div>
      </div>

      <LNMetrics items={[
        { label: "Revenue YTD", value: fmtN(p.revenue),               icon: "trending-up" },
        { label: "Costs YTD",   value: fmtN(p.costs),                 icon: "trending-down" },
        { label: "Profit YTD",  value: fmtN(totalProfit),             icon: "wallet" },
        { label: "Margin",      value: fmtPct(p.revenue, p.costs),    icon: "percent" },
      ]} />

      {/* Monthly breakdown — same shape as the original Dale Play P&L table */}
      <div style={{
        fontSize: 12, fontWeight: 600, color: "var(--live-muted)",
        textTransform: "uppercase", letterSpacing: "0.06em",
        margin: "8px 0 12px",
      }}>
        Month-by-month
      </div>
      <div style={{
        background: "var(--live-card)",
        border: "1px solid var(--live-border)",
        borderRadius: 10, overflow: "hidden",
        marginBottom: 32,
      }}>
        <div style={{
          display: "grid",
          gridTemplateColumns: "1.2fr 1fr 1fr 110px 140px",
          padding: "11px 20px",
          background: "var(--live-banner-bg)",
          borderBottom: "1px solid var(--live-border)",
          fontSize: 11, fontWeight: 600,
          color: "var(--live-muted)",
          textTransform: "uppercase", letterSpacing: "0.04em",
        }}>
          <div>Period</div>
          <div>Revenue</div>
          <div>Costs</div>
          <div>Margin</div>
          <div style={{ textAlign: "right" }}>Status</div>
        </div>
        {months.map((r, i) => (
          <div key={i} style={{
            display: "grid",
            gridTemplateColumns: "1.2fr 1fr 1fr 110px 140px",
            padding: "14px 20px",
            borderTop: i === 0 ? "none" : "1px solid var(--live-border)",
            alignItems: "center", fontSize: 13,
          }}>
            <div style={{ fontWeight: 600, color: "var(--live-heading)" }}>{r.period}</div>
            <div style={{ color: "var(--live-body)", fontVariantNumeric: "tabular-nums" }}>{fmtN(r.revenue)}</div>
            <div style={{ color: "var(--live-body)", fontVariantNumeric: "tabular-nums" }}>{fmtN(r.costs)}</div>
            <div style={{ color: "var(--live-body)", fontVariantNumeric: "tabular-nums" }}>{fmtPct(r.revenue, r.costs)}</div>
            <div style={{ textAlign: "right" }}>
              <span style={{
                display: "inline-flex", alignItems: "center", gap: 6,
                fontSize: 11.5, fontWeight: 500,
                padding: "3px 10px", borderRadius: 999,
                background: r.status === "closed" ? "var(--live-pill-closed-bg)" : "var(--live-pill-open-bg)",
                color:      r.status === "closed" ? "var(--live-pill-closed-fg)" : "var(--live-pill-open-fg)",
              }}>
                {r.status === "closed" ? "Closed" : "In progress"}
              </span>
            </div>
          </div>
        ))}
      </div>

      {/* Shows table */}
      <div style={{
        fontSize: 12, fontWeight: 600, color: "var(--live-muted)",
        textTransform: "uppercase", letterSpacing: "0.06em",
        margin: "8px 0 12px",
      }}>
        Shows
      </div>
      <div style={{
        background: "var(--live-card)",
        border: "1px solid var(--live-border)",
        borderRadius: 10, overflow: "hidden",
      }}>
        <div style={{
          display: "grid",
          gridTemplateColumns: "1.4fr 110px 1.1fr 90px 1fr 1fr 90px 60px",
          padding: "11px 20px",
          background: "var(--live-banner-bg)",
          borderBottom: "1px solid var(--live-border)",
          fontSize: 11, fontWeight: 600,
          color: "var(--live-muted)",
          textTransform: "uppercase", letterSpacing: "0.04em",
        }}>
          <div>Show</div>
          <div>Date</div>
          <div>Venue</div>
          <div>Sold</div>
          <div>Revenue</div>
          <div>Costs</div>
          <div>Margin</div>
          <div></div>
        </div>
        {shows.map((s, i) => (
          <div
            key={s.id}
            onClick={() => onOpenShow && onOpenShow(s)}
            style={{
              display: "grid",
              gridTemplateColumns: "1.4fr 110px 1.1fr 90px 1fr 1fr 90px 60px",
              padding: "14px 20px",
              borderTop: i === 0 ? "none" : "1px solid var(--live-border)",
              alignItems: "center", fontSize: 13,
              cursor: "pointer",
              transition: "background 140ms ease-out",
            }}
            onMouseEnter={(e) => (e.currentTarget.style.background = "var(--live-row-hover)")}
            onMouseLeave={(e) => (e.currentTarget.style.background = "transparent")}
          >
            <div style={{ fontWeight: 600, color: "var(--live-heading)" }}>{s.artist}</div>
            <div style={{ color: "var(--live-body)" }}>{s.date}</div>
            <div style={{ color: "var(--live-body)" }}>{s.venue}</div>
            <div style={{ color: "var(--live-body)", fontVariantNumeric: "tabular-nums" }}>{s.sold.toLocaleString()}</div>
            <div style={{ color: "var(--live-body)", fontVariantNumeric: "tabular-nums" }}>{fmtN(s.revenue)}</div>
            <div style={{ color: "var(--live-body)", fontVariantNumeric: "tabular-nums" }}>{fmtN(s.costs)}</div>
            <div style={{ color: "var(--live-heading)", fontWeight: 600, fontVariantNumeric: "tabular-nums" }}>
              {fmtPct(s.revenue, s.costs)}
            </div>
            <div style={{ display: "flex", justifyContent: "flex-end" }}>
              <i data-lucide="chevron-right" style={{ width: 14, height: 14, color: "var(--live-muted)" }} />
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, {
  LN_PRODUCTORAS,
  LNProductorasPane, LNAggregatedPLPane, LNCalendarPane, LNTicketingPane,
  LNProductoraDetailPane,
});