// Malbec Live — Create Show modal (v2, matches reference)
// Two-step card: soft gray surface on a soft gray backdrop, split progress bars.

const { useState: useStateModal, useEffect: useEffectModal } = React;

function ProgressBars({ step }) {
  return (
    <div style={{ display: "flex", gap: 16, marginBottom: 36 }}>
      {[1, 2].map((n) => (
        <div
          key={n}
          style={{
            flex: 1,
            height: 3,
            borderRadius: 999,
            background: step >= n ? "var(--live-primary)" : "#DFDEDB",
            transition: "background 180ms ease-out",
          }}
        />
      ))}
    </div>
  );
}

function FieldLabel({ children }) {
  return (
    <label
      style={{
        display: "block",
        fontFamily: "var(--font-sans)",
        fontSize: 15,
        fontWeight: 600,
        color: "#1A1A1F",
        marginBottom: 10,
      }}
    >
      {children}
    </label>
  );
}

function SoftField({ value, onChange, placeholder, type = "text", rightIcon }) {
  const [focus, setFocus] = useStateModal(false);
  return (
    <div
      style={{
        display: "flex",
        alignItems: "center",
        height: 48,
        padding: "0 16px",
        background: "#FAFAF8",
        border: "1px solid " + (focus ? "#1E1562" : "#E4E2DF"),
        borderRadius: 10,
        boxShadow: focus ? "0 0 0 3px rgba(30,21,98,0.10)" : "none",
        transition: "border-color 160ms ease-out, box-shadow 160ms ease-out",
      }}
    >
      <input
        type={type}
        value={value}
        onChange={(e) => onChange(e.target.value)}
        onFocus={() => setFocus(true)}
        onBlur={() => setFocus(false)}
        placeholder={placeholder}
        style={{
          flex: 1,
          height: "100%",
          border: "none",
          outline: "none",
          background: "transparent",
          fontFamily: "var(--font-sans)",
          fontSize: 15,
          color: "#1A1A1F",
        }}
      />
      {rightIcon && (
        <div style={{ display: "grid", placeItems: "center", color: "#1E1562" }}>
          {rightIcon}
        </div>
      )}
    </div>
  );
}

function SoftSelect({ value, onChange, placeholder, options }) {
  const [focus, setFocus] = useStateModal(false);
  return (
    <div style={{ position: "relative" }}>
      <select
        value={value}
        onChange={(e) => onChange(e.target.value)}
        onFocus={() => setFocus(true)}
        onBlur={() => setFocus(false)}
        style={{
          width: "100%",
          height: 48,
          padding: "0 44px 0 16px",
          background: "#FAFAF8",
          border: "1px solid " + (focus ? "#1E1562" : "#E4E2DF"),
          borderRadius: 10,
          fontFamily: "var(--font-sans)",
          fontSize: 15,
          color: value ? "#1A1A1F" : "#9A978F",
          outline: "none",
          boxShadow: focus ? "0 0 0 3px rgba(30,21,98,0.10)" : "none",
          appearance: "none",
          WebkitAppearance: "none",
          cursor: "pointer",
          transition: "border-color 160ms ease-out, box-shadow 160ms ease-out",
        }}
      >
        <option value="" disabled>{placeholder}</option>
        {options.map((o) => <option key={o} value={o}>{o}</option>)}
      </select>
      <svg
        width="14" height="14" viewBox="0 0 24 24" fill="none"
        stroke="#6B6B7A" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
        style={{ position: "absolute", right: 16, top: "50%", transform: "translateY(-50%)", pointerEvents: "none" }}
      >
        <polyline points="6 9 12 15 18 9" />
      </svg>
    </div>
  );
}

function SoftCheckbox({ checked, onChange, label }) {
  return (
    <label
      onClick={() => onChange(!checked)}
      style={{
        display: "inline-flex",
        alignItems: "center",
        gap: 12,
        cursor: "pointer",
        fontFamily: "var(--font-sans)",
        fontSize: 15,
        color: "#1A1A1F",
        userSelect: "none",
        padding: "4px 0",
      }}
    >
      <span
        style={{
          width: 20,
          height: 20,
          borderRadius: 4,
          border: "1.5px solid " + (checked ? "#1E1562" : "#C7C2BD"),
          background: checked ? "#1E1562" : "transparent",
          display: "grid",
          placeItems: "center",
          transition: "all 140ms ease-out",
          flexShrink: 0,
        }}
      >
        {checked && (
          <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
            <path d="M2.5 6.2 L5 8.5 L9.5 3.5" stroke="#fff" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        )}
      </span>
      {label}
    </label>
  );
}

function GhostButton({ children, onClick }) {
  return (
    <button
      onClick={onClick}
      style={{
        appearance: "none",
        height: 46,
        padding: "0 28px",
        minWidth: 130,
        fontSize: 15,
        fontWeight: 500,
        borderRadius: 10,
        cursor: "pointer",
        fontFamily: "var(--font-sans)",
        background: "#FAFAF8",
        color: "#1A1A1F",
        border: "1px solid #E4E2DF",
        transition: "background 140ms ease-out",
      }}
      onMouseEnter={(e) => (e.currentTarget.style.background = "#F1EFEB")}
      onMouseLeave={(e) => (e.currentTarget.style.background = "#FAFAF8")}
    >
      {children}
    </button>
  );
}

function PrimaryButton({ children, onClick }) {
  return (
    <button
      onClick={onClick}
      style={{
        appearance: "none",
        height: 46,
        padding: "0 36px",
        minWidth: 130,
        fontSize: 15,
        fontWeight: 600,
        borderRadius: 10,
        cursor: "pointer",
        fontFamily: "var(--font-sans)",
        background: "#1E1562",
        color: "#fff",
        border: "none",
        boxShadow: "0 1px 3px rgba(9,14,25,0.12)",
        transition: "background 140ms ease-out",
      }}
      onMouseEnter={(e) => (e.currentTarget.style.background = "#171049")}
      onMouseLeave={(e) => (e.currentTarget.style.background = "#1E1562")}
    >
      {children}
    </button>
  );
}

function CalendarIcon() {
  return (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="4" width="18" height="18" rx="2" />
      <path d="M16 2v4M8 2v4M3 10h18" />
    </svg>
  );
}

function CreateShowModal({ open, onClose, onCreate }) {
  const [step, setStep] = useStateModal(1);
  const [legalName, setLegalName] = useStateModal("");
  const [email, setEmail] = useStateModal("");
  const [date, setDate] = useStateModal("");
  const [oficial, setOficial] = useStateModal("");
  const [blue, setBlue] = useStateModal("");
  const [drive, setDrive] = useStateModal("");
  const [priv, setPriv] = useStateModal(false);

  useEffectModal(() => {
    if (!open) {
      setStep(1);
      setLegalName(""); setEmail(""); setDate("");
      setOficial(""); setBlue(""); setDrive(""); setPriv(false);
    }
  }, [open]);

  if (!open) return null;

  const handleNext = () => {
    if (step === 1) setStep(2);
    else {
      onCreate && onCreate({ legalName, email, date, oficial, blue, drive, priv });
      onClose();
    }
  };

  return (
    <div
      role="dialog"
      aria-modal="true"
      onClick={onClose}
      style={{
        position: "fixed",
        inset: 0,
        background: "rgba(239, 237, 235, 0.88)",
        display: "grid",
        placeItems: "center",
        padding: 32,
        zIndex: 80,
        backdropFilter: "blur(4px)",
        animation: "modal-fade 180ms ease-out",
      }}
    >
      <div
        onClick={(e) => e.stopPropagation()}
        style={{
          width: "100%",
          maxWidth: 760,
          background: "#F5F3F0",
          border: "1px solid #E4E2DF",
          borderRadius: 18,
          padding: "40px 48px 40px",
          boxShadow: "0 24px 60px rgba(9,14,25,0.12), 0 2px 8px rgba(9,14,25,0.04)",
          fontFamily: "var(--font-sans)",
          animation: "modal-pop 220ms cubic-bezier(0.22, 1, 0.36, 1)",
        }}
      >
        <ProgressBars step={step} />

        <h2
          style={{
            fontSize: 26,
            fontWeight: 700,
            color: "#1A1A1F",
            letterSpacing: "-0.02em",
            margin: 0,
            marginBottom: 32,
            lineHeight: 1.15,
          }}
        >
          Create new Show
        </h2>

        {step === 1 ? (
          <div style={{ display: "flex", flexDirection: "column", gap: 22 }}>
            <div>
              <FieldLabel>Artist</FieldLabel>
              <SoftSelect
                value={legalName}
                onChange={setLegalName}
                placeholder="Name"
                options={["Bad Bunny", "Rels B", "Nicki Nicole", "La Niebla", "Ana Otero"]}
              />
            </div>
            <div>
              <FieldLabel>Venue</FieldLabel>
              <SoftSelect
                value={email}
                onChange={setEmail}
                placeholder="Select"
                options={["River", "Movistar Arena", "Teatro Col\u00f3n", "La Riviera", "Razzmatazz"]}
              />
            </div>
            <div>
              <FieldLabel>Show type</FieldLabel>
              <SoftSelect
                value={drive}
                onChange={setDrive}
                placeholder="Select"
                options={["Concert", "Festival", "Private event", "Tour date"]}
              />
            </div>
          </div>
        ) : (
          <div style={{ display: "flex", flexDirection: "column", gap: 22 }}>
            <div>
              <FieldLabel>Date</FieldLabel>
              <SoftField value={date} onChange={setDate} placeholder="Choose date" rightIcon={<CalendarIcon />} />
            </div>
            <div>
              <FieldLabel>Valor USD</FieldLabel>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
                <SoftField value={oficial} onChange={setOficial} placeholder="Oficial" />
                <SoftField value={blue} onChange={setBlue} placeholder="Blue" />
              </div>
            </div>
            <div>
              <FieldLabel>Drive Link</FieldLabel>
              <SoftSelect
                value={drive}
                onChange={setDrive}
                placeholder="Short project description"
                options={["Main production folder", "Marketing assets", "Legal & contracts"]}
              />
            </div>
            <SoftCheckbox checked={priv} onChange={setPriv} label="Keep this show private" />
          </div>
        )}

        <div
          style={{
            display: "flex",
            alignItems: "center",
            justifyContent: "space-between",
            marginTop: 40,
          }}
        >
          <GhostButton onClick={step === 1 ? onClose : () => setStep(1)}>
            {step === 1 ? "Cancel" : "Back"}
          </GhostButton>
          <PrimaryButton onClick={handleNext}>
            Next
          </PrimaryButton>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { CreateShowModal });