import React from 'react'
import { Button, Spinner, Tooltip } from '@wordpress/components'
import { __ } from '@wordpress/i18n'
import { Status } from '../types/types'

const statusLabels: Record<Status, string> = {
  completed: __('Active', 'easy-critical-css'),
  expired: __('Needs update', 'easy-critical-css'),
  excluded: __('Excluded', 'easy-critical-css'),
  failed: __('Failed', 'easy-critical-css'),
  invalid: __('API issue', 'easy-critical-css'),
  paused: __('Paused', 'easy-critical-css'),
  unavailable: __('Not eligible', 'easy-critical-css'),
  unprocessed: __('Not generated', 'easy-critical-css'),
  unreachable: __('Unreachable', 'easy-critical-css'),
  pending: __('Generating', 'easy-critical-css'),
  error: __('Error', 'easy-critical-css'),
}

const statusColors: Record<Status, string> = {
  completed: '#1e7e34',
  expired: '#995a00',
  excluded: '#6c757d',
  failed: '#b12331',
  invalid: '#b12331',
  paused: '#6c757d',
  unavailable: '#6c757d',
  unprocessed: '#6c757d',
  unreachable: '#b12331',
  pending: '#007cba',
  error: '#000', // Unexpected API errors
}

const statusTooltips: Record<Status, string> = {
  completed: __('Critical CSS is active for this page.', 'easy-critical-css'),
  expired: __('Critical CSS needs an update. Easy Critical CSS will follow your Expired Critical CSS Behavior setting until a new version is ready.', 'easy-critical-css'),
  excluded: __('Easy Critical CSS is set to skip Critical CSS for this page.', 'easy-critical-css'),
  failed: __('Generation did not complete. This can happen temporarily. Try again in a moment.', 'easy-critical-css'),
  invalid: __('Critical CSS cannot be generated because the API key is not valid. Update your API key to continue.', 'easy-critical-css'),
  paused: __('Automatic generation is paused for this page.', 'easy-critical-css'),
  unavailable: __('This content is not published. Critical CSS can only be generated for published pages.', 'easy-critical-css'),
  unprocessed: __('Critical CSS has not been generated for this page yet.', 'easy-critical-css'),
  unreachable: __('Easy Critical CSS could not reach this page during generation. Check that it is publicly accessible.', 'easy-critical-css'),
  pending: __('Easy Critical CSS is generating Critical CSS for this page.', 'easy-critical-css'),
  error: __('Something unexpected happened while checking status. Try again.', 'easy-critical-css'),
}

const StatusIndicator: React.FC<{ status: Status | null; loading: boolean; fetchStatus: () => void }> = ({ status, loading, fetchStatus }) => {
  // Don't display status until it's loaded
  if (status === null) {
    return (
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
          <span>{__('Status:', 'easy-critical-css')}</span>
          {loading ? <Spinner /> : <span style={{ color: '#666' }}>{__('Loading...', 'easy-critical-css')}</span>}
        </div>
        <Button onClick={fetchStatus} variant='secondary' aria-label={__('Refresh Status', 'easy-critical-css')}>
          {__('Refresh', 'easy-critical-css')}
        </Button>
      </div>
    )
  }
  
  return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
        <span>{__('Status:', 'easy-critical-css')}</span>
        <Tooltip text={statusTooltips[status]}>
          <span
            style={{
              display: 'inline-block',
              padding: '3px 8px',
              borderRadius: '12px',
              background: statusColors[status],
              color: '#fff',
              fontWeight: '500',
              cursor: 'help',
            }}
          >
            {statusLabels[status]}
          </span>
        </Tooltip>
      </div>
      <Button onClick={fetchStatus} variant='secondary' aria-label={__('Refresh Status', 'easy-critical-css')}>
      {loading ? <Spinner /> : __('Refresh', 'easy-critical-css')}
      </Button>
    </div>
  )
}

export default StatusIndicator