// UI Components with Light Green Theme

// Button Component
function Button({ children, variant = 'primary', size = 'medium', onClick, disabled, style, icon }) {
  const baseStyle = {
    border: 'none',
    borderRadius: '8px',
    cursor: disabled ? 'not-allowed' : 'pointer',
    fontWeight: 500,
    transition: 'all 150ms ease',
    display: 'inline-flex',
    alignItems: 'center',
    gap: '8px',
    opacity: disabled ? 0.5 : 1
  };

  const sizeStyles = {
    small: { padding: '6px 12px', fontSize: '13px' },
    medium: { padding: '10px 16px', fontSize: '14px' },
    large: { padding: '12px 20px', fontSize: '15px' }
  };

  const variantStyles = {
    primary: {
      background: '#4CAF50',
      color: '#fff',
      boxShadow: '0 1px 3px rgba(76, 175, 80, 0.15)'
    },
    secondary: {
      background: '#E8F5E9',
      color: '#2E7D32',
      border: '1px solid #C8E6D4'
    },
    ghost: {
      background: 'transparent',
      color: '#5B6B7A',
      border: '1px solid #ECECEA'
    }
  };

  return (
    <button
      style={{ ...baseStyle, ...sizeStyles[size], ...variantStyles[variant], ...style }}
      onClick={onClick}
      disabled={disabled}
    >
      {icon && <span style={{ display: 'flex', alignItems: 'center' }}>{icon}</span>}
      {children}
    </button>
  );
}

// Search Input
function SearchInput({ value, onChange, placeholder = 'Search...' }) {
  return (
    <div style={{
      position: 'relative',
      display: 'flex',
      alignItems: 'center'
    }}>
      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" style={{
        position: 'absolute',
        left: '12px',
        pointerEvents: 'none'
      }}>
        <path d="M7 12C9.76142 12 12 9.76142 12 7C12 4.23858 9.76142 2 7 2C4.23858 2 2 4.23858 2 7C2 9.76142 4.23858 12 7 12Z" stroke="#9AA5B5" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
        <path d="M14 14L10.65 10.65" stroke="#9AA5B5" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
      </svg>
      <input
        type="text"
        value={value}
        onChange={(e) => onChange(e.target.value)}
        placeholder={placeholder}
        style={{
          width: '280px',
          padding: '9px 12px 9px 38px',
          border: '1px solid #E0E0E0',
          borderRadius: '8px',
          fontSize: '14px',
          color: '#1F2433',
          background: '#fff'
        }}
      />
    </div>
  );
}

// Select Dropdown
function Select({ value, onChange, options, placeholder = 'Select...', width = '180px' }) {
  return (
    <select
      value={value}
      onChange={(e) => onChange(e.target.value)}
      style={{
        width,
        padding: '9px 32px 9px 12px',
        border: '1px solid #E0E0E0',
        borderRadius: '8px',
        fontSize: '14px',
        color: '#1F2433',
        background: '#fff',
        cursor: 'pointer',
        appearance: 'none',
        backgroundImage: `url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%239AA5B5' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")`,
        backgroundRepeat: 'no-repeat',
        backgroundPosition: 'right 12px center'
      }}
    >
      <option value="">{placeholder}</option>
      {options.map(opt => (
        <option key={opt.value} value={opt.value}>{opt.label}</option>
      ))}
    </select>
  );
}

// Status Badge
function StatusBadge({ status, type }) {
  const styles = {
    completed: {
      background: '#E8F5E9',
      color: '#2E7D32',
      border: '1px solid #C8E6D4'
    },
    running: {
      background: '#E3F2FD',
      color: '#1565C0',
      border: '1px solid #BBDEFB'
    },
    scheduled: {
      background: '#FFF3E0',
      color: '#E65100',
      border: '1px solid #FFE0B2'
    },
    draft: {
      background: '#F5F5F5',
      color: '#616161',
      border: '1px solid #E0E0E0'
    },
    paused: {
      background: '#FFF9C4',
      color: '#F57F17',
      border: '1px solid #FFF59D'
    },
    cancelled: {
      background: '#FFEBEE',
      color: '#C62828',
      border: '1px solid #FFCDD2'
    }
  };

  const style = styles[type] || styles.draft;

  return (
    <div style={{
      display: 'inline-flex',
      alignItems: 'center',
      gap: '6px',
      padding: '4px 10px',
      borderRadius: '6px',
      fontSize: '13px',
      fontWeight: 500,
      lineHeight: '1.4',
      ...style
    }}>
      <svg width="6" height="6" viewBox="0 0 6 6" fill="none" style={{ flexShrink: 0 }}>
        <circle cx="3" cy="3" r="3" fill="currentColor"/>
      </svg>
      {status}
    </div>
  );
}

// Icon Button (for actions menu)
function IconButton({ onClick, icon, tooltip }) {
  return (
    <button
      onClick={onClick}
      title={tooltip}
      style={{
        background: 'transparent',
        border: 'none',
        padding: '6px',
        cursor: 'pointer',
        borderRadius: '6px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        transition: 'background 150ms ease'
      }}
      onMouseEnter={(e) => e.currentTarget.style.background = '#F5F5F5'}
      onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}
    >
      {icon}
    </button>
  );
}

// Info Icon with Tooltip
function InfoIcon({ tooltip }) {
  return (
    <span title={tooltip} style={{ cursor: 'help', display: 'inline-flex', marginLeft: '4px' }}>
      <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
        <circle cx="7" cy="7" r="6" stroke="#9AA5B5" strokeWidth="1.2"/>
        <path d="M7 6V10" stroke="#9AA5B5" strokeWidth="1.2" strokeLinecap="round"/>
        <circle cx="7" cy="4.5" r="0.5" fill="#9AA5B5"/>
      </svg>
    </span>
  );
}

// Percentage Badge
function PercentageBadge({ percentage }) {
  const isHigh = percentage === 100;
  return (
    <span style={{
      padding: '2px 6px',
      borderRadius: '4px',
      fontSize: '12px',
      fontWeight: 500,
      background: isHigh ? '#E8F5E9' : '#F5F5F5',
      color: isHigh ? '#2E7D32' : '#616161',
      marginLeft: '6px'
    }}>
      {percentage}%
    </span>
  );
}

// Avatar (for created by)
function Avatar({ letter, color }) {
  const colors = {
    A: '#4CAF50',
    S: '#2196F3',
    T: '#FF9800',
    M: '#9C27B0'
  };
  
  return (
    <div style={{
      width: '22px',
      height: '22px',
      borderRadius: '50%',
      background: colors[letter] || '#9E9E9E',
      color: '#fff',
      display: 'inline-flex',
      alignItems: 'center',
      justifyContent: 'center',
      fontSize: '10px',
      fontWeight: 600
    }}>
      {letter}
    </div>
  );
}