dev_arc_aws/src/pages/Infrastructure.tsx

import { useState } from 'react'
import { PieChart, Pie, Cell, ResponsiveContainer, LineChart, Line, XAxis } from 'recharts'
import { Plus, Server, Activity, AlertTriangle, DollarSign, Globe2 } from 'lucide-react'

const subTabs = ['Overview', 'Compute', 'Storage', 'Network', 'Database', 'Containers', 'Load Balancers', 'Backups', 'DNS', 'Tags']

const statusCards = [
  { label: 'Total Resources', value: '128', icon: Server, sub: '+4 this week' },
  { label: 'Healthy', value: '124', icon: Activity, sub: '96.9%', color: '#2ECC71' },
  { label: 'Warnings', value: '3', icon: AlertTriangle, sub: 'Needs attention', color: '#E67E22' },
  { label: 'Critical', value: '1', icon: AlertTriangle, sub: 'Action required', color: '#E74C3C' },
  { label: 'Monthly Cost', value: '$24,560.75', icon: DollarSign, sub: '↑ 3.2% MTD' },
]

const distributionData = [
  { name: 'Compute', value: 42, color: '#C8A434' },
  { name: 'Storage', value: 28, color: '#E67E22' },
  { name: 'Database', value: 18, color: '#2ECC71' },
  { name: 'Network', value: 12, color: '#7A7D85' },
]

const costData = [
  { name: 'Compute', value: 38, color: '#C8A434' },
  { name: 'Storage', value: 22, color: '#E67E22' },
  { name: 'Database', value: 25, color: '#2ECC71' },
  { name: 'Network', value: 15, color: '#7A7D85' },
]

const regions = [
  { name: 'us-east-1', x: '22%', y: '38%', resources: 42 },
  { name: 'us-west-2', x: '12%', y: '42%', resources: 18 },
  { name: 'eu-west-1', x: '48%', y: '30%', resources: 31 },
  { name: 'ap-southeast-1', x: '78%', y: '58%', resources: 22 },
  { name: 'sa-east-1', x: '32%', y: '72%', resources: 9 },
  { name: 'ap-northeast-1', x: '85%', y: '40%', resources: 6 },
]

const topResources = [
  { label: 'db-primary-01', percentage: 92 },
  { label: 'app-server-03', percentage: 85 },
  { label: 'cache-cluster-02', percentage: 78 },
  { label: 'web-frontend-lb', percentage: 64 },
  { label: 'batch-worker-04', percentage: 51 },
]

const trendData = Array.from({ length: 14 }, (_, i) => ({
  day: i,
  compute: 60 + i * 0.6 + Math.sin(i / 2) * 3,
  storage: 35 + i * 0.4 + Math.cos(i / 3) * 2,
  database: 20 + i * 0.2 + Math.sin(i / 4) * 1.5,
}))

const activities = [
  { title: 'Auto-scaling triggered', source: 'App Server Group', time: '4m ago' },
  { title: 'Resource provisioned', source: 'db-replica-02', time: '19m ago' },
  { title: 'Health check failed', source: 'cache-cluster-02', time: '27m ago' },
  { title: 'Tag updated', source: '12 resources', time: '1h ago' },
]

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',
  height: '100%',
  display: 'flex',
  flexDirection: 'column',
}

const sectionTitle: React.CSSProperties = {
  fontSize: '11px',
  textTransform: 'uppercase',
  letterSpacing: '1.5px',
  color: '#7A7D85',
  fontWeight: 500,
  marginBottom: '16px',
}

function Donut({ data, centerLabel }: { data: { name: string; value: number; color: string }[]; centerLabel?: string }) {
  return (
    <div className="flex flex-1 items-center gap-4">
      <div className="relative" style={{ width: '120px', height: '120px', flexShrink: 0 }}>
        <ResponsiveContainer width="100%" height="100%">
          <PieChart>
            <Pie data={data} dataKey="value" innerRadius={38} outerRadius={56} paddingAngle={2} isAnimationActive animationDuration={1000}>
              {data.map((entry) => (
                <Cell key={entry.name} fill={entry.color} stroke="none" />
              ))}
            </Pie>
          </PieChart>
        </ResponsiveContainer>
        {centerLabel && (
          <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
            <span style={{ fontSize: '18px', fontWeight: 700, color: '#E8E6E0' }}>{centerLabel}</span>
          </div>
        )}
      </div>
      <div className="flex flex-col gap-2">
        {data.map((entry) => (
          <div key={entry.name} className="flex items-center gap-2">
            <span style={{ width: '8px', height: '8px', borderRadius: '50%', backgroundColor: entry.color, flexShrink: 0 }} />
            <span style={{ fontSize: '12px', color: '#E8E6E0', width: '70px' }}>{entry.name}</span>
            <span style={{ fontSize: '12px', color: '#7A7D85' }}>{entry.value}%</span>
          </div>
        ))}
      </div>
    </div>
  )
}

export default function Infrastructure() {
  const [activeTab, setActiveTab] = useState('Overview')

  return (
    <>
      {/* Hero banner — faded seamlessly into the page background, no hard edges */}
      <div className="relative w-full shrink-0 overflow-hidden" style={{ height: '140px', margin: '-16px -24px 0 -24px' }}>
        <img
          src="/archnest-hero-banner.png"
          alt=""
          className="absolute inset-0 h-full w-full"
          style={{
            objectFit: 'cover',
            objectPosition: 'center 30%',
            maskImage: 'linear-gradient(to bottom, transparent 0%, black 25%, black 55%, transparent 100%)',
            WebkitMaskImage: 'linear-gradient(to bottom, transparent 0%, black 25%, black 55%, transparent 100%)',
          }}
        />
        <div
          className="pointer-events-none absolute inset-0"
          style={{
            background: 'radial-gradient(ellipse 70% 100% at center, transparent 40%, var(--color-page) 100%)',
          }}
        />

        {/* Sub-tabs + Add Resource, overlaid on the banner */}
        <div className="absolute bottom-0 left-0 right-0 z-10 flex items-center justify-between" style={{ padding: '0 24px 12px 24px' }}>
          <div className="flex items-center gap-1 overflow-x-auto" style={{ scrollbarWidth: 'none' }}>
            {subTabs.map((tab) => {
              const active = tab === activeTab
              return (
                <button
                  key={tab}
                  onClick={() => setActiveTab(tab)}
                  className="cursor-pointer bg-transparent border-none transition-colors whitespace-nowrap"
                  style={{
                    fontSize: '12px',
                    fontWeight: 500,
                    padding: '8px 14px',
                    borderRadius: '8px',
                    color: active ? '#C8A434' : '#7A7D85',
                    backgroundColor: active ? 'rgba(200,164,52,0.1)' : 'transparent',
                  }}
                >
                  {tab}
                </button>
              )
            })}
          </div>
          <button
            className="flex items-center gap-2 cursor-pointer transition-colors whitespace-nowrap"
            style={{
              fontSize: '12px',
              fontWeight: 600,
              color: '#0A0B0D',
              backgroundColor: '#C8A434',
              border: 'none',
              borderRadius: '8px',
              padding: '9px 16px',
              boxShadow: '0 0 14px rgba(200,164,52,0.2)',
            }}
          >
            <Plus size={14} />
            Add Resource
          </button>
        </div>
      </div>

      {/* Status Cards */}
      <div className="grid w-full grid-cols-5 gap-5 shrink-0">
        {statusCards.map((card) => {
          const Icon = card.icon
          return (
            <div key={card.label} style={{ ...cardBase, padding: '16px' }} className="hover:!border-gold/20">
              <h3 style={{ fontSize: '10px', textTransform: 'uppercase', letterSpacing: '1.5px', color: '#7A7D85', fontWeight: 500, marginBottom: '8px' }}>
                {card.label}
              </h3>
              <div className="flex items-center gap-2">
                <Icon size={16} style={{ color: card.color ?? '#C8A434' }} />
                <span style={{ fontSize: '22px', fontWeight: 700, color: '#E8E6E0', lineHeight: 1 }}>{card.value}</span>
              </div>
              <p style={{ fontSize: '10px', color: card.color ?? '#7A7D85', marginTop: '6px' }}>{card.sub}</p>
            </div>
          )
        })}
      </div>

      {/* Middle Row */}
      <div className="min-h-0 flex-1">
        <div className="grid h-full w-full grid-cols-[1fr_1.4fr_1fr] gap-6">
          {/* Resource Distribution */}
          <div style={cardBase} className="hover:!border-gold/15">
            <div className="relative z-10 flex flex-1 flex-col">
              <h3 style={sectionTitle}>Resource Distribution</h3>
              <Donut data={distributionData} centerLabel="128" />
            </div>
          </div>

          {/* Infrastructure Map */}
          <div style={cardBase} className="hover:!border-gold/15">
            <div style={{ position: 'absolute', inset: 0, opacity: 0.03, backgroundImage: 'linear-gradient(rgba(200,164,52,0.3) 1px, transparent 1px), linear-gradient(90deg, rgba(200,164,52,0.3) 1px, transparent 1px)', backgroundSize: '40px 40px', pointerEvents: 'none' }} />
            <div className="relative z-10 flex flex-1 flex-col">
              <h3 style={sectionTitle}>Infrastructure Map</h3>
              <div className="relative flex-1" style={{ minHeight: '140px' }}>
                <Globe2 size={120} strokeWidth={0.6} style={{ position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)', color: 'rgba(200,164,52,0.08)' }} />
                {regions.map((r) => (
                  <div key={r.name} className="absolute" style={{ left: r.x, top: r.y, transform: 'translate(-50%, -50%)' }} title={`${r.name}: ${r.resources} resources`}>
                    <div style={{ width: '8px', height: '8px', borderRadius: '50%', backgroundColor: '#C8A434', boxShadow: '0 0 10px rgba(200,164,52,0.7)' }} />
                  </div>
                ))}
              </div>
            </div>
          </div>

          {/* Top Resources by Utilization */}
          <div style={cardBase} className="hover:!border-gold/15">
            <div className="relative z-10 flex flex-1 flex-col">
              <h3 style={sectionTitle}>Top Resources by Utilization</h3>
              <div className="flex flex-1 flex-col justify-around gap-4">
                {topResources.map((res) => {
                  const color = res.percentage >= 90 ? '#E74C3C' : res.percentage >= 70 ? '#E67E22' : '#C8A434'
                  return (
                    <div key={res.label}>
                      <div className="flex items-center justify-between mb-1.5">
                        <span style={{ fontSize: '12px', color: '#E8E6E0' }}>{res.label}</span>
                        <span style={{ fontSize: '11px', color: '#7A7D85' }}>{res.percentage}%</span>
                      </div>
                      <div style={{ height: '6px', backgroundColor: 'rgba(30,32,37,0.8)', borderRadius: '3px', overflow: 'hidden' }}>
                        <div style={{ height: '100%', width: `${res.percentage}%`, backgroundColor: color, borderRadius: '3px', transition: 'width 0.8s ease' }} />
                      </div>
                    </div>
                  )
                })}
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Bottom Row */}
      <div className="shrink-0">
        <div className="grid w-full grid-cols-[1.4fr_1fr_1fr] gap-6">
          {/* Resource Trend */}
          <div style={{ ...cardBase, height: 'auto' }} className="hover:!border-gold/15">
            <div className="relative z-10">
              <h3 style={sectionTitle}>Resource Trend</h3>
              <div style={{ height: '100px' }}>
                <ResponsiveContainer width="100%" height="100%">
                  <LineChart data={trendData} margin={{ top: 0, right: 0, left: 0, bottom: 0 }}>
                    <XAxis dataKey="day" hide />
                    <Line type="monotone" dataKey="compute" stroke="#C8A434" strokeWidth={1.5} dot={false} isAnimationActive animationDuration={1000} />
                    <Line type="monotone" dataKey="storage" stroke="#E67E22" strokeWidth={1.5} dot={false} isAnimationActive animationDuration={1000} />
                    <Line type="monotone" dataKey="database" stroke="#2ECC71" strokeWidth={1.5} dot={false} isAnimationActive animationDuration={1000} />
                  </LineChart>
                </ResponsiveContainer>
              </div>
            </div>
          </div>

          {/* Cost Breakdown */}
          <div style={{ ...cardBase, height: 'auto' }} className="hover:!border-gold/15">
            <div className="relative z-10 flex flex-col">
              <h3 style={sectionTitle}>Cost Breakdown (MTD)</h3>
              <Donut data={costData} centerLabel="$24.5K" />
            </div>
          </div>

          {/* Recent Activity */}
          <div style={{ ...cardBase, height: 'auto' }} className="hover:!border-gold/15">
            <div className="relative z-10">
              <h3 style={sectionTitle}>Recent Activity</h3>
              <div className="flex flex-col gap-3">
                {activities.map((item, i) => (
                  <div key={i} className="flex items-start justify-between gap-3">
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <p style={{ fontSize: '12px', color: '#E8E6E0', fontWeight: 500, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{item.title}</p>
                      <p style={{ fontSize: '11px', color: '#7A7D85', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{item.source}</p>
                    </div>
                    <span style={{ fontSize: '11px', color: '#7A7D85', flexShrink: 0 }}>{item.time}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Footer stats bar */}
      <div
        className="shrink-0 flex items-center justify-center gap-3"
        style={{
          fontSize: '11px',
          color: '#7A7D85',
          padding: '8px 0',
          borderTop: '1px solid rgba(200,164,52,0.08)',
        }}
      >
        <span>AWS</span><span style={{ color: 'rgba(200,164,52,0.3)' }}>|</span>
        <span>6 Regions</span><span style={{ color: 'rgba(200,164,52,0.3)' }}>|</span>
        <span>18 AZs</span><span style={{ color: 'rgba(200,164,52,0.3)' }}>|</span>
        <span>128 Resources</span><span style={{ color: 'rgba(200,164,52,0.3)' }}>|</span>
        <span style={{ color: '#2ECC71' }}>98.7% Health</span><span style={{ color: 'rgba(200,164,52,0.3)' }}>|</span>
        <span>$24,560.75 MTD</span><span style={{ color: 'rgba(200,164,52,0.3)' }}>|</span>
        <span style={{ color: '#E67E22' }}>2 Alerts</span>
      </div>
    </>
  )
}