/* ============================================================
   Sidebar (identity column) + shared atoms
   ana.sh-style sticky left column.
   ============================================================ */
const { useState, useEffect, useRef } = React;

/* ---- live local clock for a given UTC offset ---- */
function useClock(tzOffset) {
  const [now, setNow] = useState(() => new Date());
  useEffect(() => {
    const id = setInterval(() => setNow(new Date()), 1000);
    return () => clearInterval(id);
  }, []);
  const utc = now.getTime() + now.getTimezoneOffset() * 60000;
  const local = new Date(utc + tzOffset * 3600000);
  const hh = String(local.getHours()).padStart(2, '0');
  const mm = String(local.getMinutes()).padStart(2, '0');
  const ss = String(local.getSeconds()).padStart(2, '0');
  return { hh, mm, ss, hour: local.getHours() };
}

const STATUS_COLOR = {
  online: 'var(--status-online)', idle: 'var(--status-idle)',
  dnd: 'var(--status-dnd)', offline: 'var(--status-offline)',
};

/* ---- subtle pointer tilt for any card ---- */
function useTilt(enabled) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el || !enabled) return;
    let raf = 0;
    const onMove = (e) => {
      const r = el.getBoundingClientRect();
      const px = (e.clientX - r.left) / r.width - 0.5;
      const py = (e.clientY - r.top) / r.height - 0.5;
      cancelAnimationFrame(raf);
      raf = requestAnimationFrame(() => {
        el.style.transform = `perspective(800px) rotateX(${(-py * 5).toFixed(2)}deg) rotateY(${(px * 5).toFixed(2)}deg) translateY(-4px)`;
      });
    };
    const onLeave = () => { cancelAnimationFrame(raf); el.style.transform = ''; };
    el.addEventListener('mousemove', onMove);
    el.addEventListener('mouseleave', onLeave);
    return () => { el.removeEventListener('mousemove', onMove); el.removeEventListener('mouseleave', onLeave); cancelAnimationFrame(raf); };
  }, [enabled]);
  return ref;
}

/* ---- Theme toggle ---- */
function ThemeToggle({ theme, onToggle }) {
  return (
    <button className="toggle" onClick={onToggle} aria-label="Toggle theme" title="Toggle theme">
      <span className="thumb">{theme === 'dark' ? <Icon.moon /> : <Icon.sun />}</span>
    </button>
  );
}

/* ---- Sidebar ---- */
function Sidebar({ data, theme, onToggleTheme }) {
  const clk = useClock(data.location.tzOffset);
  const [copied, setCopied] = useState(false);
  const [avatar, setAvatar] = useState(null);
  const [liveState, setLiveState] = useState(null);   // online | idle | dnd | offline
  const greetWord = clk.hour < 5 ? 'Still up' : clk.hour < 12 ? 'Good morning' : clk.hour < 18 ? 'Good afternoon' : 'Good evening';

  // pull real Discord avatar + presence (Lanyard → official Discord CDN). Falls back to the "M" monogram.
  useEffect(() => {
    const id = data.discordId;
    if (!id) return;
    let alive = true;
    (async () => {
      try {
        const j = await fetch(`https://api.lanyard.rest/v1/users/${id}`).then((r) => r.json());
        if (!alive || !j.success) return;
        const u = j.data.discord_user;
        if (u && u.avatar) {
          const anim = u.avatar.startsWith('a_');
          setAvatar(`https://cdn.discordapp.com/avatars/${id}/${u.avatar}.${anim ? 'gif' : 'png'}?size=128`);
        }
        if (j.data.discord_status) setLiveState(j.data.discord_status);
      } catch (e) { /* offline — keep monogram */ }
    })();
    return () => { alive = false; };
  }, [data.discordId]);

  const presenceState = liveState || data.status.state;

  return (
    <aside className="sidebar">
      <div className="sb-label">About me</div>
      <div className="id-top">
        <div className={`avatar ${avatar ? 'has-img' : ''}`}>
          {avatar ? <img src={avatar} alt="MaShowMagic" /> : 'M'}
          <span className="presence" style={{ background: STATUS_COLOR[presenceState] }}></span>
        </div>
        <div>
          <div className="id-name">MaShowMagic</div>
          <div className="id-role">{data.roles[0]}</div>
        </div>
      </div>

      <div>
        <h1 className="id-greeting">
          {(() => {
            const parts = greetWord.split(' ');
            const last = parts.pop();
            const head = parts.join(' ');
            return <>{head ? head + ' ' : ''}<span className="greet-last">{last}{'\u00a0'}<span className="wave">👋</span></span></>;
          })()}
        </h1>
        <div className="id-th">{data.greetingTh} · welcome to my corner</div>
      </div>

      <p className="id-bio">{data.bio}</p>

      <div className="id-status">
        <span className="dot pulse" style={{ background: STATUS_COLOR[data.status.state] }}></span>
        <b>{data.status.label}</b>
      </div>

      <div className="id-meta">
        <div className="id-meta-row">
          <Icon.mapPin />
          <span className="flag" aria-label="Thailand" title="Thailand">
            <svg viewBox="0 0 30 20" width="20" height="13" role="img" aria-hidden="true">
              <rect width="30" height="20" fill="#fff"/>
              <rect width="30" height="20" y="0" height="3.34" fill="#a51931"/>
              <rect width="30" height="3.34" y="16.66" fill="#a51931"/>
              <rect width="30" height="6.66" y="6.67" fill="#2d2a4a"/>
            </svg>
          </span>
          {data.location.city}, {data.location.country}
        </div>
        <div className="id-meta-row">
          <Icon.clock />
          <span>Local time</span>
          <span className="mono clk">{clk.hh}:{clk.mm}:{clk.ss} {data.location.tz}</span>
        </div>
      </div>

      <div className="id-socials">
        {data.socials.map((s) => (
          <a key={s.name} className="soc-ico" href={s.href} target="_blank" rel="noreferrer" title={s.name}
             aria-label={s.name}>
            <img src={`https://cdn.simpleicons.org/${s.slug}/${theme === 'dark' ? 'e4e4e7' : '52525b'}`} alt="" />
          </a>
        ))}
      </div>

      <div className="id-actions">
        <a className="btn btn-primary" href="mailto:pluemzgive@gmail.com"
           onClick={() => { navigator.clipboard?.writeText('pluemzgive@gmail.com'); setCopied(true); setTimeout(() => setCopied(false), 1600); }}
           title="pluemzgive@gmail.com">
          {copied ? <Icon.check /> : <Icon.mail />} {copied ? 'Copied! · pluemzgive@gmail.com' : 'Get in touch'}
        </a>
      </div>

      <div className="id-foot">© 2026 MaShowMagic</div>
    </aside>
  );
}

Object.assign(window, { Sidebar, ThemeToggle, useClock, useTilt, STATUS_COLOR });