import { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { Plug, ServerCog, BookMarked, Settings as SettingsIcon } from 'lucide-react'
import { api, type Integration } from '../lib/api'

const shortcuts = [
  { icon: ServerCog, label: 'Add Integration', to: '/settings' },
  { icon: BookMarked, label: 'Add Bookmark', to: '/booknest' },
  { icon: Plug, label: 'Infrastructure', to: '/infrastructure' },
  { icon: SettingsIcon, label: 'Settings', to: '/settings' },
]

const cardBase: React.CSSProperties = {
  backgroundColor: 'rgba(10, 10, 12, 0.92)',
  border: '1px solid rgba(200, 164, 52, 0.08)',
  borderRadius: '12px',
  padding: '20px',
  boxShadow: '0 0 20px rgba(200, 164, 52, 0.03)',
  transition: 'border-color 0.2s ease',
  position: 'relative',
  overflow: 'hidden',
}

const framedCardBase: React.CSSProperties = {
  backgroundImage: 'url(/blank-kpi-bg.png)',
  backgroundSize: '100% 100%',
  backgroundPosition: 'center',
  backgroundRepeat: 'no-repeat',
  borderRadius: '12px',
  padding: '20px',
  transition: 'border-color 0.2s ease',
  position: 'relative',
  overflow: 'hidden',
}

const cardDim: React.CSSProperties = {
  position: 'absolute',
  inset: 0,
  pointerEvents: 'none',
  backgroundColor: 'rgba(8, 8, 10, 0.45)',
}

const statusColor: Record<string, string> = {
  connected: '#2ECC71',
  error: '#E74C3C',
  unknown: '#7A7D85',
}

export default function BottomRow() {
  const [integrations, setIntegrations] = useState<Integration[] | null>(null)
  const navigate = useNavigate()

  useEffect(() => {
    api.listIntegrations().then(({ integrations }) => setIntegrations(integrations))
  }, [])

  return (
    <div className="grid w-full grid-cols-[1.8fr_1fr] gap-6">
      {/* Connected Integrations */}
      <div style={framedCardBase} className="hover:!border-gold/15">
        <div style={cardDim} />
        <div style={{ position: 'absolute', top: 0, left: '5%', right: '5%', height: '1px', background: 'linear-gradient(90deg, transparent, rgba(200,164,52,0.15), transparent)', pointerEvents: 'none' }} />

        <div className="relative z-10">
          <h3 style={{ fontSize: '11px', textTransform: 'uppercase', letterSpacing: '1.5px', color: '#7A7D85', fontWeight: 500, marginBottom: '16px' }}>
            Connected Integrations
          </h3>
          {integrations === null ? (
            <p style={{ fontSize: '12px', color: '#7A7D85' }}>Loading…</p>
          ) : integrations.length === 0 ? (
            <p style={{ fontSize: '12px', color: '#7A7D85' }}>No integrations added yet — add one in Settings.</p>
          ) : (
            <div className="grid grid-cols-3 gap-3">
              {integrations.map((i) => (
                <div key={i.id} className="flex items-center gap-2.5" style={{ padding: '8px 10px', borderRadius: '8px', backgroundColor: 'rgba(255,255,255,0.02)' }}>
                  <span style={{ width: '7px', height: '7px', borderRadius: '50%', backgroundColor: statusColor[i.status] ?? '#7A7D85', flexShrink: 0 }} />
                  <span style={{ fontSize: '13px', color: '#E8E6E0', flex: 1, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{i.name}</span>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>

      {/* Shortcuts */}
      <div style={cardBase} className="hover:!border-gold/15">
        <div style={{ position: 'absolute', inset: 0, opacity: 0.02, backgroundImage: 'radial-gradient(circle, #C8A434 1px, transparent 1px)', backgroundSize: '24px 24px', pointerEvents: 'none' }} />

        <div className="relative z-10">
          <h3 style={{ fontSize: '11px', textTransform: 'uppercase', letterSpacing: '1.5px', color: '#7A7D85', fontWeight: 500, marginBottom: '16px' }}>
            Shortcuts
          </h3>
          <div className="grid grid-cols-4 gap-3">
            {shortcuts.map((item) => {
              const Icon = item.icon
              return (
                <button
                  key={item.label}
                  onClick={() => navigate(item.to)}
                  className="flex flex-col items-center gap-2 cursor-pointer bg-transparent transition-all duration-200 group/btn"
                  style={{ padding: '16px 8px', borderRadius: '10px', border: '1px solid rgba(200,164,52,0.08)', boxShadow: '0 0 12px rgba(200,164,52,0.02)' }}
                  onMouseEnter={(e) => { e.currentTarget.style.borderColor = 'rgba(200,164,52,0.2)'; e.currentTarget.style.boxShadow = '0 0 16px rgba(200,164,52,0.06)' }}
                  onMouseLeave={(e) => { e.currentTarget.style.borderColor = 'rgba(200,164,52,0.08)'; e.currentTarget.style.boxShadow = '0 0 12px rgba(200,164,52,0.02)' }}
                >
                  <Icon size={20} style={{ color: '#C8A434', transition: 'color 0.2s' }} />
                  <span style={{ fontSize: '11px', color: '#C9CCD1', whiteSpace: 'nowrap' }}>{item.label}</span>
                </button>
              )
            })}
          </div>
        </div>
      </div>
    </div>
  )
}