// Screen 5 — Approval queue
const SUBMISSIONS = [
  { id: 4821, sub: "@quietfan_22",       since: "4 months", ago: "12 minutes ago", tip: 25, prompt: "Indoor portrait, soft afternoon light, casual outfit, looking off-camera, neutral expression.",
    thumb: "linear-gradient(135deg,#3a2820 0%,#7a4d33 100%)", category: "Casual portrait" },
  { id: 4820, sub: "@subscribed_reader", since: "11 months",ago: "1 hour ago",     tip: 0,  prompt: "Bookstore, soft window light, oversized cardigan, holding a paperback, candid mid-conversation.",
    thumb: "linear-gradient(135deg,#2a3445 0%,#5e7390 100%)", category: "Casual portrait" },
  { id: 4819, sub: "@late_to_the_party", since: "2 weeks",  ago: "3 hours ago",    tip: 5,  prompt: "Outdoor, late afternoon, denim jacket, leaning against a brick wall, three-quarter angle.",
    thumb: "linear-gradient(135deg,#3d2d2d 0%,#8a5e58 100%)", category: "Outdoor scene" },
  { id: 4818, sub: "@regular_supporter", since: "1 year",   ago: "yesterday",      tip: 50, prompt: "Studio backdrop, neutral grey, simple black slip dress, three-quarter portrait, soft key light.",
    thumb: "linear-gradient(135deg,#2f2a3e 0%,#5e537d 100%)", category: "Studio lighting" },
  { id: 4817, sub: "@new_here",          since: "3 days",   ago: "yesterday",      tip: 0,  prompt: "Coffee shop window, morning light, knit sweater, holding a ceramic mug, warm mid-tone.",
    thumb: "linear-gradient(135deg,#3a2f25 0%,#806249 100%)", category: "Casual portrait" },
  { id: 4816, sub: "@thatch",            since: "6 months", ago: "2 days ago",     tip: 10, prompt: "Rooftop golden hour, leather jacket, looking toward horizon, profile.",
    thumb: "linear-gradient(135deg,#2a2a3a 0%,#4f4d6b 100%)", category: "Outdoor scene", flag: "Outside enabled categories" },
  { id: 4815, sub: "@kira.x",            since: "8 months", ago: "2 days ago",     tip: 0,  prompt: "Library, sweater, late afternoon, reading a book at a wooden table.",
    thumb: "linear-gradient(135deg,#2f2a3e 0%,#665e7d 100%)", category: "Casual portrait" },
];

const Approval = ({ onGoTo }) => {
  const [selectedId, setSelectedId] = React.useState(SUBMISSIONS[0].id);
  const [banPattern, setBanPattern] = React.useState(false);
  const [note, setNote] = React.useState("");
  const selected = SUBMISSIONS.find(s => s.id === selectedId);

  return (
    <div>
      <PageHeader
        eyebrow="Approval queue · 7 pending"
        title="Submissions"
        subtitle="Subscribers' generations, queued for your review. Compliance has already filtered out anything that breaks your license."
        actions={
          <>
            <Button variant="secondary" icon="filter">Filter · all</Button>
            <Button variant="secondary" icon="check-check">Bulk approve safe</Button>
          </>
        }
      />

      <div style={{ display: "grid", gridTemplateColumns: "minmax(360px, 0.9fr) 1.3fr", gap: 24, alignItems: "start" }}>
        {/* List */}
        <div style={{ border: "1px solid var(--lk-border)", borderRadius: 4, background: "#fff", overflow: "hidden" }}>
          <div style={{
            padding: "10px 16px", background: "var(--lk-tint)", borderBottom: "1px solid var(--lk-border)",
            display: "flex", justifyContent: "space-between", alignItems: "center",
          }}>
            <span className="lk-eyebrow">Pending · 7</span>
            <span className="lk-eyebrow">Tip · From · Time</span>
          </div>
          {SUBMISSIONS.map((s, i) => {
            const isActive = s.id === selectedId;
            return (
              <div key={s.id} onClick={() => setSelectedId(s.id)} style={{
                display: "flex", gap: 12, padding: "14px 16px", alignItems: "center",
                borderTop: i ? "1px solid var(--lk-border)" : "none",
                cursor: "pointer",
                background: isActive ? "rgba(199,111,61,0.06)" : "transparent",
                borderLeft: isActive ? "2px solid var(--lk-terracotta)" : "2px solid transparent",
                transition: "background 120ms",
              }}>
                {/* Thumb */}
                <div style={{
                  width: 56, height: 70, borderRadius: 3, background: s.thumb, position: "relative", flexShrink: 0,
                }}>
                  <div style={{
                    position: "absolute", inset: 0, background: "rgba(26,31,54,0.55)",
                    backdropFilter: "blur(10px) saturate(0.8)", WebkitBackdropFilter: "blur(10px) saturate(0.8)",
                    borderRadius: 3,
                  }}></div>
                  <span style={{
                    position: "absolute", top: 4, left: 4, width: 10, height: 10, borderRadius: 999,
                    background: "var(--lk-warning)", border: "1.5px solid #fff",
                  }}></span>
                </div>
                <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: 4, minWidth: 0 }}>
                  <span style={{
                    font: "400 13px/1.45 var(--font-sans)", color: "var(--lk-navy)",
                    overflow: "hidden", textOverflow: "ellipsis", display: "-webkit-box",
                    WebkitLineClamp: 2, WebkitBoxOrient: "vertical",
                  }}>{s.prompt}</span>
                  <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                    <span style={{ font: "500 12px/1 var(--font-sans)", color: "var(--lk-muted)" }}>{s.sub}</span>
                    {s.flag && (
                      <span style={{
                        font: "600 10px/1 var(--font-sans)", letterSpacing: "0.04em", textTransform: "uppercase",
                        color: "var(--lk-warning)", padding: "3px 6px", background: "var(--lk-warning-bg)", borderRadius: 2,
                      }}>{s.flag}</span>
                    )}
                  </div>
                </div>
                <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 4, flexShrink: 0 }}>
                  {s.tip > 0 ? (
                    <span style={{
                      font: "600 11px/1 var(--font-sans)", color: "var(--lk-terracotta-08)",
                      background: "var(--lk-terracotta-bg)", padding: "4px 8px", borderRadius: 999,
                    }}>${s.tip}</span>
                  ) : <span style={{ height: 17 }}></span>}
                  <span style={{ font: "400 11px/1 var(--font-sans)", color: "var(--lk-muted)" }}>{s.ago}</span>
                </div>
              </div>
            );
          })}
        </div>

        {/* Detail */}
        <aside style={{
          border: "1px solid var(--lk-border)", borderRadius: 6, background: "#fff",
          display: "flex", flexDirection: "column", overflow: "hidden", boxShadow: "var(--shadow-card)",
          position: "sticky", top: 80,
        }}>
          {/* Preview tile */}
          <div style={{ position: "relative", aspectRatio: "5 / 4", background: selected.thumb }}>
            <div style={{
              position: "absolute", inset: 0, background: "rgba(26,31,54,0.55)",
              backdropFilter: "blur(20px) saturate(0.8)", WebkitBackdropFilter: "blur(20px) saturate(0.8)",
              display: "flex", alignItems: "center", justifyContent: "center",
            }}>
              <Chip variant="pending">Pending review</Chip>
            </div>
            <div style={{
              position: "absolute", left: 16, bottom: 16, right: 16,
              display: "flex", alignItems: "center", justifyContent: "space-between",
              font: "500 11px/1 var(--font-mono)", color: "rgba(255,255,255,0.85)",
              letterSpacing: "0.04em", textShadow: "0 1px 2px rgba(0,0,0,0.4)",
            }}>
              <span>SUBMISSION-{selected.id}</span>
              <span>@marawest · model v3</span>
            </div>
          </div>
          <div style={{ padding: "10px 20px", background: "var(--lk-tint)", borderBottom: "1px solid var(--lk-border)" }}>
            <span style={{ font: "400 12px/1.4 var(--font-sans)", color: "var(--lk-muted)" }}>
              Preview · Generated using Mara West's licensed model. Not licensed until approved.
            </span>
          </div>

          <div style={{ padding: 24, display: "flex", flexDirection: "column", gap: 18 }}>
            {/* Submitter */}
            <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
              <Avatar name={selected.sub.replace("@", "")} size={36} />
              <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: 2 }}>
                <span style={{ font: "600 14px/1.3 var(--font-sans)", color: "var(--lk-navy)" }}>
                  Submitted by {selected.sub} · Subscriber for {selected.since}
                </span>
                <span style={{ font: "400 12px/1.4 var(--font-sans)", color: "var(--lk-muted)" }}>
                  {selected.tip > 0 ? <>${selected.tip} tip attached · </> : <>No tip · </>}
                  Submitted {selected.ago}
                </span>
              </div>
              {selected.tip > 0 && (
                <span style={{
                  font: "600 13px/1 var(--font-sans)", color: "var(--lk-terracotta-08)",
                  background: "var(--lk-terracotta-bg)", padding: "6px 10px", borderRadius: 999,
                }}>+${selected.tip}</span>
              )}
            </div>

            {/* Prompt */}
            <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
              <span className="lk-eyebrow">Prompt</span>
              <div style={{
                padding: 14, borderRadius: 4, background: "var(--lk-tint)",
                font: "400 13px/1.6 var(--font-mono)", color: "var(--lk-navy)",
                border: "1px solid var(--lk-border)",
              }}>{selected.prompt}</div>
              <span style={{ font: "400 12px/1.4 var(--font-sans)", color: "var(--lk-muted)" }}>
                Category: <strong style={{ color: "var(--lk-navy)", fontWeight: 500 }}>{selected.category}</strong>
              </span>
            </div>

            {/* Compliance */}
            <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
              <span className="lk-eyebrow">License compliance</span>
              <div style={{
                padding: 14, borderRadius: 4, border: "1px solid var(--lk-border)", background: "#fff",
                display: "flex", flexDirection: "column", gap: 8,
              }}>
                {[
                  "Within allowed categories",
                  "Within explicitness ceiling (Topless)",
                  "No platform-blocked terms",
                  "No creator-blocked terms",
                  "Watermark slot reserved",
                ].map(c => (
                  <span key={c} style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
                    <span style={{
                      width: 16, height: 16, borderRadius: 999, background: "var(--lk-success-bg)",
                      display: "inline-flex", alignItems: "center", justifyContent: "center",
                    }}>
                      <i data-lucide="check" style={{ width: 11, height: 11, color: "var(--lk-success)" }}></i>
                    </span>
                    <span style={{ font: "400 13px/1.4 var(--font-sans)", color: "var(--lk-navy)" }}>{c}</span>
                  </span>
                ))}
              </div>
              <span style={{ font: "400 12px/1.5 var(--font-sans)", color: "var(--lk-muted)" }}>
                Compliance ran at submission time. The fan couldn't have submitted this if it failed your rules.
              </span>
            </div>

            {/* Actions */}
            <div style={{ display: "flex", flexDirection: "column", gap: 8, borderTop: "1px solid var(--lk-border)", paddingTop: 18 }}>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
                <Button variant="secondary" icon="download" style={{ justifyContent: "center" }}>Approve · private</Button>
                <Button variant="accent" icon="image" style={{ justifyContent: "center" }}>Approve · public gallery</Button>
              </div>
              <button style={{
                all: "unset", cursor: "pointer", textAlign: "center",
                height: 36, padding: "0 14px", borderRadius: 4,
                color: "var(--lk-error)", font: "500 13px/1 var(--font-sans)",
                border: "1px solid var(--lk-border)", background: "#fff",
              }}
              onMouseOver={e => { e.currentTarget.style.background = "var(--lk-error-bg)"; e.currentTarget.style.borderColor = "var(--lk-error)"; }}
              onMouseOut={e => { e.currentTarget.style.background = "#fff"; e.currentTarget.style.borderColor = "var(--lk-border)"; }}>
                Reject submission
              </button>
            </div>

            {/* Pattern ban */}
            <label style={{
              padding: "12px 14px", border: "1px solid var(--lk-border)", borderRadius: 4,
              background: "var(--lk-tint)", display: "flex", alignItems: "flex-start", gap: 12, cursor: "pointer",
            }}>
              <Toggle checked={banPattern} onChange={setBanPattern} label="" />
              <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
                <span style={{ font: "500 13px/1.3 var(--font-sans)", color: "var(--lk-navy)" }}>
                  Ban this prompt pattern from future generations
                </span>
                <span style={{ font: "400 12px/1.5 var(--font-sans)", color: "var(--lk-muted)" }}>
                  Adds the pattern to your blocked list. Subscribers attempting it will see your rules.
                </span>
              </div>
            </label>

            {/* Note */}
            <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
              <span className="lk-eyebrow">Note to submitter (optional)</span>
              <textarea value={note} onChange={e => setNote(e.target.value)}
                placeholder="Visible to the submitter only. Brief. Plain English."
                style={{
                  border: "1px solid var(--lk-border)", borderRadius: 2, padding: 10, minHeight: 56,
                  font: "400 13px/1.5 var(--font-sans)", color: "var(--lk-navy)", outline: "none", resize: "vertical",
                }}/>
            </div>
          </div>
        </aside>
      </div>
    </div>
  );
};

Object.assign(window, { Approval });