"use client";

import { Settings, Cpu, Globe, Wrench, Radio } from "lucide-react";
import { useConfig, useHealth } from "@/lib/hooks";

export default function ConfigPage() {
  const { data: config, isLoading } = useConfig();
  const { data: health } = useHealth();

  const online = health?.status === "ok";
  const cfg = config?.config || {};

  const terminal = cfg.terminal as Record<string, unknown> | undefined;
  const memory = cfg.memory as Record<string, unknown> | undefined;
  const display = cfg.display as Record<string, unknown> | undefined;
  const tts = cfg.tts as Record<string, unknown> | undefined;

  return (
    <div className="space-y-4">
      <div className="flex items-center gap-2">
        <Settings size={20} style={{ color: "#6b7280" }} />
        <h1 className="text-xl font-bold text-zinc-300">Config</h1>
        <div className="ml-auto flex items-center gap-1.5">
          <div
            className="w-2 h-2 rounded-full"
            style={{ background: online ? "#22c55e" : "#ef4444" }}
          />
          <span className="text-xs text-zinc-500">{online ? "Connected" : "Offline"}</span>
        </div>
      </div>

      {isLoading ? (
        <div className="space-y-3">
          {[...Array(4)].map((_, i) => (
            <div key={i} className="glass p-4 animate-pulse">
              <div className="h-4 bg-white/[0.06] rounded w-1/2 mb-2" />
              <div className="h-3 bg-white/[0.06] rounded w-3/4" />
            </div>
          ))}
        </div>
      ) : (
        <div className="space-y-3">
          <ConfigSection icon={Cpu} label="Model" color="#f59e0b" items={[
            ["Model", config?.model || "—"],
            ["Provider", config?.provider || "custom"],
            ["Base URL", config?.base_url || "—"],
          ]} />

          <ConfigSection icon={Wrench} label="Terminal" color="#38bdf8" items={[
            ["Backend", String(terminal?.backend || "local")],
            ["Timeout", String(terminal?.timeout || 180) + "s"],
            ["Persistent shell", String(terminal?.persistent_shell ?? true)],
          ]} />

          <ConfigSection icon={Radio} label="Memory" color="#a78bfa" items={[
            ["Enabled", String(memory?.memory_enabled ?? true)],
            ["Memory limit", String(memory?.memory_char_limit || 2200) + " chars"],
            ["User limit", String(memory?.user_char_limit || 1375) + " chars"],
          ]} />

          <ConfigSection icon={Globe} label="Display" color="#22c55e" items={[
            ["Personality", String(display?.personality || "default")],
            ["Streaming", String(display?.streaming ?? true)],
            ["Skin", String(display?.skin || "default")],
            ...(tts ? [["TTS provider", String(tts.provider || "—")] as [string, string]] : []),
          ]} />
        </div>
      )}
    </div>
  );
}

function ConfigSection({
  icon: Icon,
  label,
  color,
  items,
}: {
  icon: typeof Cpu;
  label: string;
  color: string;
  items: [string, string][];
}) {
  return (
    <div className="glass p-4">
      <div className="flex items-center gap-2 mb-3">
        <Icon size={16} style={{ color }} />
        <span className="text-sm font-medium text-zinc-200">{label}</span>
      </div>
      <div className="space-y-1.5">
        {items.map(([k, v]) => (
          <div key={k} className="flex justify-between text-xs">
            <span className="text-zinc-500">{k}</span>
            <span className="text-zinc-300 font-mono truncate ml-4 max-w-[60%] text-right">{v}</span>
          </div>
        ))}
      </div>
    </div>
  );
}