const canvas = document.getElementById('ink');
const ctx = canvas.getContext('2d');
const cursor = document.getElementById('cursor');

let dpr = Math.max(1, window.devicePixelRatio || 1);
let strokes = [];

function resize() {
  dpr = Math.max(1, window.devicePixelRatio || 1);
  canvas.width = window.innerWidth * dpr;
  canvas.height = window.innerHeight * dpr;
  canvas.style.width = window.innerWidth + 'px';
  canvas.style.height = window.innerHeight + 'px';
  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
  redraw();
}
window.addEventListener('resize', resize);

function drawStroke(s) {
  if (s.points.length < 2) return;
  ctx.save();
  ctx.lineCap = 'round';
  ctx.lineJoin = 'round';
  if (s.erase) {
    ctx.globalCompositeOperation = 'destination-out';
    ctx.strokeStyle = 'rgba(0,0,0,1)';
    ctx.lineWidth = s.size * 4;
  } else {
    ctx.globalCompositeOperation = 'source-over';
    ctx.strokeStyle = s.color;
    ctx.lineWidth = s.size;
  }
  ctx.beginPath();
  ctx.moveTo(s.points[0].x, s.points[0].y);
  for (let i = 1; i < s.points.length - 1; i++) {
    const p = s.points[i], n = s.points[i + 1];
    const mx = (p.x + n.x) / 2, my = (p.y + n.y) / 2;
    ctx.quadraticCurveTo(p.x, p.y, mx, my);
  }
  const last = s.points[s.points.length - 1];
  ctx.lineTo(last.x, last.y);
  ctx.stroke();
  ctx.restore();
}

function redraw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  strokes.forEach(drawStroke);
}

let tool = { color: '#3a2a1c', size: 3, erase: false };
const sizes = [2, 3, 5, 9];
let sizeIdx = 1;

function setActiveSwatch(el) {
  document.querySelectorAll('.swatch').forEach(s => s.classList.remove('active'));
  el.classList.add('active');
}

document.querySelectorAll('.swatch[data-color]').forEach(el => {
  el.addEventListener('click', () => {
    tool.color = el.dataset.color;
    tool.erase = false;
    setActiveSwatch(el);
    document.documentElement.style.setProperty('--cursor-color', tool.color);
  });
});

document.getElementById('eraserBtn').addEventListener('click', (e) => {
  tool.erase = true;
  setActiveSwatch(e.currentTarget);
});

document.getElementById('clearBtn').addEventListener('click', () => {
  strokes = [];
  redraw();
});

const sizeBtn = document.getElementById('sizeBtn');
const sizeDot = document.getElementById('sizeDot');
function applySize() {
  tool.size = sizes[sizeIdx];
  const d = Math.min(18, Math.max(4, tool.size * 1.8));
  sizeDot.style.width = d + 'px';
  sizeDot.style.height = d + 'px';
}
sizeBtn.addEventListener('click', () => {
  sizeIdx = (sizeIdx + 1) % sizes.length;
  applySize();
});
applySize();

let drawing = false;
let current = null;
let overUI = false;

function isUI(target) {
  return target && (
    target.closest('[data-ui]') ||
    target.closest('.dock') ||
    target.closest('.changelog-drawer') ||
    target.closest('h1.title') ||
    target.closest('.lede') ||
    target.closest('.eyebrow')
  );
}

window.addEventListener('pointermove', (e) => {
  cursor.style.transform = `translate(${e.clientX}px, ${e.clientY}px) translate(-50%, -50%)`;
  const ui = isUI(e.target);
  cursor.classList.toggle('over-ui', !!ui);
  overUI = !!ui;
  if (drawing && current && !ui) {
    current.points.push({ x: e.clientX, y: e.clientY });
    drawStroke(current);
  }
});

window.addEventListener('pointerdown', (e) => {
  if (isUI(e.target)) return;
  drawing = true;
  current = {
    color: tool.color,
    size: tool.size,
    erase: tool.erase,
    points: [{ x: e.clientX, y: e.clientY }]
  };
  strokes.push(current);
});

window.addEventListener('pointerup', () => {
  drawing = false;
  current = null;
});

window.addEventListener('keydown', (e) => {
  if (e.key === 'Escape') {
    if (document.getElementById('changelogDrawer').classList.contains('open')) {
      closeChangelog();
    } else {
      strokes = []; redraw();
    }
  }
  if (e.key === 'e' || e.key === 'E') {
    tool.erase = true;
    setActiveSwatch(document.getElementById('eraserBtn'));
  }
});

document.documentElement.style.setProperty('--cursor-color', tool.color);
resize();

const changelogDrawer = document.getElementById('changelogDrawer');

function openChangelog() { changelogDrawer.classList.add('open'); }
function closeChangelog() { changelogDrawer.classList.remove('open'); }

document.getElementById('changelogBtn').addEventListener('click', () => {
  changelogDrawer.classList.toggle('open');
});
document.getElementById('changelogClose').addEventListener('click', closeChangelog);

window.addEventListener('pointerdown', (e) => {
  if (changelogDrawer.classList.contains('open') && !changelogDrawer.contains(e.target) && !document.getElementById('changelogBtn').contains(e.target)) {
    closeChangelog();
  }
}, true);

(function renderChangelog() {
  const body = document.getElementById('changelogBody');
  body.innerHTML = CHANGELOG.map(entry => `
    <div class="changelog-entry">
      <div class="changelog-version">v${entry.version}</div>
      <div class="changelog-date">${entry.date}</div>
      <ul class="changelog-notes">
        ${entry.notes.map(n => `<li>${n}</li>`).join('')}
      </ul>
    </div>
  `).join('');
})();


const palettes = {
  Tan: {
    '--bg': 'oklch(0.94 0.018 75)',
    '--bg-2': 'oklch(0.91 0.024 70)',
    '--fg': 'oklch(0.28 0.035 50)',
    '--fg-soft': 'oklch(0.42 0.028 55)',
    '--fg-mute': 'oklch(0.58 0.022 60)',
    '--line': 'oklch(0.85 0.025 70)',
    '--accent': 'oklch(0.58 0.13 38)',
    '--paper': 'oklch(0.97 0.012 78)',
  },
  Sand: {
    '--bg': 'oklch(0.92 0.025 85)',
    '--bg-2': 'oklch(0.89 0.03 82)',
    '--fg': 'oklch(0.30 0.04 60)',
    '--fg-soft': 'oklch(0.45 0.03 65)',
    '--fg-mute': 'oklch(0.6 0.025 70)',
    '--line': 'oklch(0.82 0.03 80)',
    '--accent': 'oklch(0.55 0.14 50)',
    '--paper': 'oklch(0.96 0.018 85)',
  },
  Linen: {
    '--bg': 'oklch(0.95 0.012 95)',
    '--bg-2': 'oklch(0.92 0.018 90)',
    '--fg': 'oklch(0.26 0.03 55)',
    '--fg-soft': 'oklch(0.4 0.025 60)',
    '--fg-mute': 'oklch(0.56 0.02 65)',
    '--line': 'oklch(0.86 0.018 85)',
    '--accent': 'oklch(0.55 0.15 30)',
    '--paper': 'oklch(0.98 0.008 90)',
  },
};

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => {
    const p = palettes[t.palette] || palettes.Tan;
    Object.entries(p).forEach(([k,v]) => document.documentElement.style.setProperty(k, v));
  }, [t.palette]);

  React.useEffect(() => {
    document.querySelector('.hint').style.display = t.showHint ? '' : 'none';
  }, [t.showHint]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Palette">
        <TweakRadio
          label="Theme"
          value={t.palette}
          options={[
            { value: 'Tan',   label: 'Tan' },
            { value: 'Sand',  label: 'Sand' },
            { value: 'Linen', label: 'Linen' },
          ]}
          onChange={(v) => setTweak('palette', v)}
        />
      </TweakSection>
      <TweakSection label="Page">
        <TweakToggle
          label="Show 'draw anywhere' hint"
          value={t.showHint}
          onChange={(v) => setTweak('showHint', v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

const root = document.createElement('div');
document.body.appendChild(root);
ReactDOM.createRoot(root).render(<App />);