/* ============================================================================
   pi-login-film.jsx — animated product film for the login screen's left panel
   ----------------------------------------------------------------------------
   Drop-in, build-free (loaded via <script type="text/babel">, like pi-auth.jsx).
   Exposes: window.LoginFilm

   Five 5s scenes, recreated from the shipped app (chat.jsx greeting + composer,
   review-panel artefact chrome, projects.jsx card meta). A single interval
   toggles one `.on` class per scene; every reveal is a CSS transition relative
   to that class — no per-element animation delays, so scenes can never desync
   or flash content before its cue.

   Colours are literal hex (not var(--*)) because the login screen renders
   before the themed app shell mounts — same convention as pi-auth.jsx.
   ========================================================================== */

const FILM_SCENE_MS = 5000;

const FILM_CSS = `
.pi-film {
  position: relative; width: 100%; max-width: 520px; height: 296px;
  border-radius: 16px; overflow: hidden;
  background: linear-gradient(155deg, rgba(255,252,246,0.86) 0%, rgba(250,240,230,0.78) 100%);
  border: 1px solid rgba(255,255,255,0.75);
  box-shadow: 0 30px 70px rgba(122,28,28,0.14), inset 0 1px 0 rgba(255,255,255,0.7);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  animation: pi-film-float 9s ease-in-out infinite;
}
.pi-film-sc {
  position: absolute; inset: 0; display: flex; flex-direction: column; padding: 20px;
  opacity: 0; transform: translateY(8px) scale(1.012);
  transition: opacity .55s ease, transform .55s ease; pointer-events: none;
}
.pi-film-sc.on { opacity: 1; transform: none; }
.pi-film-sc--flush { padding: 0; }

.pi-film-rev { opacity: 0; transform: translateY(6px); transition: opacity .45s ease, transform .45s ease; }
.pi-film-sc.on .pi-film-rev { opacity: 1; transform: none; }

.pi-film-bar { transform: scaleY(0.04); transform-origin: bottom; transition: transform .7s cubic-bezier(.3,1.05,.4,1); }
.pi-film-sc.on .pi-film-bar { transform: scaleY(1); }

.pi-film-type { max-width: 0; overflow: hidden; white-space: nowrap; display: inline-block; }
.pi-film-sc.on .pi-film-type { animation: pi-film-type 1.2s steps(28,end) forwards; }
@keyframes pi-film-type { from { max-width: 0; } to { max-width: 100%; } }
@keyframes pi-film-caret { 0%,45% { opacity: 1; } 50%,95% { opacity: 0.15; } }
@keyframes pi-film-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

.pi-film-cap { position: absolute; left: 0; top: 0; right: 0; opacity: 0; line-height: 1.35; transition: opacity .5s ease; }
.pi-film-cap.on { opacity: 1; }
.pi-film-dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(122,28,28,0.20); transition: width .4s ease, background .4s ease; }
.pi-film-dot.on { width: 18px; background: #7A1C1C; }

@media (prefers-reduced-motion: reduce) {
  .pi-film { animation: none; }
  .pi-film-sc, .pi-film-rev, .pi-film-bar, .pi-film-cap, .pi-film-dot { transition: none; }
  .pi-film-sc.on .pi-film-type { animation: none; max-width: 100%; }
}
`;

const FilmStyles = () => <style dangerouslySetInnerHTML={{ __html: FILM_CSS }} />;

/* ── shared bits ─────────────────────────────────────────────────────────── */

const SceneLabel = ({ children }) => (
  <div style={{ fontSize: 9.5, fontWeight: 700, letterSpacing: "0.1em", textTransform: "uppercase",
                color: "#A8A19B", marginBottom: 12 }}>{children}</div>
);

const Rev = ({ delay = 0, style, children, className = "" }) => (
  <div className={`pi-film-rev ${className}`} style={{ transitionDelay: `${delay}s`, ...style }}>{children}</div>
);

/* ── 1. Chat — ask in your own words ─────────────────────────────────────── */

const SceneAsk = () => (
  <React.Fragment>
    <SceneLabel>Chat</SceneLabel>
    <div style={{ margin: "auto 0" }}>
      <div style={{ fontFamily: "Fraunces, Georgia, serif", fontSize: 23, fontWeight: 400,
                    letterSpacing: "-0.025em", lineHeight: 1.05, textAlign: "center" }}>
        <span style={{ color: "#807870" }}>Good morning,</span>{" "}
        <span style={{ color: "#7A1C1C" }}>Shaurya</span>
      </div>

      <div style={{ marginTop: 14, border: "1px solid #E0D8CE", borderRadius: 12,
                    background: "rgba(255,255,255,0.72)", boxShadow: "0 4px 14px rgba(122,28,28,0.07)",
                    padding: "11px 13px" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 3, minHeight: 19 }}>
          <span className="pi-film-type" style={{ fontSize: 12.5, color: "#2B2624" }}>
            Research on carbon credit markets
          </span>
          <span style={{ width: 1.5, height: 14, background: "#7A1C1C",
                         animation: "pi-film-caret 1s steps(1,end) infinite" }} />
        </div>
        <div style={{ marginTop: 9, display: "flex", alignItems: "center", justifyContent: "space-between" }}>
          <span style={{ width: 20, height: 20, borderRadius: 6, border: "1px solid #E0D8CE",
                         color: "#807870", fontSize: 12, display: "grid", placeItems: "center" }}>+</span>
          <span style={{ display: "flex", alignItems: "center", gap: 7 }}>
            <span style={{ fontSize: 10, color: "#807870" }}>33 / 8,000</span>
            <span style={{ width: 20, height: 20, borderRadius: 6, background: "#7A1C1C", color: "#fff",
                           display: "grid", placeItems: "center" }}>
              <svg width="9" height="9" viewBox="0 0 16 16" fill="none">
                <path d="M8 12V4M4 8l4-4 4 4" stroke="currentColor" strokeWidth="1.8"
                      strokeLinecap="round" strokeLinejoin="round" />
              </svg>
            </span>
          </span>
        </div>
      </div>

      <div style={{ marginTop: 7, textAlign: "center", fontSize: 10, color: "#A8A19B" }}>
        Enter to send · Shift + Enter for new line
      </div>

      <div style={{ marginTop: 11, display: "flex", flexWrap: "wrap", gap: 6, justifyContent: "center" }}>
        {["Create research", "Design a framework", "Explore Primus expertise"].map(t => (
          <span key={t} style={{ height: 22, padding: "0 9px", borderRadius: 8, border: "1px solid #E0D8CE",
                                 background: "rgba(255,255,255,0.55)", fontSize: 10, color: "#2B2624",
                                 display: "inline-flex", alignItems: "center", gap: 5, whiteSpace: "nowrap" }}>
            <span style={{ width: 4, height: 4, borderRadius: "50%", background: "#7A1C1C" }} />
            {t}
          </span>
        ))}
      </div>
    </div>
  </React.Fragment>
);

/* ── 2. Research Intent — structured intake ──────────────────────────────── */

const BRIEF_ROWS = [
  ["Sector", "Environment, Climate Change, and Energy Transition"],
  ["Sub-sector", "Carbon Pricing Mechanisms, Voluntary Carbon Markets"],
];

const SceneResearch = () => (
  <React.Fragment>
    <SceneLabel>Research Intent</SceneLabel>
    <div style={{ alignSelf: "flex-end", background: "#7A1C1C", color: "#F4EBD6", fontSize: 11.5,
                  lineHeight: 1.4, padding: "8px 11px", borderRadius: 9, maxWidth: "82%" }}>
      I am trying to do some research on carbon credit markets
    </div>
    <div style={{ marginTop: 12, display: "flex", gap: 9 }}>
      <svg width="14" height="14" style={{ color: "#7A1C1C", flexShrink: 0, marginTop: 2 }}>
        <use href="#prima-mark" />
      </svg>
      <div style={{ minWidth: 0 }}>
        <Rev delay={0.1} style={{ fontSize: 11.5, lineHeight: 1.5, color: "#2B2624" }}>
          We will begin with our <strong>Structured Intake</strong> phase.
        </Rev>
        <Rev delay={0.4} style={{ marginTop: 11, fontSize: 12, fontWeight: 700, color: "#3E0E0E" }}>
          Draft Project Brief
        </Rev>
        <div style={{ marginTop: 7, display: "flex", flexDirection: "column", gap: 6 }}>
          {BRIEF_ROWS.map(([k, v], i) => (
            <Rev key={k} delay={0.7 + i * 0.3}
                 style={{ display: "flex", gap: 7, fontSize: 11, lineHeight: 1.45 }}>
              <span style={{ color: "#7A1C1C", fontWeight: 700 }}>·</span>
              <span style={{ color: "#4A423B" }}><strong style={{ color: "#2B2624" }}>{k}:</strong> {v}</span>
            </Rev>
          ))}
        </div>
      </div>
    </div>
  </React.Fragment>
);

/* ── 3. Artefact — the report assembling itself ──────────────────────────── */

const KPIS = [
  ["45%", "Emissions intensity reduction target by 2030"],
  ["30%", "Industrial share of national GHG emissions"],
  ["21%", "Combined steel & cement emissions share"],
];

const SceneArtefact = () => (
  <React.Fragment>
    <Rev delay={0.1} style={{ display: "flex", alignItems: "center", gap: 8, padding: "11px 14px",
                              borderBottom: "1px solid #ECE5DD" }}>
      <span style={{ flex: 1, minWidth: 0, fontSize: 10.5, fontWeight: 600, color: "#2B2624",
                     whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
        Transitioning from PAT to CCTS: A Strategic Compliance Roadmap
      </span>
      <span style={{ flexShrink: 0, fontSize: 8, fontWeight: 700, letterSpacing: "0.06em", color: "#2E6F40",
                     background: "#E7F1EA", border: "1px solid #C8DDD0", borderRadius: 999,
                     padding: "2px 7px" }}>FINAL</span>
    </Rev>

    <div style={{ flex: 1, minWidth: 0, minHeight: 0, padding: "11px 14px 0",
                  display: "flex", flexDirection: "column", overflow: "hidden" }}>
      <Rev delay={0.4} style={{ position: "relative" }}>
        <span style={{ fontFamily: "Fraunces, Georgia, serif", position: "absolute", left: -2, top: -9,
                       fontSize: 38, fontWeight: 600, color: "#B68A3B", opacity: 0.2, lineHeight: 1 }}>01</span>
        <div style={{ position: "relative", paddingLeft: 34 }}>
          <div style={{ fontSize: 7.5, fontWeight: 700, letterSpacing: "0.22em", color: "#8A6320" }}>SECTION 01</div>
          <div style={{ display: "flex", alignItems: "center", gap: 7, marginTop: 3 }}>
            <span style={{ width: 3, height: 15, background: "#B68A3B" }} />
            <span style={{ fontSize: 15, fontWeight: 800, letterSpacing: "-0.01em", color: "#1A1614" }}>
              EXECUTIVE SUMMARY
            </span>
          </div>
        </div>
      </Rev>

      <div style={{ marginTop: 10, display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 7 }}>
        {KPIS.map(([n, label], i) => (
          <Rev key={n} delay={0.8 + i * 0.22}
               style={{ background: "rgba(255,255,255,0.72)", border: "1px solid rgba(255,255,255,0.85)",
                        borderTop: "2.5px solid #B68A3B", padding: "7px 7px 8px" }}>
            <div style={{ fontSize: 19, fontWeight: 800, color: "#1A1614", lineHeight: 1 }}>{n}</div>
            <div style={{ marginTop: 4, fontSize: 7.5, color: "#4A423B", lineHeight: 1.35 }}>{label}</div>
          </Rev>
        ))}
      </div>

      <div style={{ marginTop: 9, display: "flex", flexDirection: "column", gap: 4 }}>
        {[100, 97, 92, 99, 64].map((w, i) => (
          <Rev key={i} delay={1.6 + i * 0.13}
               style={{ height: 3.5, borderRadius: 2, background: "#E0D8CE", width: `${w}%` }} />
        ))}
      </div>
    </div>

    <Rev delay={2.4} style={{ display: "flex", alignItems: "center", justifyContent: "space-between",
                              padding: "8px 14px 11px" }}>
      <span style={{ fontSize: 9.5, color: "#807870" }}>✓ Approved · read-only</span>
      <span style={{ fontSize: 10, fontWeight: 600, color: "#fff", background: "#7A1C1C",
                     borderRadius: 7, padding: "5px 10px" }}>Open final PDF →</span>
    </Rev>
  </React.Fragment>
);

/* ── 4. Visual agent — emergency cover, days ─────────────────────────────── */

const SPR_BARS = [
  ["Japan",              "140", 96, "#7A1C1C"],
  ["United States",      "75",  51, "#B68A3B"],
  ["India (Phase I+II)", "21",  14, "#CBC1B3"],
  ["India (Phase I)",    "9.5",  7, "#E0D8CE"],
];

const SceneVisual = () => (
  <React.Fragment>
    <SceneLabel>Visual agent</SceneLabel>
    <div style={{ fontSize: 12, fontWeight: 700, color: "#3E0E0E" }}>
      Global Strategic Petroleum Reserves
    </div>
    <div style={{ marginTop: 11, flex: 1, display: "flex", alignItems: "flex-end", gap: 18, paddingBottom: 6 }}>
      {SPR_BARS.map(([label, value, h, colour], i) => (
        <div key={label} style={{ flex: 1, display: "flex", flexDirection: "column",
                                  alignItems: "center", gap: 6 }}>
          <span style={{ fontSize: 10, fontWeight: 700, color: "#2B2624" }}>{value}</span>
          <div className="pi-film-bar"
               style={{ width: "100%", height: h, borderRadius: "4px 4px 0 0",
                        background: colour, transitionDelay: `${0.3 + i * 0.14}s` }} />
          <span style={{ fontSize: 9, color: "#807870", textAlign: "center" }}>{label}</span>
        </div>
      ))}
    </div>
    <div style={{ height: 1, background: "#E0D8CE" }} />
    <div style={{ marginTop: 7, fontSize: 9.5, color: "#807870" }}>
      Emergency cover, days — India vs US and Japan
    </div>
  </React.Fragment>
);

/* ── 5. Projects ─────────────────────────────────────────────────────────── */

const FILM_PROJECTS = [
  ["ER Patent",         "Data & Digital Strategy",   "5 files · 11 Jun"],
  ["Schemes",           "Public Policy Realization", "7 files · 30 Jun"],
  ["choice uttarakhand","Data & Digital Strategy",   "3 files · 10 Jun"],
];

const SceneProjects = () => (
  <React.Fragment>
    <SceneLabel>Projects</SceneLabel>
    <div style={{ display: "flex", flexDirection: "column", gap: 7 }}>
      {FILM_PROJECTS.map(([name, tag, meta], i) => (
        <Rev key={name} delay={0.2 + i * 0.25}
             style={{ border: "1px solid #E0D8CE", borderRadius: 10, background: "rgba(255,255,255,0.66)",
                      padding: "7px 12px" }}>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8 }}>
            <span style={{ fontSize: 12.5, fontWeight: 600, color: "#1A1614", overflow: "hidden",
                           whiteSpace: "nowrap", textOverflow: "ellipsis" }}>{name}</span>
            <span style={{ flexShrink: 0, fontSize: 8, fontWeight: 700, letterSpacing: "0.06em",
                           color: "#7A1C1C", background: "rgba(122,28,28,0.06)", borderRadius: 4,
                           padding: "2px 5px" }}>OWNER</span>
          </div>
          <div style={{ marginTop: 6, display: "flex", alignItems: "center",
                        justifyContent: "space-between", gap: 8 }}>
            <span style={{ fontSize: 9, color: "#7A1C1C", background: "rgba(122,28,28,0.06)",
                           borderRadius: 999, padding: "3px 8px", whiteSpace: "nowrap",
                           overflow: "hidden", textOverflow: "ellipsis", maxWidth: "60%" }}>{tag}</span>
            <span style={{ fontSize: 9, color: "#807870", whiteSpace: "nowrap", flexShrink: 0 }}>{meta}</span>
          </div>
        </Rev>
      ))}
    </div>
  </React.Fragment>
);

/* ── the film ────────────────────────────────────────────────────────────── */

const FILM_SCENES = [
  { key: "ask",      flush: false, Body: SceneAsk,      cap: ["Search.",      "Millions of enterprise documents, in seconds."] },
  { key: "research", flush: false, Body: SceneResearch, cap: ["Research.",    "Structured intake, then a defensible brief."] },
  { key: "artefact", flush: true,  Body: SceneArtefact, cap: ["Report.",      "Board-ready outputs from trusted knowledge."] },
  { key: "visual",   flush: false, Body: SceneVisual,   cap: ["Visualise.",   "Charts and dashboards from raw reports."] },
  { key: "projects", flush: false, Body: SceneProjects, cap: ["Collaborate.", "Projects with their own files, instructions and history."] },
];

const LoginFilm = () => {
  const [i, setI] = React.useState(0);

  React.useEffect(() => {
    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
    const id = setInterval(() => setI(n => (n + 1) % FILM_SCENES.length), FILM_SCENE_MS);
    return () => clearInterval(id);
  }, []);

  return (
    <React.Fragment>
      <FilmStyles />

      <div className="pi-film">
        {FILM_SCENES.map((s, k) => (
          <div key={s.key}
               className={`pi-film-sc${s.flush ? " pi-film-sc--flush" : ""}${k === i ? " on" : ""}`}>
            <s.Body />
          </div>
        ))}
      </div>

      <div style={{ marginTop: 16, display: "flex", alignItems: "flex-start", gap: 14 }}>
        <div style={{ display: "flex", gap: 5, alignItems: "center", paddingTop: 5 }}>
          {FILM_SCENES.map((s, k) => (
            <span key={s.key} className={`pi-film-dot${k === i ? " on" : ""}`} />
          ))}
        </div>
        <div style={{ position: "relative", minHeight: 40, flex: 1, minWidth: 0 }}>
          {FILM_SCENES.map((s, k) => (
            <span key={s.key} className={`pi-film-cap${k === i ? " on" : ""}`}
                  style={{ fontSize: 13.5, color: "#2B2624" }}>
              <strong style={{ fontFamily: "Fraunces, Georgia, serif", color: "#7A1C1C",
                               fontWeight: 500, marginRight: 7 }}>{s.cap[0]}</strong>
              {s.cap[1]}
            </span>
          ))}
        </div>
      </div>
    </React.Fragment>
  );
};

window.LoginFilm = LoginFilm;