/* global React, Label, useApp */
const { useState: useTW, useEffect: useTWE } = React;

function extractDominantColor(imgSrc, callback) {
  const img = new Image();
  img.crossOrigin = 'anonymous';
  img.onload = function() {
    const c = document.createElement('canvas');
    const s = 50;
    c.width = s; c.height = s;
    const ctx = c.getContext('2d');
    ctx.drawImage(img, 0, 0, s, s);
    const data = ctx.getImageData(0, 0, s, s).data;
    let rT = 0, gT = 0, bT = 0, count = 0;
    for (let i = 0; i < data.length; i += 4) {
      const r = data[i], g = data[i+1], b = data[i+2];
      // weight darker colors more heavily
      const brightness = (r + g + b) / 3;
      if (brightness < 200) {
        const w = 1 + (1 - brightness / 255) * 2; // darker = heavier weight
        rT += r * w; gT += g * w; bT += b * w; count += w;
      }
    }
    if (count > 0) {
      const dr = Math.round(rT / count * 0.35);
      const dg = Math.round(gT / count * 0.35);
      const db = Math.round(bT / count * 0.35);
      callback('rgb(' + dr + ',' + dg + ',' + db + ')');
    } else {
      callback('#0a0812');
    }
  };
  img.src = imgSrc;
}

function applyBg(dataUrl) {
  const bg = document.getElementById('bgImage');
  const vignette = document.getElementById('bgVignette');
  if (!bg) return;

  if (dataUrl) {
    bg.style.backgroundImage = 'url(' + dataUrl + ')';
    bg.style.opacity = '0.55';
    if (vignette) vignette.style.opacity = '1';
    document.body.classList.add('has-bg');
    extractDominantColor(dataUrl, function(color) {
      document.body.style.backgroundColor = color;
      // 从提取色生成面板底色（稍亮一点）
      const m = color.match(/\d+/g);
      if (m) {
        const r = Math.min(255, parseInt(m[0]) + 15);
        const g = Math.min(255, parseInt(m[1]) + 15);
        const b = Math.min(255, parseInt(m[2]) + 15);
        const elev = 'rgb(' + (r+10) + ',' + (g+10) + ',' + (b+10) + ')';
        const soft = 'rgb(' + (r+5) + ',' + (g+5) + ',' + (b+5) + ')';
        document.documentElement.style.setProperty('--bg-elev', elev);
        document.documentElement.style.setProperty('--bg-soft', soft);
      }
      try { localStorage.setItem('bgColor', color); } catch(e) {}
    });
  } else {
    bg.style.opacity = '0';
    if (vignette) vignette.style.opacity = '0';
    document.body.classList.remove('has-bg');
    document.body.style.backgroundColor = '';
    document.documentElement.style.removeProperty('--custom-elev');
    document.documentElement.style.removeProperty('--custom-soft');
    localStorage.removeItem('bgColor');
  }
}

function TweakPanel() {
  const [hasBg, setHasBg] = useTW(false);

  useTWE(() => {
    const saved = localStorage.getItem('bgImgData');
    const savedColor = localStorage.getItem('bgColor');
    const savedElev = localStorage.getItem('bgElev');
    const savedSoft = localStorage.getItem('bgSoft');
    if (saved) {
      applyBg(saved);
      setHasBg(true);
      if (savedColor) document.body.style.backgroundColor = savedColor;
      if (savedElev) document.documentElement.style.setProperty('--custom-elev', savedElev);
      if (savedSoft) document.documentElement.style.setProperty('--custom-soft', savedSoft);
    }
  }, []);

  function handleUpload(e) {
    const file = e.target.files && e.target.files[0];
    if (!file) return;
    const url = URL.createObjectURL(file);
    const img = new Image();
    img.onload = function() {
      // extract dominant color directly
      const c = document.createElement('canvas');
      c.width = 40; c.height = 40;
      const ctx = c.getContext('2d');
      ctx.drawImage(img, 0, 0, 40, 40);
      const data = ctx.getImageData(0, 0, 40, 40).data;
      // find most saturated/dominant color
      let bestR=0, bestG=0, bestB=0, bestScore=0;
      for (let i=0; i<data.length; i+=4) {
        const r=data[i], g=data[i+1], b=data[i+2];
        const max=Math.max(r,g,b), min=Math.min(r,g,b);
        const sat = max > 0 ? (max-min)/max : 0;
        const score = sat * (max/255);
        if (score > bestScore) {
          bestScore=score; bestR=r; bestG=g; bestB=b;
        }
      }
      const dr = Math.round(bestR*0.25);
      const dg = Math.round(bestG*0.25);
      const db = Math.round(bestB*0.25);
      const bgColor = 'rgb('+dr+','+dg+','+db+')';
      const elevColor = 'rgb('+(dr+18)+','+(dg+18)+','+(db+18)+')';
      const softColor = 'rgb('+(dr+10)+','+(dg+10)+','+(db+10)+')';

      document.body.style.backgroundColor = bgColor;
      document.documentElement.style.setProperty('--custom-elev', elevColor);
      document.documentElement.style.setProperty('--custom-soft', softColor);

      try {
        localStorage.setItem('bgColor', bgColor);
        localStorage.setItem('bgElev', elevColor);
        localStorage.setItem('bgSoft', softColor);
      } catch(err) {}

      // save as compressed dataURL for persistence
      const saveCanvas = document.createElement('canvas');
      const maxW = 1440, maxH = 900;
      let sw = img.naturalWidth, sh = img.naturalHeight;
      if (sw > maxW) { sh = sh * maxW / sw; sw = maxW; }
      if (sh > maxH) { sw = sw * maxH / sh; sh = maxH; }
      saveCanvas.width = sw; saveCanvas.height = sh;
      saveCanvas.getContext('2d').drawImage(img, 0, 0, sw, sh);
      const compressed = saveCanvas.toDataURL('image/jpeg', 0.65);
      try { localStorage.setItem('bgImgData', compressed); } catch(err) {
        // still too large, try lower quality
        try { localStorage.setItem('bgImgData', saveCanvas.toDataURL('image/jpeg', 0.3)); } catch(e2) {}
      }

      // apply bg image
      const bgEl = document.getElementById('bgImage');
      const vig = document.getElementById('bgVignette');
      if (bgEl) {
        bgEl.style.backgroundImage = 'url('+url+')';
        bgEl.style.opacity = '0.5';
      }
      if (vig) vig.style.opacity = '1';
      document.body.classList.add('has-bg');
      setHasBg(true);
    };
    img.src = url;
    e.target.value = '';
  }

  function clearBg() {
    applyBg(null);
    setHasBg(false);
    localStorage.removeItem('bgImgData');
  }

  return (
    <div style={{
      position: 'fixed', bottom: 24, right: 24,
      display: 'flex', gap: 8, alignItems: 'center',
      zIndex: 9999,
    }}>
      {hasBg && (
        <button onClick={clearBg} style={{
          background: 'rgba(0,0,0,0.3)',
          backdropFilter: 'blur(14px)',
          WebkitBackdropFilter: 'blur(14px)',
          border: '1px solid var(--rule)',
          padding: '10px 16px',
          borderRadius: 100,
          cursor: 'pointer',
          fontFamily: 'var(--hand)',
          fontStyle: 'italic',
          fontSize: 14,
          color: 'var(--ink-soft)',
          transition: 'all 0.3s',
        }}
        onMouseEnter={e => e.currentTarget.style.color = 'var(--ink)'}
        onMouseLeave={e => e.currentTarget.style.color = 'var(--ink-soft)'}
        >clear mood</button>
      )}
      <label style={{
        background: 'rgba(0,0,0,0.3)',
        backdropFilter: 'blur(14px)',
        WebkitBackdropFilter: 'blur(14px)',
        border: '1px solid var(--rule)',
        padding: '10px 20px',
        borderRadius: 100,
        cursor: 'pointer',
        fontFamily: 'var(--hand)',
        fontStyle: 'italic',
        fontSize: 15,
        color: 'var(--ink-soft)',
        transition: 'all 0.3s',
        letterSpacing: '0.02em',
      }}
      onMouseEnter={e => { e.currentTarget.style.background = 'rgba(0,0,0,0.45)'; e.currentTarget.style.color = 'var(--ink)'; }}
      onMouseLeave={e => { e.currentTarget.style.background = 'rgba(0,0,0,0.3)'; e.currentTarget.style.color = 'var(--ink-soft)'; }}
      >
        upload a mood
        <input type="file" accept="image/*" style={{ display: 'none' }} onChange={handleUpload} />
      </label>
    </div>
  );
}

window.TweakPanel = TweakPanel;