env.example

'use client'

import { Monitor, Plus, Cpu, Wifi, AlertTriangle, CheckCircle, WifiOff } from 'lucide-react'
import { Card, SectionHeader, Badge, Button, StatusDot } from '@/components/ui'
import { useTelemetryStore, useAppSettingsStore } from '@/store'
import { formatPercent, formatLatency, formatRelativeTime, formatUptime, cn } from '@/utils'
import type { TelemetryNode } from '@/types'

const TYPE_LABELS: Record<string, string> = {
  'esp32': 'ESP32',
  'raspberry-pi': 'Raspberry Pi',
  'backend': 'Backend Service',
  'frontend': 'Frontend App',
  'database': 'Database',
  'cache': 'Cache',
  'gateway': 'Gateway',
  'broker': 'Message Broker',
  'sensor': 'Sensor',
  'api': 'API',
  'service': 'Service',
  'generic': 'Generic',
}

function DeviceRow({ node }: { node: TelemetryNode }) {
  const { setSelectedNode } = useAppSettingsStore()

  return (
    <tr
      className="border-b border-[#F3F4F6] hover:bg-[#F9FAFB] cursor-pointer transition-colors"
      onClick={() => setSelectedNode(node.id)}
    >
      <td className="px-4 py-3">
        <div className="flex items-center gap-3">
          <StatusDot status={node.status} pulse={node.status === 'online'} />
          <div>
            <div className="text-sm font-semibold text-[#111827]">{node.label}</div>
            <div className="text-xs text-[#9CA3AF]">{node.id}</div>
          </div>
        </div>
      </td>
      <td className="px-4 py-3">
        <span className="text-xs text-[#6B7280]">{TYPE_LABELS[node.type] ?? node.type}</span>
      </td>
      <td className="px-4 py-3">
        <Badge
          variant={
            node.status === 'online' ? 'success' :
            node.status === 'warning' ? 'warning' :
            node.status === 'error' ? 'error' : 'default'
          }
        >
          {node.status}
        </Badge>
      </td>
      <td className="px-4 py-3 text-right">
        <span className={cn(
          'text-sm font-tabular-nums font-medium',
          node.metrics.cpu > 85 ? 'text-red-600' : node.metrics.cpu > 70 ? 'text-orange-600' : 'text-[#374151]'
        )}>
          {formatPercent(node.metrics.cpu, 0)}
        </span>
      </td>
      <td className="px-4 py-3 text-right">
        <span className={cn(
          'text-sm font-tabular-nums font-medium',
          node.metrics.memory > 90 ? 'text-red-600' : node.metrics.memory > 75 ? 'text-orange-600' : 'text-[#374151]'
        )}>
          {formatPercent(node.metrics.memory, 0)}
        </span>
      </td>
      <td className="px-4 py-3 text-right">
        <span className="text-sm font-tabular-nums text-[#374151]">
          {formatLatency(node.metrics.latency)}
        </span>
      </td>
      <td className="px-4 py-3 text-right">
        <span className="text-sm font-tabular-nums text-[#374151]">
          {formatUptime(node.metrics.uptime)}
        </span>
      </td>
      <td className="px-4 py-3 text-right">
        {node.metrics.errorCount > 0 ? (
          <span className="text-sm font-semibold text-red-600">{node.metrics.errorCount}</span>
        ) : (
          <span className="text-sm text-[#9CA3AF]">—</span>
        )}
      </td>
      <td className="px-4 py-3">
        <span className="text-xs text-[#9CA3AF]">{formatRelativeTime(node.lastSeen)}</span>
      </td>
    </tr>
  )
}

export function DevicesView() {
  const { nodes } = useTelemetryStore()

  const online = nodes.filter((n) => n.status === 'online').length
  const warning = nodes.filter((n) => n.status === 'warning').length
  const error = nodes.filter((n) => n.status === 'error' || n.status === 'offline').length

  return (
    <div className="p-6 space-y-6">
      <SectionHeader
        title="Devices"
        description={`${nodes.length} nodes · ${online} online · ${warning} warning · ${error} error`}
        action={
          <Button variant="primary" size="sm">
            <Plus className="w-3.5 h-3.5" />
            Add Device
          </Button>
        }
      />

      {/* Summary cards */}
      <div className="grid grid-cols-3 gap-4">
        <Card className="flex items-center gap-3">
          <div className="w-8 h-8 bg-green-50 rounded-lg flex items-center justify-center">
            <CheckCircle className="w-4 h-4 text-green-600" />
          </div>
          <div>
            <div className="text-2xl font-semibold text-[#111827]">{online}</div>
            <div className="text-xs text-[#6B7280]">Online</div>
          </div>
        </Card>
        <Card className="flex items-center gap-3">
          <div className="w-8 h-8 bg-orange-50 rounded-lg flex items-center justify-center">
            <AlertTriangle className="w-4 h-4 text-orange-600" />
          </div>
          <div>
            <div className="text-2xl font-semibold text-[#111827]">{warning}</div>
            <div className="text-xs text-[#6B7280]">Warning</div>
          </div>
        </Card>
        <Card className="flex items-center gap-3">
          <div className="w-8 h-8 bg-red-50 rounded-lg flex items-center justify-center">
            <WifiOff className="w-4 h-4 text-red-600" />
          </div>
          <div>
            <div className="text-2xl font-semibold text-[#111827]">{error}</div>
            <div className="text-xs text-[#6B7280]">Error / Offline</div>
          </div>
        </Card>
      </div>

      {/* Devices table */}
      <Card padding="none">
        <div className="overflow-x-auto">
          <table className="w-full text-sm">
            <thead>
              <tr className="border-b border-[#E5E7EB]">
                {['Device', 'Type', 'Status', 'CPU', 'Memory', 'Latency', 'Uptime', 'Errors', 'Last Seen'].map((h) => (
                  <th
                    key={h}
                    className={cn(
                      'text-xs text-[#6B7280] font-medium px-4 py-2.5',
                      ['CPU', 'Memory', 'Latency', 'Uptime', 'Errors'].includes(h) ? 'text-right' : 'text-left'
                    )}
                  >
                    {h}
                  </th>
                ))}
              </tr>
            </thead>
            <tbody>
              {nodes.map((node) => (
                <DeviceRow key={node.id} node={node} />
              ))}
            </tbody>
          </table>
          {nodes.length === 0 && (
            <div className="py-16 text-center text-sm text-[#9CA3AF]">
              No devices connected. Use the SDK to connect your first device.
            </div>
          )}
        </div>
      </Card>
    </div>
  )
}