/* QUITOS — UI mockups */

const { useState, useEffect, useRef } = React;

/* ---------- Relance list — QUITOS Quote ---------- */

const RELANCE_ROWS = [
  { name: 'ACME SAS',      ref: 'DEV-047', amount: '8 400 €',  when: 'Envoyé il y a 3j' },
  { name: 'Tech Pulse',    ref: 'DEV-048', amount: '3 200 €',  when: 'Envoyé il y a 6j' },
  { name: 'Studio Kalon',  ref: 'DEV-051', amount: '12 800 €', when: 'Envoyé il y a 1j' },
];

const STATUS_CYCLE = [
  { key: 'sent',    label: 'Envoyée',  color: '#A0A0A0' },
  { key: 'opened',  label: 'Ouverte',  color: '#E8892A' },
  { key: 'replied', label: 'Répondue', color: '#2D6A4F' },
];

function RelanceMockup() {
  const [tick, setTick] = useState(0);
  const notifRef = useRef(null);

  /* Status cycling — each row has a different starting offset so they don't change simultaneously */
  useEffect(() => {
    const id = setInterval(() => setTick((t) => t + 1), 2500);
    return () => clearInterval(id);
  }, []);

  /* Floating notification — GSAP pop-in with scale */
  useEffect(() => {
    const el = notifRef.current;
    if (!el || !window.gsap) return;

    gsap.set(el, { opacity: 0, y: 16, scale: 0.96 });

    const showNotif = () => {
      gsap.fromTo(el,
        { opacity: 0, y: 16, scale: 0.96 },
        { opacity: 1, y: 0, scale: 1, duration: 0.5, ease: 'power3.out',
          onComplete: () => {
            gsap.to(el, { opacity: 0, y: -8, scale: 0.97, duration: 0.4, delay: 3, ease: 'power2.in' });
          },
        }
      );
    };

    const initial = setTimeout(showNotif, 800);
    const id = setInterval(showNotif, 5000);
    return () => { clearTimeout(initial); clearInterval(id); };
  }, []);

  return (
    <div style={{ position: 'relative' }}>
      <div style={{
        background: '#fff', border: '1px solid #E5E5E3',
        borderRadius: 16, overflow: 'hidden',
        boxShadow: '0 4px 24px rgba(0,0,0,0.06)',
      }}>
        <div style={{
          padding: '16px 20px', borderBottom: '1px solid #E5E5E3',
          display: 'flex', alignItems: 'center', gap: 12,
          fontSize: 14, fontWeight: 600, color: '#0A0A0A',
        }}>
          <Icon name="list" size={16} color="#6B6B6B" />
          Relances devis en cours
        </div>
        {RELANCE_ROWS.map((row, i) => {
          /* Each row starts at a different phase so they cycle independently */
          const status = STATUS_CYCLE[(tick + i) % STATUS_CYCLE.length];
          return (
            <div key={row.ref} style={{
              display: 'flex', alignItems: 'center', gap: 16,
              padding: '18px 20px',
              borderBottom: i < RELANCE_ROWS.length - 1 ? '1px solid #E5E5E3' : 'none',
            }}>
              <div style={{ display: 'flex', flexDirection: 'column', flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 15, fontWeight: 600, color: '#0A0A0A' }}>{row.name}</div>
                <div style={{ fontSize: 12, color: '#6B6B6B', marginTop: 2 }}>{row.when}</div>
              </div>
              <div style={{ fontSize: 12, color: '#6B6B6B', fontVariantNumeric: 'tabular-nums' }}>{row.ref}</div>
              <div style={{ fontSize: 15, fontWeight: 600, fontVariantNumeric: 'tabular-nums', minWidth: 80, textAlign: 'right' }}>
                {row.amount}
              </div>
              <div style={{
                display: 'flex', alignItems: 'center', gap: 8,
                fontSize: 13,
                color: status.key === 'replied' ? '#2D6A4F' : '#6B6B6B',
                fontWeight: status.key === 'replied' ? 500 : 400,
                minWidth: 110,
                transition: 'color 400ms ease',
              }}>
                <span style={{
                  width: 9, height: 9, borderRadius: '50%',
                  background: status.color,
                  flexShrink: 0,
                  transition: 'background 400ms ease',
                }} />
                <span style={{ transition: 'color 400ms ease' }}>{status.label}</span>
              </div>
            </div>
          );
        })}
      </div>

      {/* Floating notification — GSAP animated, always in DOM */}
      <div
        ref={notifRef}
        className="glass-card"
        style={{
          position: 'absolute', left: -16, bottom: -24,
          borderRadius: 100,
          padding: '12px 20px',
          display: 'flex', alignItems: 'center', gap: 12,
          pointerEvents: 'none',
          whiteSpace: 'nowrap',
        }}
      >
        <span style={{ width: 9, height: 9, borderRadius: '50%', background: '#2D6A4F', flexShrink: 0 }} />
        <span style={{ fontSize: 14, color: '#0A0A0A', fontWeight: 500 }}>
          ↑ 2 devis relancés ce matin <span style={{ color: '#2D6A4F', fontWeight: 700, marginLeft: 4 }}>✓</span>
        </span>
      </div>
    </div>
  );
}

/* ---------- Pay timeline — QUITOS Pay ---------- */

const PAY_STEPS = [
  { day: 'J+5',  label: 'Email compréhensif' },
  { day: 'J+15', label: 'Rappel courtois' },
  { day: 'J+30', label: 'Mise en demeure' },
  { day: 'J+60', label: 'Recommandé électronique' },
];

function PayTimelineMockup() {
  const [filled, setFilled] = useState(0);
  const ref = useRef(null);

  useEffect(() => {
    const el = ref.current;
    if (!el) return;

    if (window.gsap && window.ScrollTrigger) {
      /* GSAP ScrollTrigger approach */
      const trigger = ScrollTrigger.create({
        trigger: el,
        start: 'top 75%',
        onEnter: () => {
          PAY_STEPS.forEach((_, i) => {
            setTimeout(() => setFilled((f) => Math.max(f, i + 1)), i * 400);
          });
          /* Animate connector lines appearing */
          const connectors = el.querySelectorAll(".pay-connector");
          connectors.forEach((line, i) => {
            gsap.fromTo(line,
              { opacity: 0 },
              { opacity: 1, duration: 0.4, delay: (i * 0.4) + 0.3, ease: 'power2.out' }
            );
          });
        },
        once: true,
      });
      return () => trigger.kill();
    } else {
      /* Fallback: IntersectionObserver */
      const io = new IntersectionObserver(([entry]) => {
        if (entry.isIntersecting) {
          PAY_STEPS.forEach((_, i) => {
            setTimeout(() => setFilled((f) => Math.max(f, i + 1)), i * 350);
          });
          io.disconnect();
        }
      }, { threshold: 0.4 });
      io.observe(el);
      return () => io.disconnect();
    }
  }, []);

  const filledTarget = Math.min(filled, 2);

  return (
    <div ref={ref} style={{
      background: 'var(--color-bg-surface-dark)',
      border: '1px solid var(--color-border-dark)',
      borderRadius: 20,
      padding: '36px 40px',
    }}>
      <div style={{
        fontSize: 13, fontWeight: 500, letterSpacing: '0.06em',
        textTransform: 'uppercase', color: '#A0A0A0', marginBottom: 28,
      }}>
        Séquence de relance — QUITOS Pay
      </div>
      <div style={{ display: 'flex', flexDirection: 'column' }}>
        {PAY_STEPS.map((step, i) => {
          const isFilled = i < filledTarget;
          return (
            <div key={step.day} style={{
              display: 'flex', alignItems: 'flex-start', gap: 18,
              position: 'relative',
              paddingBottom: i < PAY_STEPS.length - 1 ? 22 : 0,
            }}>
              {i < PAY_STEPS.length - 1 && (
                <div
                  className="pay-connector"
                  style={{
                    position: 'absolute', left: 9 + 48 - 1, top: 18, bottom: 0, width: 1,
                    background: '#3A3A3A',
                  }}
                />
              )}
              <div style={{
                minWidth: 48, fontSize: 13, fontWeight: 600,
                color: '#A0A0A0', fontVariantNumeric: 'tabular-nums', paddingTop: 1,
              }}>{step.day}</div>
              <div style={{
                width: 20, height: 20, borderRadius: '50%',
                background: isFilled ? '#2D6A4F' : 'transparent',
                border: `2px solid ${isFilled ? '#2D6A4F' : '#A0A0A0'}`,
                position: 'relative', zIndex: 1, flexShrink: 0,
                transition: 'background 350ms var(--ease-out), border-color 350ms var(--ease-out)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <span style={{
                  color: '#fff', fontSize: 11, fontWeight: 700, lineHeight: 1,
                  opacity: isFilled ? 1 : 0,
                  transition: 'opacity 250ms ease',
                }}>✓</span>
              </div>
              <div style={{ fontSize: 16, fontWeight: 500, color: '#fff', paddingTop: 1 }}>
                {step.label}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

/* ---------- Monthly report mockup ---------- */

function ReportMockup() {
  const rows = [
    { lbl: 'CA récupéré ce mois', val: '14 200 €', accent: true },
    { lbl: 'Devis relancés',      val: '23' },
    { lbl: 'Taux de réponse',     val: '34 %' },
    { lbl: 'DSO réduit de',       val: '-8 jours' },
  ];
  const top3 = [
    { name: 'Renault RH',    amt: '12 800 €' },
    { name: 'Geodis Comms',  amt:  '8 400 €' },
    { name: 'Bouygues Tél.', amt:  '6 200 €' },
  ];

  return (
    <div style={{
      background: '#fff', border: '1px solid #E5E5E3',
      borderRadius: 16, overflow: 'hidden',
      boxShadow: '0 4px 24px rgba(0,0,0,0.06)',
    }}>
      <div style={{
        background: '#2D6A4F', color: '#fff',
        padding: '18px 24px', display: 'flex', alignItems: 'center', gap: 12,
      }}>
        <span style={{ width: 9, height: 9, borderRadius: '50%', background: 'rgba(255,255,255,0.7)' }} />
        <span style={{ fontSize: 14, fontWeight: 600 }}>QUITOS — Rapport Mai 2026</span>
      </div>
      <div style={{ padding: '14px 24px', fontVariantNumeric: 'tabular-nums' }}>
        {rows.map((r) => (
          <div key={r.lbl} style={{
            display: 'flex', justifyContent: 'space-between', alignItems: 'center',
            padding: '14px 0', borderBottom: '1px solid #E5E5E3', fontSize: 15,
          }}>
            <span style={{ color: '#6B6B6B' }}>{r.lbl}</span>
            <span style={{ fontWeight: 700, color: r.accent ? '#2D6A4F' : '#0A0A0A', fontSize: r.accent ? 18 : 15 }}>
              {r.val}
            </span>
          </div>
        ))}
        <div style={{
          fontSize: 12, fontWeight: 500, color: '#6B6B6B',
          letterSpacing: '0.06em', textTransform: 'uppercase',
          padding: '18px 0 8px',
        }}>
          Top 3 devis signés ce mois
        </div>
        {top3.map((t, i) => (
          <div key={t.name} style={{
            display: 'flex', justifyContent: 'space-between', alignItems: 'center',
            padding: '10px 0', fontSize: 14,
            borderBottom: i < top3.length - 1 ? '1px solid #E5E5E3' : 'none',
          }}>
            <span style={{ color: '#0A0A0A' }}>{t.name}</span>
            <span style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
              <span style={{ color: '#0A0A0A', fontWeight: 600 }}>{t.amt}</span>
              <span style={{ color: '#2D6A4F', fontWeight: 700 }}>✓</span>
            </span>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ---------- Lifestyle photo — uses real image with overlay UI ---------- */

function LifestylePhoto() {
  const imgSrc = 'assets/images/quitos-ambiance.png';

  return (
    <div style={{
      position: 'relative', width: '100%', aspectRatio: '16 / 9',
      overflow: 'hidden', background: '#1a1410',
    }}>
      <img
        src={imgSrc}
        alt=""
        aria-hidden="true"
        style={{
          position: 'absolute', inset: 0,
          width: '100%', height: '100%',
          objectFit: 'cover',
          filter: 'saturate(0.85) brightness(0.88)',
        }}
        onError={(e) => { e.target.style.display = 'none'; }}
      />
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(135deg, rgba(10,10,10,0.35) 0%, rgba(10,10,10,0.1) 60%)',
      }} />

      {/* Overlay UI — rapport mini (bottom-left) */}
      <div style={{
        position: 'absolute', left: 32, bottom: 32,
        background: '#fff', borderRadius: 20,
        padding: '18px 22px',
        boxShadow: '0 8px 32px rgba(0,0,0,0.12)',
        minWidth: 260,
      }}>
        <div style={{
          fontSize: 11, fontWeight: 500, color: '#6B6B6B',
          letterSpacing: '0.06em', textTransform: 'uppercase', marginBottom: 12,
        }}>
          Rapport QUITOS · Mai 2026
        </div>
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
          paddingBottom: 8, borderBottom: '1px solid #E5E5E3', marginBottom: 8,
          fontVariantNumeric: 'tabular-nums',
        }}>
          <span style={{ fontSize: 13, color: '#6B6B6B' }}>CA récupéré</span>
          <span style={{ fontSize: 17, fontWeight: 700, color: '#2D6A4F' }}>14 200 € ↑</span>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', fontVariantNumeric: 'tabular-nums' }}>
          <span style={{ fontSize: 13, color: '#6B6B6B' }}>Devis traités</span>
          <span style={{ fontSize: 15, fontWeight: 600, color: '#0A0A0A' }}>23</span>
        </div>
      </div>

      {/* Overlay UI — pill (bottom-right) */}
      <div style={{
        position: 'absolute', right: 32, bottom: 60,
        background: '#fff', borderRadius: 100,
        padding: '12px 20px',
        boxShadow: '0 8px 32px rgba(0,0,0,0.12)',
        display: 'flex', alignItems: 'center', gap: 10,
      }}>
        <span style={{ color: '#2D6A4F', fontWeight: 700 }}>✓</span>
        <span style={{ fontSize: 14, color: '#0A0A0A', fontWeight: 500 }}>3 relances envoyées</span>
      </div>
    </div>
  );
}

Object.assign(window, { RelanceMockup, PayTimelineMockup, ReportMockup, LifestylePhoto });
