// Malbec Live — Onboarding flow
// Three screens (Welcome / Theme / Subscribe) → Dashboard preview.
// Cross-fade between steps. Theme selection actually flips the UI.

const { useState, useEffect, useRef } = React;

// ─────────────────────────────────────────────────────────────
// Shared primitives
// ─────────────────────────────────────────────────────────────

function Grape({ size = 56, color = "var(--live-primary)" }) {
  // Real isotipo PNG — pixel-art grape cluster.
  const h = Math.round((size * 122) / 86);
  return (
    <img
      src="assets/grape-logo.png"
      alt=""
      width={size}
      height={h}
      style={{
        display: "block",
        imageRendering: "pixelated",
        width: size,
        height: h,
      }}
    />
  );
}

function GrapeSvgLegacy({ size = 56, color = "var(--live-primary)" }) {
  return (
    <svg
      width={size}
      height={(size * 40) / 32}
      viewBox="0 0 32 40"
      shapeRendering="crispEdges"
      style={{ color, display: "block" }}
      aria-hidden="true"
    >
      <g fill="currentColor">
        <rect x="15" y="0" width="3" height="2" />
        <rect x="14" y="2" width="5" height="2" />
        <rect x="10" y="3" width="3" height="2" />
        <rect x="8" y="5" width="6" height="2" />
        <rect x="7" y="7" width="4" height="2" />
        <rect x="13" y="6" width="3" height="3" />
        <rect x="17" y="6" width="3" height="3" />
        <rect x="20" y="7" width="3" height="3" />
        <rect x="10" y="9" width="3" height="3" />
        <rect x="14" y="9" width="3" height="3" />
        <rect x="18" y="9" width="3" height="3" />
        <rect x="22" y="10" width="3" height="3" />
        <rect x="7" y="12" width="3" height="3" />
        <rect x="11" y="12" width="3" height="3" />
        <rect x="15" y="12" width="3" height="3" />
        <rect x="19" y="12" width="3" height="3" />
        <rect x="23" y="13" width="3" height="3" />
        <rect x="9" y="15" width="3" height="3" />
        <rect x="13" y="15" width="3" height="3" />
        <rect x="17" y="15" width="3" height="3" />
        <rect x="21" y="15" width="3" height="3" />
        <rect x="11" y="18" width="3" height="3" />
        <rect x="15" y="18" width="3" height="3" />
        <rect x="19" y="18" width="3" height="3" />
        <rect x="13" y="21" width="3" height="3" />
        <rect x="17" y="21" width="3" height="3" />
        <rect x="15" y="24" width="3" height="3" />
        <rect x="12" y="27" width="2" height="2" />
        <rect x="18" y="27" width="2" height="2" />
        <rect x="15" y="29" width="2" height="2" />
      </g>
    </svg>
  );
}

function PrimaryButton({ children, onClick, full, style }) {
  const [hover, setHover] = useState(false);
  const [press, setPress] = useState(false);
  return (
    <button
      onClick={onClick}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => { setHover(false); setPress(false); }}
      onMouseDown={() => setPress(true)}
      onMouseUp={() => setPress(false)}
      style={{
        appearance: "none",
        border: "none",
        background: press
          ? "var(--live-primary-press)"
          : hover
          ? "var(--live-primary-hover)"
          : "var(--live-primary)",
        color: "#FFFFFF",
        fontFamily: "var(--font-sans)",
        fontSize: 14,
        fontWeight: 500,
        letterSpacing: "-0.005em",
        height: 44,
        padding: full ? "0 24px" : "0 56px",
        minWidth: full ? undefined : 212,
        width: full ? "100%" : undefined,
        borderRadius: 8,
        cursor: "pointer",
        transition: "background 160ms ease-out",
        boxShadow: hover ? "0 4px 14px rgba(9,14,25,0.12)" : "0 1px 2px rgba(9,14,25,0.06)",
        ...style,
      }}
    >
      {children}
    </button>
  );
}

// ─────────────────────────────────────────────────────────────
// Pagination dots
// ─────────────────────────────────────────────────────────────

function Dots({ total, index, onJump }) {
  return (
    <div
      style={{
        position: "absolute",
        bottom: 56,
        left: 0,
        right: 0,
        display: "flex",
        justifyContent: "center",
        gap: 12,
      }}
    >
      {Array.from({ length: total }).map((_, i) => {
        const active = i === index;
        const past = i < index;
        return (
          <button
            key={i}
            onClick={() => onJump && onJump(i)}
            aria-label={`Go to step ${i + 1}`}
            style={{
              width: 10,
              height: 10,
              borderRadius: 999,
              border: "none",
              padding: 0,
              cursor: onJump ? "pointer" : "default",
              background: active || past ? "var(--live-primary)" : "var(--live-dot-inactive)",
              opacity: active ? 1 : past ? 0.55 : 0.4,
              transition: "opacity 180ms ease-out, background 180ms ease-out",
            }}
          />
        );
      })}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Screen 1 — Welcome
// ─────────────────────────────────────────────────────────────

function ScreenWelcome({ onNext }) {
  return (
    <div style={{ textAlign: "center", maxWidth: 640 }}>
      <div style={{ display: "flex", justifyContent: "center", marginBottom: 28 }}>
        <Grape size={56} />
      </div>
      <h1
        style={{
          fontFamily: "var(--font-sans)",
          fontWeight: 700,
          fontSize: 44,
          lineHeight: 1.1,
          letterSpacing: "-0.025em",
          color: "var(--live-heading)",
          margin: 0,
          marginBottom: 18,
        }}
      >
        Welcome to{" "}
        <span style={{ color: "var(--live-primary)", letterSpacing: "-0.07em" }}>
          <span style={{ fontWeight: 500 }}>Malbec</span><span style={{ fontStyle: "italic", fontWeight: 300 }}>Live</span>
        </span>
      </h1>
      <p
        style={{
          fontFamily: "var(--font-sans)",
          fontWeight: 400,
          fontSize: 15,
          lineHeight: 1.55,
          color: "var(--live-body)",
          margin: "0 auto 36px",
          maxWidth: 520,
          textWrap: "pretty",
        }}
      >
        Malbec Live is a purpose-built system designed specifically to handle operations
        in the industry of live entertainment.
      </p>
      <div style={{ display: "flex", justifyContent: "center" }}>
        <PrimaryButton onClick={onNext}>Get started</PrimaryButton>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Screen 2 — Theme picker
// ─────────────────────────────────────────────────────────────

function ThemeThumb({ variant, selected, onClick }) {
  const isLight = variant === "light";
  const border = selected ? "var(--live-primary)" : "transparent";
  const ring = selected ? "0 0 0 1px var(--live-primary)" : "none";
  return (
    <button
      onClick={onClick}
      style={{
        appearance: "none",
        background: selected ? "var(--live-thumb-selected-bg)" : "transparent",
        border: "none",
        borderRadius: 12,
        padding: 20,
        cursor: "pointer",
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        gap: 16,
        transition: "background 160ms ease-out",
      }}
    >
      <div
        style={{
          width: 172,
          height: 112,
          background: isLight ? "#FFFFFF" : "#0E1320",
          borderRadius: 8,
          border: `2px solid ${border}`,
          boxShadow: selected ? ring : "0 1px 3px rgba(9,14,25,0.08)",
          overflow: "hidden",
          position: "relative",
          transition: "border-color 160ms ease-out, box-shadow 160ms ease-out",
        }}
      >
        {/* Little mock of a list */}
        <MiniMock dark={!isLight} />
      </div>
      <div
        style={{
          fontFamily: "var(--font-sans)",
          fontSize: 15,
          fontWeight: 500,
          color: selected ? "var(--live-primary)" : "var(--live-heading)",
        }}
      >
        {isLight ? "Light" : "Dark"}
      </div>
    </button>
  );
}

function MiniMock({ dark }) {
  const bar = dark ? "rgba(255,255,255,0.08)" : "#F1F0EE";
  const text = dark ? "rgba(255,255,255,0.18)" : "#E4E2DF";
  const accent = "var(--live-primary)";
  return (
    <div style={{ padding: 10, display: "flex", gap: 8, height: "100%" }}>
      {/* sidebar */}
      <div style={{ width: 34, display: "flex", flexDirection: "column", gap: 4 }}>
        <div style={{ height: 6, background: accent, borderRadius: 2, width: "70%" }} />
        <div style={{ height: 4, background: bar, borderRadius: 2 }} />
        <div style={{ height: 4, background: bar, borderRadius: 2 }} />
        <div style={{ height: 4, background: bar, borderRadius: 2, width: "60%" }} />
        <div style={{ height: 4, background: bar, borderRadius: 2, width: "80%" }} />
      </div>
      {/* content */}
      <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: 4 }}>
        <div style={{ height: 5, background: text, borderRadius: 2, width: "40%" }} />
        <div style={{ height: 3, background: bar, borderRadius: 2, width: "70%", marginBottom: 4 }} />
        {Array.from({ length: 5 }).map((_, i) => (
          <div key={i} style={{ display: "flex", gap: 3, alignItems: "center" }}>
            <div style={{ width: 4, height: 4, background: accent, borderRadius: 1 }} />
            <div style={{ height: 3, background: text, borderRadius: 2, flex: 1 }} />
            <div style={{ height: 3, background: bar, borderRadius: 2, width: 16 }} />
          </div>
        ))}
      </div>
    </div>
  );
}

function ScreenTheme({ theme, setTheme, onNext }) {
  return (
    <div style={{ textAlign: "center", maxWidth: 640 }}>
      <h1
        style={{
          fontFamily: "var(--font-sans)",
          fontWeight: 600,
          fontSize: 30,
          lineHeight: 1.2,
          letterSpacing: "-0.015em",
          color: "var(--live-heading)",
          margin: 0,
          marginBottom: 12,
        }}
      >
        Choose your theme
      </h1>
      <p
        style={{
          fontFamily: "var(--font-sans)",
          fontSize: 15,
          color: "var(--live-body)",
          margin: "0 auto 36px",
        }}
      >
        Change your theme at any time via the command menu or settings.
      </p>
      <div style={{ display: "flex", justifyContent: "center", gap: 12, marginBottom: 36 }}>
        <ThemeThumb variant="light" selected={theme === "light"} onClick={() => setTheme("light")} />
        <ThemeThumb variant="dark" selected={theme === "dark"} onClick={() => setTheme("dark")} />
      </div>
      <div style={{ display: "flex", justifyContent: "center" }}>
        <PrimaryButton onClick={onNext}>Continue</PrimaryButton>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Screen 3 — Subscribe
// ─────────────────────────────────────────────────────────────

function Toggle({ on, onChange }) {
  return (
    <button
      onClick={() => onChange(!on)}
      style={{
        appearance: "none",
        border: "none",
        padding: 0,
        cursor: "pointer",
        width: 42,
        height: 24,
        borderRadius: 999,
        background: on ? "var(--live-primary)" : "var(--live-toggle-off)",
        position: "relative",
        transition: "background 180ms ease-out",
        flexShrink: 0,
      }}
      aria-pressed={on}
    >
      <span
        style={{
          position: "absolute",
          top: 2,
          left: on ? 20 : 2,
          width: 20,
          height: 20,
          borderRadius: 999,
          background: "#FFFFFF",
          transition: "left 180ms ease-out",
          boxShadow: "0 1px 3px rgba(9,14,25,0.2)",
        }}
      />
    </button>
  );
}

function SubscribeRow({ title, desc, on, onChange, hideToggle }) {
  return (
    <div
      style={{
        display: "flex",
        alignItems: "flex-start",
        justifyContent: "space-between",
        gap: 24,
        padding: "16px 0",
      }}
    >
      <div>
        <div
          style={{
            fontFamily: "var(--font-sans)",
            fontSize: 14,
            fontWeight: 600,
            color: "var(--live-heading)",
            marginBottom: 4,
          }}
        >
          {title}
        </div>
        <div
          style={{
            fontFamily: "var(--font-sans)",
            fontSize: 13,
            color: "var(--live-body)",
            lineHeight: 1.5,
          }}
        >
          {desc}
        </div>
      </div>
      {!hideToggle && <Toggle on={on} onChange={onChange} />}
    </div>
  );
}

function SocialRow() {
  // Inline SVG — lucide doesn't ship brand glyphs, so we draw them.
  const size = 14;
  const Icons = {
    instagram: (
      <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <rect x="3" y="3" width="18" height="18" rx="5"/>
        <circle cx="12" cy="12" r="4"/>
        <circle cx="17.5" cy="6.5" r="0.8" fill="currentColor"/>
      </svg>
    ),
    x: (
      <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor">
        <path d="M18.244 2H21.5l-7.5 8.57L22.75 22h-6.84l-5.36-6.87L4.34 22H1.08l8.02-9.17L1 2h7.01l4.84 6.37L18.24 2Zm-2.4 18h1.86L7.24 4H5.28l10.56 16Z"/>
      </svg>
    ),
    linkedin: (
      <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor">
        <path d="M4.98 3.5A2.5 2.5 0 1 1 5 8.5a2.5 2.5 0 0 1 0-5ZM3 9.75h4v11H3v-11Zm7 0h3.83v1.5h.05c.53-.95 1.83-1.95 3.77-1.95 4.03 0 4.78 2.55 4.78 5.87v5.58h-4v-4.95c0-1.18-.02-2.7-1.68-2.7-1.68 0-1.94 1.28-1.94 2.6v5.05h-3.98v-11Z"/>
      </svg>
    ),
    youtube: (
      <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor">
        <path d="M22.54 6.42a2.78 2.78 0 0 0-1.95-2C18.88 4 12 4 12 4s-6.88 0-8.59.42a2.78 2.78 0 0 0-1.95 2A29 29 0 0 0 1 12a29 29 0 0 0 .46 5.58 2.78 2.78 0 0 0 1.95 2C5.12 20 12 20 12 20s6.88 0 8.59-.42a2.78 2.78 0 0 0 1.95-2A29 29 0 0 0 23 12a29 29 0 0 0-.46-5.58ZM9.75 15.02V8.98L15.5 12l-5.75 3.02Z"/>
      </svg>
    ),
  };
  const keys = Object.keys(Icons);
  return (
    <div style={{ display: "flex", gap: 8, marginTop: 4 }}>
      {keys.map((name) => (
        <a
          key={name}
          href="#"
          aria-label={name}
          onClick={(e) => e.preventDefault()}
          style={{
            width: 32,
            height: 32,
            borderRadius: 6,
            background: "var(--live-social-bg)",
            color: "var(--live-body)",
            display: "grid",
            placeItems: "center",
            textDecoration: "none",
            transition: "background 160ms ease-out, color 160ms ease-out",
          }}
          onMouseEnter={(e) => {
            e.currentTarget.style.background = "var(--live-primary)";
            e.currentTarget.style.color = "#FFFFFF";
          }}
          onMouseLeave={(e) => {
            e.currentTarget.style.background = "var(--live-social-bg)";
            e.currentTarget.style.color = "var(--live-body)";
          }}
        >
          {Icons[name]}
        </a>
      ))}
    </div>
  );
}

function ScreenSubscribe({ subs, setSubs, onNext }) {
  // re-render lucide icons on mount
  useEffect(() => { if (window.lucide) window.lucide.createIcons(); }, []);

  return (
    <div style={{ textAlign: "center", maxWidth: 560, width: "100%" }}>
      <h1
        style={{
          fontFamily: "var(--font-sans)",
          fontWeight: 600,
          fontSize: 30,
          lineHeight: 1.2,
          letterSpacing: "-0.015em",
          color: "var(--live-heading)",
          margin: 0,
          marginBottom: 12,
        }}
      >
        Stay up to date
      </h1>
      <p
        style={{
          fontFamily: "var(--font-sans)",
          fontSize: 15,
          color: "var(--live-body)",
          margin: "0 auto 28px",
        }}
      >
        Subscribe to our changelog and marketing releases.
      </p>
      <div
        style={{
          background: "var(--live-card)",
          border: "1px solid var(--live-border)",
          borderRadius: 10,
          padding: "8px 28px",
          marginBottom: 32,
          textAlign: "left",
          boxShadow: "0 1px 3px rgba(9,14,25,0.04)",
        }}
      >
        <SubscribeRow
          title="Subscribe to changelog"
          desc="Bi-weekly email about new features and improvements"
          on={subs.changelog}
          onChange={(v) => setSubs({ ...subs, changelog: v })}
        />
        <div style={{ height: 1, background: "var(--live-border)" }} />
        <SubscribeRow
          title="Subscribe to marketing and onboarding emails"
          desc="Occasional messages to help you get the most out of Malbec Live"
          on={subs.marketing}
          onChange={(v) => setSubs({ ...subs, marketing: v })}
        />
        <div style={{ height: 1, background: "var(--live-border)" }} />
        <div
          style={{
            display: "flex",
            alignItems: "flex-start",
            justifyContent: "space-between",
            gap: 24,
            padding: "16px 0",
          }}
        >
          <div>
            <div
              style={{
                fontFamily: "var(--font-sans)",
                fontSize: 14,
                fontWeight: 600,
                color: "var(--live-heading)",
                marginBottom: 4,
              }}
            >
              Follow us on our socials
            </div>
            <div
              style={{
                fontFamily: "var(--font-sans)",
                fontSize: 13,
                color: "var(--live-body)",
                lineHeight: 1.5,
              }}
            >
              Stay up-to-date on new features and best practices
            </div>
          </div>
          <SocialRow />
        </div>
      </div>
      <div style={{ display: "flex", justifyContent: "center" }}>
        <PrimaryButton onClick={onNext}>Continue</PrimaryButton>
      </div>
    </div>
  );
}

Object.assign(window, {
  Grape, PrimaryButton, Dots,
  ScreenWelcome, ScreenTheme, ScreenSubscribe,
});