// Klyvio — Loading / analyse screen (dark theme Klyvio)

function Loading({ onDone, company }) {
  const steps = [
    { label: "Analyse des réponses", icon: "bolt" },
    { label: "Calcul des scores par dimension", icon: "barChart" },
    { label: "Identification des points de friction", icon: "alert" },
    { label: "Priorisation des automatisations", icon: "workflow" },
    { label: "Calcul du ROI personnalisé", icon: "euro" },
    { label: "Benchmark sectoriel", icon: "target" },
    { label: "Génération de la roadmap", icon: "compass" },
  ];
  const [step, setStep] = useState(0);
  const [done, setDone] = useState([]);

  useEffect(() => {
    if (step >= steps.length) {
      const t = setTimeout(onDone, 600);
      return () => clearTimeout(t);
    }
    const t = setTimeout(() => {
      setDone(d => [...d, step]);
      setStep(s => s + 1);
    }, 600 + Math.random() * 400);
    return () => clearTimeout(t);
  }, [step]);

  return (
    <div style={{
      flex: 1,
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      position: "relative",
      overflow: "hidden",
      background: "var(--bg)",
      minHeight: "calc(100vh - 60px)",
    }}>
      {/* Radial glow cyan */}
      <div style={{
        position: "absolute", inset: 0, pointerEvents: "none",
        background: "radial-gradient(ellipse at 50% 20%, rgba(0,174,239,0.12), transparent 60%)",
      }} />

      {/* Contenu */}
      <div style={{ width: 560, position: "relative", zIndex: 1, padding: "0 20px" }}>

        {/* Header */}
        <div style={{ display: "flex", alignItems: "center", gap: 16, marginBottom: 32 }}>
          <div style={{
            width: 52, height: 52, borderRadius: 14,
            background: "var(--bg2)",
            border: "1px solid var(--border)",
            color: "var(--accent)",
            display: "flex", alignItems: "center", justifyContent: "center",
            position: "relative",
            flexShrink: 0,
          }}>
            <Icon name="sparkles" size={22} />
            <div style={{
              position: "absolute", inset: -4, borderRadius: 16,
              border: "2px solid var(--accent)",
              borderTopColor: "transparent",
              animation: "spin 1.5s linear infinite",
              opacity: 0.7,
            }} />
          </div>
          <div>
            <div className="eyebrow-line" style={{ marginBottom: 6 }}>Analyse en cours</div>
            <h2 className="display" style={{ fontSize: 26, margin: 0, color: "var(--white)" }}>
              Construction de votre rapport
            </h2>
          </div>
        </div>

        {/* Description */}
        <p style={{ fontSize: 14, color: "var(--gray)", margin: "0 0 24px", lineHeight: 1.6 }}>
          Nous croisons vos réponses avec notre base de plus de 1&nbsp;200 audits dans votre secteur
          pour produire un diagnostic personnalisé. Cela prend moins de 30 secondes.
        </p>

        {/* Steps card */}
        <div className="card" style={{ padding: "8px 20px" }}>
          {steps.map((s, i) => {
            const isDone = done.includes(i);
            const isActive = step === i;
            return (
              <div key={i} style={{
                display: "flex", alignItems: "center", gap: 14,
                padding: "12px 0",
                borderBottom: i < steps.length - 1 ? "1px solid var(--border)" : "none",
                opacity: isDone || isActive ? 1 : 0.35,
                transition: "opacity .3s ease",
              }}>
                {/* Icône état */}
                <div style={{
                  width: 28, height: 28, borderRadius: 8, flexShrink: 0,
                  background: isDone
                    ? "var(--success-dim)"
                    : isActive
                    ? "var(--accent-dim)"
                    : "rgba(255,255,255,0.03)",
                  border: `1px solid ${isDone ? "rgba(34,197,94,0.25)" : isActive ? "var(--border)" : "var(--gray-dim)"}`,
                  color: isDone ? "var(--success)" : isActive ? "var(--accent)" : "var(--text-mute)",
                  display: "flex", alignItems: "center", justifyContent: "center",
                  transition: "all .3s ease",
                }}>
                  {isDone
                    ? <Icon name="check" size={13} strokeWidth={2.5} />
                    : isActive
                    ? <div style={{
                        width: 10, height: 10, borderRadius: 999,
                        border: "2px solid currentColor",
                        borderTopColor: "transparent",
                        animation: "spin 0.8s linear infinite",
                      }} />
                    : <Icon name={s.icon} size={12} />
                  }
                </div>

                {/* Label */}
                <div style={{
                  flex: 1, fontSize: 13, fontWeight: isActive ? 500 : 400,
                  color: isDone || isActive ? "var(--white)" : "var(--text-mute)",
                  transition: "color .3s ease",
                }}>
                  {s.label}
                </div>

                {/* Statut OK */}
                {isDone && (
                  <span className="mono" style={{
                    fontSize: 10, color: "var(--success)",
                    background: "var(--success-dim)",
                    padding: "2px 6px", borderRadius: 4,
                  }}>
                    OK
                  </span>
                )}
              </div>
            );
          })}
        </div>

        {/* Footer */}
        <div style={{ marginTop: 20, textAlign: "center", fontSize: 12, color: "var(--text-mute)" }}>
          Merci {company?.person?.split(" ")[0] || ""} · Analyse confidentielle
        </div>
      </div>
    </div>
  );
}

window.Loading = Loading;