import { AreaChart, Area, ResponsiveContainer } from 'recharts'
import { ServerCog, DatabaseBackup, Rocket, FileText } from 'lucide-react'

const trafficData = Array.from({ length: 48 }, (_, i) => ({
  time: i,
  incoming: 800 + Math.sin(i / 6) * 300 + Math.random() * 150,
  outgoing: 700 + Math.cos(i / 8) * 250 + Math.random() * 100,
}))

const shortcuts = [
  { icon: ServerCog, label: 'Add Server' },
  { icon: DatabaseBackup, label: 'Create Backup' },
  { icon: Rocket, label: 'Deploy App' },
  { icon: FileText, label: 'View Logs' },
]

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',
}

export default function BottomRow() {
  return (
    <div className="grid w-full grid-cols-[1.8fr_1fr] gap-6">
      {/* Network Traffic */}
      <div style={cardBase} className="hover:!border-gold/15">
        {/* Background image at very low opacity */}
        <div style={{ position: 'absolute', inset: 0, opacity: 0.12, backgroundImage: 'url(/archnest-network-traffic-bg.png)', backgroundSize: 'cover', backgroundPosition: 'center', pointerEvents: 'none' }} />
        {/* Gold top edge */}
        <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' }}>
            Network Traffic
          </h3>
          <div className="flex items-end gap-6">
            <div style={{ flex: 1, height: '100px' }}>
              <ResponsiveContainer width="100%" height="100%">
                <AreaChart data={trafficData} margin={{ top: 0, right: 0, left: 0, bottom: 0 }}>
                  <defs>
                    <linearGradient id="trafficGold" x1="0" y1="0" x2="0" y2="1">
                      <stop offset="0%" stopColor="#C8A434" stopOpacity={0.25} />
                      <stop offset="100%" stopColor="#C8A434" stopOpacity={0.02} />
                    </linearGradient>
                    <linearGradient id="trafficAmber" x1="0" y1="0" x2="0" y2="1">
                      <stop offset="0%" stopColor="#E67E22" stopOpacity={0.15} />
                      <stop offset="100%" stopColor="#E67E22" stopOpacity={0.02} />
                    </linearGradient>
                  </defs>
                  <Area type="monotone" dataKey="incoming" stroke="#C8A434" strokeWidth={1.5} fill="url(#trafficGold)" dot={false} isAnimationActive={true} animationDuration={1200} />
                  <Area type="monotone" dataKey="outgoing" stroke="rgba(230,126,34,0.6)" strokeWidth={1} fill="url(#trafficAmber)" dot={false} isAnimationActive={true} animationDuration={1200} />
                </AreaChart>
              </ResponsiveContainer>
            </div>
            <div className="flex flex-col gap-3 flex-shrink-0">
              <div>
                <p style={{ fontSize: '11px', color: '#7A7D85' }}>Incoming</p>
                <p style={{ fontSize: '18px', fontWeight: 700, color: '#E8E6E0' }}>1.23 Gbps</p>
                <p style={{ fontSize: '11px', color: '#E74C3C' }}>↓ 12.4%</p>
              </div>
              <div>
                <p style={{ fontSize: '11px', color: '#7A7D85' }}>Outgoing</p>
                <p style={{ fontSize: '18px', fontWeight: 700, color: '#E8E6E0' }}>1.08 Gbps</p>
                <p style={{ fontSize: '11px', color: '#2ECC71' }}>↑ 8.7%</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Shortcuts — miniature control panels */}
      <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-2 gap-3">
            {shortcuts.map((item) => {
              const Icon = item.icon
              return (
                <button
                  key={item.label}
                  className="flex flex-col items-center gap-2 cursor-pointer bg-transparent transition-all duration-200 group/btn"
                  style={{ padding: '16px 12px', 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: '#7A7D85', transition: 'color 0.2s' }} />
                  <span style={{ fontSize: '10px', color: '#7A7D85' }}>{item.label}</span>
                </button>
              )
            })}
          </div>
        </div>
      </div>
    </div>
  )
}