// Consumer / Device component

const Consumer = ({
  consumer,
  supplied,
  onChange,
  onDelete,
  onCardMouseDown,
  selected,
  period,
  hoveredAsTarget
}) => {
  const { id, name, amount, x, y, icon } = consumer;
  const fundedPct = amount > 0 ? Math.min(1, supplied / amount) : 0;
  const isFullyPowered = supplied >= amount && amount > 0;
  const isPartial = supplied > 0 && supplied < amount;
  const isUnpowered = supplied === 0;

  const periodSuffix = period === 'monthly' ? '/mo' : period === 'biweekly' ? '/2wk' : '/wk';

  const statusColor = isFullyPowered ? 'var(--green)' :
                      isPartial ? 'var(--amber)' : 'var(--ink-3)';
  const statusLabel = isFullyPowered ? 'POWERED' : isPartial ? 'LOW PWR' : 'OFFLINE';

  // Heartbeat pulse when receiving any power
  const pulseClass = isFullyPowered ? 'pulse-green' :
                     isPartial ? 'pulse-amber' :
                     '';

  return (
    <div
      className={`consumer-card ${pulseClass}`}
      data-consumer-id={id}
      style={{
        position: 'absolute',
        left: x,
        top: y,
        width: 200,
        transformOrigin: 'center center',
        background: 'linear-gradient(180deg, var(--bg-2), var(--bg-1))',
        border: `1px solid ${
          hoveredAsTarget ? 'var(--cyan)' :
          selected ? 'var(--cyan)' :
          isFullyPowered ? 'rgba(110, 241, 149, 0.3)' :
          'var(--line-2)'
        }`,
        borderRadius: 14,
        padding: '14px 14px 16px',
        ...(pulseClass ? {} : {
          boxShadow: hoveredAsTarget
            ? '0 0 0 3px rgba(76, 243, 255, 0.25), 0 8px 32px rgba(0,0,0,0.6)'
            : isFullyPowered
              ? '0 0 24px rgba(110, 241, 149, 0.15), 0 8px 24px rgba(0,0,0,0.5)'
              : '0 8px 24px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.03)',
        }),
        cursor: 'grab',
        userSelect: 'none',
        transition: 'border-color 0.15s'
      }}
      onMouseDown={(e) => onCardMouseDown(e, id, 'consumer')}
      onTouchStart={(e) => onCardMouseDown(e, id, 'consumer')}
    >
      {/* status strip */}
      <div style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        marginBottom: 10,
        fontFamily: 'JetBrains Mono, monospace',
        fontSize: 9,
        letterSpacing: '0.15em',
        color: 'var(--ink-2)',
        textTransform: 'uppercase'
      }}>
        <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
          <span style={{
            width: 6, height: 6, borderRadius: '50%',
            background: statusColor,
            boxShadow: isFullyPowered || isPartial ? `0 0 8px ${statusColor}` : 'none',
            animation: isPartial ? 'pulse-glow 1s infinite' : 'none'
          }} />
          {statusLabel}
        </span>
        <button
          onClick={(e) => { e.stopPropagation(); onDelete(id); }}
          onMouseDown={(e) => e.stopPropagation()}
          style={{
            background: 'transparent',
            border: 'none',
            color: 'var(--ink-3)',
            fontSize: 11,
            padding: 2
          }}
          onMouseEnter={(e) => e.currentTarget.style.color = 'var(--red)'}
          onMouseLeave={(e) => e.currentTarget.style.color = 'var(--ink-3)'}
        >✕</button>
      </div>

      {/* device icon + name */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
        <div style={{
          width: 38, height: 38,
          borderRadius: 8,
          background: isFullyPowered
            ? 'linear-gradient(135deg, rgba(110, 241, 149, 0.15), rgba(110, 241, 149, 0.04))'
            : 'var(--bg-3)',
          border: `1px solid ${isFullyPowered ? 'rgba(110, 241, 149, 0.3)' : 'var(--line-2)'}`,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          fontSize: 18,
          color: isFullyPowered ? 'var(--green)' : 'var(--ink-2)',
          fontFamily: 'JetBrains Mono, monospace',
          fontWeight: 700,
          textShadow: isFullyPowered ? `0 0 8px var(--green)` : 'none',
          flexShrink: 0
        }}>
          {icon || (name[0] || '?').toUpperCase()}
        </div>
        <input
          value={name}
          onChange={(e) => onChange(id, { name: e.target.value })}
          onMouseDown={(e) => e.stopPropagation()}
          onFocus={(e) => e.target.select()}
          style={{
            background: 'transparent',
            border: 'none',
            outline: 'none',
            color: 'var(--ink-0)',
            fontSize: 14,
            fontWeight: 600,
            width: '100%',
            padding: '2px 0',
            borderBottom: '1px dashed transparent'
          }}
          onMouseEnter={(e) => e.target.style.borderBottomColor = 'var(--line-2)'}
          onMouseLeave={(e) => e.target.style.borderBottomColor = 'transparent'}
        />
      </div>

      {/* power draw */}
      <div style={{
        background: 'var(--bg-0)',
        border: '1px solid var(--line)',
        borderRadius: 6,
        padding: '8px 10px',
        marginBottom: 4,
        position: 'relative',
        overflow: 'hidden'
      }}>
        {/* fill bar */}
        <div style={{
          position: 'absolute',
          inset: 0,
          background: `linear-gradient(90deg, ${
            isFullyPowered ? 'rgba(110, 241, 149, 0.12)' :
            isPartial ? 'rgba(255, 195, 107, 0.08)' :
            'transparent'
          }, transparent)`,
          width: `${fundedPct * 100}%`,
          transition: 'width 0.4s, background 0.3s'
        }} />
        <div style={{
          position: 'relative',
          display: 'flex',
          alignItems: 'baseline',
          gap: 2,
          fontFamily: 'JetBrains Mono, monospace'
        }}>
          <span style={{ color: 'var(--ink-3)', fontSize: 10, marginRight: 2 }}>DRAW</span>
          <span style={{ color: 'var(--ink-2)', fontSize: 12 }}>$</span>
          <input
            type="number"
            value={amount}
            onChange={(e) => onChange(id, { amount: parseFloat(e.target.value) || 0 })}
            onMouseDown={(e) => e.stopPropagation()}
            onFocus={(e) => e.target.select()}
            style={{
              background: 'transparent',
              border: 'none',
              outline: 'none',
              color: 'var(--ink-0)',
              fontSize: 16,
              fontWeight: 700,
              fontFamily: 'JetBrains Mono, monospace',
              flex: 1,
              padding: 0,
              minWidth: 0
            }}
          />
          <span style={{ color: 'var(--ink-3)', fontSize: 10 }}>{periodSuffix}</span>
        </div>
      </div>

      {/* funded readout */}
      {amount > 0 && (
        <div style={{
          fontFamily: 'JetBrains Mono, monospace',
          fontSize: 9,
          letterSpacing: '0.1em',
          color: 'var(--ink-3)',
          textTransform: 'uppercase',
          marginTop: 6,
          display: 'flex',
          justifyContent: 'space-between'
        }}>
          <span>Supplied: <span style={{ color: statusColor }}>${supplied.toFixed(0)}</span></span>
          <span>{Math.round(fundedPct * 100)}%</span>
        </div>
      )}

      {/* input plug — left edge */}
      <div
        data-port="consumer-in"
        data-consumer-id={id}
        style={{
          position: 'absolute',
          left: -14,
          top: '50%',
          transform: 'translateY(-50%)',
          width: 28,
          height: 28,
          borderRadius: '50%',
          background: 'var(--bg-1)',
          border: `2px solid ${
            hoveredAsTarget ? 'var(--cyan)' :
            isFullyPowered ? 'rgba(110, 241, 149, 0.5)' :
            'var(--line-2)'
          }`,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          boxShadow: hoveredAsTarget
            ? '0 0 16px rgba(76, 243, 255, 0.8)'
            : isFullyPowered
              ? '0 0 8px rgba(110, 241, 149, 0.4)'
              : 'none',
          transition: 'box-shadow 0.2s, border-color 0.2s',
          pointerEvents: 'none'
        }}
      >
        {/* plug prongs */}
        <div style={{
          display: 'flex',
          gap: 2,
          alignItems: 'center'
        }}>
          <div style={{
            width: 2, height: 8,
            background: isFullyPowered ? 'var(--green)' : isPartial ? 'var(--amber)' : 'var(--ink-3)',
            borderRadius: 1,
            boxShadow: isFullyPowered ? '0 0 4px var(--green)' : 'none'
          }} />
          <div style={{
            width: 2, height: 8,
            background: isFullyPowered ? 'var(--green)' : isPartial ? 'var(--amber)' : 'var(--ink-3)',
            borderRadius: 1,
            boxShadow: isFullyPowered ? '0 0 4px var(--green)' : 'none'
          }} />
        </div>
      </div>

      {/* powered glow overlay */}
      {isFullyPowered && (
        <div style={{
          position: 'absolute',
          inset: -2,
          borderRadius: 14,
          pointerEvents: 'none',
          boxShadow: 'inset 0 0 24px rgba(110, 241, 149, 0.08)'
        }} />
      )}
    </div>
  );
};

window.Consumer = Consumer;