// Screen 6 — Fan generation interface (subscriber view)
const PRESETS = ["Casual portrait", "Outdoor afternoon", "Studio lighting", "Conversational pose", "Cafe window light"];

const FanGen = ({ onGoTo }) => {
  const [prompt, setPrompt] = React.useState("Indoor portrait, soft afternoon light, casual outfit, looking off-camera, neutral expression.");
  const [activePreset, setActivePreset] = React.useState("Casual portrait");
  const [tip, setTip] = React.useState(0);
  const [hasResult, setHasResult] = React.useState(true);
  const [generating, setGenerating] = React.useState(false);
  const [styleOpen, setStyleOpen] = React.useState(true);
  const [poseOpen, setPoseOpen] = React.useState(false);

  const generate = () => {
    setGenerating(true);
    setHasResult(false);
    setTimeout(() => { setGenerating(false); setHasResult(true); }, 900);
  };

  return (
    <div style={{ background: "var(--lk-tint)", minHeight: "100vh" }}>
      {/* Top bar */}
      <header style={{
        height: 56, borderBottom: "1px solid var(--lk-border)", background: "#fff",
        display: "flex", alignItems: "center", padding: "0 24px", position: "sticky", top: 0, zIndex: 5,
      }}>
        <Logo />
        <span style={{
          marginLeft: 16, paddingLeft: 16, borderLeft: "1px solid var(--lk-border)",
          font: "500 13px/1 var(--font-sans)", color: "var(--lk-muted)",
        }}>Subscriber</span>
        <div style={{ flex: 1 }} />

        {/* Creator pill */}
        <button style={{
          all: "unset", cursor: "pointer",
          display: "inline-flex", alignItems: "center", gap: 10,
          padding: "6px 12px 6px 6px", borderRadius: 999, border: "1px solid var(--lk-border)",
          background: "#fff", marginRight: 14,
        }}>
          <Avatar name="Mara West" size={26} />
          <span style={{ font: "600 13px/1.2 var(--font-sans)", color: "var(--lk-navy)" }}>Mara West</span>
          <span style={{ font: "400 12px/1.2 var(--font-sans)", color: "var(--lk-muted)" }}>· AI Generator</span>
        </button>

        <span style={{
          display: "inline-flex", alignItems: "center", gap: 8, padding: "6px 12px",
          background: "var(--lk-tint)", borderRadius: 4,
          font: "500 13px/1 var(--font-sans)", color: "var(--lk-navy)",
        }}>
          <i data-lucide="circle-dollar-sign" style={{ width: 14, height: 14, color: "var(--lk-terracotta)" }}></i>
          62 credits
        </span>
        <button onClick={() => onGoTo("dashboard")} style={{
          all: "unset", cursor: "pointer", marginLeft: 14,
          font: "500 12px/1 var(--font-sans)", color: "var(--lk-muted)",
        }}>← Back to creator view</button>
      </header>

      {/* Three panes */}
      <div style={{
        display: "grid", gridTemplateColumns: "320px 1fr 320px", gap: 0,
        height: "calc(100vh - 56px)",
      }}>
        {/* LEFT — Prompt construction */}
        <div style={{
          background: "#fff", borderRight: "1px solid var(--lk-border)",
          padding: 24, display: "flex", flexDirection: "column", gap: 20, overflowY: "auto",
        }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
            <span className="lk-eyebrow">Compose</span>
            <span style={{ font: "600 17px/1.3 var(--font-sans)", color: "var(--lk-navy)" }}>What would you like to generate?</span>
          </div>

          <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
            <span style={{ font: "500 12px/1 var(--font-sans)", color: "var(--lk-navy)" }}>Prompt</span>
            <textarea value={prompt} onChange={e => setPrompt(e.target.value)}
              placeholder="Describe the scene you want to generate…"
              style={{
                border: "1px solid var(--lk-border)", borderRadius: 2, padding: 12, minHeight: 110,
                font: "400 13px/1.55 var(--font-sans)", color: "var(--lk-navy)", outline: "none", resize: "vertical",
                background: "#fff",
              }}/>
          </div>

          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
            <span style={{ font: "500 12px/1 var(--font-sans)", color: "var(--lk-navy)" }}>Categories Mara has enabled</span>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
              {PRESETS.map(p => {
                const isActive = activePreset === p;
                return (
                  <button key={p} onClick={() => setActivePreset(p)} style={{
                    all: "unset", cursor: "pointer",
                    font: "500 12px/1 var(--font-sans)",
                    padding: "7px 11px", borderRadius: 2,
                    border: "1px solid " + (isActive ? "var(--lk-terracotta)" : "var(--lk-border)"),
                    background: isActive ? "var(--lk-terracotta-bg)" : "#fff",
                    color: isActive ? "var(--lk-terracotta-08)" : "var(--lk-navy)",
                  }}>{p}</button>
                );
              })}
            </div>
          </div>

          {/* Collapsible: Style */}
          <div style={{ borderTop: "1px solid var(--lk-border)", paddingTop: 14 }}>
            <button onClick={() => setStyleOpen(o => !o)} style={{
              all: "unset", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%",
              font: "500 13px/1 var(--font-sans)", color: "var(--lk-navy)",
            }}>
              <span>Style</span>
              <i data-lucide={styleOpen ? "chevron-up" : "chevron-down"} style={{ width: 14, height: 14, color: "var(--lk-muted)" }}></i>
            </button>
            {styleOpen && (
              <div style={{ marginTop: 10, display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 6 }}>
                {["Photoreal", "Editorial", "Film"].map((s, i) => (
                  <button key={s} style={{
                    all: "unset", cursor: "pointer", padding: "10px", borderRadius: 2,
                    border: "1px solid " + (i === 0 ? "var(--lk-navy)" : "var(--lk-border)"),
                    background: i === 0 ? "var(--lk-navy)" : "#fff",
                    color: i === 0 ? "#fff" : "var(--lk-navy)",
                    font: "500 12px/1 var(--font-sans)", textAlign: "center",
                  }}>{s}</button>
                ))}
              </div>
            )}
          </div>

          {/* Collapsible: Pose */}
          <div style={{ borderTop: "1px solid var(--lk-border)", paddingTop: 14 }}>
            <button onClick={() => setPoseOpen(o => !o)} style={{
              all: "unset", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%",
              font: "500 13px/1 var(--font-sans)", color: "var(--lk-navy)",
            }}>
              <span>Pose</span>
              <i data-lucide={poseOpen ? "chevron-up" : "chevron-down"} style={{ width: 14, height: 14, color: "var(--lk-muted)" }}></i>
            </button>
            {poseOpen && (
              <div style={{ marginTop: 10, font: "400 12px/1.5 var(--font-sans)", color: "var(--lk-muted)" }}>
                Pose presets coming soon. Describe pose in your prompt for now.
              </div>
            )}
          </div>

          {/* Generate */}
          <div style={{ marginTop: "auto", paddingTop: 14, borderTop: "1px solid var(--lk-border)", display: "flex", alignItems: "center", gap: 10 }}>
            <button onClick={generate} disabled={generating} style={{
              all: "unset", cursor: generating ? "wait" : "pointer", flex: 1,
              height: 44, padding: "0 18px", borderRadius: 4,
              background: "var(--lk-terracotta)", color: "#fff",
              font: "500 14px/1 var(--font-sans)", textAlign: "center",
              opacity: generating ? 0.7 : 1,
            }}>
              {generating ? "Generating…" : "Generate"}
            </button>
            <span style={{ font: "500 12px/1.4 var(--font-sans)", color: "var(--lk-muted)", textAlign: "right" }}>
              Costs<br/><strong style={{ color: "var(--lk-navy)", fontWeight: 600 }}>5 credits</strong>
            </span>
          </div>
        </div>

        {/* CENTER — Output */}
        <div style={{
          background: "var(--lk-tint)", padding: "32px 40px", display: "flex", flexDirection: "column", gap: 20,
          overflowY: "auto",
        }}>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
            <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
              <span className="lk-eyebrow">Output</span>
              <span style={{ font: "400 13px/1.4 var(--font-sans)", color: "var(--lk-muted)" }}>
                Generated outputs are private until you submit them. Mara reviews submissions before they become licensed images.
              </span>
            </div>
            {hasResult && <Chip variant="draft">Draft · not licensed</Chip>}
          </div>

          {/* Output frame */}
          <div style={{
            border: "1px solid var(--lk-border)", borderRadius: 6, background: "#fff", overflow: "hidden",
            boxShadow: "var(--shadow-card)",
          }}>
            <div style={{
              position: "relative", aspectRatio: "5 / 4",
              background: hasResult ? "linear-gradient(135deg,#3a2820 0%,#7a4d33 100%)" : "var(--lk-tint)",
              display: "flex", alignItems: "center", justifyContent: "center",
            }}>
              {!hasResult && !generating && (
                <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 8, color: "var(--lk-muted)" }}>
                  <i data-lucide="image" style={{ width: 32, height: 32 }}></i>
                  <span style={{ font: "500 14px/1.3 var(--font-sans)" }}>No generation yet</span>
                  <span style={{ font: "400 12px/1.4 var(--font-sans)" }}>Write a prompt and press Generate.</span>
                </div>
              )}
              {generating && (
                <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 10, color: "var(--lk-muted)" }}>
                  <div style={{ width: 18, height: 18, border: "2px solid var(--lk-border)", borderTopColor: "var(--lk-terracotta)", borderRadius: 999, animation: "spin 800ms linear infinite" }}></div>
                  <span style={{ font: "500 13px/1 var(--font-sans)" }}>Generating · ~12 sec</span>
                </div>
              )}
              {hasResult && !generating && (
                <>
                  {/* Watermark seal */}
                  <span style={{
                    position: "absolute", bottom: 14, left: 14, width: 18, height: 18, borderRadius: 999,
                    background: "var(--lk-terracotta)",
                    display: "inline-flex", alignItems: "center", justifyContent: "center",
                  }}>
                    <svg viewBox="0 0 20 20" width="9" height="9" fill="none">
                      <path d="M6 4 V16 H14" stroke="#fff" strokeWidth="2.4" strokeLinecap="square"/>
                    </svg>
                  </span>
                  <span style={{
                    position: "absolute", bottom: 16, right: 16,
                    font: "500 10px/1 var(--font-mono)", color: "rgba(255,255,255,0.85)",
                    letterSpacing: "0.04em", textShadow: "0 1px 2px rgba(0,0,0,0.4)",
                  }}>LK-4471 · @marawest · draft</span>
                  {/* Diagonal watermark band */}
                  <span style={{
                    position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center",
                    pointerEvents: "none",
                  }}>
                    <span style={{
                      transform: "rotate(-22deg)", font: "600 18px/1 var(--font-mono)",
                      color: "rgba(255,255,255,0.16)", letterSpacing: "0.4em",
                      whiteSpace: "nowrap",
                    }}>LIKENESS · DRAFT · LK-4471 · LIKENESS · DRAFT · LK-4471</span>
                  </span>
                </>
              )}
            </div>
            {hasResult && (
              <div style={{ padding: "12px 18px", borderTop: "1px solid var(--lk-border)", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                <span style={{ font: "400 12px/1.4 var(--font-sans)", color: "var(--lk-muted)" }}>
                  Generated May 8, 14:02 · Watermarked · License #LK-4471 · Not yet approved
                </span>
                <button style={{
                  all: "unset", cursor: "pointer", font: "500 12px/1 var(--font-sans)", color: "var(--lk-terracotta)",
                  display: "inline-flex", alignItems: "center", gap: 4,
                }}>
                  <i data-lucide="rotate-cw" style={{ width: 12, height: 12 }}></i> Regenerate · 5 credits
                </button>
              </div>
            )}
          </div>

          {/* Submission actions */}
          {hasResult && (
            <>
              <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 0.6fr", gap: 8 }}>
                <Button variant="accent" icon="send" style={{ justifyContent: "center" }}>Submit to Mara for review</Button>
                <Button variant="secondary" icon="bookmark" style={{ justifyContent: "center" }}>Save to private gallery</Button>
                <Button variant="ghost" icon="trash-2" style={{ justifyContent: "center", color: "var(--lk-muted)" }}>Discard</Button>
              </div>

              {/* Tip slider */}
              <div style={{
                padding: 18, border: "1px solid var(--lk-border)", borderRadius: 4, background: "#fff",
                display: "flex", flexDirection: "column", gap: 12,
              }}>
                <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                  <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
                    <span style={{ font: "500 14px/1.3 var(--font-sans)", color: "var(--lk-navy)" }}>Attach a tip with your submission</span>
                    <span style={{ font: "400 12px/1.4 var(--font-sans)", color: "var(--lk-muted)" }}>
                      Tips are paid only if Mara approves. Returned otherwise.
                    </span>
                  </div>
                  <span style={{ font: "600 17px/1 var(--font-sans)", color: "var(--lk-terracotta)", letterSpacing: "-0.01em" }}>
                    {tip > 0 ? `$${tip}` : "—"}
                  </span>
                </div>
                <div style={{ display: "flex", gap: 6 }}>
                  {[0, 5, 10, 25, 50].map(v => (
                    <button key={v} onClick={() => setTip(v)} style={{
                      all: "unset", cursor: "pointer", flex: 1, textAlign: "center",
                      height: 36, borderRadius: 4,
                      border: "1px solid " + (tip === v ? "var(--lk-terracotta)" : "var(--lk-border)"),
                      background: tip === v ? "var(--lk-terracotta-bg)" : "#fff",
                      color: tip === v ? "var(--lk-terracotta-08)" : "var(--lk-navy)",
                      font: "500 13px/1 var(--font-sans)",
                    }}>{v === 0 ? "No tip" : `$${v}`}</button>
                  ))}
                  <button style={{
                    all: "unset", cursor: "pointer", flex: 1, textAlign: "center",
                    height: 36, borderRadius: 4, border: "1px solid var(--lk-border)", background: "#fff",
                    color: "var(--lk-muted)", font: "500 13px/1 var(--font-sans)",
                  }}>Custom</button>
                </div>
              </div>
            </>
          )}
        </div>

        {/* RIGHT — Rules summary */}
        <div style={{
          background: "#fff", borderLeft: "1px solid var(--lk-border)",
          padding: 24, display: "flex", flexDirection: "column", gap: 18, overflowY: "auto",
        }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
            <span className="lk-eyebrow">Rules · always visible</span>
            <span style={{ font: "600 17px/1.3 var(--font-sans)", color: "var(--lk-navy)" }}>
              What Mara has approved for this tier.
            </span>
            <span style={{ font: "400 13px/1.5 var(--font-sans)", color: "var(--lk-muted)" }}>
              You're reading the same rules Mara published. They apply to every generation. Compliance runs before anything reaches her queue.
            </span>
          </div>

          <div style={{ display: "flex", flexDirection: "column", gap: 8, paddingTop: 14, borderTop: "1px solid var(--lk-border)" }}>
            <span className="lk-eyebrow">Allowed</span>
            {["Solo content", "Partnered with verified collaborators", "Custom prompt requests"].map(t => (
              <span key={t} style={{ font: "400 13px/1.4 var(--font-sans)", color: "var(--lk-navy)", display: "inline-flex", alignItems: "center", gap: 8 }}>
                <i data-lucide="check" style={{ width: 13, height: 13, color: "var(--lk-success)" }}></i>{t}
              </span>
            ))}
          </div>

          <div style={{ display: "flex", flexDirection: "column", gap: 6, paddingTop: 14, borderTop: "1px solid var(--lk-border)" }}>
            <span className="lk-eyebrow">Explicitness ceiling</span>
            <span style={{ font: "500 14px/1.3 var(--font-sans)", color: "var(--lk-navy)" }}>Topless · per Mara's tier rules</span>
          </div>

          <div style={{ display: "flex", flexDirection: "column", gap: 8, paddingTop: 14, borderTop: "1px solid var(--lk-border)" }}>
            <span className="lk-eyebrow">Blocked</span>
            {["Minors (platform-wide)", "Public figures (platform-wide)", "School settings", "Specific clothing brands", "Family roleplay"].map(t => (
              <span key={t} style={{ font: "400 13px/1.4 var(--font-sans)", color: "var(--lk-navy)", display: "inline-flex", alignItems: "flex-start", gap: 8 }}>
                <i data-lucide="x" style={{ width: 13, height: 13, color: "var(--lk-error)", marginTop: 3, flexShrink: 0 }}></i>{t}
              </span>
            ))}
          </div>

          <div style={{ display: "flex", flexDirection: "column", gap: 6, paddingTop: 14, borderTop: "1px solid var(--lk-border)" }}>
            <span className="lk-eyebrow">Distribution</span>
            <span style={{ font: "400 13px/1.55 var(--font-sans)", color: "var(--lk-navy)" }}>
              Approved outputs are watermarked and licensed to you. Downloads available on this tier. External sharing is blocked.
            </span>
          </div>

          <div style={{
            padding: 14, borderRadius: 4, background: "var(--lk-tint)",
            display: "flex", flexDirection: "column", gap: 6, marginTop: "auto",
          }}>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 8, font: "600 12px/1 var(--font-sans)", color: "var(--lk-navy)" }}>
              <i data-lucide="info" style={{ width: 13, height: 13, color: "var(--lk-terracotta)" }}></i>
              Your subscription
            </span>
            <span style={{ font: "400 12px/1.5 var(--font-sans)", color: "var(--lk-muted)" }}>
              100 credits per month. 38 used so far. Renews on May 22.
            </span>
          </div>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { FanGen });