import { useState, useEffect } from "react";
import { motion } from "framer-motion";
import { ArrowLeft, Play, Square, RotateCcw, ExternalLink, Download, AlertCircle, CheckCircle, Loader2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Toast, ToastContainer } from "@/components/ui/toast";
import { ccrApi, type CcrServiceStatus } from "@/lib/api";
import { open } from '@tauri-apps/plugin-shell';

interface CcrRouterManagerProps {
  onBack: () => void;
}

export function CcrRouterManager({ onBack }: CcrRouterManagerProps) {
  const [serviceStatus, setServiceStatus] = useState<CcrServiceStatus | null>(null);
  const [loading, setLoading] = useState(true);
  const [actionLoading, setActionLoading] = useState(false);
  const [toast, setToast] = useState<{ message: string; type: "success" | "error" | "info" } | null>(null);
  const [configPath, setConfigPath] = useState<string>("");

  useEffect(() => {
    loadServiceStatus();
    loadConfigPath();
  }, []);

  const loadServiceStatus = async () => {
    try {
      setLoading(true);
      const status = await ccrApi.getServiceStatus();
      setServiceStatus(status);
    } catch (error) {
      console.error("Failed to load CCR service status:", error);
      setToast({ 
        message: `加载CCR服务状态失败: ${error}`, 
        type: "error" 
      });
    } finally {
      setLoading(false);
    }
  };

  const loadConfigPath = async () => {
    try {
      const path = await ccrApi.getConfigPath();
      setConfigPath(path);
    } catch (error) {
      console.error("Failed to get config path:", error);
    }
  };

  const handleStartService = async () => {
    try {
      setActionLoading(true);
      const result = await ccrApi.startService();
      setServiceStatus(result.status);
      setToast({ 
        message: result.message, 
        type: "success" 
      });
    } catch (error) {
      console.error("Failed to start CCR service:", error);
      setToast({ 
        message: `启动CCR服务失败: ${error}`, 
        type: "error" 
      });
    } finally {
      setActionLoading(false);
    }
  };

  const handleStopService = async () => {
    try {
      setActionLoading(true);
      const result = await ccrApi.stopService();
      setServiceStatus(result.status);
      setToast({ 
        message: result.message, 
        type: "success" 
      });
    } catch (error) {
      console.error("Failed to stop CCR service:", error);
      setToast({ 
        message: `停止CCR服务失败: ${error}`, 
        type: "error" 
      });
    } finally {
      setActionLoading(false);
    }
  };

  const handleRestartService = async () => {
    try {
      setActionLoading(true);
      const result = await ccrApi.restartService();
      setServiceStatus(result.status);
      setToast({ 
        message: result.message, 
        type: "success" 
      });
    } catch (error) {
      console.error("Failed to restart CCR service:", error);
      setToast({ 
        message: `重启CCR服务失败: ${error}`, 
        type: "error" 
      });
    } finally {
      setActionLoading(false);
    }
  };

  const handleOpenUI = async () => {
    try {
      setActionLoading(true);
      
      // 如果服务未运行，先尝试启动
      if (!serviceStatus?.is_running) {
        setToast({ 
          message: "检测到服务未运行，正在启动...", 
          type: "info" 
        });
        const startResult = await ccrApi.startService();
        setServiceStatus(startResult.status);
        
        if (!startResult.status.is_running) {
          throw new Error("服务启动失败");
        }
        
        // 等待服务完全启动
        await new Promise(resolve => setTimeout(resolve, 3000));
      }
      
      await ccrApi.openUI();
      setToast({ 
        message: "正在打开CCR UI...", 
        type: "info" 
      });
      
      // 刷新服务状态
      setTimeout(() => {
        loadServiceStatus();
      }, 2000);
    } catch (error) {
      console.error("Failed to open CCR UI:", error);
      setToast({ 
        message: `打开CCR UI失败: ${error}`, 
        type: "error" 
      });
    } finally {
      setActionLoading(false);
    }
  };

  const handleOpenInBrowser = async () => {
    try {
      // 如果服务未运行，先尝试启动
      if (!serviceStatus?.is_running) {
        setActionLoading(true);
        setToast({ 
          message: "检测到服务未运行，正在启动...", 
          type: "info" 
        });
        
        const startResult = await ccrApi.startService();
        setServiceStatus(startResult.status);
        
        if (!startResult.status.is_running) {
          throw new Error("服务启动失败");
        }
        
        // 等待服务完全启动
        await new Promise(resolve => setTimeout(resolve, 2000));
        setActionLoading(false);
      }
      
      if (serviceStatus?.endpoint) {
        open(`${serviceStatus.endpoint}/ui/`);
        setToast({ 
          message: "正在打开CCR管理界面...", 
          type: "info" 
        });
      }
    } catch (error) {
      console.error("Failed to open CCR UI in browser:", error);
      setToast({ 
        message: `打开管理界面失败: ${error}`, 
        type: "error" 
      });
      setActionLoading(false);
    }
  };

  const renderServiceStatus = () => {
    if (!serviceStatus) return null;

    const statusColor = serviceStatus.is_running ? "bg-green-500" : "bg-red-500";
    const statusText = serviceStatus.is_running ? "运行中" : "已停止";

    return (
      <div className="flex items-center gap-2">
        <div className={`w-3 h-3 rounded-full ${statusColor}`}></div>
        <span className="font-medium">{statusText}</span>
        {serviceStatus.is_running && serviceStatus.port && (
          <Badge variant="secondary">端口 {serviceStatus.port}</Badge>
        )}
      </div>
    );
  };

  const renderInstallationStatus = () => {
    if (!serviceStatus) return null;

    return (
      <div className="flex items-center gap-2">
        {serviceStatus.has_ccr_binary ? (
          <>
            <CheckCircle className="w-4 h-4 text-green-500" />
            <span className="text-green-600">已安装</span>
            {serviceStatus.ccr_version && (
              <Badge variant="outline">{serviceStatus.ccr_version}</Badge>
            )}
          </>
        ) : (
          <>
            <AlertCircle className="w-4 h-4 text-red-500" />
            <span className="text-red-600">未安装</span>
          </>
        )}
      </div>
    );
  };

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

  return (
    <div className="flex-1 overflow-y-auto">
      <div className="container mx-auto p-6 max-w-4xl">
        {/* Header */}
        <motion.div
          initial={{ opacity: 0, y: -20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5 }}
          className="mb-6"
        >
          <div className="flex items-center gap-3 mb-4">
            <Button variant="ghost" size="sm" onClick={onBack}>
              <ArrowLeft className="h-4 w-4" />
            </Button>
            <div>
              <h1 className="text-3xl font-bold tracking-tight">CCR 路由管理</h1>
              <p className="mt-1 text-sm text-muted-foreground">
                管理 Claude Code Router 服务和配置
              </p>
            </div>
          </div>
        </motion.div>

        {/* Service Status Card */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, delay: 0.1 }}
          className="mb-6"
        >
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center justify-between">
                <span>服务状态</span>
                <Button
                  variant="outline"
                  size="sm"
                  onClick={loadServiceStatus}
                  disabled={loading}
                >
                  刷新
                </Button>
              </CardTitle>
              <CardDescription>
                CCR 路由服务当前状态和控制选项
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="flex items-center justify-between">
                <span className="text-sm font-medium">安装状态:</span>
                {renderInstallationStatus()}
              </div>
              
              <div className="flex items-center justify-between">
                <span className="text-sm font-medium">服务状态:</span>
                {renderServiceStatus()}
              </div>

              {serviceStatus?.endpoint && (
                <div className="flex items-center justify-between">
                  <span className="text-sm font-medium">服务地址:</span>
                  <Button
                    variant="link"
                    size="sm"
                    onClick={handleOpenInBrowser}
                    className="p-0 h-auto"
                  >
                    {serviceStatus.endpoint}/ui/
                    <ExternalLink className="w-3 h-3 ml-1" />
                  </Button>
                </div>
              )}

              {serviceStatus?.process_id && (
                <div className="flex items-center justify-between">
                  <span className="text-sm font-medium">进程 ID:</span>
                  <Badge variant="outline">{serviceStatus.process_id}</Badge>
                </div>
              )}

              {configPath && (
                <div className="flex items-center justify-between">
                  <span className="text-sm font-medium">配置文件:</span>
                  <span className="text-xs text-muted-foreground font-mono">
                    {configPath}
                  </span>
                </div>
              )}
            </CardContent>
          </Card>
        </motion.div>

        {/* Control Panel */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, delay: 0.2 }}
          className="mb-6"
        >
          <Card>
            <CardHeader>
              <CardTitle>服务控制</CardTitle>
              <CardDescription>
                启动、停止或重启 CCR 路由服务
              </CardDescription>
            </CardHeader>
            <CardContent>
              {serviceStatus?.has_ccr_binary ? (
                <div className="flex gap-3 flex-wrap">
                  {!serviceStatus.is_running ? (
                    <Button
                      onClick={handleStartService}
                      disabled={actionLoading}
                      className="gap-2"
                    >
                      {actionLoading ? (
                        <Loader2 className="w-4 h-4 animate-spin" />
                      ) : (
                        <Play className="w-4 h-4" />
                      )}
                      启动服务
                    </Button>
                  ) : (
                    <Button
                      onClick={handleStopService}
                      disabled={actionLoading}
                      variant="destructive"
                      className="gap-2"
                    >
                      {actionLoading ? (
                        <Loader2 className="w-4 h-4 animate-spin" />
                      ) : (
                        <Square className="w-4 h-4" />
                      )}
                      停止服务
                    </Button>
                  )}

                  <Button
                    onClick={handleRestartService}
                    disabled={actionLoading}
                    variant="outline"
                    className="gap-2"
                  >
                    {actionLoading ? (
                      <Loader2 className="w-4 h-4 animate-spin" />
                    ) : (
                      <RotateCcw className="w-4 h-4" />
                    )}
                    重启服务
                  </Button>

                  <Button
                    onClick={handleOpenUI}
                    disabled={actionLoading}
                    className="gap-2"
                  >
                    {actionLoading ? (
                      <Loader2 className="w-4 h-4 animate-spin" />
                    ) : (
                      <ExternalLink className="w-4 h-4" />
                    )}
                    {serviceStatus.is_running ? "打开管理界面" : "启动并打开管理界面"}
                  </Button>
                </div>
              ) : (
                <div className="text-center py-8">
                  <AlertCircle className="w-12 h-12 text-muted-foreground mx-auto mb-4" />
                  <h3 className="text-lg font-medium mb-2">CCR 未安装</h3>
                  <p className="text-muted-foreground mb-4">
                    需要先安装 Claude Code Router 才能使用此功能
                  </p>
                  <Button
                    onClick={() => open("https://www.npmjs.com/package/@musistudio/claude-code-router")}
                    className="gap-2"
                  >
                    <Download className="w-4 h-4" />
                    安装 CCR
                  </Button>
                </div>
              )}
            </CardContent>
          </Card>
        </motion.div>

        {/* Information Card */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, delay: 0.3 }}
        >
          <Card>
            <CardHeader>
              <CardTitle>关于 CCR 路由</CardTitle>
            </CardHeader>
            <CardContent className="space-y-3 text-sm text-muted-foreground">
              <p>
                Claude Code Router (CCR) 是一个强大的路由工具，允许您将 Claude Code 请求转发到不同的 LLM 提供商。
              </p>
              <ul className="list-disc list-inside space-y-1">
                <li>支持多个 LLM 提供商（OpenRouter、DeepSeek、Gemini 等）</li>
                <li>智能路由规则，根据令牌数量和请求类型自动选择</li>
                <li>Web UI 管理界面，方便配置和监控</li>
                <li>无需 Anthropic 账户即可使用 Claude Code</li>
              </ul>
            </CardContent>
          </Card>
        </motion.div>
      </div>

      {/* Toast Container */}
      <ToastContainer>
        {toast && (
          <Toast
            message={toast.message}
            type={toast.type}
            onDismiss={() => setToast(null)}
          />
        )}
      </ToastContainer>
    </div>
  );
}