"use client";

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 } from "lucide-react";
import { api } from "@/lib/api";

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>
  );
}

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>
        </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>
      </Tabs>
    </div>
  );
}