"use client";

import { useEffect, useState } from "react";
import { opsApi } from "@/lib/ops-api";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
  RefreshCcw,
  ShieldAlert,
  Copy,
  Check,
  Search,
  UserX,
  Mail,
  Calendar,
  AlertTriangle,
} from "lucide-react";

interface TelegramAnomaly {
  telegram_id: number;
  username: string;
  chat_id: string;
  status: string;
  anomaly_type: "unbound" | "expired" | "trial_only";
  reason: string;
  email: string | null;
  expires_at: string | null;
}

export function TelegramAuditPageClient() {
  const [loading, setLoading] = useState(true);
  const [data, setData] = useState<{
    anomalies: TelegramAnomaly[];
    valid_count: number;
    anomaly_count: number;
    error?: string;
  } | null>(null);
  const [filterType, setFilterType] = useState<string>("all");
  const [searchQuery, setSearchQuery] = useState("");
  const [copiedId, setCopiedId] = useState<number | null>(null);

  const loadData = async () => {
    setLoading(true);
    try {
      const res = await opsApi.telegramAudit();
      setData(res);
    } catch (err: any) {
      setData({
        anomalies: [],
        valid_count: 0,
        anomaly_count: 0,
        error: err.message || "获取审核数据失败",
      });
    }
    setLoading(false);
  };

  useEffect(() => {
    void loadData();
  }, []);

  const handleCopy = (id: number) => {
    void navigator.clipboard.writeText(String(id));
    setCopiedId(id);
    setTimeout(() => setCopiedId(null), 1500);
  };

  if (loading) {
    return (
      <div className="flex h-[400px] flex-col items-center justify-center gap-2">
        <RefreshCcw className="h-8 w-8 animate-spin text-cyan-400" />
        <p className="text-sm text-slate-400">正在与电报服务器同步并审计群成员，可能需要几秒钟...</p>
      </div>
    );
  }

  const anomalies = data?.anomalies ?? [];
  const error = data?.error;

  const filtered = anomalies.filter((item) => {
    const matchesFilter = filterType === "all" || item.anomaly_type === filterType;
    const matchesSearch =
      searchQuery.trim() === "" ||
      String(item.telegram_id).includes(searchQuery) ||
      (item.username && item.username.toLowerCase().includes(searchQuery.toLowerCase())) ||
      (item.email && item.email.toLowerCase().includes(searchQuery.toLowerCase())) ||
      (item.reason && item.reason.toLowerCase().includes(searchQuery.toLowerCase()));
    return matchesFilter && matchesSearch;
  });

  const countUnbound = anomalies.filter((x) => x.anomaly_type === "unbound").length;
  const countExpired = anomalies.filter((x) => x.anomaly_type === "expired").length;
  const countTrial = anomalies.filter((x) => x.anomaly_type === "trial_only").length;

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-white">电报群清理与异常检测</h1>
          <p className="text-sm text-slate-400 mt-1">
            本页通过核对本地数据库中与 Bot 交互过（或绑定过）的用户，实时查询 Telegram 接口审计群成员资格。
          </p>
        </div>
        <Button variant="outline" size="sm" onClick={loadData} className="gap-1.5 bg-slate-900 border-white/10 hover:bg-slate-800 text-slate-200">
          <RefreshCcw className="h-3.5 w-3.5" /> 重新检测
        </Button>
      </div>

      {error && (
        <Card className="border-red-500/20 bg-red-500/5">
          <CardContent className="flex items-start gap-3 pt-6">
            <AlertTriangle className="h-5 w-5 text-red-400 shrink-0 mt-0.5" />
            <div>
              <h4 className="font-semibold text-red-200">检测出发生错误</h4>
              <p className="text-sm text-red-300/80 mt-1">{error}</p>
            </div>
          </CardContent>
        </Card>
      )}

      {/* Overview Cards */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
        <Card className="bg-slate-900/60 border-white/5">
          <CardHeader className="pb-2">
            <CardTitle className="text-xs font-semibold text-slate-400 uppercase">群内付费用户 (正常)</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-emerald-400">{data?.valid_count ?? 0} 人</div>
            <p className="text-[11px] text-slate-500 mt-1">已绑定且在订阅期内的正常付费用户</p>
          </CardContent>
        </Card>

        <Card className="bg-slate-900/60 border-white/5">
          <CardHeader className="pb-2">
            <CardTitle className="text-xs font-semibold text-slate-400 uppercase">未绑定网页账号</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-red-400">{countUnbound} 人</div>
            <p className="text-[11px] text-slate-500 mt-1">未能在网页端找到绑定对应 TG 的记录</p>
          </CardContent>
        </Card>

        <Card className="bg-slate-900/60 border-white/5">
          <CardHeader className="pb-2">
            <CardTitle className="text-xs font-semibold text-slate-400 uppercase">订阅已过期</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-amber-500">{countExpired} 人</div>
            <p className="text-[11px] text-slate-500 mt-1">已绑定，但当前没有任何有效订阅</p>
          </CardContent>
        </Card>

        <Card className="bg-slate-900/60 border-white/5">
          <CardHeader className="pb-2">
            <CardTitle className="text-xs font-semibold text-slate-400 uppercase">仅拥有试用期</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-yellow-400">{countTrial} 人</div>
            <p className="text-[11px] text-slate-500 mt-1">仅注册了免费试用订阅（不具备入群资格）</p>
          </CardContent>
        </Card>
      </div>

      {/* Filter and Search Bar */}
      <Card className="bg-slate-900/60 border-white/5">
        <CardContent className="pt-6">
          <div className="flex flex-col md:flex-row gap-4 justify-between items-center">
            {/* Filter Buttons */}
            <div className="flex flex-wrap gap-2">
              <Button
                variant={filterType === "all" ? "default" : "outline"}
                size="sm"
                onClick={() => setFilterType("all")}
                className="text-xs rounded-lg"
              >
                全部异常 ({anomalies.length})
              </Button>
              <Button
                variant={filterType === "unbound" ? "default" : "outline"}
                size="sm"
                onClick={() => setFilterType("unbound")}
                className="text-xs rounded-lg"
              >
                未绑定 ({countUnbound})
              </Button>
              <Button
                variant={filterType === "expired" ? "default" : "outline"}
                size="sm"
                onClick={() => setFilterType("expired")}
                className={`text-xs rounded-lg ${filterType === "expired" ? "bg-amber-500 hover:bg-amber-600 text-white" : ""}`}
              >
                已过期 ({countExpired})
              </Button>
              <Button
                variant={filterType === "trial_only" ? "default" : "outline"}
                size="sm"
                onClick={() => setFilterType("trial_only")}
                className={`text-xs rounded-lg ${filterType === "trial_only" ? "bg-yellow-500 hover:bg-yellow-600 text-slate-900" : ""}`}
              >
                试用中 ({countTrial})
              </Button>
            </div>

            {/* Search Input */}
            <div className="relative w-full md:w-72">
              <Search className="absolute left-3 top-2.5 h-4 w-4 text-slate-400" />
              <Input
                placeholder="搜索用户名/电报ID/邮箱..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="pl-9 h-9 bg-slate-950 border-white/10 text-xs rounded-lg text-slate-100 placeholder:text-slate-500"
              />
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Main Table */}
      <Card className="bg-slate-900/60 border-white/5">
        <CardHeader className="pb-3 border-b border-white/5">
          <CardTitle className="text-sm font-semibold text-slate-300">需清理成员列表</CardTitle>
        </CardHeader>
        <CardContent className="p-0">
          <div className="overflow-x-auto">
            <table className="w-full text-sm text-left text-slate-300">
              <thead className="text-xs uppercase bg-slate-950/40 text-slate-400">
                <tr>
                  <th scope="col" className="px-6 py-3.5">电报用户名 & ID</th>
                  <th scope="col" className="px-6 py-3.5 text-center">异常类型</th>
                  <th scope="col" className="px-6 py-3.5">原因</th>
                  <th scope="col" className="px-6 py-3.5">绑定邮箱</th>
                  <th scope="col" className="px-6 py-3.5">订阅到期日</th>
                  <th scope="col" className="px-6 py-3.5 text-right">操作</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-white/5">
                {filtered.length > 0 ? (
                  filtered.map((row) => (
                    <tr key={`${row.telegram_id}-${row.chat_id}`} className="hover:bg-white/5 transition-colors">
                      <td className="px-6 py-4">
                        <div className="font-semibold text-white flex items-center gap-1.5">
                          {row.username.startsWith("@") ? (
                            <a
                              href={`https://t.me/${row.username.substring(1)}`}
                              target="_blank"
                              rel="noopener noreferrer"
                              className="text-cyan-400 hover:underline"
                            >
                              {row.username}
                            </a>
                          ) : (
                            <span>{row.username}</span>
                          )}
                        </div>
                        <div className="text-xs text-slate-500 font-mono mt-0.5 flex items-center gap-1.5">
                          <span>{row.telegram_id}</span>
                          <button
                            onClick={() => handleCopy(row.telegram_id)}
                            className="text-slate-600 hover:text-slate-400 p-0.5 rounded transition-colors"
                            title="复制电报 ID"
                          >
                            {copiedId === row.telegram_id ? (
                              <Check className="h-3 w-3 text-emerald-400" />
                            ) : (
                              <Copy className="h-3 w-3" />
                            )}
                          </button>
                        </div>
                      </td>
                      <td className="px-6 py-4 text-center">
                        {row.anomaly_type === "unbound" ? (
                          <span className="px-2.5 py-0.5 rounded-full text-xs font-semibold bg-red-500/15 text-red-400 border border-red-500/20">
                            未绑定
                          </span>
                        ) : row.anomaly_type === "expired" ? (
                          <span className="px-2.5 py-0.5 rounded-full text-xs font-semibold bg-amber-500/15 text-amber-400 border border-amber-500/20">
                            已到期
                          </span>
                        ) : (
                          <span className="px-2.5 py-0.5 rounded-full text-xs font-semibold bg-yellow-500/15 text-yellow-400 border border-yellow-500/20">
                            试用会员
                          </span>
                        )}
                      </td>
                      <td className="px-6 py-4 text-slate-300 text-xs">
                        {row.reason}
                      </td>
                      <td className="px-6 py-4">
                        {row.email ? (
                          <div className="flex items-center gap-1.5 text-xs">
                            <Mail className="h-3.5 w-3.5 text-slate-500 shrink-0" />
                            <span className="truncate max-w-[160px]" title={row.email}>
                              {row.email}
                            </span>
                          </div>
                        ) : (
                          <span className="text-slate-600">—</span>
                        )}
                      </td>
                      <td className="px-6 py-4">
                        {row.expires_at ? (
                          <div className="flex items-center gap-1.5 text-xs text-slate-400">
                            <Calendar className="h-3.5 w-3.5 text-slate-500 shrink-0" />
                            <span>{row.expires_at.split("T")[0]}</span>
                          </div>
                        ) : (
                          <span className="text-slate-600">—</span>
                        )}
                      </td>
                      <td className="px-6 py-4 text-right">
                        <Button
                          variant="ghost"
                          size="sm"
                          onClick={() => handleCopy(row.telegram_id)}
                          className="h-7 px-2 text-[11px] gap-1 bg-slate-950/40 hover:bg-slate-800 border border-white/5 text-slate-300 hover:text-white rounded-lg transition-colors"
                        >
                          <UserX className="h-3.5 w-3.5 text-red-400/80" />
                          复制 ID
                        </Button>
                      </td>
                    </tr>
                  ))
                ) : (
                  <tr>
                    <td colSpan={6} className="px-6 py-12 text-center text-slate-500 text-xs">
                      {searchQuery ? "未找到符合搜索条件的异常成员" : "当前群内没有检测出任何已过期的异常成员 🎉"}
                    </td>
                  </tr>
                )}
              </tbody>
            </table>
          </div>
        </CardContent>
      </Card>

      <Card className="border-cyan-500/10 bg-cyan-950/10">
        <CardContent className="pt-6 text-xs text-slate-400 leading-relaxed">
          <p className="font-semibold text-cyan-300 mb-1">💡 怎么手动清理？</p>
          <ol className="list-decimal pl-4 space-y-1">
            <li>在上述列表中点击任意用户的 <code className="bg-slate-950/60 px-1 py-0.5 rounded text-cyan-400">复制 ID</code> 按钮。</li>
            <li>打开你的 Telegram 客户端，进入对应的群组设置面板。</li>
            <li>点击群成员列表中的“添加成员”或直接搜索该用户的电报 ID 或电报用户名。</li>
            <li>在用户资料卡中选择 <code className="text-red-400">Remove from Group (踢出群组)</code> 即可。</li>
          </ol>
        </CardContent>
      </Card>
    </div>
  );
}