/* global React */
// ====================================================================
// InteractivePhone — clickable phone mock with real/representative
// screens. Crossfade+blur between tabs (per Emil Kowalski's recipe for
// masking imperfect crossfades) instead of a hard cut.
// ====================================================================

function HomeScreenMock() {
  const items = [
    { name: "Ray-Ban Meta Wayfarer (Gen 1)", price: "MXN 5,301.72", old: "MXN 7,069.00", disc: "-25%", store: "Amazon" },
    { name: "SOJOS Lentes de Sol Hexagonal Metal", price: "MXN 339.99", store: "Amazon" },
    { name: "Samsung Galaxy Buds Core", price: "MXN 699.00", old: "MXN 999.00", disc: "-30%", store: "eBay" },
  ];
  return (
    <div className="ca-screen">
      <div className="ca-status"><span>23:42</span><span className="ca-sig" /></div>
      <div className="ca-head">
        <span className="ca-title">Mis Productos</span>
        <span className="ca-head-ic"><i className="ca-i-check" /><i className="ca-i-filter" /></span>
      </div>
      <div className="ca-list">
        {items.map((it, i) => (
          <div className="ca-card" key={i}>
            <div className="ca-thumb" />
            <div className="ca-info">
              <span className="ca-name">{it.name}</span>
              <div className="ca-prices">
                <span className="ca-price">{it.price}</span>
                {it.old && <span className="ca-old">{it.old}</span>}
                {it.disc && <span className="ca-disc">{it.disc}</span>}
              </div>
              <span className="ca-store">{it.store}</span>
            </div>
          </div>
        ))}
      </div>
      <div className="ca-pending">
        <span>Total pendiente · 16 productos</span>
        <strong>MXN 66,300.31</strong>
      </div>
      <div className="ca-nav">
        <span className="active"><i className="ca-nv ca-nv-home" />Inicio</span>
        <span><i className="ca-nv ca-nv-list" />Listas</span>
        <span><i className="ca-nv ca-nv-share" />Compartidas</span>
        <span><i className="ca-nv ca-nv-cog" />Ajustes</span>
      </div>
      <div className="ca-fab">+</div>
    </div>
  );
}

function SharedScreenMock() {
  const items = [
    { name: "Ausein Juego de 3 Sartenes de Hierro Fundido", price: "MXN 469.04", old: "MXN 498.99", disc: "-6%", store: "Amazon", by: "Macaneitor" },
    { name: "TV TCL Pantalla 55 Pulgadas QD-Mini LED", price: "MXN 6,990.00", old: "MXN 12,599.00", disc: "-45%", store: "Walmart", by: "Usuario" },
  ];
  return (
    <div className="ca-screen">
      <div className="ca-status"><span>23:42</span><span className="ca-sig" /></div>
      <div className="ca-shared-head">
        <div className="ca-shared-title">
          <span className="ca-shared-icon">🏠</span>
          <span>Casa</span>
        </div>
        <div className="ca-avatars">
          <span className="ca-avatar" style={{ background: "#e07a3a" }}>M</span>
          <span className="ca-avatar" style={{ background: "#2f8f6a" }}>U</span>
        </div>
      </div>
      <div className="ca-shared-total">
        <span>Total acumulado</span>
        <strong>MXN 7,459.04</strong>
      </div>
      <div className="ca-list">
        {items.map((it, i) => (
          <div className="ca-card" key={i}>
            <div className="ca-thumb" />
            <div className="ca-info">
              <span className="ca-name">{it.name}</span>
              <div className="ca-prices">
                <span className="ca-price">{it.price}</span>
                {it.old && <span className="ca-old">{it.old}</span>}
                {it.disc && <span className="ca-disc">{it.disc}</span>}
              </div>
              <span className="ca-store">{it.store} · agregó {it.by}</span>
            </div>
          </div>
        ))}
      </div>
      <div className="ca-nav">
        <span><i className="ca-nv ca-nv-home" />Inicio</span>
        <span><i className="ca-nv ca-nv-list" />Listas</span>
        <span className="active"><i className="ca-nv ca-nv-share" />Compartidas</span>
        <span><i className="ca-nv ca-nv-cog" />Ajustes</span>
      </div>
    </div>
  );
}

function LoginScreenMock() {
  return (
    <div className="ca-screen-img">
      <img src="assets/screens/screen-login.png" alt="Pantalla de inicio de sesión de CartAnywhere" />
    </div>
  );
}

const TABS = [
  { id: "inicio", label: "Inicio", render: HomeScreenMock },
  { id: "compartidas", label: "Compartidas", render: SharedScreenMock },
  { id: "cuenta", label: "Cuenta", render: LoginScreenMock },
];

function InteractivePhone() {
  const [active, setActive] = React.useState(0);
  const [displayed, setDisplayed] = React.useState(0);
  const [transitioning, setTransitioning] = React.useState(false);
  const timers = React.useRef([]);

  const selectTab = (i) => {
    if (i === active) return;
    setActive(i);
    setTransitioning(true);
    timers.current.forEach(clearTimeout);
    const t1 = setTimeout(() => {
      setDisplayed(i);
      const t2 = setTimeout(() => setTransitioning(false), 20);
      timers.current.push(t2);
    }, 180);
    timers.current.push(t1);
  };

  React.useEffect(() => () => timers.current.forEach(clearTimeout), []);

  const Screen = TABS[displayed].render;

  return (
    <div className="iphone-wrap">
      <div className="phone phone-float">
        <div className="phone-notch" />
        <div className="phone-screen">
          <div className={"phone-screen-content" + (transitioning ? " transitioning" : "")}>
            <Screen />
          </div>
        </div>
      </div>
      <div className="iphone-tabs">
        {TABS.map((t, i) => (
          <button
            key={t.id}
            className={"iphone-tab" + (active === i ? " active" : "")}
            onClick={() => selectTab(i)}
          >
            {t.label}
          </button>
        ))}
      </div>
    </div>
  );
}

window.InteractivePhone = InteractivePhone;