/* Shared primitives for the ReplyFirst site kit */
const { useState, useEffect, useRef } = React;

function Icon({ name, size, color, style }) {
  return (
    <span
      style={{ display: 'inline-flex', alignItems: 'center', color: color || 'inherit', ...style }}
      dangerouslySetInnerHTML={{ __html: window.rfIcon(name, { size: size || '1em', color: color || 'currentColor' }) }}
    />
  );
}

function Button({ variant = 'primary', icon, iconRight, children, onClick, className = '', light }) {
  const cls = ['btn', variant === 'secondary' ? 'secondary' : '', light ? 'onlight' : '', className].filter(Boolean).join(' ');
  return (
    <button className={cls} onClick={onClick}>
      {icon && <Icon name={icon} />}
      <span>{children}</span>
      {iconRight && <Icon name={iconRight} />}
    </button>
  );
}

function Badge({ children, variant, live }) {
  return (
    <span className={'badge ' + (variant || '')}>
      {live && <span className="dot live"></span>}
      {children}
    </span>
  );
}

function Stars({ n = 5 }) {
  return (
    <div className="stars">
      {Array.from({ length: n }).map((_, i) => <Icon key={i} name="star" />)}
    </div>
  );
}

/* Live incoming-call ticket — always fully populated, with subtle live
   touches (pulsing dot + ring waves + ticking callback counter). */
function DispatchCard({ animate = true }) {
  const [secs, setSecs] = useState(9);
  const [rec, setRec] = useState(38 * 60 + 18);
  useEffect(() => {
    if (!animate) { setSecs(9); return; }
    const id = setInterval(() => { setSecs(s => (s <= 0 ? 12 : s - 1)); setRec(r => r + 1); }, 1000);
    return () => clearInterval(id);
  }, [animate]);
  const rm = String(Math.floor(rec / 60)).padStart(2, '0');
  const rs = String(rec % 60).padStart(2, '0');

  return (
    <div className="dispatch">
      <div className="disp-head">
        <span className="disp-brand"><span className="bolt-sm"><svg viewBox="0 0 448 512" width="13" height="14" aria-hidden="true"><path fill="currentColor" d="M349.4 44.6c5.9-13.7 1.5-29.7-10.6-38.5s-28.6-8.5-40.3 .7L44.4 234.7c-7.9 7-12.4 17-12.4 27.6c0 19.7 16 35.7 35.7 35.7l112.6 0L98.6 467.4c-5.9 13.7-1.5 29.7 10.6 38.5s28.6 8.5 40.3-.7L403.6 277.3c7.9-7 12.4-17 12.4-27.6c0-19.7-16-35.7-35.7-35.7l-112.6 0L349.4 44.6z"></path></svg></span> ReplyFirst Dispatch</span>
        <span className="disp-rec"><span className="rec-dot" style={{ animation: animate ? undefined : 'none' }}></span> REC {rm}:{rs}<span className="sig" aria-hidden="true"><i></i><i></i><i></i><i></i></span></span>
      </div>
      <div className="drow">
        <span className="dlabel">
          <span className={animate ? 'ring-ico' : ''}>
            <span className="dot live" style={{ background: 'var(--green)', animation: animate ? undefined : 'none' }}></span>
          </span>
          Incoming Call
        </span>
        <span className="dlabel">02:14 AM</span>
      </div>
      <div className="dnum-row">
        <div className="dnum">(604) 555-0148</div>
        {animate && <div className="deq" aria-hidden="true">{Array.from({ length: 14 }).map((_, i) => <i key={i} style={{ animationDelay: ((i % 6) * 0.08) + 's', animationDuration: (0.7 + (i % 5) * 0.12) + 's' }}></i>)}</div>}
      </div>
      <div className="drow">
        <span className="dsub">Garage door repair · Emergency</span>
        <span className="pri-pill">Priority: High</span>
      </div>
      <div className="dconvo">
        <div className="dmsg">
          <span className="ava"><Icon name="phone" size={15} /></span>
          <div><div className="who">Caller</div><div className="txt">“Our garage door is stuck halfway and my car is trapped inside. I need someone today.”</div></div>
        </div>
        <div className="dmsg ai">
          <span className="ava"><Icon name="headset" size={15} /></span>
          <div><div className="who">AI Receptionist</div><div className="txt">“I can help get this routed. Can I get your name, address, and whether the door is fully jammed?”</div></div>
        </div>
      </div>
      <div className="drouted">
        <span className="l"><Icon name="circleCheck" /> Routed to Owner · Mike</span>
        <span className="r">Callback in 0:{String(secs).padStart(2, '0')}</span>
      </div>
      <div className="floatval">
        <div className="big">$2,840</div>
        <div className="cap">Est. lead value / wk</div>
      </div>
    </div>
  );
}

Object.assign(window, { Icon, Button, Badge, Stars, DispatchCard });