// Top toolbar — period toggle + add buttons + reset

const Toolbar = ({ period, onPeriodChange, onAddSource, onAddConsumer, onReset, onLoadSample }) => {
  const periods = [
    { id: 'weekly', label: 'WK' },
    { id: 'biweekly', label: '2WK' },
    { id: 'monthly', label: 'MO' }
  ];

  return (
    <div className="toolbar" style={{
      position: 'fixed',
      top: 16,
      left: 16,
      right: 16,
      display: 'flex',
      alignItems: 'center',
      gap: 12,
      zIndex: 100,
      pointerEvents: 'none'
    }}>
      {/* Logo / brand */}
      <div className="toolbar-brand" style={{
        display: 'flex',
        alignItems: 'center',
        gap: 10,
        padding: '10px 14px',
        background: 'rgba(11, 15, 22, 0.85)',
        backdropFilter: 'blur(12px)',
        WebkitBackdropFilter: 'blur(12px)',
        border: '1px solid var(--line-2)',
        borderRadius: 10,
        pointerEvents: 'auto'
      }}>
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
          <path d="M11 2 L4 11 L9 11 L8 18 L16 8 L11 8 Z"
                fill="#4cf3ff"
                stroke="#4cf3ff"
                strokeWidth="0.5"
                strokeLinejoin="round"
                style={{ filter: 'drop-shadow(0 0 4px #4cf3ff)' }} />
        </svg>
        <div className="brand-text">
          <div style={{ fontSize: 14, fontWeight: 700, letterSpacing: '0.02em' }}>WATTAGE</div>
          <div style={{
            fontFamily: 'JetBrains Mono, monospace',
            fontSize: 8,
            letterSpacing: '0.2em',
            color: 'var(--ink-2)',
            textTransform: 'uppercase'
          }}>v1.0 // budget grid</div>
        </div>
      </div>

      {/* spacer */}
      <div style={{ flex: 1 }} />

      {/* add buttons */}
      <div className="toolbar-add" style={{
        display: 'flex',
        gap: 8,
        background: 'rgba(11, 15, 22, 0.85)',
        backdropFilter: 'blur(12px)',
        WebkitBackdropFilter: 'blur(12px)',
        border: '1px solid var(--line-2)',
        borderRadius: 10,
        padding: 6,
        pointerEvents: 'auto'
      }}>
        <button
          onClick={onAddSource}
          style={{
            background: 'linear-gradient(180deg, rgba(76, 243, 255, 0.15), rgba(76, 243, 255, 0.05))',
            border: '1px solid rgba(76, 243, 255, 0.3)',
            color: 'var(--cyan)',
            padding: '8px 14px',
            borderRadius: 6,
            fontSize: 12,
            fontWeight: 600,
            display: 'flex',
            alignItems: 'center',
            gap: 8,
            transition: 'background 0.15s'
          }}
          onMouseEnter={(e) => e.currentTarget.style.background = 'linear-gradient(180deg, rgba(76, 243, 255, 0.25), rgba(76, 243, 255, 0.1))'}
          onMouseLeave={(e) => e.currentTarget.style.background = 'linear-gradient(180deg, rgba(76, 243, 255, 0.15), rgba(76, 243, 255, 0.05))'}
        >
          <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
            <rect x="1" y="3" width="8" height="6" rx="1" stroke="currentColor" strokeWidth="1.2" />
            <rect x="9" y="5" width="2" height="2" fill="currentColor" />
            <line x1="3" y1="6" x2="7" y2="6" stroke="currentColor" strokeWidth="1.2" />
          </svg>
          <span className="label-full">Power Source</span>
        </button>
        <button
          onClick={onAddConsumer}
          style={{
            background: 'linear-gradient(180deg, rgba(110, 241, 149, 0.15), rgba(110, 241, 149, 0.05))',
            border: '1px solid rgba(110, 241, 149, 0.3)',
            color: 'var(--green)',
            padding: '8px 14px',
            borderRadius: 6,
            fontSize: 12,
            fontWeight: 600,
            display: 'flex',
            alignItems: 'center',
            gap: 8,
            transition: 'background 0.15s'
          }}
          onMouseEnter={(e) => e.currentTarget.style.background = 'linear-gradient(180deg, rgba(110, 241, 149, 0.25), rgba(110, 241, 149, 0.1))'}
          onMouseLeave={(e) => e.currentTarget.style.background = 'linear-gradient(180deg, rgba(110, 241, 149, 0.15), rgba(110, 241, 149, 0.05))'}
        >
          <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
            <path d="M3 4 V 2 M6 4 V 2 M2 4 H 7 V 7 A 2 2 0 0 1 5 9 H 4 A 2 2 0 0 1 2 7 V 4 Z M4.5 9 V 11" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" />
          </svg>
          <span className="label-full">Consumer</span>
        </button>
      </div>

      {/* period toggle */}
      <div style={{
        display: 'flex',
        gap: 2,
        background: 'rgba(11, 15, 22, 0.85)',
        backdropFilter: 'blur(12px)',
        WebkitBackdropFilter: 'blur(12px)',
        border: '1px solid var(--line-2)',
        borderRadius: 10,
        padding: 4,
        pointerEvents: 'auto'
      }}>
        {periods.map(p => (
          <button
            key={p.id}
            onClick={() => onPeriodChange(p.id)}
            style={{
              background: period === p.id ? 'rgba(76, 243, 255, 0.15)' : 'transparent',
              border: period === p.id ? '1px solid rgba(76, 243, 255, 0.3)' : '1px solid transparent',
              color: period === p.id ? 'var(--cyan)' : 'var(--ink-2)',
              padding: '6px 12px',
              borderRadius: 6,
              fontSize: 10,
              fontFamily: 'JetBrains Mono, monospace',
              fontWeight: 700,
              letterSpacing: '0.1em',
              minWidth: 36
            }}
          >
            {p.label}
          </button>
        ))}
      </div>

      {/* utility */}
      <div style={{
        display: 'flex',
        gap: 6,
        background: 'rgba(11, 15, 22, 0.85)',
        backdropFilter: 'blur(12px)',
        WebkitBackdropFilter: 'blur(12px)',
        border: '1px solid var(--line-2)',
        borderRadius: 10,
        padding: 4,
        pointerEvents: 'auto'
      }}>
        <button
          onClick={onLoadSample}
          title="Load sample budget"
          style={{
            background: 'transparent',
            border: 'none',
            color: 'var(--ink-2)',
            padding: '6px 10px',
            borderRadius: 6,
            fontSize: 10,
            fontFamily: 'JetBrains Mono, monospace',
            fontWeight: 700,
            letterSpacing: '0.1em'
          }}
          onMouseEnter={(e) => e.currentTarget.style.color = 'var(--cyan)'}
          onMouseLeave={(e) => e.currentTarget.style.color = 'var(--ink-2)'}
        >
          DEMO
        </button>
        <button
          onClick={onReset}
          title="Clear all"
          style={{
            background: 'transparent',
            border: 'none',
            color: 'var(--ink-2)',
            padding: '6px 10px',
            borderRadius: 6,
            fontSize: 10,
            fontFamily: 'JetBrains Mono, monospace',
            fontWeight: 700,
            letterSpacing: '0.1em'
          }}
          onMouseEnter={(e) => e.currentTarget.style.color = 'var(--red)'}
          onMouseLeave={(e) => e.currentTarget.style.color = 'var(--ink-2)'}
        >
          RESET
        </button>
      </div>
    </div>
  );
};

window.Toolbar = Toolbar;