'use client';

import { useState, useEffect } from 'react';
import FractalVisualizer from './FractalVisualizer';
import AgentInterface from './AgentInterface';

// Mock DNS / CI/CD data
const mockZones = [
  { id: 'zone_1', domain: 'apex-mono.dev', status: 'Active', latency: '12ms', lastDeploy: '2m ago' },
  { id: 'zone_2', domain: 'edge-auth.net', status: 'Syncing', latency: '45ms', lastDeploy: '1hr ago' },
  { id: 'zone_3', domain: 'db-replica.org', status: 'Active', latency: '8ms', lastDeploy: '5s ago' }
];

const mockLogs = [
  '[SYS] Node auto-scaled in region us-east-1.',
  '[SEC] Audit: User ALane authenticated via SSO.',
  '[DNS] Zone apex-mono.dev propagated to 142 edge nodes.',
  '[CI/CD] Monorepo build #8892 succeeded in 14s.',
  '[SSL] Renewed certificate for edge-auth.net automatically.'
];

export default function Dashboard() {
  const [metrics, setMetrics] = useState({
    health: 0.98,
    throughput: 1250,
    errorRate: 0.01,
  });

  // Simulate live metrics changes
  useEffect(() => {
    const int = setInterval(() => {
      setMetrics(prev => ({
        health: Math.max(0.7, Math.min(1.0, prev.health + (Math.random() - 0.5) * 0.05)),
        throughput: Math.max(100, prev.throughput + (Math.random() - 0.5) * 200),
        errorRate: Math.max(0.001, Math.min(0.1, prev.errorRate + (Math.random() - 0.5) * 0.01)),
      }));
    }, 2000);
    return () => clearInterval(int);
  }, []);

  return (
    <div className="min-h-screen p-[34px] flex flex-col gap-[34px]">
      
      {/* Header */}
      <header className="flex justify-between items-end border-b border-[var(--color-slate-dark)] pb-[21px]">
        <div>
          <h1 className="font-sans text-[34px] font-bold text-[var(--color-slate-ink)] tracking-tight leading-none">
            Edge Architect
          </h1>
          <p className="font-mono text-[13px] text-[var(--color-slate-dark)] mt-[8px]">
            Cloudflare CI/CD Engine &bull; Version 4.1.0 &bull; Provenance: Albert Lane
          </p>
        </div>
        <div className="font-mono text-[13px] text-[var(--color-slate-ink)] text-right">
          <div className="uppercase tracking-widest">System Health</div>
          <div className="text-[21px]">{(metrics.health * 100).toFixed(1)}%</div>
        </div>
      </header>

      {/* Main Grid */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-[34px] flex-1">
        
        {/* Left Column: Visualizer & Metrics */}
        <div className="lg:col-span-2 flex flex-col gap-[34px]">
          
          <div className="border border-[var(--color-slate-dark)] bg-[var(--color-slate-surface-alt)] p-[21px] flex-1 relative">
            <div className="absolute top-[21px] left-[21px] font-mono text-[13px] text-[var(--color-slate-ink)] uppercase tracking-widest z-10">
              Live Edge Topology
            </div>
            <FractalVisualizer metrics={metrics} />
            <div className="absolute bottom-[21px] left-[21px] font-mono text-[13px] text-[var(--color-slate-ink)]">
              <span className="opacity-70">Throughput:</span> {Math.round(metrics.throughput)} req/s<br/>
              <span className="opacity-70">Error Rate:</span> {(metrics.errorRate * 100).toFixed(2)}%
            </div>
          </div>

          <div className="grid grid-cols-2 gap-[21px]">
            <div className="border border-[var(--color-slate-dark)] p-[21px]">
              <div className="font-mono text-[13px] text-[var(--color-slate-dark)] uppercase tracking-widest mb-[13px]">
                Active Zones
              </div>
              <div className="space-y-[8px]">
                {mockZones.map(zone => (
                  <div key={zone.id} className="flex justify-between items-center font-mono text-[13px]">
                    <span className="text-[var(--color-slate-ink)]">{zone.domain}</span>
                    <span className="text-[var(--color-slate-dark)]">{zone.latency}</span>
                  </div>
                ))}
              </div>
            </div>
            <div className="border border-[var(--color-slate-dark)] p-[21px] bg-[var(--color-slate-base)] text-[var(--color-slate-surface)]">
              <div className="font-mono text-[13px] opacity-80 uppercase tracking-widest mb-[13px]">
                Audit / System Logs
              </div>
              <div className="space-y-[8px] font-mono text-[13px] overflow-hidden max-h-[120px]">
                {mockLogs.map((log, i) => (
                  <div key={i} className="truncate">{log}</div>
                ))}
              </div>
            </div>
          </div>
          
        </div>

        {/* Right Column: Agentic Workflow */}
        <div className="flex flex-col h-full min-h-[600px]">
          <AgentInterface />
        </div>

      </div>
    </div>
  );
}