"use client";

import { Bot, Radio, Plug, Hash, FolderOpen, Terminal } from "lucide-react";
import type { AgentDetails } from "@/lib/types";

interface AgentOverviewTabProps {
  details: AgentDetails;
  online: boolean;
}

export function AgentOverviewTab({ details, online }: AgentOverviewTabProps) {
  return (
    <div className="space-y-6 p-6">
      {/* Status Card */}
      <div className="rounded-xl border border-zinc-200 bg-zinc-50 p-5 dark:border-zinc-700 dark:bg-zinc-900">
        <div className="flex items-start gap-4">
          <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-zinc-200 dark:bg-zinc-800">
            <Bot size={24} className="text-zinc-500 dark:text-zinc-400" />
          </div>
          <div className="flex-1">
            <div className="flex items-center gap-3">
              <h3 className="text-lg font-semibold text-zinc-900 dark:text-zinc-100">
                {details.displayName}
              </h3>
              <span
                className={`inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium ${
                  online
                    ? "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400"
                    : "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400"
                }`}
              >
                <span
                  className={`h-1.5 w-1.5 rounded-full ${
                    online ? "bg-emerald-500" : "bg-red-500"
                  }`}
                />
                {online ? "Online" : "Offline"}
              </span>
            </div>
            <p className="mt-1 text-sm text-zinc-500 dark:text-zinc-400">
              {details.description || "No description"}
            </p>
          </div>
        </div>
      </div>

      {/* Info Grid */}
      <div className="grid gap-4 sm:grid-cols-2">
        <InfoCard
          icon={<Hash size={16} />}
          label="Port"
          value={String(details.port)}
        />
        <InfoCard
          icon={<Radio size={16} />}
          label="Status"
          value={details.enabled ? "Enabled" : "Disabled"}
        />
        <InfoCard
          icon={<Terminal size={16} />}
          label="FIFO"
          value={details.fifo || "Not configured"}
        />
        <InfoCard
          icon={<FolderOpen size={16} />}
          label="Channel Directory"
          value={details.channelDir || "Not configured"}
        />
      </div>

      {/* MCP Servers */}
      <div>
        <h4 className="mb-3 flex items-center gap-2 text-sm font-semibold text-zinc-900 dark:text-zinc-100">
          <Plug size={16} />
          MCP Servers ({details.mcpServers.length})
        </h4>
        {details.mcpServers.length === 0 ? (
          <p className="text-sm text-zinc-400">No MCP servers configured</p>
        ) : (
          <div className="space-y-2">
            {details.mcpServers.map((srv) => (
              <div
                key={srv.name}
                className="rounded-lg border border-zinc-200 bg-white px-4 py-3 dark:border-zinc-700 dark:bg-zinc-800/50"
              >
                <p className="text-sm font-medium text-zinc-900 dark:text-zinc-100">
                  {srv.name}
                </p>
                <p className="mt-0.5 truncate font-mono text-xs text-zinc-500 dark:text-zinc-400">
                  {srv.command} {srv.args.join(" ")}
                </p>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}

function InfoCard({
  icon,
  label,
  value,
}: {
  icon: React.ReactNode;
  label: string;
  value: string;
}) {
  return (
    <div className="rounded-lg border border-zinc-200 bg-white px-4 py-3 dark:border-zinc-700 dark:bg-zinc-800/50">
      <div className="flex items-center gap-2 text-xs font-medium text-zinc-400 dark:text-zinc-500">
        {icon}
        {label}
      </div>
      <p className="mt-1 truncate text-sm font-medium text-zinc-900 dark:text-zinc-100">
        {value}
      </p>
    </div>
  );
}
