import { useEffect, useState } from 'react'
import { Server, Plug, BookMarked } from 'lucide-react'
import ProgressRing from './ProgressRing'
import { api, type Integration, type Resource, type Bookmark } from '../lib/api'

const cardStyle: React.CSSProperties = {
  backgroundColor: 'rgba(10, 10, 12, 0.55)',
  backdropFilter: 'blur(10px)',
  border: '1px solid rgba(200, 164, 52, 0.1)',
  borderRadius: '12px',
  padding: '16px',
  boxShadow: '0 0 20px rgba(200, 164, 52, 0.03)',
  transition: 'border-color 0.2s ease',
}

const labelStyle: React.CSSProperties = {
  fontSize: '10px',
  textTransform: 'uppercase',
  letterSpacing: '1.5px',
  color: '#7A7D85',
  fontWeight: 500,
  marginBottom: '8px',
}

export default function StatusCards() {
  const [integrations, setIntegrations] = useState<Integration[] | null>(null)
  const [resources, setResources] = useState<Resource[] | null>(null)
  const [bookmarks, setBookmarks] = useState<Bookmark[] | null>(null)

  useEffect(() => {
    api.listIntegrations().then(({ integrations }) => setIntegrations(integrations))
    api.listResources().then(({ resources }) => setResources(resources))
    api.listBookmarks().then(({ bookmarks }) => setBookmarks(bookmarks))
  }, [])

  const connected = integrations?.filter((i) => i.status === 'connected').length ?? 0
  const errored = integrations?.filter((i) => i.status === 'error').length ?? 0
  const total = integrations?.length ?? 0

  const healthy = resources?.filter((r) => r.status === 'healthy').length ?? 0
  const warning = resources?.filter((r) => r.status === 'warning').length ?? 0
  const critical = resources?.filter((r) => r.status === 'critical').length ?? 0
  const resourceTotal = resources?.length ?? 0

  const favorites = bookmarks?.filter((b) => b.favorite).length ?? 0

  const systemLabel = errored > 0 ? 'Issues Detected' : total === 0 ? 'Not Configured' : 'All Systems Operational'
  const systemPercent = total === 0 ? 0 : Math.round((connected / total) * 100)

  return (
    <div className="grid w-full grid-cols-4 gap-5">
      {/* System Status */}
      <div style={cardStyle} className="hover:!border-gold/20">
        <div className="flex items-start justify-between">
          <div>
            <h3 style={labelStyle}>System Status</h3>
            <p style={{ fontSize: '16px', fontWeight: 700, color: errored > 0 ? '#E74C3C' : '#2ECC71', lineHeight: 1.3 }}>{systemLabel}</p>
            <p style={{ fontSize: '10px', color: '#7A7D85', marginTop: '4px' }}>{connected} of {total} integrations connected</p>
          </div>
          <ProgressRing percentage={systemPercent} size={44} strokeWidth={3} />
        </div>
      </div>

      {/* Infrastructure */}
      <div style={cardStyle} className="hover:!border-gold/20">
        <h3 style={labelStyle}>Infrastructure</h3>
        <div className="flex items-center gap-2">
          <Server size={16} style={{ color: '#C8A434' }} />
          <span style={{ fontSize: '24px', fontWeight: 700, color: '#E8E6E0', lineHeight: 1 }}>{resourceTotal}</span>
        </div>
        <p style={{ fontSize: '10px', color: '#7A7D85', marginTop: '4px' }}>Resources from connected integrations</p>
        <div style={{ marginTop: '8px', paddingTop: '8px', borderTop: '1px solid rgba(200,164,52,0.06)', fontSize: '9px' }} className="flex items-center gap-2 flex-wrap">
          <span className="flex items-center gap-1">
            <span style={{ width: '6px', height: '6px', borderRadius: '50%', backgroundColor: '#2ECC71' }} />
            <span style={{ color: '#7A7D85' }}>{healthy} Healthy</span>
          </span>
          <span className="flex items-center gap-1">
            <span style={{ width: '6px', height: '6px', borderRadius: '50%', backgroundColor: '#E67E22' }} />
            <span style={{ color: '#7A7D85' }}>{warning} Warning</span>
          </span>
          <span className="flex items-center gap-1">
            <span style={{ width: '6px', height: '6px', borderRadius: '50%', backgroundColor: '#E74C3C' }} />
            <span style={{ color: '#7A7D85' }}>{critical} Critical</span>
          </span>
        </div>
      </div>

      {/* Integrations */}
      <div style={cardStyle} className="hover:!border-gold/20">
        <h3 style={labelStyle}>Integrations</h3>
        <div className="flex items-center gap-2">
          <Plug size={16} style={{ color: '#C8A434' }} />
          <span style={{ fontSize: '24px', fontWeight: 700, color: '#E8E6E0', lineHeight: 1 }}>{connected}/{total}</span>
        </div>
        <p style={{ fontSize: '10px', color: '#7A7D85', marginTop: '4px' }}>Connected services</p>
      </div>

      {/* Bookmarks */}
      <div style={cardStyle} className="hover:!border-gold/20">
        <h3 style={labelStyle}>Bookmarks</h3>
        <div className="flex items-center gap-2">
          <BookMarked size={16} style={{ color: '#C8A434' }} />
          <span style={{ fontSize: '24px', fontWeight: 700, color: '#E8E6E0', lineHeight: 1 }}>{bookmarks?.length ?? 0}</span>
        </div>
        <p style={{ fontSize: '10px', color: '#7A7D85', marginTop: '4px' }}>{favorites} favorited</p>
      </div>
    </div>
  )
}
