// Yumla — Screens 4, 5, 6 (Pick, Confirm, Post-order)

const { T: T2, fontHead: fH2, fontUI: fU2, Icon: Icon2 } = window.YumlaScreens1;

// ── Screen 4: The Pick ──────────────────────────────────────────────
function PickScreen({ ctx, onBack, onOrder, onAlt, onWhy, onRefine, onRegenerate }) {
  const D = window.YUMLA.DISHES;
  const pick = D[ctx.pick];
  const a1 = D[ctx.alt1];
  const a2 = D[ctx.alt2];

  return (
    <div style={pickStyles.root}>
      <div style={pickStyles.topbar}>
        <button style={pickStyles.iconBtn} onClick={onBack}><Icon2 name="arrow-left" size={18} color={T2.ink} /></button>
        <div style={pickStyles.title}>Yumla picked</div>
        <button style={pickStyles.iconBtn} onClick={onRegenerate}><Icon2 name="refresh" size={18} color={T2.ink} /></button>
      </div>

      <div style={pickStyles.scroll}>
        {/* Hero pick card */}
        <div style={pickStyles.hero}>
          <div style={pickStyles.heroImgWrap}>
            <img src={pick.img} alt={pick.name} style={pickStyles.heroImg} />
            <div style={pickStyles.pickBadge}>
              <span style={{ width: 6, height: 6, borderRadius: 3, background: T2.mango }} />
              The pick
            </div>
          </div>

          <div style={pickStyles.heroBody}>
            <h2 style={pickStyles.dishName}>{pick.name}</h2>
            <div style={pickStyles.metaRow}>
              <span>{pick.restaurant}</span>
              <span style={pickStyles.dot}>·</span>
              <span style={pickStyles.metaInline}><Icon2 name="star" size={12} color={T2.mango} /> {pick.rating}</span>
              <span style={pickStyles.dot}>·</span>
              <span>{pick.eta} min</span>
            </div>

            <div style={pickStyles.reason}>"{ctx.pickReason}"</div>

            <div style={pickStyles.priceRow}>
              <span style={pickStyles.price}>₹{pick.price}</span>
              <button style={pickStyles.whyLink} onClick={onWhy}>
                <Icon2 name="info" size={14} color={T2.muted} stroke={1.8} />
                why this?
              </button>
            </div>

            <button style={pickStyles.orderBtn} onClick={onOrder}>
              Order — ₹{pick.price}
            </button>
          </div>
        </div>

        {/* Alternates */}
        <div style={pickStyles.altHeader}>Or, if you're not in the mood</div>

        <AltCard dish={a1} reason={ctx.alt1Reason} kicker="Lighter" onOrder={() => onAlt(ctx.alt1)} />
        <AltCard dish={a2} reason={ctx.alt2Reason} kicker="Wildcard" onOrder={() => onAlt(ctx.alt2)} />

        <button style={pickStyles.refineLink} onClick={onRefine}>
          None of these → tell Yumla more →
        </button>

        <div style={{ height: 16 }} />
      </div>
    </div>
  );
}

function AltCard({ dish, reason, kicker, onOrder }) {
  return (
    <div style={pickStyles.altCard}>
      <img src={dish.img} alt={dish.name} style={pickStyles.altImg} />
      <div style={pickStyles.altBody}>
        <div style={pickStyles.altKicker}>{kicker}</div>
        <div style={pickStyles.altName}>{dish.name}</div>
        <div style={pickStyles.altMeta}>{dish.restaurant} · ₹{dish.price} · {dish.eta} min</div>
        <div style={pickStyles.altReason}>"{reason}"</div>
        <button style={pickStyles.altBtn} onClick={onOrder}>Order ₹{dish.price}</button>
      </div>
    </div>
  );
}

const pickStyles = {
  root: { width: "100%", height: "100%", background: T2.cream, display: "flex", flexDirection: "column", fontFamily: fU2, color: T2.ink },
  topbar: { display: "flex", alignItems: "center", justifyContent: "space-between", padding: "12px 18px 10px", borderBottom: `1px solid ${T2.line}` },
  iconBtn: { width: 36, height: 36, borderRadius: 999, background: T2.white, border: `1px solid ${T2.line}`, display: "grid", placeItems: "center", cursor: "pointer" },
  title: { fontSize: 14, color: T2.ink2, fontWeight: 600 },
  scroll: { flex: 1, overflowY: "auto", padding: "16px 18px 24px" },
  hero: { background: T2.white, borderRadius: 24, overflow: "hidden", boxShadow: "0 4px 24px rgba(31,31,31,0.06)", border: `1px solid ${T2.line}` },
  heroImgWrap: { position: "relative", height: 220 },
  heroImg: { width: "100%", height: "100%", objectFit: "cover", display: "block" },
  pickBadge: {
    position: "absolute", top: 14, left: 14,
    background: "rgba(31,31,31,0.85)", color: T2.white,
    padding: "6px 12px", borderRadius: 999,
    fontSize: 11, fontWeight: 600, letterSpacing: 0.6, textTransform: "uppercase",
    display: "inline-flex", alignItems: "center", gap: 8,
    backdropFilter: "blur(8px)",
  },
  heroBody: { padding: "20px 22px 22px" },
  dishName: { fontFamily: fH2, fontSize: 30, fontWeight: 500, letterSpacing: -0.6, lineHeight: 1.05, margin: 0 },
  metaRow: { display: "flex", alignItems: "center", gap: 6, marginTop: 8, fontSize: 13, color: T2.ink2, fontWeight: 500 },
  dot: { color: T2.muted2 },
  metaInline: { display: "inline-flex", alignItems: "center", gap: 4 },
  reason: { fontFamily: fH2, fontStyle: "italic", fontSize: 17, lineHeight: 1.4, color: T2.ink2, marginTop: 18, textWrap: "pretty" },
  priceRow: { display: "flex", alignItems: "center", justifyContent: "space-between", marginTop: 18 },
  price: { fontSize: 22, fontWeight: 600, fontFamily: fU2, color: T2.ink },
  whyLink: { background: "transparent", border: "none", color: T2.muted, fontSize: 13, display: "inline-flex", alignItems: "center", gap: 4, cursor: "pointer", fontFamily: fU2, fontWeight: 500 },
  orderBtn: {
    width: "100%", height: 56, borderRadius: 16, marginTop: 16,
    background: T2.mango, border: "none",
    fontSize: 16, fontWeight: 600, fontFamily: fU2, color: T2.ink,
    cursor: "pointer", boxShadow: "0 6px 18px rgba(232, 156, 18, 0.25)",
  },
  altHeader: { marginTop: 28, marginBottom: 10, padding: "0 4px", fontSize: 13, color: T2.muted, fontWeight: 500 },
  altCard: {
    display: "flex", gap: 14, background: T2.white, borderRadius: 20,
    padding: 14, marginBottom: 10, border: `1px solid ${T2.line}`,
  },
  altImg: { width: 96, height: 120, borderRadius: 14, objectFit: "cover", flex: "0 0 96px" },
  altBody: { flex: 1, display: "flex", flexDirection: "column", minWidth: 0 },
  altKicker: { fontSize: 10, letterSpacing: 1.2, textTransform: "uppercase", color: T2.mangoDark, fontWeight: 700, marginBottom: 2 },
  altName: { fontFamily: fH2, fontSize: 19, fontWeight: 500, letterSpacing: -0.3, lineHeight: 1.1 },
  altMeta: { fontSize: 12, color: T2.muted, marginTop: 3, fontWeight: 500 },
  altReason: { fontFamily: fH2, fontStyle: "italic", fontSize: 13, color: T2.ink2, marginTop: 8, lineHeight: 1.35, textWrap: "pretty" },
  altBtn: {
    marginTop: "auto", alignSelf: "flex-start",
    background: T2.cream, border: `1px solid ${T2.line}`,
    padding: "8px 14px", borderRadius: 999,
    fontSize: 12, fontWeight: 600, color: T2.ink,
    cursor: "pointer", fontFamily: fU2,
  },
  refineLink: {
    width: "100%", marginTop: 16, padding: "16px 0",
    background: "transparent", border: "none",
    color: T2.muted, fontSize: 13, fontFamily: fU2, fontWeight: 500,
    cursor: "pointer",
  },
};

// ── Why-this sheet ─────────────────────────────────────────────────
function WhySheet({ ctx, onClose }) {
  const signals = [
    { label: "Wednesday lunch · sunny", weight: "context" },
    { label: "You ordered biryani 3× in 30 days", weight: "history" },
    { label: "Empire is your most-ordered place", weight: "loyalty" },
    { label: "28 min ETA fits your usual lunch window", weight: "timing" },
    { label: "Light dinner Tuesday — body's ready for richer", weight: "rhythm" },
  ];
  return (
    <div style={sheetStyles.backdrop} onClick={onClose}>
      <div style={sheetStyles.sheet} onClick={(e) => e.stopPropagation()}>
        <div style={sheetStyles.handle} />
        <div style={sheetStyles.sheetTitle}>Why this pick?</div>
        <div style={sheetStyles.sheetSub}>The signals Yumla used</div>
        <div style={{ marginTop: 20, display: "flex", flexDirection: "column", gap: 12 }}>
          {signals.map((s, i) => (
            <div key={i} style={sheetStyles.signalRow}>
              <div style={sheetStyles.signalNum}>{i + 1}</div>
              <div style={{ flex: 1 }}>
                <div style={sheetStyles.signalLabel}>{s.label}</div>
                <div style={sheetStyles.signalWeight}>{s.weight}</div>
              </div>
            </div>
          ))}
        </div>
        <button style={sheetStyles.sheetClose} onClick={onClose}>Got it</button>
      </div>
    </div>
  );
}

// ── Screen 5: Confirm Order (bottom sheet) ─────────────────────────
function ConfirmSheet({ ctx, onClose, onConfirm }) {
  const D = window.YUMLA.DISHES;
  const pick = D[ctx.pick];
  return (
    <div style={sheetStyles.backdrop} onClick={onClose}>
      <div style={sheetStyles.sheet} onClick={(e) => e.stopPropagation()}>
        <div style={sheetStyles.handle} />
        {/* dish row */}
        <div style={sheetStyles.row}>
          <img src={pick.img} alt={pick.name} style={sheetStyles.thumb} />
          <div style={{ flex: 1 }}>
            <div style={sheetStyles.thumbName}>{pick.name}</div>
            <div style={sheetStyles.thumbMeta}>{pick.restaurant}</div>
          </div>
          <div style={sheetStyles.priceTag}>₹{pick.price}</div>
        </div>

        {/* delivery */}
        <div style={sheetStyles.kvBlock}>
          <div style={sheetStyles.kvRow}>
            <div>
              <div style={sheetStyles.kvLabel}>Delivering to</div>
              <div style={sheetStyles.kvValue}>Home · Indiranagar</div>
            </div>
            <button style={sheetStyles.kvLink}>change</button>
          </div>
          <div style={{ height: 1, background: T2.line, margin: "14px 0" }} />
          <div style={sheetStyles.kvRow}>
            <div>
              <div style={sheetStyles.kvLabel}>Arriving by</div>
              <div style={sheetStyles.kvValueAccent}>{ctx.eta}</div>
            </div>
            <Icon2 name="clock" size={20} color={T2.muted2} />
          </div>
        </div>

        {/* payment */}
        <div style={sheetStyles.payRow}>
          <div>
            <div style={sheetStyles.kvLabel}>Payment</div>
            <div style={sheetStyles.kvValue}>Cash on delivery</div>
          </div>
          <div style={sheetStyles.soonTag}>online soon</div>
        </div>

        <button style={sheetStyles.confirmBtn} onClick={onConfirm}>
          Place order →
        </button>
        <button style={sheetStyles.cancelLink} onClick={onClose}>cancel</button>
      </div>
    </div>
  );
}

const sheetStyles = {
  backdrop: {
    position: "absolute", inset: 0,
    background: "rgba(20,18,14,0.5)",
    display: "flex", alignItems: "flex-end",
    animation: "yumla-fade .25s ease",
    zIndex: 50,
  },
  sheet: {
    width: "100%", background: T2.cream,
    borderRadius: "26px 26px 0 0",
    padding: "12px 22px 28px",
    fontFamily: fU2, color: T2.ink,
    animation: "yumla-slide .32s cubic-bezier(.2,.8,.2,1)",
    boxShadow: "0 -10px 40px rgba(0,0,0,0.15)",
    maxHeight: "90%",
    overflowY: "auto",
  },
  handle: { width: 40, height: 4, borderRadius: 2, background: T2.line, margin: "0 auto 18px" },
  row: { display: "flex", alignItems: "center", gap: 12 },
  thumb: { width: 56, height: 56, borderRadius: 14, objectFit: "cover" },
  thumbName: { fontFamily: fH2, fontSize: 18, fontWeight: 500, letterSpacing: -0.3 },
  thumbMeta: { fontSize: 12, color: T2.muted, marginTop: 2 },
  priceTag: { fontSize: 18, fontWeight: 600 },
  kvBlock: { marginTop: 18, padding: 16, background: T2.white, borderRadius: 16, border: `1px solid ${T2.line}` },
  kvRow: { display: "flex", alignItems: "center", justifyContent: "space-between" },
  kvLabel: { fontSize: 11, color: T2.muted, fontWeight: 600, letterSpacing: 0.6, textTransform: "uppercase" },
  kvValue: { fontSize: 15, fontWeight: 500, marginTop: 3 },
  kvValueAccent: { fontFamily: fH2, fontSize: 22, fontWeight: 500, marginTop: 3, letterSpacing: -0.3 },
  kvLink: { background: "transparent", border: "none", color: T2.mangoDark, fontSize: 13, cursor: "pointer", fontFamily: fU2, fontWeight: 600 },
  payRow: { marginTop: 12, padding: 16, background: T2.white, borderRadius: 16, border: `1px solid ${T2.line}`, display: "flex", alignItems: "center", justifyContent: "space-between" },
  soonTag: { fontSize: 10, padding: "4px 8px", borderRadius: 6, background: T2.cream2, color: T2.muted, fontWeight: 600, letterSpacing: 0.4, textTransform: "uppercase" },
  confirmBtn: {
    width: "100%", height: 58, marginTop: 20,
    background: T2.mango, border: "none", borderRadius: 18,
    fontSize: 17, fontWeight: 600, color: T2.ink, fontFamily: fU2,
    cursor: "pointer", boxShadow: "0 6px 22px rgba(232, 156, 18, 0.3)",
  },
  cancelLink: {
    display: "block", margin: "12px auto 0", padding: "8px 18px",
    background: "transparent", border: "none",
    color: T2.muted, fontSize: 13, cursor: "pointer", fontFamily: fU2,
  },
  sheetTitle: { fontFamily: fH2, fontSize: 24, fontWeight: 500, letterSpacing: -0.4 },
  sheetSub: { fontSize: 13, color: T2.muted, marginTop: 4 },
  signalRow: { display: "flex", gap: 14, alignItems: "flex-start", padding: "12px 14px", background: T2.white, borderRadius: 14, border: `1px solid ${T2.line}` },
  signalNum: {
    width: 24, height: 24, borderRadius: 999, background: T2.cream,
    display: "grid", placeItems: "center", flex: "0 0 24px",
    fontSize: 11, fontWeight: 700, color: T2.ink2,
    border: `1px solid ${T2.line}`,
  },
  signalLabel: { fontSize: 14, fontWeight: 500, lineHeight: 1.3 },
  signalWeight: { fontSize: 11, color: T2.muted2, marginTop: 2, letterSpacing: 0.4, textTransform: "uppercase", fontWeight: 600 },
  sheetClose: {
    width: "100%", height: 52, marginTop: 22,
    background: T2.ink, border: "none", borderRadius: 16,
    color: T2.white, fontSize: 15, fontWeight: 600, fontFamily: fU2, cursor: "pointer",
  },
};

// ── Screen 6: Post-order ────────────────────────────────────────────
function PostOrderScreen({ ctx, onTrack, onReturnHome }) {
  const D = window.YUMLA.DISHES;
  const pick = D[ctx.pick];
  const [ready, setReady] = useState(false);
  useEffect(() => {
    const t = setTimeout(() => setReady(true), 80);
    return () => clearTimeout(t);
  }, []);

  return (
    <div style={postStyles.root}>
      <div style={postStyles.center}>
        <div style={{
          ...postStyles.checkWrap,
          transform: ready ? "scale(1)" : "scale(0.6)",
          opacity: ready ? 1 : 0,
        }}>
          <svg width="72" height="72" viewBox="0 0 72 72">
            <circle cx="36" cy="36" r="34" fill={T2.mango} />
            <path
              d="M22 36 l11 11 l19 -22"
              fill="none"
              stroke={T2.ink}
              strokeWidth="4"
              strokeLinecap="round"
              strokeLinejoin="round"
              style={{
                strokeDasharray: 60,
                strokeDashoffset: ready ? 0 : 60,
                transition: "stroke-dashoffset .55s ease .15s",
              }}
            />
          </svg>
        </div>

        <h1 style={postStyles.headline}>On it!</h1>
        <p style={postStyles.sub}>Empire is firing up your biryani. Tracking live in Swiggy.</p>

        <div style={postStyles.orderCard}>
          <img src={pick.img} alt={pick.name} style={postStyles.orderImg} />
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={postStyles.orderName}>{pick.name}</div>
            <div style={postStyles.orderMeta}>{pick.restaurant}</div>
            <div style={postStyles.orderRow}>
              <span style={postStyles.orderPrice}>₹{pick.price}</span>
              <span style={postStyles.orderEta}>Arriving {ctx.eta}</span>
            </div>
          </div>
        </div>

        <button style={postStyles.trackBtn} onClick={onTrack}>
          Track in Swiggy →
        </button>
        <button style={postStyles.returnBtn} onClick={onReturnHome}>
          What's dinner looking like?
        </button>

        <p style={postStyles.learnLine}>Yumla learns from every order. Today's pick will make tomorrow's smarter.</p>
      </div>
    </div>
  );
}

const postStyles = {
  root: { width: "100%", height: "100%", background: T2.cream, fontFamily: fU2, color: T2.ink, overflowY: "auto" },
  center: { display: "flex", flexDirection: "column", alignItems: "center", padding: "60px 22px 32px", textAlign: "center" },
  checkWrap: { transition: "all .45s cubic-bezier(.2,.8,.2,1)", marginBottom: 18 },
  headline: { fontFamily: fH2, fontSize: 44, fontWeight: 500, letterSpacing: -0.8, margin: "8px 0 6px" },
  sub: { fontSize: 14, color: T2.muted, lineHeight: 1.4, maxWidth: 280, margin: 0 },
  orderCard: {
    marginTop: 28, width: "100%", display: "flex", gap: 12,
    padding: 12, background: T2.white, borderRadius: 18,
    border: `1px solid ${T2.line}`, textAlign: "left",
  },
  orderImg: { width: 66, height: 66, borderRadius: 12, objectFit: "cover", flex: "0 0 66px" },
  orderName: { fontFamily: fH2, fontSize: 17, fontWeight: 500, letterSpacing: -0.3 },
  orderMeta: { fontSize: 11, color: T2.muted, marginTop: 1, fontWeight: 500 },
  orderRow: { marginTop: 6, display: "flex", justifyContent: "space-between", alignItems: "center" },
  orderPrice: { fontSize: 14, fontWeight: 600 },
  orderEta: { fontSize: 11, color: T2.mangoDark, fontWeight: 600, letterSpacing: 0.3, textTransform: "uppercase" },
  trackBtn: {
    width: "100%", height: 56, marginTop: 24,
    background: T2.ink, border: "none", borderRadius: 16,
    color: T2.white, fontSize: 16, fontWeight: 600, fontFamily: fU2,
    cursor: "pointer",
  },
  returnBtn: {
    width: "100%", height: 50, marginTop: 10,
    background: "transparent", border: `1px solid ${T2.line}`, borderRadius: 16,
    color: T2.ink, fontSize: 14, fontWeight: 500, fontFamily: fU2,
    cursor: "pointer",
  },
  learnLine: {
    fontFamily: fH2, fontStyle: "italic", fontSize: 12,
    color: T2.muted, marginTop: 22, lineHeight: 1.4, maxWidth: 280,
    textWrap: "pretty",
  },
};

window.YumlaScreens2 = { PickScreen, ConfirmSheet, WhySheet, PostOrderScreen };