// Malbec Live — Venues table + create modal
// Mirrors Shows pane structure; two-step create modal.

const { useState: useStateVen, useEffect: useEffectVen } = React;

function VenueTypePill({ type }) {
  const map = {
    Estadio:     { bg: "#E3F3E3", fg: "#1F6B2F" },
    Microestadio:{ bg: "#FBE8D0", fg: "#8A5A1B" },
    Teatro:      { bg: "#F7E1E1", fg: "#8E3A3A" },
    Club:        { bg: "#E5E2F3", fg: "#4A3E9E" },
  };
  const s = map[type] || { 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,
    }}>{type}</span>
  );
}

function ArmadosCell({ count }) {
  return (
    <div style={{ display: "inline-flex", alignItems: "center", gap: 0 }}>
      <span style={{
        height: 28, padding: "0 12px",
        display: "inline-flex", alignItems: "center",
        background: "var(--live-banner-bg)",
        border: "1px solid var(--live-border)",
        borderRight: "none",
        borderTopLeftRadius: 6, borderBottomLeftRadius: 6,
        fontSize: 12.5, color: "var(--live-body)",
      }}>{count} Armados</span>
      <button style={{
        height: 28, width: 28,
        display: "inline-grid", placeItems: "center",
        background: "var(--live-card)",
        border: "1px solid var(--live-border)",
        borderTopRightRadius: 6, borderBottomRightRadius: 6,
        cursor: "pointer", color: "var(--live-muted)",
      }}>
        <i data-lucide="plus" style={{ width: 12, height: 12 }} />
      </button>
    </div>
  );
}

function VenueSegmented({ value, onChange }) {
  return (
    <div style={{
      display: "inline-flex", padding: 3,
      background: "var(--live-banner-bg)",
      border: "1px solid var(--live-border)", borderRadius: 8,
    }}>
      {["Active", "Archived"].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",
          }}>{o}</button>
        );
      })}
    </div>
  );
}

function VenueProgressBars({ step }) {
  return (
    <div style={{ display: "flex", gap: 8, marginBottom: 28 }}>
      <div style={{ flex: 1, height: 3, borderRadius: 2, background: "var(--live-primary)" }} />
      <div style={{ flex: 1, height: 3, borderRadius: 2, background: step === 2 ? "var(--live-primary)" : "#E4E2DF" }} />
    </div>
  );
}

function VenueField({ label, children }) {
  return (
    <div>
      <div style={{ fontSize: 13, fontWeight: 500, color: "var(--live-heading)", marginBottom: 6 }}>{label}</div>
      {children}
    </div>
  );
}

function VenueTextField({ value, onChange, placeholder }) {
  return (
    <input value={value} onChange={(e) => onChange(e.target.value)} placeholder={placeholder}
      style={{
        width: "100%", height: 40, padding: "0 14px",
        background: "var(--live-card)",
        border: "1px solid var(--live-border)", borderRadius: 8,
        fontSize: 13, color: "var(--live-heading)",
        fontFamily: "var(--font-sans)", outline: "none",
        boxSizing: "border-box",
      }}
    />
  );
}

function VenueSelectField({ value, onChange, placeholder, options }) {
  const [open, setOpen] = useStateVen(false);
  return (
    <div style={{ position: "relative" }}>
      <button type="button" onClick={() => setOpen(!open)} style={{
        width: "100%", height: 40, padding: "0 14px",
        background: "var(--live-card)",
        border: "1px solid var(--live-border)", borderRadius: 8,
        fontSize: 13, color: value ? "var(--live-heading)" : "var(--live-muted)",
        fontFamily: "var(--font-sans)", textAlign: "left", cursor: "pointer",
        display: "flex", alignItems: "center", justifyContent: "space-between",
      }}>
        <span>{value || placeholder}</span>
        <i data-lucide="chevron-down" style={{ width: 14, height: 14, color: "var(--live-muted)" }} />
      </button>
      {open && (
        <div style={{
          position: "absolute", top: 44, left: 0, right: 0, zIndex: 20,
          background: "var(--live-card)", border: "1px solid var(--live-border)",
          borderRadius: 8, boxShadow: "0 12px 28px rgba(9,14,25,0.1)", padding: 4,
        }}>
          {options.map((opt) => (
            <button key={opt} onClick={() => { onChange(opt); setOpen(false); }} style={{
              display: "block", width: "100%", padding: "8px 12px",
              background: "transparent", border: "none", borderRadius: 6,
              fontSize: 13, color: "var(--live-body)", textAlign: "left",
              cursor: "pointer", fontFamily: "var(--font-sans)",
            }}
              onMouseEnter={(e) => e.currentTarget.style.background = "var(--live-row-hover)"}
              onMouseLeave={(e) => e.currentTarget.style.background = "transparent"}
            >{opt}</button>
          ))}
        </div>
      )}
    </div>
  );
}

function CreateVenueModal({ open, onClose, onCreate }) {
  const [step, setStep] = useStateVen(1);
  const [name, setName] = useStateVen("");
  const [venueType, setVenueType] = useStateVen("");
  const [address, setAddress] = useStateVen("");
  const [file, setFile] = useStateVen(null);
  const [drag, setDrag] = useStateVen(false);

  useEffectVen(() => {
    if (!open) {
      setStep(1); setName(""); setVenueType(""); setAddress(""); setFile(null); setDrag(false);
    }
  }, [open]);

  useEffectVen(() => { if (open && window.lucide) window.lucide.createIcons(); }, [open, step]);

  if (!open) return null;

  const handleNext = () => {
    if (step === 1) setStep(2);
    else { onCreate && onCreate({ name, venueType, address, file }); onClose(); }
  };

  return (
    <div role="dialog" aria-modal="true" onClick={onClose} style={{
      position: "fixed", inset: 0, background: "rgba(20,22,32,0.45)",
      display: "grid", placeItems: "center", padding: 32, zIndex: 80,
      backdropFilter: "blur(2px)",
      animation: "modal-fade 180ms ease-out",
    }}>
      <div onClick={(e) => e.stopPropagation()} style={{
        width: "100%", maxWidth: 420,
        background: "var(--live-card)",
        border: "1px solid var(--live-border)", borderRadius: 16,
        padding: "28px 32px 24px",
        boxShadow: "0 24px 60px rgba(9,14,25,0.18), 0 2px 8px rgba(9,14,25,0.06)",
        fontFamily: "var(--font-sans)",
        animation: "modal-pop 220ms cubic-bezier(0.22,1,0.36,1)",
      }}>
        <VenueProgressBars step={step} />

        <h2 style={{
          fontSize: 19, fontWeight: 700, color: "var(--live-heading)",
          letterSpacing: "-0.015em", margin: 0, marginBottom: 20,
        }}>
          {step === 1 ? "Enter your venues basic information" : "Enter your venues presets"}
        </h2>

        {step === 1 ? (
          <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
            <VenueField label="Name">
              <VenueTextField value={name} onChange={setName} placeholder="Name" />
            </VenueField>
            <VenueField label="Venue type">
              <VenueSelectField value={venueType} onChange={setVenueType}
                placeholder="Select"
                options={["Estadio", "Microestadio", "Teatro", "Club", "Arena"]}
              />
            </VenueField>
            <VenueField label="Address">
              <VenueTextField value={address} onChange={setAddress} placeholder="Av. Juan B. Justo 1235" />
            </VenueField>
          </div>
        ) : (
          <div>
            <div style={{ fontSize: 13, color: "var(--live-body)", marginBottom: 10 }}>Upload your preset sheet</div>
            <label
              onDragOver={(e) => { e.preventDefault(); setDrag(true); }}
              onDragLeave={() => setDrag(false)}
              onDrop={(e) => {
                e.preventDefault(); setDrag(false);
                if (e.dataTransfer.files[0]) setFile(e.dataTransfer.files[0]);
              }}
              style={{
                display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center",
                gap: 10, padding: "34px 20px",
                border: `1.5px dashed ${drag ? "var(--live-primary)" : "var(--live-border-strong)"}`,
                borderRadius: 10,
                background: drag ? "rgba(17, 27, 68, 0.03)" : "var(--live-banner-bg)",
                cursor: "pointer", transition: "all 160ms ease-out",
              }}
            >
              <div style={{
                width: 40, height: 40, borderRadius: 999,
                background: "var(--live-card)",
                border: "1px solid var(--live-border)",
                display: "grid", placeItems: "center", color: "var(--live-muted)",
              }}>
                <i data-lucide="upload" style={{ width: 16, height: 16 }} />
              </div>
              <div style={{ textAlign: "center", fontSize: 12.5, color: "var(--live-muted)", lineHeight: 1.5 }}>
                {file ? file.name : <>Add your .xslx, .csv, .tsv<br/>or numbers file</>}
              </div>
              <input type="file" accept=".xlsx,.csv,.tsv,.numbers" style={{ display: "none" }}
                onChange={(e) => setFile(e.target.files[0])}
              />
            </label>
          </div>
        )}

        <div style={{
          display: "flex", alignItems: "center", justifyContent: "space-between",
          marginTop: 22,
        }}>
          <button onClick={step === 1 ? onClose : () => setStep(1)} style={{
            height: 38, padding: "0 18px",
            background: "var(--live-card)",
            border: "1px solid var(--live-border)", borderRadius: 8,
            fontSize: 13, fontWeight: 500, color: "var(--live-heading)",
            cursor: "pointer", fontFamily: "var(--font-sans)",
          }}>{step === 1 ? "Cancel" : "Back"}</button>
          <button onClick={handleNext} style={{
            height: 38, padding: "0 22px",
            background: "var(--live-primary)", color: "#fff",
            border: "none", borderRadius: 8,
            fontSize: 13, fontWeight: 500, cursor: "pointer",
            fontFamily: "var(--font-sans)",
          }}>{step === 2 ? "Create" : "Next"}</button>
        </div>
      </div>
    </div>
  );
}

function VenuesPane() {
  const [filter, setFilter] = useStateVen("Active");
  const [search, setSearch] = useStateVen("");
  const [page, setPage] = useStateVen(1);
  const [open, setOpen] = useStateVen(false);

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

  const rows = [
    { name: "River Plate",            type: "Estadio",      addr: "Av. Pres. Figueroa Alcorta 7597", arm: 1 },
    { name: "Velez",                  type: "Estadio",      addr: "Humboldt 450, CABA",              arm: 4 },
    { name: "Campo Argentino de Polo",type: "Estadio",      addr: "Humboldt 450, CABA",              arm: 3 },
    { name: "Hipódromo de Palermo",   type: "Estadio",      addr: "Humboldt 450, CABA",              arm: 4 },
    { name: "Movistar Arena",         type: "Microestadio", addr: "Humboldt 450, CABA",              arm: 6 },
    { name: "Gran Rex",               type: "Teatro",       addr: "Humboldt 450, CABA",              arm: 2 },
  ];

  const cols = "minmax(220px,1.4fr) 160px minmax(240px,1.6fr) 160px 80px";

  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 venue…"
            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 }}>
          <VenueSegmented value={filter} onChange={setFilter} />
          <button onClick={() => setOpen(true)} 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)",
          }}>
            <i data-lucide="plus" style={{ width: 14, height: 14 }} />
            Crear venue
          </button>
        </div>
      </div>

      {/* Table */}
      <div style={{
        background: "var(--live-card)", border: "1px solid var(--live-border)",
        borderRadius: 10, overflow: "hidden",
      }}>
        <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="building" style={{ width: 13, height: 13 }} /> Name
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
            <i data-lucide="list" style={{ width: 13, height: 13 }} /> Tipo de Venue
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
            <i data-lucide="map-pin" style={{ width: 13, height: 13 }} /> Dirección
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
            <i data-lucide="layout" style={{ width: 13, height: 13 }} /> Armados
          </div>
          <div style={{ textAlign: "right" }}>Acciones</div>
        </div>

        {rows.map((r, i) => (
          <div key={i} style={{
            display: "grid", gridTemplateColumns: cols,
            padding: "14px 20px", borderTop: i === 0 ? "none" : "1px solid var(--live-border)",
            alignItems: "center", fontSize: 13,
            transition: "background 120ms 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)" }}>{r.name}</div>
            <div><VenueTypePill type={r.type} /></div>
            <div style={{ color: "var(--live-body)" }}>{r.addr}</div>
            <div><ArmadosCell count={r.arm} /></div>
            <div style={{ textAlign: "right" }}>
              <button style={{
                appearance: "none", background: "transparent", border: "none",
                color: "var(--live-muted)", width: 28, height: 28, borderRadius: 6,
                cursor: "pointer", display: "inline-grid", placeItems: "center",
              }}>
                <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, fontSize: 13,
      }}>
        <span style={{ color: "var(--live-body)", display: "inline-flex", alignItems: "center", gap: 6, padding: "6px 10px" }}>
          <i data-lucide="chevron-left" style={{ width: 14, height: 14 }} /> Previous
        </span>
        {[1,2,3].map((n) => (
          <button key={n} onClick={() => setPage(n)} style={{
            width: 32, height: 32,
            background: page === n ? "var(--live-card)" : "transparent",
            border: page === n ? "1px solid var(--live-border)" : "1px solid transparent",
            borderRadius: 6, fontWeight: page === n ? 600 : 500,
            color: page === n ? "var(--live-heading)" : "var(--live-body)",
            cursor: "pointer", fontFamily: "var(--font-sans)", fontSize: 13,
          }}>{n}</button>
        ))}
        <span style={{ padding: "0 6px", color: "var(--live-muted)" }}>…</span>
        <span style={{ color: "var(--live-body)", display: "inline-flex", alignItems: "center", gap: 6, padding: "6px 10px" }}>
          Next <i data-lucide="chevron-right" style={{ width: 14, height: 14 }} />
        </span>
      </div>

      <CreateVenueModal open={open} onClose={() => setOpen(false)} onCreate={() => {}} />
    </div>
  );
}

Object.assign(window, { VenuesPane });