"use client";
import React, { useState } from "react";
import { motion } from "framer-motion";
import { SpotlightCard } from "@/components/SpotlightCard";
import { Wifi, Cpu, Activity, Shield, RefreshCw, Radio } from "lucide-react";

const PROTOCOLS = [
  { id: "opcua", name: "OPC-UA Secure Channel", speed: "4,820 msg/s", latency: "0.8 ms", encryption: "AES-256-CBC", state: "NOMINAL" },
  { id: "modbus", name: "Modbus TCP Gateway", speed: "1,240 msg/s", latency: "1.4 ms", encryption: "NONE (LOCAL)", state: "NOMINAL" },
  { id: "mqtt", name: "MQTT Broker Node", speed: "8,940 msg/s", latency: "1.1 ms", encryption: "TLS v1.3", state: "NOMINAL" },
  { id: "bacnet", name: "BACnet Building Node", speed: "310 msg/s", latency: "2.8 ms", encryption: "NONE (ISOLATED)", state: "NOMINAL" },
];

export default function IoTPage() {
  const [activeProto, setActiveProto] = useState<typeof PROTOCOLS[0]>(PROTOCOLS[0]);

  return (
    <div className="relative min-h-screen pt-20 pb-16 overflow-hidden">
      {/* Background grids */}
      <div className="pointer-events-none absolute inset-0 orbit-grid-mesh opacity-80" />
      <div className="pointer-events-none absolute inset-0 orbit-radial-glow" />

      <div className="mx-auto max-w-7xl px-6 lg:px-8 relative z-10 space-y-16">
        
        {/* Cinematic Hero */}
        <div className="max-w-3xl space-y-6">
          <div className="inline-flex items-center gap-1.5 rounded-full border border-orbit-cyan/20 bg-orbit-cyan/5 px-4 py-1.5 font-mono text-xs font-bold text-orbit-cyan">
            <Wifi className="h-4.5 w-4.5 animate-pulse" />
            Orbit Edge IoT Module
          </div>
          <h1 className="text-4xl font-extrabold tracking-tight sm:text-6xl text-slate-900 dark:text-slate-100 leading-tight">
            Edge Ingestion & <br />
            <span className="bg-gradient-to-r from-orbit-cyan via-orbit-blue to-orbit-purple bg-clip-text text-transparent">Multi-Protocol Sync.</span>
          </h1>
          <p className="text-base md:text-lg leading-relaxed text-slate-600 dark:text-slate-400">
            Unify the physical communication stack. Orbit Edge provides low-latency data ingestion across OPC-UA, Modbus, MQTT, and BACnet, processing edge analytics to safeguard bandwidth.
          </p>
        </div>

        {/* Global Connection Stats Grid */}
        <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
          <SpotlightCard glowColor="rgba(0, 212, 255, 0.15)">
            <div className="text-center space-y-2">
              <span className="font-mono text-[9px] text-slate-500 uppercase tracking-widest block">Connected Gateways</span>
              <span className="font-mono text-3xl font-extrabold text-slate-900 dark:text-white">12 / 12</span>
              <p className="text-[10px] text-slate-500 font-mono">100% telemetry online status</p>
            </div>
          </SpotlightCard>
          <SpotlightCard glowColor="rgba(0, 212, 255, 0.15)">
            <div className="text-center space-y-2">
              <span className="font-mono text-[9px] text-slate-500 uppercase tracking-widest block">Data Ingestion Rate</span>
              <span className="font-mono text-3xl font-extrabold text-orbit-cyan">15,310 msg/s</span>
              <p className="text-[10px] text-slate-500 font-mono">Real-time edge message processing</p>
            </div>
          </SpotlightCard>
          <SpotlightCard glowColor="rgba(0, 212, 255, 0.15)">
            <div className="text-center space-y-2">
              <span className="font-mono text-[9px] text-slate-500 uppercase tracking-widest block">Network Latency</span>
              <span className="font-mono text-3xl font-extrabold text-orbit-green">1.1 ms</span>
              <p className="text-[10px] text-slate-500 font-mono">Sub-millisecond packet transmission</p>
            </div>
          </SpotlightCard>
          <SpotlightCard glowColor="rgba(0, 212, 255, 0.15)">
            <div className="text-center space-y-2">
              <span className="font-mono text-[9px] text-slate-500 uppercase tracking-widest block">Ingested Data Points</span>
              <span className="font-mono text-3xl font-extrabold text-slate-900 dark:text-white">5.8B+</span>
              <p className="text-[10px] text-slate-500 font-mono">Accumulated databases records</p>
            </div>
          </SpotlightCard>
        </div>

        {/* Interactive Protocol Ingestion Console */}
        <div className="rounded-3xl border border-orbit-border bg-orbit-bg-primary overflow-hidden shadow-2xl">
          <div className="border-b border-orbit-border/60 bg-orbit-bg-deep px-6 py-4 flex justify-between items-center">
            <span className="font-mono text-xs font-bold text-slate-600 dark:text-slate-400">IIoT PROTOCOL COMMUNICATIONS MATRIX</span>
            <span className="font-mono text-[10px] text-slate-500">GATEWAY_V4_SECURE</span>
          </div>

          <div className="grid grid-cols-1 lg:grid-cols-12">
            {/* Protocol Buttons Grid (7 cols) */}
            <div className="lg:col-span-7 p-6 border-b border-orbit-border lg:border-b-0 lg:border-r border-orbit-border/60 space-y-6">
              <h3 className="font-mono text-xs font-bold text-slate-600 dark:text-slate-400 uppercase tracking-widest">ACTIVE PROTOCOLS</h3>
              
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                {PROTOCOLS.map((proto) => {
                  const isActive = activeProto.id === proto.id;
                  return (
                    <button
                      key={proto.id}
                      onClick={() => setActiveProto(proto)}
                      className={`rounded-2xl border text-left p-4 transition-all duration-300 ${
                        isActive 
                          ? "border-orbit-cyan bg-orbit-cyan/5 shadow-[0_0_15px_rgba(0,212,255,0.1)]" 
                          : "border-orbit-border bg-orbit-bg-deep/40 hover:border-slate-800"
                      }`}
                    >
                      <div className="flex justify-between items-center mb-2">
                        <span className="font-mono text-xs font-bold text-slate-900 dark:text-white">{proto.name.split(" ")[0]}</span>
                        <span className="inline-flex items-center gap-1 rounded-full px-2 py-0.5 font-mono text-[8px] font-bold border border-emerald-500/25 bg-emerald-950/20 text-emerald-400">
                          {proto.state}
                        </span>
                      </div>
                      <div className="flex justify-between font-mono text-[10px] text-slate-500">
                        <span>Speed Rate:</span>
                        <span className="font-bold text-slate-700 dark:text-slate-300">{proto.speed}</span>
                      </div>
                    </button>
                  );
                })}
              </div>
            </div>

            {/* Protocol Telemetry Diagnostics (5 cols) */}
            <div className="lg:col-span-5 p-6 bg-orbit-bg-deep/30 flex flex-col justify-between space-y-6">
              <div>
                <h3 className="font-mono text-xs font-bold text-slate-600 dark:text-slate-400 uppercase tracking-widest mb-4">ACTIVE ROUTE TELEMETRY</h3>
                
                <div className="rounded-2xl border border-orbit-border bg-orbit-bg-deep p-5 space-y-4">
                  <h4 className="font-mono text-xs font-extrabold text-slate-900 dark:text-white border-b border-orbit-border/60 pb-2">
                    {activeProto.name}
                  </h4>

                  <div className="space-y-3 font-mono text-[11px] text-slate-600 dark:text-slate-400">
                    <div className="flex justify-between">
                      <span>Ingestion Speed:</span>
                      <span className="text-orbit-cyan font-bold">{activeProto.speed}</span>
                    </div>
                    <div className="flex justify-between">
                      <span>Gateway Latency:</span>
                      <span className="text-orbit-green font-bold">{activeProto.latency}</span>
                    </div>
                    <div className="flex justify-between">
                      <span>SSL Encryption:</span>
                      <span className="text-slate-900 dark:text-white font-bold">{activeProto.encryption}</span>
                    </div>
                  </div>
                </div>
              </div>

              <div className="rounded-2xl border border-orbit-border bg-orbit-bg-deep p-4 font-mono text-[10px] text-slate-500 flex gap-2 items-center">
                <Shield className="h-4 w-4 shrink-0 text-orbit-purple" />
                <span>All protocol layers tunnel through hardware-based military-grade TLS 1.3 firewalls.</span>
              </div>
            </div>
          </div>
        </div>

        {/* Detailed Solutions grids */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 pt-8">
          <div className="space-y-4">
            <h2 className="text-2xl font-bold font-mono text-slate-800 dark:text-slate-200">OPC-UA Client Architectures</h2>
            <p className="text-sm leading-relaxed text-slate-600 dark:text-slate-400">
              Integrates seamlessly with PLC and SCADA controllers supporting the OPC-UA specifications. Securely queries variables, data structures, and diagnostic values with automatic connection retry buffers.
            </p>
          </div>
          <div className="space-y-4">
            <h2 className="text-2xl font-bold font-mono text-slate-800 dark:text-slate-200">Modbus to MQTT Bridges</h2>
            <p className="text-sm leading-relaxed text-slate-600 dark:text-slate-400">
              Translates legacy registers from Modbus RTU/TCP protocols, packaging data points into lightweight JSON structures, and routes them via MQTT brokers to cloud databases.
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}