"use client";

import type { StatusSnapshot, StatusSummaryInfo } from "@/lib/types";
import type { SelectedItem } from "@/hooks/useStatus";
import StationPanel from "./StationPanel";
import TeletraanFace from "./TeletraanFace";

interface ArkBridgeProps {
  snapshot: StatusSnapshot;
  summary: StatusSummaryInfo | null;
  selectedItem: SelectedItem;
  onSelectItem: (item: SelectedItem) => void;
}

export default function ArkBridge({ snapshot, summary, selectedItem, onSelectItem }: ArkBridgeProps) {
  const handleHostSelect = (id: string) => {
    const host = snapshot.hosts.find((h) => h.id === id);
    if (host) onSelectItem({ type: "host", data: host });
  };

  const handleServiceSelect = (id: string) => {
    const svc = snapshot.services.find((s) => s.id === id);
    if (svc) onSelectItem({ type: "service", data: svc });
  };

  const handleNetworkSelect = (id: string) => {
    const net = snapshot.network.find((n) => n.id === id);
    if (net) onSelectItem({ type: "network", data: net });
  };

  const handleSiteSelect = (id: string) => {
    const site = snapshot.sites.find((s) => s.id === id);
    if (site) onSelectItem({ type: "site", data: site });
  };

  return (
    <div className="relative bg-zinc-950 rounded-lg border border-zinc-800 p-4 h-full overflow-hidden"
      style={{ backgroundImage: "radial-gradient(circle at 50% 50%, rgba(139,92,246,0.03) 0%, transparent 70%)" }}
    >
      {/* Grid overlay for Cybertronian aesthetic */}
      <div className="absolute inset-0 rounded-lg opacity-5 pointer-events-none"
        style={{ backgroundImage: "linear-gradient(rgba(139,92,246,0.3) 1px, transparent 1px), linear-gradient(90deg, rgba(139,92,246,0.3) 1px, transparent 1px)", backgroundSize: "40px 40px" }}
      />

      <div className="relative grid grid-cols-[1fr_auto_1fr] grid-rows-[minmax(0,2fr)_minmax(0,3fr)] gap-3 h-full">
        {/* Top left: Network */}
        <StationPanel
          title="Network"
          icon="📡"
          items={snapshot.network.map((n) => ({
            id: n.id,
            name: n.name,
            status: n.status,
            detail: n.latency_ms !== null ? `${n.latency_ms.toFixed(0)}ms` : undefined,
          }))}
          onSelectItem={handleNetworkSelect}
          selectedId={selectedItem?.type === "network" ? selectedItem.data.id : undefined}
        />

        {/* Center: Teletraan Face spanning both rows */}
        <div className="row-span-2 flex items-center justify-center px-2">
          <TeletraanFace overall={summary?.overall || "healthy"} />
        </div>

        {/* Top right: Hosts */}
        <StationPanel
          title="Hosts"
          icon="🖥️"
          items={snapshot.hosts.map((h) => ({
            id: h.id,
            name: h.name,
            status: h.status,
            detail: `${h.cpu_percent.toFixed(0)}%`,
          }))}
          onSelectItem={handleHostSelect}
          selectedId={selectedItem?.type === "host" ? selectedItem.data.id : undefined}
        />

        {/* Bottom left: Services */}
        <StationPanel
          title="Services"
          icon="⚙️"
          items={snapshot.services.map((s) => ({
            id: s.id,
            name: s.name,
            status: s.status,
          }))}
          onSelectItem={handleServiceSelect}
          selectedId={selectedItem?.type === "service" ? selectedItem.data.id : undefined}
        />

        {/* Bottom right: Sites */}
        <StationPanel
          title="Sites"
          icon="🌐"
          items={snapshot.sites.map((s) => ({
            id: s.id,
            name: s.name,
            status: s.status,
            detail: `${s.response_time_ms}ms`,
          }))}
          onSelectItem={handleSiteSelect}
          selectedId={selectedItem?.type === "site" ? selectedItem.data.id : undefined}
        />
      </div>
    </div>
  );
}
