import React, { useCallback } from 'react';
import { useEditor } from '@craftjs/core';
import {
  BG_COLORS,
  SPACING_PRESETS,
} from '../../../constants/presets';
import {
  StylePanelProps,
  SectionLabel,
  ColorSwatchGrid,
  PresetButtonGrid,
  CollapsibleSection,
  ColorPickerField,
  labelStyle,
  inputStyle,
  smallInputStyle,
  btnActiveStyle,
  sectionGap,
} from './shared';

/* ---------- SOCIAL / ICON / STAR RATING ---------- */
export const SocialStylePanel: React.FC<StylePanelProps> = ({ selectedId, nodeProps }) => {
  const { actions } = useEditor();

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

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

  const style = nodeProps.style || {};

  return (
    <>
      {/* Social Links list */}
      {nodeProps.links !== undefined && Array.isArray(nodeProps.links) && (
        <CollapsibleSection title="Links">
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
            {(nodeProps.links || []).map((link: any, i: number) => (
              <div key={i} style={{ background: '#1e1e22', borderRadius: 6, padding: 6, display: 'flex', gap: 4, alignItems: 'center' }}>
                <span style={{ fontSize: 11, color: '#a1a1aa', width: 60, textTransform: 'capitalize' }}>{link.platform || 'link'}</span>
                <input
                  type="text"
                  value={link.url || ''}
                  onChange={(e) => {
                    actions.setProp(selectedId, (props: any) => {
                      const updated = [...(props.links || [])];
                      updated[i] = { ...updated[i], url: e.target.value };
                      props.links = updated;
                    });
                  }}
                  placeholder="URL"
                  style={{ ...smallInputStyle, flex: 1 }}
                />
                <button
                  onClick={() => {
                    actions.setProp(selectedId, (props: any) => {
                      const updated = [...(props.links || [])];
                      updated.splice(i, 1);
                      props.links = updated;
                    });
                  }}
                  style={{ padding: '2px 6px', fontSize: 10, background: '#ef4444', color: '#fff', border: 'none', borderRadius: 4, cursor: 'pointer' }}
                >
                  <i className="fa fa-times" />
                </button>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 6 }}>
            <select
              onChange={(e) => {
                if (!e.target.value) return;
                actions.setProp(selectedId, (props: any) => {
                  props.links = [...(props.links || []), { platform: e.target.value, url: '#' }];
                });
                e.target.value = '';
              }}
              style={{ width: '100%', padding: '6px', fontSize: 11, background: '#27272a', color: '#e4e4e7', border: '1px solid #3f3f46', borderRadius: 4, cursor: 'pointer' }}
            >
              <option value="">+ Add Platform...</option>
              {['facebook', 'twitter', 'instagram', 'linkedin', 'youtube', 'github', 'tiktok', 'pinterest', 'snapchat', 'whatsapp'].map((p) => (
                <option key={p} value={p}>{p.charAt(0).toUpperCase() + p.slice(1)}</option>
              ))}
            </select>
          </div>
        </CollapsibleSection>
      )}

      {/* Icon name */}
      {nodeProps.iconName !== undefined && (
        <div style={sectionGap}>
          <label style={labelStyle}>Icon Name</label>
          <input type="text" value={nodeProps.iconName || ''} onChange={(e) => setProp('iconName', e.target.value)} placeholder="fa-star" style={inputStyle} />
        </div>
      )}
      {nodeProps.icon !== undefined && typeof nodeProps.icon === 'string' && (
        <div style={sectionGap}>
          <label style={labelStyle}>Icon</label>
          <input type="text" value={nodeProps.icon || ''} onChange={(e) => setProp('icon', e.target.value)} placeholder="fa-star or emoji" style={inputStyle} />
        </div>
      )}

      {/* Star rating */}
      {nodeProps.rating !== undefined && (
        <div style={sectionGap}>
          <label style={labelStyle}>Rating: {nodeProps.rating || 0}</label>
          <input type="range" min={0} max={5} step={0.5} value={nodeProps.rating || 0} onChange={(e) => setProp('rating', parseFloat(e.target.value))} style={{ width: '100%' }} />
        </div>
      )}
      {nodeProps.maxStars !== undefined && (
        <div style={sectionGap}>
          <label style={labelStyle}>Max Stars</label>
          <input type="number" min={1} max={10} value={nodeProps.maxStars || 5} onChange={(e) => setProp('maxStars', parseInt(e.target.value) || 5)} style={inputStyle} />
        </div>
      )}

      {/* Colors */}
      {nodeProps.iconColor !== undefined && (
        <ColorPickerField label="Icon Color" value={nodeProps.iconColor || '#3b82f6'} onChange={(v) => setProp('iconColor', v)} />
      )}
      {nodeProps.iconBgColor !== undefined && (
        <ColorPickerField label="Icon Background" value={nodeProps.iconBgColor || 'transparent'} onChange={(v) => setProp('iconBgColor', v)} />
      )}
      {nodeProps.starColor !== undefined && (
        <ColorPickerField label="Star Color" value={nodeProps.starColor || '#f59e0b'} onChange={(v) => setProp('starColor', v)} />
      )}
      {nodeProps.color !== undefined && typeof nodeProps.color === 'string' && (
        <ColorPickerField label="Color" value={nodeProps.color || '#3b82f6'} onChange={(v) => setProp('color', v)} />
      )}

      {/* Size */}
      {nodeProps.iconSize !== undefined && (
        <div style={sectionGap}>
          <label style={labelStyle}>Icon Size</label>
          <input type="text" value={nodeProps.iconSize || '24px'} onChange={(e) => setProp('iconSize', e.target.value)} style={inputStyle} />
        </div>
      )}
      {nodeProps.size !== undefined && typeof nodeProps.size === 'string' && (
        <div style={sectionGap}>
          <label style={labelStyle}>Size</label>
          <input type="text" value={nodeProps.size || '24px'} onChange={(e) => setProp('size', e.target.value)} style={inputStyle} />
        </div>
      )}

      {/* Alignment */}
      {nodeProps.alignment !== undefined && (
        <div style={sectionGap}>
          <label style={labelStyle}>Alignment</label>
          <div style={{ display: 'flex', gap: 4 }}>
            {(['left', 'center', 'right'] as const).map((a) => (
              <button key={a} onClick={() => setProp('alignment', a)} style={btnActiveStyle(nodeProps.alignment === a)}>
                <i className={`fa fa-align-${a}`} />
              </button>
            ))}
          </div>
        </div>
      )}

      {/* Background & padding */}
      <CollapsibleSection title="Style" defaultOpen={false}>
        <div className="guided-section">
          <SectionLabel>Background</SectionLabel>
          <ColorSwatchGrid colors={BG_COLORS} activeValue={style.backgroundColor} onSelect={(v: string) => setPropStyle('backgroundColor', v)} />
        </div>
        <div className="guided-section">
          <SectionLabel>Padding</SectionLabel>
          <PresetButtonGrid presets={SPACING_PRESETS} activeValue={style.padding as string} onSelect={(v) => setPropStyle('padding', v)} />
        </div>
      </CollapsibleSection>
    </>
  );
};