// Malbec Live — Shows table screen
// Matches the Desktop-8 reference: toolbar, data table with avatars/pills, pagination.

const { useState: useStateShows, useEffect: useEffectShows } = React;

// Flat SVG avatar placeholders — light tint circles with initials.
function ArtistAvatar({ name }) {
  const seeds = {
    "Bad Bunny":   { bg: "#F3D9C4", fg: "#8B5E3C" },
    "Rels B":      { bg: "#E9DCC9", fg: "#6B5A3F" },
    "Nicki Nicole":{ bg: "#2D2A33", fg: "#F2E7D5" },
  };
  const s = seeds[name] || { bg: "#E4E2DF", fg: "#3F3F46" };
  const initials = name.split(" ").map((p) => p[0]).slice(0, 2).join("");
  return (
    <div
      style={{
        width: 32,
        height: 32,
        borderRadius: 999,
        background: s.bg,
        color: s.fg,
        display: "grid",
        placeItems: "center",
        fontSize: 11,
        fontWeight: 600,
        flexShrink: 0,
        border: "1px solid var(--live-border)",
      }}
    >
      {initials}
    </div>
  );
}

function StatusPill({ status }) {
  const map = {
    Open:    { bg: "#E3F3E3", fg: "#1F6B2F" },
    Closed:  { bg: "#F5DADA", fg: "#8E2323" },
    Private: { bg: "#E5E2F3", fg: "#4A3E9E" },
  };
  const s = map[status] || { bg: "#E4E2DF", fg: "#3F3F46" };
  return (
    <span
      style={{
        display: "inline-block",
        padding: "3px 10px",
        borderRadius: 6,
        background: s.bg,
        color: s.fg,
        fontSize: 12,
        fontWeight: 500,
      }}
    >
      {status}
    </span>
  );
}

function DatePill() {
  return (
    <span
      style={{
        display: "inline-block",
        padding: "2px 8px",
        borderRadius: 4,
        background: "var(--live-banner-bg)",
        border: "1px solid var(--live-border)",
        color: "var(--live-muted)",
        fontSize: 11,
        fontWeight: 500,
        marginLeft: 8,
        whiteSpace: "nowrap",
      }}
    >
      +2 fechas
    </span>
  );
}

function Segmented({ value, onChange, options }) {
  return (
    <div
      style={{
        display: "inline-flex",
        padding: 3,
        background: "var(--live-banner-bg)",
        border: "1px solid var(--live-border)",
        borderRadius: 8,
      }}
    >
      {options.map((o) => {
        const active = o === value;
        return (
          <button
            key={o}
            onClick={() => onChange(o)}
            style={{
              appearance: "none",
              border: "none",
              background: active ? "var(--live-card)" : "transparent",
              color: active ? "var(--live-heading)" : "var(--live-muted)",
              height: 28,
              padding: "0 14px",
              fontSize: 12.5,
              fontWeight: active ? 600 : 500,
              borderRadius: 6,
              cursor: "pointer",
              fontFamily: "var(--font-sans)",
              boxShadow: active ? "0 1px 2px rgba(9,14,25,0.06)" : "none",
              transition: "background 140ms ease-out, color 140ms ease-out",
            }}
          >
            {o}
          </button>
        );
      })}
    </div>
  );
}

function ShowsPane({ onOpenShow }) {
  const [filter, setFilter] = useStateShows("Active");
  const [page, setPage] = useStateShows(2);
  const [search, setSearch] = useStateShows("");
  const [modalOpen, setModalOpen] = useStateShows(false);

  useEffectShows(() => { if (window.lucide) window.lucide.createIcons(); });

  const rows = [
    { artist: "Bad Bunny",    venue: "River",         date: "13/02/2026", extra: true,  status: "Open"   },
    { artist: "Rels B",       venue: "Movistar Arena",date: "13/02/2026", extra: false, status: "Closed" },
    { artist: "Nicki Nicole", venue: "Teatro Colón",  date: "13/02/2026", extra: false, status: "Private"},
    { artist: "Nicki Nicole", venue: "Teatro Colón",  date: "13/02/2026", extra: false, status: "Private"},
    { artist: "Nicki Nicole", venue: "Teatro Colón",  date: "13/02/2026", extra: false, status: "Private"},
    { artist: "Bad Bunny",    venue: "River",         date: "13/02/2026", extra: true,  status: "Open"   },
    { artist: "Nicki Nicole", venue: "Teatro Colón",  date: "13/02/2026", extra: false, status: "Private"},
    { artist: "Rels B",       venue: "Movistar Arena",date: "13/02/2026", extra: false, status: "Closed" },
    { artist: "Nicki Nicole", venue: "Teatro Colón",  date: "13/02/2026", extra: false, status: "Private"},
    { artist: "Nicki Nicole", venue: "Teatro Colón",  date: "13/02/2026", extra: false, status: "Private"},
    { artist: "Bad Bunny",    venue: "River",         date: "13/02/2026", extra: true,  status: "Open"   },
    { artist: "Bad Bunny",    venue: "River",         date: "13/02/2026", extra: true,  status: "Open"   },
  ];

  const cols = "minmax(220px,1.2fr) minmax(180px,1fr) minmax(220px,240px) 130px 90px";

  return (
    <div style={{ padding: "28px 36px 40px", overflow: "auto", height: "100%" }}>
      {/* Toolbar */}
      <div
        style={{
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          marginBottom: 20,
          gap: 16,
        }}
      >
        <div
          style={{
            display: "flex",
            alignItems: "center",
            gap: 10,
            flex: 1,
            maxWidth: 340,
            height: 36,
            padding: "0 12px",
            background: "var(--live-card)",
            border: "1px solid var(--live-border)",
            borderRadius: 8,
          }}
        >
          <i data-lucide="search" style={{ width: 14, height: 14, color: "var(--live-muted)" }} />
          <input
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            placeholder="Search show…"
            style={{
              flex: 1,
              border: "none",
              outline: "none",
              background: "transparent",
              fontFamily: "var(--font-sans)",
              fontSize: 13,
              color: "var(--live-heading)",
              height: "100%",
            }}
          />
        </div>

        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <Segmented value={filter} onChange={setFilter} options={["Active", "Archived"]} />
          <button
            style={{
              appearance: "none",
              border: "none",
              background: "var(--live-primary)",
              color: "#fff",
              height: 36,
              padding: "0 16px",
              fontSize: 13,
              fontWeight: 500,
              borderRadius: 8,
              cursor: "pointer",
              display: "inline-flex",
              alignItems: "center",
              gap: 6,
              fontFamily: "var(--font-sans)",
              boxShadow: "0 1px 2px rgba(9,14,25,0.08)",
              transition: "background 160ms ease-out",
            }}
            onMouseEnter={(e) => (e.currentTarget.style.background = "var(--live-primary-hover)")}
            onMouseLeave={(e) => (e.currentTarget.style.background = "var(--live-primary)")}
            onClick={() => setModalOpen(true)}
          >
            <i data-lucide="plus" style={{ width: 14, height: 14 }} />
            Create Show
          </button>
        </div>
      </div>

      {/* Table */}
      <div
        style={{
          background: "var(--live-card)",
          border: "1px solid var(--live-border)",
          borderRadius: 10,
          overflow: "hidden",
        }}
      >
        {/* Header */}
        <div
          style={{
            display: "grid",
            gridTemplateColumns: cols,
            padding: "12px 20px",
            background: "var(--live-banner-bg)",
            borderBottom: "1px solid var(--live-border)",
            fontSize: 12,
            fontWeight: 500,
            color: "var(--live-muted)",
          }}
        >
          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
            <i data-lucide="users" style={{ width: 13, height: 13 }} />
            Artista
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
            <i data-lucide="map-pin" style={{ width: 13, height: 13 }} />
            Venue
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
            <i data-lucide="calendar" style={{ width: 13, height: 13 }} />
            Dates
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
            <i data-lucide="sliders-horizontal" style={{ width: 13, height: 13 }} />
            Status
          </div>
          <div style={{ textAlign: "right" }}>Acciones</div>
        </div>

        {/* Rows */}
        {rows.map((r, i) => (
          <div key={i} style={{
              display: "grid",
              gridTemplateColumns: cols,
              padding: "12px 20px",
              borderTop: i === 0 ? "none" : "1px solid var(--live-border)",
              alignItems: "center",
              fontSize: 13,
              cursor: "pointer",
              transition: "background 120ms ease-out",
            }}
            onClick={() => onOpenShow && onOpenShow(r)}
            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 }}>
              <ArtistAvatar name={r.artist} />
              <span style={{ fontWeight: 600, color: "var(--live-heading)", whiteSpace: "nowrap" }}>{r.artist}</span>
            </div>
            <div style={{ color: "var(--live-body)" }}>{r.venue}</div>
            <div style={{ color: "var(--live-body)", display: "flex", alignItems: "center", whiteSpace: "nowrap" }}>
              <span>{r.date}</span>
              {r.extra && <DatePill />}
            </div>
            <div>
              <StatusPill status={r.status} />
            </div>
            <div style={{ textAlign: "right" }}>
              <button
                aria-label="More"
                style={{
                  appearance: "none",
                  background: "transparent",
                  border: "none",
                  color: "var(--live-muted)",
                  width: 28,
                  height: 28,
                  borderRadius: 6,
                  cursor: "pointer",
                  display: "inline-grid",
                  placeItems: "center",
                }}
                onMouseEnter={(e) => (e.currentTarget.style.background = "var(--live-banner-bg)")}
                onMouseLeave={(e) => (e.currentTarget.style.background = "transparent")}
              >
                <i data-lucide="more-horizontal" style={{ width: 14, height: 14 }} />
              </button>
            </div>
          </div>
        ))}
      </div>

      {/* Pagination */}
      <div
        style={{
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          gap: 6,
          marginTop: 24,
          fontFamily: "var(--font-sans)",
          fontSize: 13,
        }}
      >
        <PageBtn
          onClick={() => setPage(Math.max(1, page - 1))}
          disabled={page === 1}
          icon="chevron-left"
        >
          Previous
        </PageBtn>
        {[1, 2, 3].map((n) => (
          <PageNum key={n} active={page === n} onClick={() => setPage(n)}>
            {n}
          </PageNum>
        ))}
        <span style={{ padding: "0 6px", color: "var(--live-muted)" }}>…</span>
        <PageBtn
          onClick={() => setPage(Math.min(3, page + 1))}
          disabled={page === 3}
          icon="chevron-right"
          iconRight
        >
          Next
        </PageBtn>
      </div>

      <CreateShowModal
        open={modalOpen}
        onClose={() => setModalOpen(false)}
        onCreate={() => {}}
      />
    </div>
  );
}

function PageBtn({ children, onClick, disabled, icon, iconRight }) {
  return (
    <button
      onClick={onClick}
      disabled={disabled}
      style={{
        appearance: "none",
        background: "transparent",
        border: "none",
        color: disabled ? "var(--live-muted)" : "var(--live-body)",
        padding: "6px 10px",
        fontSize: 13,
        fontWeight: 500,
        borderRadius: 6,
        cursor: disabled ? "default" : "pointer",
        fontFamily: "var(--font-sans)",
        display: "inline-flex",
        alignItems: "center",
        gap: 6,
        opacity: disabled ? 0.5 : 1,
      }}
    >
      {!iconRight && <i data-lucide={icon} style={{ width: 14, height: 14 }} />}
      {children}
      {iconRight && <i data-lucide={icon} style={{ width: 14, height: 14 }} />}
    </button>
  );
}

function PageNum({ children, active, onClick }) {
  return (
    <button
      onClick={onClick}
      style={{
        appearance: "none",
        background: active ? "var(--live-card)" : "transparent",
        border: active ? "1px solid var(--live-border)" : "1px solid transparent",
        color: active ? "var(--live-heading)" : "var(--live-body)",
        width: 32,
        height: 32,
        fontSize: 13,
        fontWeight: active ? 600 : 500,
        borderRadius: 6,
        cursor: "pointer",
        fontFamily: "var(--font-sans)",
        boxShadow: active ? "0 1px 2px rgba(9,14,25,0.06)" : "none",
      }}
    >
      {children}
    </button>
  );
}

function ShowsPaneWithModal() {
  return null;
}

Object.assign(window, { ShowsPane });