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

/* ---------- NAV / MENU / LOGO ---------- */
export const NavStylePanel: 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 links: any[] = nodeProps.links || [];

  const updateLink = useCallback((index: number, field: string, value: any) => {
    actions.setProp(selectedId, (props: any) => {
      const updated = [...(props.links || [])];
      updated[index] = { ...updated[index], [field]: value };
      props.links = updated;
    });
  }, [actions, selectedId]);

  const addLink = useCallback(() => {
    actions.setProp(selectedId, (props: any) => {
      props.links = [...(props.links || []), { text: 'New Link', href: '#' }];
    });
  }, [actions, selectedId]);

  const removeLink = useCallback((index: number) => {
    actions.setProp(selectedId, (props: any) => {
      const updated = [...(props.links || [])];
      updated.splice(index, 1);
      props.links = updated;
    });
  }, [actions, selectedId]);

  /* Detect standalone Logo vs Navbar/Menu */
  const isStandaloneLogo = nodeProps.type !== undefined && (nodeProps.type === 'text' || nodeProps.type === 'image') && nodeProps.logoText === undefined;

  return (
    <>
      {/* Standalone Logo component settings */}
      {isStandaloneLogo && (
        <CollapsibleSection title="Logo" defaultOpen={true}>
          <div style={sectionGap}>
            <label style={{ ...labelStyle, fontWeight: 600, fontSize: 12, marginBottom: 8 }}>Logo Type</label>
            <div style={{ display: 'flex', gap: 4 }}>
              <button
                onClick={() => setProp('type', 'text')}
                style={{ padding: '4px 10px', fontSize: 11, background: nodeProps.type === 'text' ? '#3b82f6' : '#27272a', color: nodeProps.type === 'text' ? '#fff' : '#a1a1aa', border: `1px solid ${nodeProps.type === 'text' ? '#3b82f6' : '#3f3f46'}`, borderRadius: 4, cursor: 'pointer' }}
              >
                <i className="fa fa-font" style={{ marginRight: 4 }} />Text
              </button>
              <button
                onClick={() => setProp('type', 'image')}
                style={{ padding: '4px 10px', fontSize: 11, background: nodeProps.type === 'image' ? '#3b82f6' : '#27272a', color: nodeProps.type === 'image' ? '#fff' : '#a1a1aa', border: `1px solid ${nodeProps.type === 'image' ? '#3b82f6' : '#3f3f46'}`, borderRadius: 4, cursor: 'pointer' }}
              >
                <i className="fa fa-image" style={{ marginRight: 4 }} />Image
              </button>
            </div>
          </div>
          {nodeProps.type === 'text' && (
            <>
              <div style={sectionGap}>
                <label style={labelStyle}>Logo Text</label>
                <input type="text" value={nodeProps.text || ''} onChange={(e) => setProp('text', e.target.value)} style={inputStyle} />
              </div>
              <div style={sectionGap}>
                <label style={labelStyle}>Font Size</label>
                <input type="text" value={nodeProps.fontSize || '20px'} onChange={(e) => setProp('fontSize', e.target.value)} placeholder="20px" style={inputStyle} />
              </div>
              <div style={sectionGap}>
                <label style={labelStyle}>Font Weight</label>
                <select value={nodeProps.fontWeight || '700'} onChange={(e) => setProp('fontWeight', e.target.value)} style={{ ...inputStyle, cursor: 'pointer' }}>
                  <option value="300">Light</option>
                  <option value="400">Normal</option>
                  <option value="500">Medium</option>
                  <option value="600">Semi</option>
                  <option value="700">Bold</option>
                  <option value="800">Extra Bold</option>
                </select>
              </div>
              <ColorPickerField label="Text Color" value={nodeProps.color || '#1f2937'} onChange={(v) => setProp('color', v)} />
            </>
          )}
          {nodeProps.type === 'image' && (
            <>
              <div style={sectionGap}>
                <label style={labelStyle}>Image URL</label>
                <input type="text" value={nodeProps.imageSrc || ''} onChange={(e) => setProp('imageSrc', e.target.value)} placeholder="https://..." style={inputStyle} />
              </div>
              <div style={sectionGap}>
                <label style={labelStyle}>Image Width</label>
                <input type="text" value={nodeProps.imageWidth || '120px'} onChange={(e) => setProp('imageWidth', e.target.value)} placeholder="120px" style={inputStyle} />
              </div>
            </>
          )}
          <div style={sectionGap}>
            <label style={labelStyle}>Link URL</label>
            <input type="text" value={nodeProps.href || '/'} onChange={(e) => setProp('href', e.target.value)} placeholder="/" style={inputStyle} />
          </div>
        </CollapsibleSection>
      )}

      {/* Navbar Logo settings */}
      {nodeProps.logoText !== undefined && (
        <CollapsibleSection title="Logo">
          <div style={sectionGap}>
            <label style={labelStyle}>Logo Text</label>
            <input type="text" value={nodeProps.logoText || ''} onChange={(e) => setProp('logoText', e.target.value)} style={inputStyle} />
          </div>
          {nodeProps.logoImage !== undefined && (
            <div style={sectionGap}>
              <label style={labelStyle}>Logo Image URL</label>
              <input type="text" value={nodeProps.logoImage || ''} onChange={(e) => setProp('logoImage', e.target.value)} placeholder="https://..." style={inputStyle} />
            </div>
          )}
          {nodeProps.logoUrl !== undefined && (
            <div style={sectionGap}>
              <label style={labelStyle}>Logo Link URL</label>
              <input type="text" value={nodeProps.logoUrl || ''} onChange={(e) => setProp('logoUrl', e.target.value)} placeholder="/" style={inputStyle} />
            </div>
          )}
        </CollapsibleSection>
      )}

      {/* Links (not shown for standalone Logo) */}
      {!isStandaloneLogo && (
        <CollapsibleSection title="Links">
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
            {links.map((link, i) => (
              <div key={i} style={{ background: '#1e1e22', borderRadius: 6, padding: 6, display: 'flex', flexDirection: 'column', gap: 3 }}>
                <div style={{ display: 'flex', gap: 4 }}>
                  <input type="text" value={link.text || ''} onChange={(e) => updateLink(i, 'text', e.target.value)} placeholder="Text" style={{ ...smallInputStyle, flex: 1 }} />
                  <button onClick={() => removeLink(i)} style={{ padding: '2px 6px', fontSize: 10, background: '#ef4444', color: '#fff', border: 'none', borderRadius: 4, cursor: 'pointer' }}>
                    <i className="fa fa-times" />
                  </button>
                </div>
                <input type="text" value={link.href || ''} onChange={(e) => updateLink(i, 'href', e.target.value)} placeholder="URL" style={{ ...smallInputStyle, color: '#71717a' }} />
              </div>
            ))}
          </div>
          <button onClick={addLink} style={{ marginTop: 6, width: '100%', padding: '6px', fontSize: 11, background: '#27272a', color: '#e4e4e7', border: '1px solid #3f3f46', borderRadius: 4, cursor: 'pointer' }}>
            + Add Link
          </button>
        </CollapsibleSection>
      )}

      {/* Colors (not shown for standalone Logo - it has its own color picker) */}
      {!isStandaloneLogo && (
        <CollapsibleSection title="Colors">
          {nodeProps.backgroundColor !== undefined && (
            <ColorPickerField label="Background" value={nodeProps.backgroundColor || '#ffffff'} onChange={(v) => setProp('backgroundColor', v)} />
          )}
          {nodeProps.textColor !== undefined && (
            <ColorPickerField label="Text Color" value={nodeProps.textColor || '#18181b'} onChange={(v) => setProp('textColor', v)} />
          )}
          {nodeProps.ctaColor !== undefined && (
            <ColorPickerField label="CTA Color" value={nodeProps.ctaColor || '#3b82f6'} onChange={(v) => setProp('ctaColor', v)} />
          )}
        </CollapsibleSection>
      )}

      {/* Style overrides */}
      <CollapsibleSection title="Spacing" defaultOpen={false}>
        <div className="guided-section">
          <SectionLabel>Padding</SectionLabel>
          <PresetButtonGrid presets={SPACING_PRESETS} activeValue={(nodeProps.style || {}).padding as string} onSelect={(v) => setPropStyle('padding', v)} />
        </div>
      </CollapsibleSection>
    </>
  );
};
