"use client";

import { useState, useEffect } from "react";
import { Bot, RefreshCw, Server } from "lucide-react";

interface BotStatus {
  bot: { enabled: boolean; polling: boolean };
  hugo: { running: boolean; starting: boolean };
}

export default function BotPage() {
  const [status, setStatus] = useState<BotStatus | null>(null);
  const [restarting, setRestarting] = useState(false);

  async function fetchStatus() {
    try {
      const res = await fetch("/api/bot/status");
      const data = await res.json();
      setStatus(data);
    } catch {
      setStatus(null);
    }
  }

  async function restartHugo() {
    setRestarting(true);
    try {
      await fetch("/api/bot/restart", { method: "POST" });
    } catch { /* ignore */ }
    setTimeout(async () => {
      await fetchStatus();
      setRestarting(false);
    }, 3000);
  }

  useEffect(() => {
    fetchStatus();
    const timer = setInterval(fetchStatus, 10000);
    return () => clearInterval(timer);
  }, []);

  return (
    <div className="p-6 max-w-2xl mx-auto space-y-6">
      <h1 className="text-2xl font-bold">Bot 管理</h1>

      {/* Bot Status */}
      <div className="rounded-lg border border-[var(--border)] p-5 space-y-4">
        <h2 className="font-semibold text-lg flex items-center gap-2">
          <Bot size={20} /> Telegram Bot
        </h2>
        <div className="flex items-center gap-3">
          <div
            className={`w-3 h-3 rounded-full ${
              status?.bot.enabled
                ? "bg-green-500"
                : "bg-gray-400"
            }`}
          />
          <span className="text-sm">
            {status?.bot.enabled
              ? "已配置，随服务自动启动"
              : "未配置 TG_BOT_TOKEN"}
          </span>
        </div>
      </div>

      {/* Hugo Status */}
      <div className="rounded-lg border border-[var(--border)] p-5 space-y-4">
        <h2 className="font-semibold text-lg flex items-center gap-2">
          <Server size={20} /> Hugo Server
        </h2>
        <div className="flex items-center gap-3">
          <div
            className={`w-3 h-3 rounded-full ${
              status?.hugo.running
                ? "bg-green-500"
                : status?.hugo.starting
                ? "bg-yellow-500"
                : "bg-gray-400"
            }`}
          />
          <span className="text-sm">
            {status?.hugo.running
              ? "运行中 — localhost:1313"
              : status?.hugo.starting
              ? "启动中..."
              : "已停止"}
          </span>
        </div>
        <button
          onClick={restartHugo}
          disabled={restarting}
          className="px-4 py-2 rounded-md bg-blue-600 text-white text-sm font-medium hover:bg-blue-700 disabled:opacity-50 flex items-center gap-2"
        >
          <RefreshCw size={14} className={restarting ? "animate-spin" : ""} />
          {restarting ? "重启中..." : "重启 Hugo"}
        </button>
      </div>
    </div>
  );
}