// LayerCred Verification Demo — main app

const appStyles = {
  page: {
    minHeight: "100vh",
    background: "#FFFFFF",
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "center",
    padding: "40px 28px"
  },
  container: {
    width: "100%",
    maxWidth: 1240,
  },
  stage: {
    display: "grid",
    gridTemplateColumns: "minmax(0, 1fr) auto minmax(0, 1fr)",
    alignItems: "center",
    gap: 64
  },
  leftCol: {
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    gap: 18
  },
  colLabel: {
    fontSize: 11.5,
    letterSpacing: 1.6,
    fontWeight: 600,
    color: "var(--ink-mute)",
    textTransform: "uppercase",
    alignSelf: "flex-start"
  },
  arrow: {
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    gap: 10,
    color: "var(--ink-mute)"
  },
  arrowLine: {
    width: 64,
    height: 1,
    background:
    "linear-gradient(90deg, transparent, rgba(31,26,44,0.25), transparent)"
  },
  rightCol: {
    display: "flex",
    flexDirection: "column",
    alignItems: "stretch",
    gap: 24
  },
  rightInner: { display: "flex", flexDirection: "column", gap: 24, alignItems: "flex-start" },
  scenarioRow: {
    marginTop: 28,
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    gap: 10
  },
  dot: (active) => ({
    width: active ? 24 : 7,
    height: 7,
    borderRadius: 999,
    background: active ? "var(--aubergine)" : "rgba(31,26,44,0.18)",
    transition: "all 240ms ease",
    cursor: "pointer",
    border: "none",
    padding: 0
  }),
  counter: {
    marginTop: 12,
    textAlign: "center",
    fontSize: 13,
    color: "var(--ink-mute)"
  }
};

function ArrowGlyph() {
  return (
    <div style={appStyles.arrow}>
      <svg width="56" height="14" viewBox="0 0 56 14" fill="none" aria-hidden>
        <path
          d="M1 7H54M54 7L48 1M54 7L48 13"
          stroke="currentColor"
          strokeWidth="1.4"
          strokeLinecap="round"
          strokeLinejoin="round"
          opacity="0.6" />
      </svg>
    </div>);

}

function App() {
  const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
    "scenarioIndex": 0,
    "rainbowIntensity": 1,
    "cardTilt": -2
  } /*EDITMODE-END*/;

  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [busy, setBusy] = React.useState(false);
  const [revealKey, setRevealKey] = React.useState(0);
  const [showCard, setShowCard] = React.useState(true);
  const [hasRun, setHasRun] = React.useState(false);
  const autoplayedRef = React.useRef(false);

  const idx = Math.max(0, Math.min(SCENARIOS.length - 1, tweaks.scenarioIndex | 0));
  const scenario = SCENARIOS[idx];

  const cycle = (next) => {
    setHasRun(true);
    setBusy(true);
    setShowCard(false);
    setTweak("scenarioIndex", next);
    setRevealKey((k) => k + 1);
  };

  const handleVerify = () => {
    cycle((idx + 1) % SCENARIOS.length);
  };

  React.useEffect(() => {
    try {
      window.parent?.postMessage({ type: 'LC_DEMO_READY' }, '*');
    } catch (_) {}

    const onMsg = (e) => {
      if (autoplayedRef.current) return;
      if (e?.data?.type !== 'LC_DEMO_AUTOPLAY') return;
      autoplayedRef.current = true;
      cycle((SCENARIOS[0] ? (idx + 1) % SCENARIOS.length : 0));
    };
    window.addEventListener('message', onMsg);
    return () => window.removeEventListener('message', onMsg);
  }, []);

  const handleApiDone = () => {
    setTimeout(() => {
      setShowCard(true);
      setBusy(false);
    }, 300);
  };

  return (
    <div style={appStyles.page}>
      <div style={appStyles.container}>
        <div style={appStyles.stage}>
        {/* LEFT — platform */}
        <div style={appStyles.leftCol}>
          <div style={appStyles.colLabel}>Platform side</div>
          <PlatformMock
            data={scenario.platform}
            onVerify={handleVerify}
            busy={busy} />
        </div>

        {/* MIDDLE — arrow */}
        <ArrowGlyph />

        {/* RIGHT — credential + api */}
        <div style={appStyles.rightCol}>
          <div style={appStyles.colLabel}>What the platform receives</div>
          {showCard && (
            <div
              key={`card-${revealKey}`}
              style={{
                ...(hasRun ? { animation: "lc-result 520ms cubic-bezier(0.12, 0.9, 0.24, 1) both" } : {})
              }}>
              <CredentialCard
                data={scenario.credential}
                tilt={tweaks.cardTilt}
                rainbowIntensity={tweaks.rainbowIntensity} />
            </div>
          )}
          <div
            key={`api-${revealKey}`}
            style={{
              ...(hasRun ? { animation: "lc-rise 520ms cubic-bezier(0.2, 0.8, 0.2, 1) both" } : {}),
              width: "100%"
            }}>
            <ApiBlock api={scenario.api} animateKey={revealKey} play={hasRun} onDone={handleApiDone} />
          </div>
        </div>
      </div>

      <div style={appStyles.scenarioRow}>
        {SCENARIOS.map((s, i) =>
        <button
          key={s.id}
          aria-label={`Scenario ${i + 1}`}
          style={appStyles.dot(i === idx)}
          onClick={() => cycle(i)} />
        )}
      </div>
      <div style={appStyles.counter}>
        {idx + 1} of {SCENARIOS.length} verifications
      </div>
      </div>

      <style>{`
        @keyframes lc-pulse {
          0% { transform: scale(0.9); opacity: 0.9; }
          100% { transform: scale(2.4); opacity: 0; }
        }
        @keyframes lc-blink {
          50% { opacity: 0; }
        }
        @keyframes lc-rise {
          from { opacity: 0; transform: translateY(20px); }
          to { opacity: 1; transform: translateY(0); }
        }
        @keyframes lc-result {
          from { opacity: 0; transform: translateY(30px); }
          to { opacity: 1; transform: translateY(0); }
        }
      `}</style>
    </div>);

}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);