"use client";

import { useState } from "react";
import { ChevronDown, ChevronRight, Plug } from "lucide-react";
import type { AgentDetails } from "@/lib/types";

interface AgentSettingsTabProps {
  details: AgentDetails;
}

export function AgentSettingsTab({ details }: AgentSettingsTabProps) {
  const [advancedOpen, setAdvancedOpen] = useState(false);

  return (
    <div className="space-y-6 p-6">
      {/* Basic Settings */}
      <section>
        <h4 className="mb-4 text-sm font-semibold text-zinc-900 dark:text-zinc-100">
          Basic
        </h4>
        <div className="space-y-3">
          <SettingRow label="Name" value={details.name} />
          <SettingRow label="Display Name" value={details.displayName} />
          <SettingRow
            label="Description"
            value={details.description || "None"}
          />
          <SettingRow label="Port" value={String(details.port)} />
          <SettingRow
            label="Enabled"
            value={details.enabled ? "Yes" : "No"}
          />
        </div>
      </section>

      {/* Advanced Settings */}
      <section>
        <button
          onClick={() => setAdvancedOpen(!advancedOpen)}
          className="flex w-full items-center gap-2 text-sm font-semibold text-zinc-900 dark:text-zinc-100"
        >
          {advancedOpen ? (
            <ChevronDown size={16} />
          ) : (
            <ChevronRight size={16} />
          )}
          Advanced
        </button>

        {advancedOpen && (
          <div className="mt-4 space-y-6">
            {/* CLAUDE.md */}
            <div>
              <h5 className="mb-2 text-xs font-semibold uppercase tracking-wider text-zinc-400 dark:text-zinc-500">
                CLAUDE.md
              </h5>
              {details.claudeMd ? (
                <pre className="max-h-96 overflow-auto rounded-lg border border-zinc-200 bg-zinc-50 p-4 font-mono text-xs leading-relaxed text-zinc-700 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-300">
                  {details.claudeMd}
                </pre>
              ) : (
                <p className="text-sm text-zinc-400">No CLAUDE.md found</p>
              )}
            </div>

            {/* MCP Servers */}
            <div>
              <h5 className="mb-2 flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wider text-zinc-400 dark:text-zinc-500">
                <Plug size={12} />
                MCP Servers
              </h5>
              {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-zinc-50 p-3 dark:border-zinc-700 dark:bg-zinc-900"
                    >
                      <p className="text-sm font-medium text-zinc-900 dark:text-zinc-100">
                        {srv.name}
                      </p>
                      <div className="mt-1 space-y-0.5 font-mono text-xs text-zinc-500 dark:text-zinc-400">
                        <p>
                          <span className="text-zinc-400 dark:text-zinc-500">
                            cmd:{" "}
                          </span>
                          {srv.command}
                        </p>
                        {srv.args.length > 0 && (
                          <p>
                            <span className="text-zinc-400 dark:text-zinc-500">
                              args:{" "}
                            </span>
                            {srv.args.join(" ")}
                          </p>
                        )}
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </div>
          </div>
        )}
      </section>
    </div>
  );
}

function SettingRow({ label, value }: { label: string; value: string }) {
  return (
    <div className="flex items-center justify-between rounded-lg border border-zinc-200 bg-white px-4 py-2.5 dark:border-zinc-700 dark:bg-zinc-800/50">
      <span className="text-sm text-zinc-500 dark:text-zinc-400">{label}</span>
      <span className="text-sm font-medium text-zinc-900 dark:text-zinc-100">
        {value}
      </span>
    </div>
  );
}
