'use client';

import React, { useEffect, useState } from 'react';
import {
  CheckCircle2,
  XCircle,
  AlertCircle,
  RefreshCw,
  Server,
  Cpu,
  Radio,
  Key,
  Loader2,
} from 'lucide-react';
import { getStatus, restartSystem } from '@/lib/api';
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from '@/components/ui/alert-dialog';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import type { SystemStatus } from '@/types';

export default function StatusPage() {
  const [status, setStatus] = useState<SystemStatus | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);
  const [restartDialogOpen, setRestartDialogOpen] = useState(false);
  const [restarting, setRestarting] = useState(false);
  const [restartError, setRestartError] = useState<string | null>(null);

  const loadStatus = async () => {
    setLoading(true);
    setError(null);
    try {
      const data = await getStatus();
      setStatus(data);
    } catch (err: any) {
      setError(err.message || '连接后端失败');
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    loadStatus();
  }, []);

  useEffect(() => {
    if (!restarting) {
      return;
    }

    const intervalId = window.setInterval(async () => {
      try {
        await getStatus();
        window.location.reload();
      } catch {
        // Ignore failures until the container is back.
      }
    }, 3000);

    return () => {
      window.clearInterval(intervalId);
    };
  }, [restarting]);

  const handleRestart = async () => {
    setRestartError(null);
    try {
      await restartSystem();
      setRestartDialogOpen(false);
      setRestarting(true);
    } catch (err: any) {
      setRestartError(err.message || '重启失败');
    }
  };

  if (loading) {
    return (
      <div className="flex items-center justify-center py-20">
        <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
      </div>
    );
  }

  if (error) {
    return (
      <div className="max-w-4xl mx-auto p-6">
        <Card className="border-destructive">
          <CardContent className="pt-6">
            <div className="flex items-center gap-3 text-destructive">
              <AlertCircle className="w-5 h-5" />
              <div>
                <p className="font-medium">无法连接到 Boardware Agent Sandbox 后端</p>
                <p className="text-sm text-muted-foreground mt-1">{error}</p>
                <p className="text-sm text-muted-foreground mt-1">
                  请确认后端服务已启动，并且当前页面可以访问它。
                </p>
              </div>
            </div>
            <Button onClick={loadStatus} variant="outline" size="sm" className="mt-4">
              <RefreshCw className="w-4 h-4 mr-2" />
              重试
            </Button>
          </CardContent>
        </Card>
      </div>
    );
  }

  if (!status) return null;

  return (
    <div className="max-w-4xl mx-auto p-6 space-y-6">
      <div className="flex items-center justify-between">
        <h1 className="text-2xl font-bold">系统状态</h1>
        <Button onClick={loadStatus} variant="outline" size="sm" disabled={restarting}>
          <RefreshCw className="w-4 h-4 mr-2" />
          刷新
        </Button>
      </div>

      {/* System Info */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2 text-base">
            <Server className="w-4 h-4" />
            系统信息
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
            <div className="space-y-1">
              <p className="text-sm font-medium">重启当前实例</p>
              <p className="text-sm text-muted-foreground">
                {restarting
                  ? '正在重启当前 docker，服务恢复后页面会自动刷新。'
                  : '会重启当前 docker 容器。重启完成后需要重新登录。'}
              </p>
              {restartError ? (
                <p className="text-sm text-destructive">{restartError}</p>
              ) : null}
            </div>
            <AlertDialog open={restartDialogOpen} onOpenChange={setRestartDialogOpen}>
              <Button
                variant="destructive"
                onClick={() => setRestartDialogOpen(true)}
                disabled={restarting}
              >
                {restarting ? (
                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                ) : (
                  <RefreshCw className="w-4 h-4 mr-2" />
                )}
                Restart
              </Button>
              <AlertDialogContent>
                <AlertDialogHeader>
                  <AlertDialogTitle>确认重启当前实例？</AlertDialogTitle>
                  <AlertDialogDescription>
                    这会重启当前 docker 容器，页面会短暂不可用。由于当前登录态保存在内存里，重启完成后需要重新登录。
                  </AlertDialogDescription>
                </AlertDialogHeader>
                <AlertDialogFooter>
                  <AlertDialogCancel disabled={restarting}>取消</AlertDialogCancel>
                  <AlertDialogAction onClick={handleRestart} disabled={restarting}>
                    {restarting ? '重启中...' : '确认 Restart'}
                  </AlertDialogAction>
                </AlertDialogFooter>
              </AlertDialogContent>
            </AlertDialog>
          </div>
        </CardContent>
      </Card>

      {/* Model Config */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2 text-base">
            <Cpu className="w-4 h-4" />
            智能体配置
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-3">
          <InfoRow label="模型" value={status.model} />
          <InfoRow label="最大令牌数" value={String(status.max_tokens)} />
          <InfoRow label="温度" value={String(status.temperature)} />
          <InfoRow
            label="最大工具迭代次数"
            value={String(status.max_tool_iterations)}
          />
        </CardContent>
      </Card>

      {/* Providers */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2 text-base">
            <Key className="w-4 h-4" />
            提供商
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
            {status.providers.map((p) => (
              <div
                key={p.name}
                className="flex items-center gap-2 text-sm"
              >
                {p.has_key ? (
                  <CheckCircle2 className="w-4 h-4 text-green-500" />
                ) : (
                  <XCircle className="w-4 h-4 text-muted-foreground/40" />
                )}
                <span className={p.has_key ? '' : 'text-muted-foreground'}>
                  {p.name}
                </span>
                {p.detail && (
                  <span className="text-xs text-muted-foreground truncate">
                    {p.detail}
                  </span>
                )}
              </div>
            ))}
          </div>
        </CardContent>
      </Card>

      {/* Channels */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2 text-base">
            <Radio className="w-4 h-4" />
            通道
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
            {status.channels.map((ch) => (
              <div key={ch.name} className="flex items-center gap-2 text-sm">
                <Badge
                  variant={ch.enabled ? 'default' : 'secondary'}
                  className="text-xs"
                >
                  {ch.enabled ? '开启' : '关闭'}
                </Badge>
                <span className="capitalize">{ch.name}</span>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>

      {/* Cron Summary */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2 text-base">
            <AlertCircle className="w-4 h-4" />
            调度器
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-3">
          <InfoRow
            label="状态"
            value={status.cron.enabled ? '运行中' : '已停止'}
            ok={status.cron.enabled}
          />
          <InfoRow label="任务数" value={String(status.cron.jobs)} />
        </CardContent>
      </Card>
    </div>
  );
}

function InfoRow({
  label,
  value,
  ok,
}: {
  label: string;
  value: string;
  ok?: boolean;
}) {
  return (
    <div className="flex items-center justify-between text-sm">
      <span className="text-muted-foreground">{label}</span>
      <div className="flex items-center gap-2">
        <code className="bg-muted px-2 py-0.5 rounded text-xs max-w-[400px] truncate">
          {value}
        </code>
        {ok !== undefined &&
          (ok ? (
            <CheckCircle2 className="w-4 h-4 text-green-500" />
          ) : (
            <XCircle className="w-4 h-4 text-destructive" />
          ))}
      </div>
    </div>
  );
}