site-builder/craft/src/panels/right/styles/HeroStylePanel.tsx

import React, { useCallback, useState, useRef } from 'react';
import { useEditor } from '@craftjs/core';
import {
  StylePanelProps,
  CollapsibleSection,
  ColorPickerField,
  uploadToWhp,
  labelStyle,
  inputStyle,
  smallInputStyle,
  btnActiveStyle,
  sectionGap,
} from './shared';

/* ---------- Asset Browser Inline ---------- */
const AssetBrowser: React.FC<{
  filter: 'image' | 'video' | 'all';
  onSelect: (url: string) => void;
}> = ({ filter, onSelect }) => {
  const [assets, setAssets] = useState<any[]>([]);
  const [loading, setLoading] = useState(false);
  const [open, setOpen] = useState(false);

  const loadAssets = useCallback(async () => {
    const cfg = (window as any).WHP_CONFIG;
    if (!cfg) return;
    setLoading(true);
    try {
      const resp = await fetch(`${cfg.apiUrl}?action=list_assets&site_id=${cfg.siteId}`);
      const data = await resp.json();
      if (data.success && Array.isArray(data.assets)) {
        const filtered = filter === 'all' ? data.assets : data.assets.filter((a: any) => {
          const t = (a.type || '').toLowerCase();
          return filter === 'image' ? t.startsWith('image') : t.startsWith('video');
        });
        setAssets(filtered);
      }
    } catch (e) { console.error('Load assets failed:', e); }
    setLoading(false);
  }, [filter]);

  const handleToggle = useCallback(() => {
    if (!open) loadAssets();
    setOpen(!open);
  }, [open, loadAssets]);

  return (
    <div>
      <button onClick={handleToggle} style={{
        ...btnActiveStyle(open), width: '100%', marginTop: 4,
      }}>
        <i className={`fa ${loading ? 'fa-spinner fa-spin' : 'fa-folder-open'}`} style={{ marginRight: 4 }} />
        {open ? 'Close' : 'Browse Assets'}
      </button>
      {open && (
        <div style={{ maxHeight: 160, overflowY: 'auto', display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 4, marginTop: 6, background: '#18181b', borderRadius: 6, padding: 4 }}>
          {assets.map((asset, i) => (
            <div key={i} onClick={() => { onSelect(asset.url); setOpen(false); }}
              style={{ cursor: 'pointer', borderRadius: 4, overflow: 'hidden', border: '2px solid transparent', aspectRatio: '1', transition: 'border-color 0.15s', background: '#27272a', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
              onMouseEnter={(e) => { e.currentTarget.style.borderColor = '#3b82f6'; }}
              onMouseLeave={(e) => { e.currentTarget.style.borderColor = 'transparent'; }}>
              {(asset.type || '').startsWith('image') ? (
                <img src={asset.url} alt={asset.name} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
              ) : (
                <div style={{ textAlign: 'center', padding: 4 }}>
                  <i className="fa fa-film" style={{ fontSize: 20, color: '#71717a' }} />
                  <div style={{ fontSize: 8, color: '#71717a', marginTop: 2, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: 70 }}>
                    {asset.name?.replace(/^\d+_[a-f0-9]+_/, '')}
                  </div>
                </div>
              )}
            </div>
          ))}
          {assets.length === 0 && (
            <p style={{ gridColumn: '1/-1', textAlign: 'center', color: '#71717a', fontSize: 11, padding: 12, margin: 0 }}>
              No {filter} assets uploaded yet
            </p>
          )}
        </div>
      )}
    </div>
  );
};

/* ---------- HERO STYLE PANEL ---------- */
export const HeroStylePanel: React.FC<StylePanelProps> = ({ selectedId, nodeProps }) => {
  const { actions } = useEditor();
  const fileInputRef = useRef<HTMLInputElement>(null);

  const setProp = useCallback((key: string, value: any) => {
    actions.setProp(selectedId, (props: any) => { props[key] = value; });
  }, [actions, selectedId]);

  const handleUpload = useCallback(async (file: File, propKey: string) => {
    const url = await uploadToWhp(file);
    if (url) setProp(propKey, url);
  }, [setProp]);

  const bgType = nodeProps.bgType || 'color';

  return (
    <>
      <CollapsibleSection title="Content">
        <div style={sectionGap}>
          <label style={labelStyle}>Heading</label>
          <input type="text" value={nodeProps.heading || ''} onChange={(e) => setProp('heading', e.target.value)} style={inputStyle} />
        </div>
        <div style={sectionGap}>
          <label style={labelStyle}>Subtitle</label>
          <textarea value={nodeProps.subtitle || ''} onChange={(e) => setProp('subtitle', e.target.value)} rows={3} style={{ ...inputStyle, resize: 'vertical' as const }} />
        </div>
        <div style={sectionGap}>
          <label style={labelStyle}>Button Text</label>
          <input type="text" value={nodeProps.buttonText || ''} onChange={(e) => setProp('buttonText', e.target.value)} style={inputStyle} />
        </div>
        <div style={sectionGap}>
          <label style={labelStyle}>Button URL</label>
          <input type="text" value={nodeProps.buttonHref || ''} onChange={(e) => setProp('buttonHref', e.target.value)} placeholder="#" style={inputStyle} />
        </div>
        <div style={sectionGap}>
          <label style={labelStyle}>Secondary Button</label>
          <input type="text" value={nodeProps.secondaryButtonText || ''} onChange={(e) => setProp('secondaryButtonText', e.target.value)} placeholder="Leave blank to hide" style={inputStyle} />
        </div>
      </CollapsibleSection>

      <CollapsibleSection title="Background">
        <div style={sectionGap}>
          <label style={labelStyle}>Type</label>
          <div style={{ display: 'flex', gap: 4 }}>
            {(['color', 'gradient', 'image', 'video'] as const).map((t) => (
              <button key={t} onClick={() => setProp('bgType', t)} style={btnActiveStyle(bgType === t)}>
                {t.charAt(0).toUpperCase() + t.slice(1)}
              </button>
            ))}
          </div>
        </div>

        {bgType === 'color' && (
          <ColorPickerField label="Color" value={nodeProps.bgColor || '#1e293b'} onChange={(v) => setProp('bgColor', v)} />
        )}

        {bgType === 'gradient' && (
          <>
            <div style={{ display: 'flex', gap: 8, ...sectionGap }}>
              <div style={{ flex: 1 }}>
                <ColorPickerField label="From" value={nodeProps.bgGradientFrom || '#667eea'} onChange={(v) => setProp('bgGradientFrom', v)} />
              </div>
              <div style={{ flex: 1 }}>
                <ColorPickerField label="To" value={nodeProps.bgGradientTo || '#764ba2'} onChange={(v) => setProp('bgGradientTo', v)} />
              </div>
            </div>
            <div style={sectionGap}>
              <label style={labelStyle}>Angle: {nodeProps.bgGradientAngle || 135}°</label>
              <input type="range" min={0} max={360} value={nodeProps.bgGradientAngle || 135} onChange={(e) => setProp('bgGradientAngle', parseInt(e.target.value))} style={{ width: '100%' }} />
            </div>
            {/* Gradient preview */}
            <div style={{ height: 24, borderRadius: 4, background: `linear-gradient(${nodeProps.bgGradientAngle || 135}deg, ${nodeProps.bgGradientFrom || '#667eea'}, ${nodeProps.bgGradientTo || '#764ba2'})`, border: '1px solid #3f3f46' }} />
          </>
        )}

        {bgType === 'image' && (
          <div style={sectionGap}>
            <label style={labelStyle}>Background Image</label>
            {nodeProps.bgImage && (
              <div style={{ marginBottom: 6, borderRadius: 4, overflow: 'hidden', border: '1px solid #3f3f46', position: 'relative' }}>
                <img src={nodeProps.bgImage} alt="" style={{ width: '100%', height: 80, objectFit: 'cover', display: 'block' }} />
                <button onClick={() => setProp('bgImage', '')} style={{ position: 'absolute', top: 2, right: 2, width: 20, height: 20, borderRadius: '50%', background: 'rgba(0,0,0,0.7)', border: 'none', color: '#fff', cursor: 'pointer', fontSize: 10, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <i className="fa fa-times" />
                </button>
              </div>
            )}
            <div style={{ display: 'flex', gap: 4 }}>
              <button onClick={() => fileInputRef.current?.click()} style={{ ...btnActiveStyle(false), flex: 1 }}>
                <i className="fa fa-upload" style={{ marginRight: 4 }} /> Upload
              </button>
            </div>
            <AssetBrowser filter="image" onSelect={(url) => setProp('bgImage', url)} />
            <input ref={fileInputRef} type="file" accept="image/*" style={{ display: 'none' }}
              onChange={(e) => { const f = e.target.files?.[0]; if (f) handleUpload(f, 'bgImage'); e.target.value = ''; }} />
            <input type="text" value={nodeProps.bgImage || ''} placeholder="Or paste URL..."
              onChange={(e) => setProp('bgImage', e.target.value)} style={{ ...smallInputStyle, width: '100%', marginTop: 4 }} />
          </div>
        )}

        {bgType === 'video' && (
          <div style={sectionGap}>
            <label style={labelStyle}>Background Video</label>
            {nodeProps.bgVideo && (
              <div style={{ marginBottom: 6, padding: 8, background: '#18181b', borderRadius: 4, border: '1px solid #3f3f46', display: 'flex', alignItems: 'center', gap: 6 }}>
                <i className="fa fa-film" style={{ color: '#3b82f6' }} />
                <span style={{ fontSize: 11, color: '#e4e4e7', flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                  {nodeProps.bgVideo.replace(/.*filename=/, '').replace(/^\d+_[a-f0-9]+_/, '') || nodeProps.bgVideo.split('/').pop()}
                </span>
                <button onClick={() => setProp('bgVideo', '')} style={{ background: 'none', border: 'none', color: '#ef4444', cursor: 'pointer', fontSize: 12 }}>
                  <i className="fa fa-times" />
                </button>
              </div>
            )}
            <div style={{ display: 'flex', gap: 4 }}>
              <button onClick={() => {
                const input = document.createElement('input');
                input.type = 'file';
                input.accept = 'video/*';
                input.onchange = () => { const f = input.files?.[0]; if (f) handleUpload(f, 'bgVideo'); };
                input.click();
              }} style={{ ...btnActiveStyle(false), flex: 1 }}>
                <i className="fa fa-upload" style={{ marginRight: 4 }} /> Upload Video
              </button>
            </div>
            <AssetBrowser filter="video" onSelect={(url) => setProp('bgVideo', url)} />
            <input type="text" value={nodeProps.bgVideo || ''} placeholder="YouTube, Vimeo, or .mp4 URL"
              onChange={(e) => setProp('bgVideo', e.target.value)} style={{ ...smallInputStyle, width: '100%', marginTop: 4 }} />
          </div>
        )}

        <div style={sectionGap}>
          <label style={labelStyle}>Overlay ({nodeProps.overlayOpacity || 0}%)</label>
          <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
            <input type="color" value={nodeProps.overlayColor || '#000000'} onChange={(e) => setProp('overlayColor', e.target.value)} style={{ width: 30, height: 26, border: 'none', cursor: 'pointer', background: 'none' }} />
            <input type="range" min={0} max={100} value={nodeProps.overlayOpacity || 0} onChange={(e) => setProp('overlayOpacity', parseInt(e.target.value))} style={{ flex: 1 }} />
          </div>
        </div>
      </CollapsibleSection>

      <CollapsibleSection title="Colors">
        <ColorPickerField label="Text Color" value={nodeProps.textColor || '#ffffff'} onChange={(v) => setProp('textColor', v)} />
        <div style={{ display: 'flex', gap: 8, ...sectionGap }}>
          <div style={{ flex: 1 }}>
            <ColorPickerField label="Button BG" value={nodeProps.buttonBgColor || '#3b82f6'} onChange={(v) => setProp('buttonBgColor', v)} />
          </div>
          <div style={{ flex: 1 }}>
            <ColorPickerField label="Button Text" value={nodeProps.buttonTextColor || '#ffffff'} onChange={(v) => setProp('buttonTextColor', v)} />
          </div>
        </div>
      </CollapsibleSection>

      <CollapsibleSection title="Layout">
        <div style={sectionGap}>
          <label style={labelStyle}>Minimum Height</label>
          <div style={{ display: 'flex', gap: 4 }}>
            {['300px', '400px', '500px', '600px', '100vh'].map((h) => (
              <button key={h} onClick={() => setProp('minHeight', h)} style={btnActiveStyle(nodeProps.minHeight === h)}>
                {h === '100vh' ? 'Full' : h}
              </button>
            ))}
          </div>
        </div>
        <div style={sectionGap}>
          <label style={labelStyle}>Vertical</label>
          <div style={{ display: 'flex', gap: 4 }}>
            {(['top', 'center', 'bottom'] as const).map((v) => (
              <button key={v} onClick={() => setProp('verticalAlign', v)} style={btnActiveStyle(nodeProps.verticalAlign === v)}>{v}</button>
            ))}
          </div>
        </div>
        <div style={sectionGap}>
          <label style={labelStyle}>Text Align</label>
          <div style={{ display: 'flex', gap: 4 }}>
            {(['left', 'center', 'right'] as const).map((a) => (
              <button key={a} onClick={() => setProp('textAlign', a)} style={btnActiveStyle(nodeProps.textAlign === a)}>
                <i className={`fa fa-align-${a}`} />
              </button>
            ))}
          </div>
        </div>
      </CollapsibleSection>
    </>
  );
};