"use client";

import Link from "next/link";
import { useEffect, useState } from "react";
import { useSession } from "next-auth/react";
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Crown, Check, X, Loader2, AlertTriangle, CheckCircle, Compass, Bell, TrendingDown, TrendingUp, Users, Globe, Key, Eye, EyeOff, Shield, Zap, CircleDot, Info } from "lucide-react";
import { api } from "@/lib/api";
import { fetchWithAuth } from "@/lib/api/client";
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

interface PlanFeature {
  name: string;
  included: boolean;
}

interface PlanDetail {
  id: string;
  name: string;
  price: number;
  max_queries: number;
  features: PlanFeature[];
}

interface SubscriptionData {
  id: string;
  plan: string;
  status: string;
  start_date: string;
  end_date: string;
  amount: number | null;
  payment_method: string | null;
  created_at: string;
}

function ProfileTab() {
  const { data: session, update } = useSession();
  const [name, setName] = useState(session?.user?.name || "");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");
  const [success, setSuccess] = useState(false);

  const handleSave = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!session?.accessToken) return;
    setLoading(true);
    setError("");
    setSuccess(false);
    try {
      await api.auth.updateProfile(session.accessToken, { name });
      await update({ name });
      setSuccess(true);
    } catch (err: unknown) {
      const message = err instanceof Error ? err.message : "保存失败";
      setError(message);
    } finally {
      setLoading(false);
    }
  };

  return (
    <form onSubmit={handleSave} className="space-y-4">
      {error && <p className="text-sm text-destructive">{error}</p>}
      {success && <p className="text-sm text-emerald-600">个人资料已更新</p>}
      <div className="space-y-2">
        <Label htmlFor="profileName">用户名</Label>
        <Input
          id="profileName"
          value={name}
          onChange={(e) => setName(e.target.value)}
          placeholder="请输入用户名"
        />
      </div>
      <div className="space-y-2">
        <Label htmlFor="profileEmail">邮箱</Label>
        <Input
          id="profileEmail"
          type="email"
          value={session?.user?.email || ""}
          disabled
        />
      </div>
      <Button type="submit" disabled={loading}>
        {loading ? "保存中..." : "保存"}
      </Button>
    </form>
  );
}

function PasswordTab() {
  const { data: session } = useSession();
  const [oldPassword, setOldPassword] = useState("");
  const [newPassword, setNewPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");
  const [success, setSuccess] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError("");
    setSuccess(false);

    if (newPassword.length < 8) {
      setError("新密码至少需要 8 位");
      return;
    }
    if (newPassword !== confirmPassword) {
      setError("两次输入的新密码不一致");
      return;
    }
    if (!session?.accessToken) {
      setError("登录已过期，请重新登录");
      return;
    }

    setLoading(true);
    try {
      await api.auth.changePassword(session.accessToken, oldPassword, newPassword);
      setSuccess(true);
      setOldPassword("");
      setNewPassword("");
      setConfirmPassword("");
    } catch (err: unknown) {
      const message = err instanceof Error ? err.message : "修改失败";
      setError(message);
    } finally {
      setLoading(false);
    }
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      {error && <p className="text-sm text-destructive">{error}</p>}
      {success && <p className="text-sm text-emerald-600">密码修改成功</p>}
      <div className="space-y-2">
        <Label htmlFor="oldPassword">当前密码</Label>
        <Input
          id="oldPassword"
          type="password"
          placeholder="请输入当前密码"
          value={oldPassword}
          onChange={(e) => setOldPassword(e.target.value)}
          required
        />
      </div>
      <div className="space-y-2">
        <Label htmlFor="newPassword">新密码</Label>
        <Input
          id="newPassword"
          type="password"
          placeholder="请输入新密码（至少8位）"
          value={newPassword}
          onChange={(e) => setNewPassword(e.target.value)}
          required
        />
      </div>
      <div className="space-y-2">
        <Label htmlFor="confirmNewPassword">确认新密码</Label>
        <Input
          id="confirmNewPassword"
          type="password"
          placeholder="请再次输入新密码"
          value={confirmPassword}
          onChange={(e) => setConfirmPassword(e.target.value)}
          required
        />
      </div>
      <Button type="submit" disabled={loading}>
        {loading ? "修改中..." : "修改密码"}
      </Button>
    </form>
  );
}

function SubscriptionTab() {
  const { data: session } = useSession();
  const [plans, setPlans] = useState<PlanDetail[]>([]);
  const [currentSub, setCurrentSub] = useState<SubscriptionData | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [success, setSuccess] = useState<string | null>(null);

  const [dialogOpen, setDialogOpen] = useState(false);
  const [dialogType, setDialogType] = useState<"subscribe" | "cancel">("subscribe");
  const [selectedPlan, setSelectedPlan] = useState("");
  const [actionLoading, setActionLoading] = useState(false);

  const token = session?.accessToken;
  const currentPlan = currentSub?.plan || "free";

  useEffect(() => {
    loadData();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [token]);

  async function loadData() {
    setLoading(true);
    setError(null);
    try {
      const plansData = await api.subscriptions.getPlans();
      setPlans(plansData);
      if (token) {
        try {
          const subData = await api.subscriptions.getCurrent(token);
          setCurrentSub(subData);
        } catch {
          // 暂无订阅记录，保持 null
          setCurrentSub(null);
        }
      }
    } catch (err) {
      setError(err instanceof Error ? err.message : "加载失败");
    } finally {
      setLoading(false);
    }
  }

  function openSubscribeDialog(planId: string) {
    setSelectedPlan(planId);
    setDialogType("subscribe");
    setDialogOpen(true);
  }

  function openCancelDialog() {
    setDialogType("cancel");
    setDialogOpen(true);
  }

  async function handleConfirm() {
    if (!token) return;
    setActionLoading(true);
    setSuccess(null);
    try {
      if (dialogType === "subscribe") {
        await api.subscriptions.subscribe(token, selectedPlan);
        setSuccess("订阅成功");
      } else {
        await api.subscriptions.cancel(token);
        setSuccess("订阅已取消");
      }
      await loadData();
      setDialogOpen(false);
      setTimeout(() => setSuccess(null), 3000);
    } catch (err) {
      setError(err instanceof Error ? err.message : "操作失败");
      setDialogOpen(false);
    } finally {
      setActionLoading(false);
    }
  }

  const currentPlanName = plans.find((p) => p.id === currentPlan)?.name || currentPlan;

  return (
    <div className="space-y-6">
      {error && (
        <div className="flex items-center gap-2 rounded-md bg-destructive/10 px-3 py-2 text-sm text-destructive">
          <AlertTriangle className="h-4 w-4 shrink-0" />
          <span>{error}</span>
        </div>
      )}

      {success && (
        <div className="flex items-center gap-2 rounded-md bg-emerald-50 px-3 py-2 text-sm text-emerald-700">
          <CheckCircle className="h-4 w-4 shrink-0" />
          <span>{success}</span>
        </div>
      )}

      <Card>
        <CardHeader>
          <CardTitle className="text-base">当前套餐</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="flex items-center gap-3">
            <div className="flex h-10 w-10 items-center justify-center rounded-full bg-amber-100">
              <Crown className="h-5 w-5 text-amber-600" />
            </div>
            <div>
              <p className="font-medium">{currentPlanName}</p>
              <div className="flex items-center gap-2">
                <Badge variant="secondary">当前套餐</Badge>
                {currentSub?.status && (
                  <span className="text-xs text-muted-foreground">
                    状态: {currentSub.status === "active" ? "生效中" : currentSub.status}
                  </span>
                )}
              </div>
            </div>
          </div>
          {currentPlan !== "free" && currentSub && (
            <div className="text-sm text-muted-foreground">
              <p>有效期: {currentSub.start_date} 至 {currentSub.end_date}</p>
              {currentSub.amount && <p>金额: ¥{currentSub.amount}</p>}
            </div>
          )}
          {currentPlan !== "free" && (
            <Button variant="destructive" size="sm" onClick={openCancelDialog}>
              取消订阅
            </Button>
          )}
        </CardContent>
      </Card>

      <div>
        <h3 className="mb-4 text-lg font-semibold">套餐对比</h3>
        {loading ? (
          <div className="flex items-center justify-center py-12">
            <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
          </div>
        ) : (
          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
            {plans.map((plan) => {
              const isCurrent = plan.id === currentPlan;
              const canUpgrade = plan.id !== currentPlan;
              return (
                <Card
                  key={plan.id}
                  className={isCurrent ? "border-primary ring-1 ring-primary" : ""}
                >
                  <CardHeader className="pb-3">
                    <CardTitle className="text-base">{plan.name}</CardTitle>
                    <CardDescription>
                      <span className="text-2xl font-bold text-foreground">¥{plan.price}</span>
                      <span className="text-muted-foreground">/月</span>
                    </CardDescription>
                  </CardHeader>
                  <CardContent>
                    <ul className="space-y-2">
                      {plan.features.map((feature, idx) => (
                        <li key={idx} className="flex items-center gap-2 text-sm">
                          {feature.included ? (
                            <Check className="h-4 w-4 shrink-0 text-emerald-500" />
                          ) : (
                            <X className="h-4 w-4 shrink-0 text-muted-foreground/50" />
                          )}
                          <span className={feature.included ? "" : "text-muted-foreground/60"}>
                            {feature.name}
                          </span>
                        </li>
                      ))}
                    </ul>
                    {isCurrent ? (
                      <Badge className="mt-4 w-full justify-center" variant="default">
                        当前套餐
                      </Badge>
                    ) : canUpgrade ? (
                      <Button
                        className="mt-4 w-full"
                        size="sm"
                        onClick={() => openSubscribeDialog(plan.id)}
                      >
                        立即升级
                      </Button>
                    ) : null}
                  </CardContent>
                </Card>
              );
            })}
          </div>
        )}
      </div>

      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>
              {dialogType === "subscribe" ? "确认订阅" : "取消订阅"}
            </DialogTitle>
            <DialogDescription>
              {dialogType === "subscribe"
                ? `确认使用模拟支付订阅「${plans.find((p) => p.id === selectedPlan)?.name || selectedPlan}」套餐？`
                : "确认取消当前订阅？取消后将在当前计费周期结束后恢复为免费版。"}
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <Button variant="outline" onClick={() => setDialogOpen(false)} disabled={actionLoading}>
              取消
            </Button>
            <Button onClick={handleConfirm} disabled={actionLoading} variant={dialogType === "cancel" ? "destructive" : "default"}>
              {actionLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
              确认
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}

function OnboardingTab() {
  const { data: _session } = useSession();
  const [showConfirm, setShowConfirm] = useState(false);

  const handleRestartOnboarding = () => {
    setShowConfirm(true);
  };

  const confirmRestart = () => {
    window.location.href = "/onboarding";
  };

  return (
    <div className="space-y-6">
      <Card>
        <CardHeader>
          <CardTitle className="text-base flex items-center gap-2">
            <Compass className="h-5 w-5 text-blue-600" />
            新手引导
          </CardTitle>
          <CardDescription>
            重新开始新用户引导流程，快速设置您的品牌监控
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="rounded-lg border bg-muted/50 p-4">
            <h4 className="font-medium mb-2">引导流程包含：</h4>
            <ul className="text-sm text-muted-foreground space-y-1">
              <li className="flex items-center gap-2">
                <span className="flex h-5 w-5 items-center justify-center rounded-full bg-blue-100 text-xs text-blue-600">1</span>
                输入品牌名称
              </li>
              <li className="flex items-center gap-2">
                <span className="flex h-5 w-5 items-center justify-center rounded-full bg-blue-100 text-xs text-blue-600">2</span>
                选择竞品进行对比
              </li>
              <li className="flex items-center gap-2">
                <span className="flex h-5 w-5 items-center justify-center rounded-full bg-blue-100 text-xs text-blue-600">3</span>
                选择要监控的AI平台
              </li>
              <li className="flex items-center gap-2">
                <span className="flex h-5 w-5 items-center justify-center rounded-full bg-blue-100 text-xs text-blue-600">4</span>
                查看品牌健康报告
              </li>
              <li className="flex items-center gap-2">
                <span className="flex h-5 w-5 items-center justify-center rounded-full bg-blue-100 text-xs text-blue-600">5</span>
                获取个性化行动建议
              </li>
            </ul>
          </div>
          
          <div className="flex items-center gap-3">
            <Button onClick={handleRestartOnboarding}>
              <Compass className="mr-2 h-4 w-4" />
              重新开始引导
            </Button>
            <span className="text-sm text-muted-foreground">
              预计用时：5分钟
            </span>
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle className="text-base">快速链接</CardTitle>
          <CardDescription>
            跳转到其他常用页面
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid gap-3 sm:grid-cols-2">
            <Link href="/dashboard">
              <Button variant="outline" className="w-full justify-start">
                <Compass className="mr-2 h-4 w-4" />
                数据总览
              </Button>
            </Link>
            <Link href="/brands">
              <Button variant="outline" className="w-full justify-start">
                <Compass className="mr-2 h-4 w-4" />
                品牌管理
              </Button>
            </Link>
            <Link href="/compare">
              <Button variant="outline" className="w-full justify-start">
                <Compass className="mr-2 h-4 w-4" />
                竞品对比
              </Button>
            </Link>
            <Link href="/dashboard/queries">
              <Button variant="outline" className="w-full justify-start">
                <Compass className="mr-2 h-4 w-4" />
                查询管理
              </Button>
            </Link>
          </div>
        </CardContent>
      </Card>

      <Dialog open={showConfirm} onOpenChange={setShowConfirm}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>确认重新开始引导？</DialogTitle>
            <DialogDescription>
              这将带您重新完成新用户引导流程，您当前的品牌设置和监控配置不会被清除。
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <Button variant="outline" onClick={() => setShowConfirm(false)}>
              取消
            </Button>
            <Button onClick={confirmRestart}>
              确认开始
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  )
}

// ============================================================
// 告警设置标签页
// ============================================================

interface AlertSettingItem {
  id: string;
  brand_id: string;
  user_id: string;
  alert_type: string;
  enabled: boolean;
  threshold: number | null;
  created_at: string;
  updated_at: string;
}

interface BrandItem {
  id: string;
  name: string;
}

const ALERT_TYPE_LABELS: Record<string, { label: string; description: string; icon: React.ElementType }> = {
  score_drop: {
    label: "评分下降",
    description: "品牌可见性评分下降超过阈值时通知",
    icon: TrendingDown,
  },
  score_rise: {
    label: "评分上升",
    description: "品牌可见性评分上升超过阈值时通知",
    icon: TrendingUp,
  },
  negative_sentiment: {
    label: "负面情感",
    description: "AI回答中出现对品牌的负面评价时通知",
    icon: AlertTriangle,
  },
  competitor_overtake: {
    label: "竞品超越",
    description: "竞品评分超过我方品牌时通知",
    icon: Users,
  },
  new_platform_mention: {
    label: "新平台提及",
    description: "品牌在新的AI平台被首次提及时通知",
    icon: Globe,
  },
};

const DEFAULT_THRESHOLDS: Record<string, number> = {
  score_drop: 5,
  score_rise: 5,
  negative_sentiment: 1,
  competitor_overtake: 0,
  new_platform_mention: 1,
};

function AlertSettingsTab() {
  const { data: session } = useSession();
  const [brands, setBrands] = useState<BrandItem[]>([]);
  const [selectedBrandId, setSelectedBrandId] = useState<string>("");
  const [settings, setSettings] = useState<AlertSettingItem[]>([]);
  const [loading, setLoading] = useState(false);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [success, setSuccess] = useState(false);

  const token = session?.accessToken;

  // 加载品牌列表
  useEffect(() => {
    if (!token) return;
    loadBrands();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [token]);

  // 品牌变化时加载设置
  useEffect(() => {
    if (!token || !selectedBrandId) return;
    loadSettings();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [token, selectedBrandId]);

  async function loadBrands() {
    if (!token) return;
    try {
      const data = await api.brands.list(token);
      const brandList = (data as { items: BrandItem[] }).items || [];
      setBrands(brandList);
      if (brandList.length > 0 && !selectedBrandId) {
        setSelectedBrandId(brandList[0].id);
      }
    } catch {
      // 静默失败
    }
  }

  async function loadSettings() {
    if (!token || !selectedBrandId) return;
    setLoading(true);
    setError(null);
    try {
      const data = await api.alerts.getSettings(selectedBrandId, token);
      setSettings((data as { items: AlertSettingItem[] }).items || []);
    } catch (err) {
      setError(err instanceof Error ? err.message : "加载告警设置失败");
    } finally {
      setLoading(false);
    }
  }

  async function handleSave() {
    if (!token) return;
    setSaving(true);
    setError(null);
    setSuccess(false);
    try {
      const updateData = settings.map((s) => ({
        brand_id: s.brand_id,
        alert_type: s.alert_type,
        enabled: s.enabled,
        threshold: s.threshold ?? undefined,
      }));
      await api.alerts.updateSettings(updateData, token);
      setSuccess(true);
      setTimeout(() => setSuccess(false), 3000);
    } catch (err) {
      setError(err instanceof Error ? err.message : "保存失败");
    } finally {
      setSaving(false);
    }
  }

  function handleToggle(alertType: string) {
    setSettings((prev) =>
      prev.map((s) =>
        s.alert_type === alertType ? { ...s, enabled: !s.enabled } : s,
      ),
    );
  }

  function handleThresholdChange(alertType: string, value: number) {
    setSettings((prev) =>
      prev.map((s) =>
        s.alert_type === alertType ? { ...s, threshold: value } : s,
      ),
    );
  }

  // 确保所有告警类型都有设置项
  const allSettings = Object.keys(ALERT_TYPE_LABELS).map((alertType) => {
    const existing = settings.find((s) => s.alert_type === alertType);
    return (
      existing || {
        id: "",
        brand_id: selectedBrandId,
        user_id: "",
        alert_type: alertType,
        enabled: true,
        threshold: DEFAULT_THRESHOLDS[alertType] ?? 5,
        created_at: "",
        updated_at: "",
      }
    );
  });

  return (
    <div className="space-y-6">
      {error && (
        <div className="flex items-center gap-2 rounded-md bg-destructive/10 px-3 py-2 text-sm text-destructive">
          <AlertTriangle className="h-4 w-4 shrink-0" />
          <span>{error}</span>
        </div>
      )}

      {success && (
        <div className="flex items-center gap-2 rounded-md bg-emerald-50 px-3 py-2 text-sm text-emerald-700">
          <CheckCircle className="h-4 w-4 shrink-0" />
          <span>告警设置已保存</span>
        </div>
      )}

      {/* 品牌选择 */}
      {brands.length > 1 && (
        <Card>
          <CardHeader>
            <CardTitle className="text-base">选择品牌</CardTitle>
            <CardDescription>为不同品牌配置独立的告警规则</CardDescription>
          </CardHeader>
          <CardContent>
            <select
              className="w-full rounded-md border bg-background px-3 py-2 text-sm"
              value={selectedBrandId}
              onChange={(e) => setSelectedBrandId(e.target.value)}
            >
              {brands.map((brand) => (
                <option key={brand.id} value={brand.id}>
                  {brand.name}
                </option>
              ))}
            </select>
          </CardContent>
        </Card>
      )}

      {/* 告警类型设置 */}
      <Card>
        <CardHeader>
          <CardTitle className="text-base flex items-center gap-2">
            <Bell className="h-5 w-5 text-blue-600" />
            告警规则
          </CardTitle>
          <CardDescription>
            配置各类告警的启用状态和触发阈值
          </CardDescription>
        </CardHeader>
        <CardContent>
          {loading ? (
            <div className="flex items-center justify-center py-8">
              <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
            </div>
          ) : (
            <div className="space-y-4">
              {allSettings.map((setting) => {
                const config = ALERT_TYPE_LABELS[setting.alert_type];
                if (!config) return null;
                const IconComponent = config.icon;

                return (
                  <div
                    key={setting.alert_type}
                    className="flex items-start gap-4 rounded-lg border p-4"
                  >
                    {/* 开关 */}
                    <div className="flex items-center">
                      <input
                        type="checkbox"
                        id={`alert-${setting.alert_type}`}
                        checked={setting.enabled}
                        onChange={() => handleToggle(setting.alert_type)}
                        className="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
                      />
                    </div>

                    {/* 图标和描述 */}
                    <div className="flex-1">
                      <label
                        htmlFor={`alert-${setting.alert_type}`}
                        className="flex cursor-pointer items-center gap-2"
                      >
                        <IconComponent className="h-4 w-4 text-muted-foreground" />
                        <span className="font-medium text-sm">{config.label}</span>
                      </label>
                      <p className="mt-1 text-xs text-muted-foreground">
                        {config.description}
                      </p>

                      {/* 阈值设置 */}
                      {setting.enabled && setting.alert_type !== "competitor_overtake" && (
                        <div className="mt-3 flex items-center gap-3">
                          <Label className="text-xs whitespace-nowrap">
                            触发阈值:
                          </Label>
                          <Input
                            type="number"
                            min={0}
                            max={100}
                            step={0.5}
                            value={setting.threshold ?? DEFAULT_THRESHOLDS[setting.alert_type] ?? 5}
                            onChange={(e) =>
                              handleThresholdChange(
                                setting.alert_type,
                                parseFloat(e.target.value) || 0,
                              )
                            }
                            className="h-8 w-24 text-sm"
                          />
                          <span className="text-xs text-muted-foreground">
                            {setting.alert_type === "score_drop" || setting.alert_type === "score_rise"
                              ? "分（评分变化超过此值触发）"
                              : setting.alert_type === "negative_sentiment"
                              ? "次（负面提及次数达到此值触发）"
                              : "次（新平台提及次数达到此值触发）"}
                          </span>
                        </div>
                      )}
                    </div>
                  </div>
                );
              })}
            </div>
          )}

          <div className="mt-6 flex items-center gap-3">
            <Button onClick={handleSave} disabled={saving || loading}>
              {saving ? "保存中..." : "保存设置"}
            </Button>
            <span className="text-xs text-muted-foreground">
              告警检测在每次评分计算后自动执行
            </span>
          </div>
        </CardContent>
      </Card>

      {/* 说明 */}
      <Card>
        <CardHeader>
          <CardTitle className="text-base">告警说明</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-3 text-sm text-muted-foreground">
            <div className="flex items-start gap-2">
              <span className="flex h-5 w-5 items-center justify-center rounded-full bg-red-100 text-[10px] font-bold text-red-600">!</span>
              <div>
                <span className="font-medium text-foreground">严重 (Critical)</span> - 评分大幅下降、多条负面情感等需要立即关注的情况
              </div>
            </div>
            <div className="flex items-start gap-2">
              <span className="flex h-5 w-5 items-center justify-center rounded-full bg-orange-100 text-[10px] font-bold text-orange-600">!</span>
              <div>
                <span className="font-medium text-foreground">警告 (Warning)</span> - 评分小幅下降、竞品接近超越等需要留意的情况
              </div>
            </div>
            <div className="flex items-start gap-2">
              <span className="flex h-5 w-5 items-center justify-center rounded-full bg-blue-100 text-[10px] font-bold text-blue-600">i</span>
              <div>
                <span className="font-medium text-foreground">信息 (Info)</span> - 评分上升、新平台提及等积极变化
              </div>
            </div>
            <p className="mt-2 text-xs">
              同一品牌同一类型的告警在1小时内不会重复触发。告警数据保留90天。
            </p>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}

type TierType = "free" | "low" | "mid" | "high";
type KeyStatus = "configured" | "unconfigured" | "validating" | "invalid";

interface EngineProfile {
  label: string;
  group: "domestic" | "international";
  tier: TierType;
  inputPrice: number;
  outputPrice: number;
  hasFreeTier: boolean;
  requiresOwnKey: boolean;
  envVar: string;
}

const ENGINE_PROFILES: Record<string, EngineProfile> = {
  deepseek: { label: "DeepSeek", group: "domestic", tier: "free", inputPrice: 0.25, outputPrice: 6.0, hasFreeTier: true, requiresOwnKey: false, envVar: "DEEPSEEK_API_KEY" },
  qwen: { label: "通义千问", group: "domestic", tier: "free", inputPrice: 0.3, outputPrice: 0.6, hasFreeTier: true, requiresOwnKey: false, envVar: "DASHSCOPE_API_KEY" },
  wenxin: { label: "文心一言", group: "domestic", tier: "free", inputPrice: 0.012, outputPrice: 0.012, hasFreeTier: true, requiresOwnKey: false, envVar: "BAIDU_QIANFAN_API_KEY" },
  kimi: { label: "Kimi", group: "domestic", tier: "low", inputPrice: 12.0, outputPrice: 12.0, hasFreeTier: true, requiresOwnKey: false, envVar: "MOONSHOT_API_KEY" },
  doubao: { label: "豆包", group: "domestic", tier: "low", inputPrice: 0.5, outputPrice: 0.9, hasFreeTier: true, requiresOwnKey: false, envVar: "DOUBAO_API_KEY" },
  gemini: { label: "Google Gemini", group: "international", tier: "low", inputPrice: 0.5, outputPrice: 2.0, hasFreeTier: true, requiresOwnKey: false, envVar: "GOOGLE_API_KEY" },
  yuanbao: { label: "腾讯元宝", group: "domestic", tier: "mid", inputPrice: 0.8, outputPrice: 2.0, hasFreeTier: true, requiresOwnKey: false, envVar: "HUNYUAN_API_KEY" },
  chatgpt: { label: "ChatGPT", group: "international", tier: "high", inputPrice: 1.0, outputPrice: 4.0, hasFreeTier: false, requiresOwnKey: true, envVar: "OPENAI_API_KEY" },
  perplexity: { label: "Perplexity", group: "international", tier: "high", inputPrice: 35.0, outputPrice: 35.0, hasFreeTier: false, requiresOwnKey: true, envVar: "PERPLEXITY_API_KEY" },
};

const TIER_CONFIG: Record<TierType, { label: string; className: string }> = {
  free: { label: "免费", className: "bg-emerald-100 text-emerald-700 hover:bg-emerald-100" },
  low: { label: "低成本", className: "bg-blue-100 text-blue-700 hover:bg-blue-100" },
  mid: { label: "中成本", className: "bg-amber-100 text-amber-700 hover:bg-amber-100" },
  high: { label: "高成本", className: "bg-red-100 text-red-700 hover:bg-red-100" },
};

const KEY_STATUS_CONFIG: Record<KeyStatus, { label: string; className: string; icon: React.ElementType }> = {
  configured: { label: "已配置", className: "bg-emerald-100 text-emerald-700", icon: CheckCircle },
  unconfigured: { label: "未配置", className: "bg-gray-100 text-gray-500", icon: X },
  validating: { label: "验证中", className: "bg-blue-100 text-blue-700", icon: Loader2 },
  invalid: { label: "无效", className: "bg-red-100 text-red-700", icon: AlertTriangle },
};

function ApiConfigTab() {
  const { data: session } = useSession();
  const token = session?.accessToken;

  const [keyStatuses, setKeyStatuses] = useState<Record<string, KeyStatus>>({});
  const [dialogOpen, setDialogOpen] = useState(false);
  const [selectedEngine, setSelectedEngine] = useState<string>("");
  const [apiKeyInput, setApiKeyInput] = useState("");
  const [showKey, setShowKey] = useState(false);
  const [saving, setSaving] = useState(false);
  const [validating, setValidating] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [success, setSuccess] = useState<string | null>(null);

  useEffect(() => {
    loadKeyStatuses();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [token]);

  async function loadKeyStatuses() {
    if (!token) return;
    try {
      const data = await fetchWithAuth("/api/v1/api-keys/", {}, token) as { items: { engine_type: string; status: string; key_hint: string; source: string }[] };
      const statuses: Record<string, KeyStatus> = {};
      for (const k of data.items) {
        statuses[k.engine_type] = k.status === "active" ? "configured" : k.status === "invalid" ? "invalid" : "configured";
      }
      Object.keys(ENGINE_PROFILES).forEach((engine) => {
        if (!(engine in statuses)) {
          statuses[engine] = "unconfigured";
        }
      });
      setKeyStatuses(statuses);
    } catch {
      const statuses: Record<string, KeyStatus> = {};
      Object.keys(ENGINE_PROFILES).forEach((engine) => {
        statuses[engine] = "unconfigured";
      });
      setKeyStatuses(statuses);
    }
  }

  async function handleAddKey() {
    if (!token || !selectedEngine || !apiKeyInput.trim()) return;
    setSaving(true);
    setError(null);
    try {
      await fetchWithAuth("/api/v1/api-keys/", {
        method: "POST",
        body: JSON.stringify({ engine_type: selectedEngine, api_key: apiKeyInput.trim(), source: "user" }),
      }, token);
      setKeyStatuses((prev) => ({ ...prev, [selectedEngine]: "configured" }));
      setSuccess(`${ENGINE_PROFILES[selectedEngine].label} API Key 已保存`);
      setDialogOpen(false);
      setSelectedEngine("");
      setApiKeyInput("");
      setTimeout(() => setSuccess(null), 3000);
    } catch (err) {
      setError(err instanceof Error ? err.message : "保存失败");
    } finally {
      setSaving(false);
    }
  }

  async function handleDeleteKey(engine: string) {
    if (!token) return;
    try {
      const listData = await fetchWithAuth("/api/v1/api-keys/", {}, token) as { items: { engine_type: string; key_hint: string; source: string; status: string }[] };
      const keyItem = listData.items.find((k) => k.engine_type === engine);
      if (!keyItem) {
        setError("未找到该引擎的API Key");
        return;
      }
      await fetchWithAuth(`/api/v1/api-keys/${engine}/${encodeURIComponent(keyItem.key_hint)}`, {
        method: "DELETE",
      }, token);
      setKeyStatuses((prev) => ({ ...prev, [engine]: "unconfigured" }));
      setSuccess(`${ENGINE_PROFILES[engine].label} API Key 已删除`);
      setTimeout(() => setSuccess(null), 3000);
    } catch (err) {
      setError(err instanceof Error ? err.message : "删除失败");
    }
  }

  async function handleValidateKey(engine: string) {
    if (!token) return;
    setValidating(engine);
    setKeyStatuses((prev) => ({ ...prev, [engine]: "validating" }));
    try {
      const data = await fetchWithAuth("/api/v1/api-keys/verify", {
        method: "POST",
        body: JSON.stringify({ engine_type: engine }),
      }, token) as { engine_type: string; status: string };
      const isValid = data.status === "active";
      setKeyStatuses((prev) => ({ ...prev, [engine]: isValid ? "configured" : "invalid" }));
      setSuccess(isValid ? `${ENGINE_PROFILES[engine].label} API Key 验证通过` : `${ENGINE_PROFILES[engine].label} API Key 无效`);
      setTimeout(() => setSuccess(null), 3000);
    } catch {
      setKeyStatuses((prev) => ({ ...prev, [engine]: "invalid" }));
      setError("验证请求失败");
      setTimeout(() => setError(null), 3000);
    } finally {
      setValidating(null);
    }
  }

  function openAddDialog(engine?: string) {
    setSelectedEngine(engine || "");
    setApiKeyInput("");
    setShowKey(false);
    setError(null);
    setDialogOpen(true);
  }

  const domesticEngines = Object.entries(ENGINE_PROFILES).filter(([, p]) => p.group === "domestic");
  const internationalEngines = Object.entries(ENGINE_PROFILES).filter(([, p]) => p.group === "international");

  function renderEngineCard(engineKey: string, profile: EngineProfile) {
    const status = keyStatuses[engineKey] || "unconfigured";
    const statusConfig = KEY_STATUS_CONFIG[status];
    const tierConfig = TIER_CONFIG[profile.tier];
    const StatusIcon = statusConfig.icon;
    const isValidating = validating === engineKey;

    return (
      <div key={engineKey} className="flex flex-col gap-3 rounded-lg border p-4">
        <div className="flex items-start justify-between">
          <div className="flex items-center gap-3">
            <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-muted">
              <Key className="h-4 w-4 text-muted-foreground" />
            </div>
            <div>
              <div className="flex items-center gap-2">
                <span className="font-medium text-sm">{profile.label}</span>
                <Badge className={tierConfig.className}>{tierConfig.label}</Badge>
              </div>
              <p className="text-xs text-muted-foreground mt-0.5">
                输入 ¥{profile.inputPrice}/百万Token · 输出 ¥{profile.outputPrice}/百万Token
              </p>
            </div>
          </div>
          <Badge className={statusConfig.className}>
            <StatusIcon className={`mr-1 h-3 w-3 ${isValidating ? "animate-spin" : ""}`} />
            {statusConfig.label}
          </Badge>
        </div>

        <div className="flex items-center gap-2 text-xs text-muted-foreground">
          {profile.hasFreeTier && (
            <span className="flex items-center gap-1">
              <Zap className="h-3 w-3 text-emerald-500" />
              含免费额度
            </span>
          )}
          {profile.requiresOwnKey && (
            <span className="flex items-center gap-1">
              <Shield className="h-3 w-3 text-amber-500" />
              需自带Key
            </span>
          )}
          <span className="flex items-center gap-1">
            <CircleDot className="h-3 w-3" />
            {profile.envVar}
          </span>
        </div>

        <div className="flex items-center gap-2 mt-auto">
          {status === "unconfigured" ? (
            <Button size="sm" onClick={() => openAddDialog(engineKey)}>
              <Key className="mr-1 h-3 w-3" />
              添加Key
            </Button>
          ) : (
            <>
              <Button
                size="sm"
                variant="outline"
                onClick={() => handleValidateKey(engineKey)}
                disabled={isValidating}
              >
                {isValidating ? (
                  <Loader2 className="mr-1 h-3 w-3 animate-spin" />
                ) : (
                  <Shield className="mr-1 h-3 w-3" />
                )}
                验证
              </Button>
              <Button
                size="sm"
                variant="outline"
                className="text-destructive hover:text-destructive"
                onClick={() => handleDeleteKey(engineKey)}
                disabled={isValidating}
              >
                删除
              </Button>
            </>
          )}
        </div>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      {error && (
        <div className="flex items-center gap-2 rounded-md bg-destructive/10 px-3 py-2 text-sm text-destructive">
          <AlertTriangle className="h-4 w-4 shrink-0" />
          <span>{error}</span>
        </div>
      )}

      {success && (
        <div className="flex items-center gap-2 rounded-md bg-emerald-50 px-3 py-2 text-sm text-emerald-700">
          <CheckCircle className="h-4 w-4 shrink-0" />
          <span>{success}</span>
        </div>
      )}

      <Card>
        <CardHeader>
          <div className="flex items-center justify-between">
            <div>
              <CardTitle className="text-base flex items-center gap-2">
                <Key className="h-5 w-5 text-blue-600" />
                国内引擎
              </CardTitle>
              <CardDescription className="mt-1">国内AI引擎API密钥配置</CardDescription>
            </div>
            <Button size="sm" variant="outline" onClick={() => openAddDialog()}>
              <Key className="mr-1 h-3 w-3" />
              添加Key
            </Button>
          </div>
        </CardHeader>
        <CardContent>
          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
            {domesticEngines.map(([key, profile]) => renderEngineCard(key, profile))}
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle className="text-base flex items-center gap-2">
            <Globe className="h-5 w-5 text-purple-600" />
            国际引擎
          </CardTitle>
          <CardDescription>国际AI引擎API密钥配置（需科学上网环境）</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
            {internationalEngines.map(([key, profile]) => renderEngineCard(key, profile))}
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle className="text-base flex items-center gap-2">
            <Info className="h-5 w-5 text-muted-foreground" />
            成本说明
          </CardTitle>
          <CardDescription>各引擎价格层级和免费额度信息</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-3 text-sm">
            <div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
              {(["free", "low", "mid", "high"] as TierType[]).map((tier) => (
                <div key={tier} className="rounded-lg border p-3">
                  <Badge className={TIER_CONFIG[tier].className}>{TIER_CONFIG[tier].label}</Badge>
                  <p className="mt-2 text-xs text-muted-foreground">
                    {tier === "free" && "输入/输出价格极低，含免费额度"}
                    {tier === "low" && "输入/输出价格较低，部分含免费额度"}
                    {tier === "mid" && "中等价格，适合高频调用场景"}
                    {tier === "high" && "价格较高，需自带API Key"}
                  </p>
                </div>
              ))}
            </div>
            <p className="text-xs text-muted-foreground">
              价格单位：元/百万Token。实际费用以各引擎官方定价为准。标注"需自带Key"的引擎不提供平台共享Key，需配置您自己的API密钥。
            </p>
          </div>
        </CardContent>
      </Card>

      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>添加API Key</DialogTitle>
            <DialogDescription>为指定AI引擎配置API密钥</DialogDescription>
          </DialogHeader>
          <div className="space-y-4">
            <div className="space-y-2">
              <Label>选择引擎</Label>
              <Select value={selectedEngine} onValueChange={setSelectedEngine}>
                <SelectTrigger>
                  <SelectValue placeholder="请选择引擎" />
                </SelectTrigger>
                <SelectContent>
                  <SelectGroup>
                    <SelectLabel>国内引擎</SelectLabel>
                    {domesticEngines.map(([key, profile]) => (
                      <SelectItem key={key} value={key}>{profile.label}</SelectItem>
                    ))}
                  </SelectGroup>
                  <SelectGroup>
                    <SelectLabel>国际引擎</SelectLabel>
                    {internationalEngines.map(([key, profile]) => (
                      <SelectItem key={key} value={key}>{profile.label}</SelectItem>
                    ))}
                  </SelectGroup>
                </SelectContent>
              </Select>
            </div>
            <div className="space-y-2">
              <Label>API Key</Label>
              <div className="relative">
                <Input
                  type={showKey ? "text" : "password"}
                  placeholder="请输入API Key"
                  value={apiKeyInput}
                  onChange={(e) => setApiKeyInput(e.target.value)}
                  className="pr-10"
                />
                <Button
                  type="button"
                  variant="ghost"
                  size="sm"
                  className="absolute right-0 top-0 h-full px-3"
                  onClick={() => setShowKey(!showKey)}
                >
                  {showKey ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
                </Button>
              </div>
              {selectedEngine && ENGINE_PROFILES[selectedEngine] && (
                <p className="text-xs text-muted-foreground">
                  环境变量名: {ENGINE_PROFILES[selectedEngine].envVar}
                </p>
              )}
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setDialogOpen(false)} disabled={saving}>
              取消
            </Button>
            <Button onClick={handleAddKey} disabled={saving || !selectedEngine || !apiKeyInput.trim()}>
              {saving && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
              保存
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}

export default function SettingsPage() {
  return (
    <div className="space-y-6">
      <div>
        <h2 className="text-2xl font-bold tracking-tight">设置</h2>
        <p className="text-muted-foreground">管理您的账户和订阅信息</p>
      </div>

      <Tabs defaultValue="profile" className="w-full">
        <TabsList>
          <TabsTrigger value="profile">个人资料</TabsTrigger>
          <TabsTrigger value="password">密码修改</TabsTrigger>
          <TabsTrigger value="subscription">订阅管理</TabsTrigger>
          <TabsTrigger value="api">API配置</TabsTrigger>
          <TabsTrigger value="alerts">告警设置</TabsTrigger>
          <TabsTrigger value="onboarding">引导</TabsTrigger>
        </TabsList>
        <TabsContent value="profile" className="mt-4">
          <Card>
            <CardHeader>
              <CardTitle className="text-base">个人资料</CardTitle>
              <CardDescription>管理您的基本信息</CardDescription>
            </CardHeader>
            <CardContent>
              <ProfileTab />
            </CardContent>
          </Card>
        </TabsContent>
        <TabsContent value="password" className="mt-4">
          <Card>
            <CardHeader>
              <CardTitle className="text-base">密码修改</CardTitle>
              <CardDescription>更改您的登录密码</CardDescription>
            </CardHeader>
            <CardContent>
              <PasswordTab />
            </CardContent>
          </Card>
        </TabsContent>
        <TabsContent value="subscription" className="mt-4">
          <SubscriptionTab />
        </TabsContent>
        <TabsContent value="api" className="mt-4">
          <ApiConfigTab />
        </TabsContent>
        <TabsContent value="alerts" className="mt-4">
          <AlertSettingsTab />
        </TabsContent>
        <TabsContent value="onboarding" className="mt-4">
          <OnboardingTab />
        </TabsContent>
      </Tabs>
    </div>
  );
}
