/* ============================================================
   Color Picker Panel
   ============================================================ */

function ColorPickerPanel({ color, onColorChange }) {
  const [tab, setTab] = React.useState('minecraft'); // 'minecraft' | 'recent' | 'custom'
  const [recentColors, setRecentColors] = React.useState([
    '#FFFFFFFF', '#000000FF', '#FF5555FF', '#55FF55FF', '#5555FFFF', '#FFFF55FF', '#FF55FFFF', '#55FFFFFF',
  ]);

  const handleColorInput = (e) => {
    const hex = e.target.value;
    const full = hex.toUpperCase() + 'FF';
    onColorChange(full);
    addToRecent(full);
  };

  const addToRecent = (c) => {
    setRecentColors(prev => {
      const filtered = prev.filter(x => x.toUpperCase() !== c.toUpperCase());
      return [c, ...filtered].slice(0, 10);
    });
  };

  const handleSwatchClick = (c) => {
    onColorChange(c);
    addToRecent(c);
  };

  const rgb = PixelCanvasCore.hexToRgba(color);
  const hex6 = '#' + color.substring(1, 7).toUpperCase();

  return React.createElement('div', { className: 'panel-section' },
    React.createElement('div', { className: 'panel-section__header' },
      React.createElement('span', null, '顏色'),
      React.createElement('span', { className: 'panel-section__header-toggle' }, ''),
    ),
    React.createElement('div', { className: 'panel-section__body' },
      React.createElement('div', { className: 'color-picker-section' },
        React.createElement('div', { className: 'color-preview-row' },
          React.createElement('div', { className: 'color-swatch-large', style: { background: hex6 } },
            React.createElement('input', {
              type: 'color',
              value: hex6,
              onChange: handleColorInput,
            }),
          ),
          React.createElement('div', { className: 'color-values' },
            React.createElement('input', {
              type: 'text',
              className: 'color-hex-input',
              value: hex6,
              onChange: (e) => {
                let v = e.target.value.trim();
                if (!v.startsWith('#')) v = '#' + v;
                if (/^#[0-9A-Fa-f]{6}$/.test(v)) {
                  const full = v.toUpperCase() + 'FF';
                  onColorChange(full);
                  addToRecent(full);
                }
              },
            }),
            React.createElement('span', { className: 'text-xs text-muted text-mono' },
              `R:${rgb.r}  G:${rgb.g}  B:${rgb.b}  A:${rgb.a}`
            ),
          ),
        ),
        React.createElement('div', { className: 'color-tabs' },
          React.createElement('button', {
            className: 'color-tab' + (tab === 'minecraft' ? ' active' : ''),
            onClick: () => setTab('minecraft'),
          }, 'MC 色板'),
          React.createElement('button', {
            className: 'color-tab' + (tab === 'recent' ? ' active' : ''),
            onClick: () => setTab('recent'),
          }, '最近使用'),
        ),
        tab === 'minecraft' && React.createElement('div', { className: 'palette-grid' },
          MINECRAFT_PALETTE.map((c, i) =>
            React.createElement('div', {
              key: i,
              className: 'palette-color',
              style: { background: c },
              title: c,
              onClick: () => handleSwatchClick(c + 'FF'),
            })
          )
        ),
        tab === 'recent' && React.createElement('div', { className: 'palette-grid' },
          recentColors.map((c, i) =>
            React.createElement('div', {
              key: i,
              className: 'palette-color',
              style: { background: c.substring(0, 7) },
              title: c,
              onClick: () => handleSwatchClick(c),
            })
          )
        ),
      )
    )
  );
}

window.ColorPickerPanel = ColorPickerPanel;