"use client";

import * as React from "react";
import { useRouter } from "next/navigation";
import { useSession } from "next-auth/react";
import { useApi } from "@/lib/hooks/use-api";
import { monitoringApi, MonitoringRecord, MonitoringChangeReport } from "@/lib/api/monitoring";
import { alertsApi } from "@/lib/api/alerts";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { LoadingState, ErrorState, EmptyState } from "@/components/ui/api-states";
import {
  Bell,
  BellRing,
  AlertTriangle,
  CheckCheck,
  Settings,
  Clock,
  Filter,
  Activity,
  Play,
  Pause,
  RefreshCw,
  ChevronDown,
  ChevronUp,
  Eye,
} from "lucide-react";
import { cn } from "@/lib/utils";

interface Alert {
  id: string;
  title: string;
  description?: string;
  type: string;
  severity: "critical" | "warning" | "info";
  is_read: boolean;
  created_at: string;
  brand_id?: string;
}

interface AlertsResponse {
  items: Alert[];
  total: number;
}

interface UnreadCountResponse {
  unread_count: number;
}

interface BrandsResponse {
  items: { id: string; name: string }[];
}

function formatTimeAgo(dateString: string): string {
  const date = new Date(dateString);
  const now = new Date();
  const diffMs = now.getTime() - date.getTime();
  const diffMins = Math.floor(diffMs / 60000);
  const diffHours = Math.floor(diffMs / 3600000);
  const diffDays = Math.floor(diffMs / 86400000);

  if (diffMins < 1) return "刚刚";
  if (diffMins < 60) return `${diffMins}分钟前`;
  if (diffHours < 24) return `${diffHours}小时前`;
  if (diffDays < 7) return `${diffDays}天前`;
  return date.toLocaleDateString("zh-CN");
}

function ChangeTypeBadge({ changeType }: { changeType: string | null }) {
  if (!changeType) return null;
  const config: Record<string, { variant: "default" | "destructive" | "secondary" | "outline"; label: string }> = {
    positive: { variant: "default", label: "正向" },
    negative: { variant: "destructive", label: "负向" },
    neutral: { variant: "secondary", label: "中性" },
  };
  const c = config[changeType] || { variant: "outline" as const, label: changeType };
  return <Badge variant={c.variant} className="text-xs">{c.label}</Badge>;
}

function RecordCard({
  record,
  token,
  onRefresh,
}: {
  record: MonitoringRecord;
  token: string;
  onRefresh: () => void;
}) {
  const [expanded, setExpanded] = React.useState(false);
  const [report, setReport] = React.useState<MonitoringChangeReport | null>(null);
  const [reportLoading, setReportLoading] = React.useState(false);
  const [reportError, setReportError] = React.useState<string | null>(null);
  const [checking, setChecking] = React.useState(false);
  const [togglingStatus, setTogglingStatus] = React.useState(false);

  const handleExpand = async () => {
    if (expanded) {
      setExpanded(false);
      return;
    }
    setExpanded(true);
    if (!report) {
      setReportLoading(true);
      setReportError(null);
      try {
        const result = await monitoringApi.getReport(token, record.id);
        setReport(result);
      } catch (err) {
        setReportError(err instanceof Error ? err.message : "加载报告失败");
      } finally {
        setReportLoading(false);
      }
    }
  };

  const handleTriggerCheck = async () => {
    setChecking(true);
    try {
      await monitoringApi.triggerCheck(token, record.id);
      onRefresh();
    } catch {
    } finally {
      setChecking(false);
    }
  };

  const handleToggleStatus = async () => {
    setTogglingStatus(true);
    try {
      const newStatus = record.status === "active" ? "paused" : "active";
      await monitoringApi.updateStatus(token, record.id, { status: newStatus });
      onRefresh();
    } catch {
    } finally {
      setTogglingStatus(false);
    }
  };

  return (
    <Card>
      <CardContent className="p-0">
        <div
          className="flex items-center gap-4 px-6 py-4 cursor-pointer hover:bg-muted/30 transition-colors"
          onClick={handleExpand}
        >
          <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-blue-50 text-blue-600 shrink-0">
            <Activity className="h-5 w-5" />
          </div>

          <div className="flex-1 min-w-0 space-y-1">
            <div className="flex items-center gap-2">
              <p className="text-sm font-semibold text-foreground truncate">
                {record.platform || "全平台"}
              </p>
              <ChangeTypeBadge changeType={record.change_type} />
              {record.status === "paused" && (
                <Badge variant="outline" className="text-xs">已暂停</Badge>
              )}
            </div>
            <div className="flex items-center gap-3 text-xs text-muted-foreground">
              <span className="flex items-center gap-1">
                <Clock className="h-3 w-3" />
                {record.last_checked_at ? formatTimeAgo(record.last_checked_at) : "未检测"}
              </span>
              <span>关键词: {record.query_keywords}</span>
            </div>
          </div>

          <div className="flex items-center gap-2 shrink-0">
            <Button
              variant="ghost"
              size="sm"
              className="h-8 px-2 text-xs"
              onClick={(e) => { e.stopPropagation(); handleTriggerCheck(); }}
              disabled={checking}
            >
              <RefreshCw className={cn("mr-1 h-3.5 w-3.5", checking && "animate-spin")} />
              立即检测
            </Button>
            <Button
              variant="ghost"
              size="sm"
              className="h-8 px-2 text-xs"
              onClick={(e) => { e.stopPropagation(); handleToggleStatus(); }}
              disabled={togglingStatus}
            >
              {record.status === "active" ? (
                <><Pause className="mr-1 h-3.5 w-3.5" />暂停</>
              ) : (
                <><Play className="mr-1 h-3.5 w-3.5" />启用</>
              )}
            </Button>
            {expanded ? (
              <ChevronUp className="h-4 w-4 text-muted-foreground" />
            ) : (
              <ChevronDown className="h-4 w-4 text-muted-foreground" />
            )}
          </div>
        </div>

        {expanded && (
          <div className="border-t px-6 py-4 space-y-4">
            {reportLoading && <LoadingState rows={2} rowHeight="h-16" />}
            {reportError && <ErrorState error={reportError} onRetry={handleExpand} />}
            {report && !reportLoading && !reportError && (
              <>
                <div className="grid gap-4 sm:grid-cols-2">
                  <div className="space-y-2">
                    <p className="text-xs font-medium text-muted-foreground">基线指标</p>
                    <div className="rounded-lg border p-3 space-y-1 text-sm">
                      <div className="flex justify-between">
                        <span className="text-muted-foreground">引用次数</span>
                        <span className="font-medium">{String(report.baseline.citation_count ?? "—")}</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-muted-foreground">情感分数</span>
                        <span className="font-medium">{report.baseline.sentiment != null ? String(report.baseline.sentiment) : "—"}</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-muted-foreground">排名</span>
                        <span className="font-medium">{report.baseline.rank != null ? String(report.baseline.rank) : "—"}</span>
                      </div>
                    </div>
                  </div>
                  <div className="space-y-2">
                    <p className="text-xs font-medium text-muted-foreground">当前指标</p>
                    <div className="rounded-lg border p-3 space-y-1 text-sm">
                      <div className="flex justify-between">
                        <span className="text-muted-foreground">引用次数</span>
                        <span className="font-medium">{String(report.current.citation_count ?? "—")}</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-muted-foreground">情感分数</span>
                        <span className="font-medium">{report.current.sentiment != null ? String(report.current.sentiment) : "—"}</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-muted-foreground">排名</span>
                        <span className="font-medium">{report.current.rank != null ? String(report.current.rank) : "—"}</span>
                      </div>
                    </div>
                  </div>
                </div>
                {report.recommendations && report.recommendations.length > 0 && (
                  <div className="space-y-2">
                    <p className="text-xs font-medium text-muted-foreground">优化建议</p>
                    <ul className="space-y-1">
                      {report.recommendations.map((rec, i) => (
                        <li key={i} className="flex items-start gap-2 text-sm">
                          <span className="mt-1.5 h-1.5 w-1.5 rounded-full bg-blue-500 shrink-0" />
                          <span>{rec}</span>
                        </li>
                      ))}
                    </ul>
                  </div>
                )}
              </>
            )}
          </div>
        )}
      </CardContent>
    </Card>
  );
}

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

  const { data: brandsData } = useApi<BrandsResponse>("/api/v1/brands/?limit=1");
  const brandId = brandsData?.items?.[0]?.id ?? null;

  const {
    data: recordsData,
    isLoading,
    error,
    refresh,
  } = useApi<{ records: MonitoringRecord[]; total: number }>(
    token && brandId ? `/api/v1/monitoring/brand/${brandId}` : null
  );

  const records = recordsData?.records ?? [];

  if (isLoading) {
    return <LoadingState rows={4} rowHeight="h-24" />;
  }

  if (error) {
    return <ErrorState error={error} onRetry={refresh} />;
  }

  if (records.length === 0) {
    return (
      <EmptyState
        icon={<Activity className="h-6 w-6 text-muted-foreground" />}
        message="暂无监测记录"
        description="创建监测任务后将在此显示监测结果"
      />
    );
  }

  return (
    <div className="space-y-4">
      {records.map((record) => (
        <RecordCard
          key={record.id}
          record={record}
          token={token}
          onRefresh={refresh}
        />
      ))}
    </div>
  );
}

interface StatCardProps {
  title: string;
  value: number | string;
  icon: React.ReactNode;
  trend?: string;
  color: "emerald" | "amber" | "red" | "blue";
}

function StatCard({ title, value, icon, trend, color }: StatCardProps) {
  const colorMap = {
    emerald: { bg: "bg-emerald-50", icon: "text-emerald-600", border: "border-emerald-100" },
    amber: { bg: "bg-amber-50", icon: "text-amber-600", border: "border-amber-100" },
    red: { bg: "bg-red-50", icon: "text-red-600", border: "border-red-100" },
    blue: { bg: "bg-blue-50", icon: "text-blue-600", border: "border-blue-100" },
  };
  const colors = colorMap[color];

  return (
    <Card className={cn("border", colors.border)}>
      <CardContent className="p-6">
        <div className="flex items-center justify-between">
          <div className="space-y-1">
            <p className="text-sm font-medium text-muted-foreground">{title}</p>
            <p className="text-2xl font-bold tracking-tight">{value}</p>
            {trend && <p className="text-xs text-muted-foreground">{trend}</p>}
          </div>
          <div className={cn("flex h-12 w-12 items-center justify-center rounded-lg", colors.bg)}>
            <div className={colors.icon}>{icon}</div>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}

interface AlertRowProps {
  alert: Alert;
  onMarkRead: (id: string) => void;
  isMutating: boolean;
}

function AlertRow({ alert, onMarkRead, isMutating }: AlertRowProps) {
  const severityConfig = {
    critical: { badge: "destructive", label: "严重", icon: <AlertTriangle className="h-4 w-4" /> },
    warning: { badge: "default", label: "警告", icon: <BellRing className="h-4 w-4" /> },
    info: { badge: "secondary", label: "信息", icon: <Bell className="h-4 w-4" /> },
  };

  const typeMap: Record<string, string> = {
    citation_drop: "引用下降",
    ranking_drop: "排名下降",
    new_competitor: "新竞争对手",
    content_update: "内容更新",
    system: "系统通知",
  };

  const config = severityConfig[alert.severity];
  const timeAgo = formatTimeAgo(alert.created_at);

  return (
    <div
      className={cn(
        "group flex items-start gap-4 px-6 py-4 transition-colors hover:bg-muted/30",
        !alert.is_read && "bg-muted/20"
      )}
    >
      <div className="mt-0.5 shrink-0">
        <div
          className={cn(
            "flex h-9 w-9 items-center justify-center rounded-lg",
            alert.severity === "critical" && "bg-red-50 text-red-600",
            alert.severity === "warning" && "bg-amber-50 text-amber-600",
            alert.severity === "info" && "bg-blue-50 text-blue-600"
          )}
        >
          {config.icon}
        </div>
      </div>

      <div className="min-w-0 flex-1 space-y-1">
        <div className="flex items-start justify-between gap-2">
          <div className="flex items-center gap-2">
            <p className="text-sm font-semibold text-foreground leading-snug">
              {alert.title}
            </p>
            {!alert.is_read && (
              <span className="flex h-2 w-2 rounded-full bg-red-500" />
            )}
          </div>
          <span className="shrink-0 text-xs text-muted-foreground">{timeAgo}</span>
        </div>

        {alert.description && (
          <p className="text-xs text-muted-foreground leading-snug">{alert.description}</p>
        )}

        <div className="flex items-center gap-2 pt-1">
          <Badge variant={config.badge as "destructive" | "default" | "secondary"} className="text-xs">{config.label}</Badge>
          <Badge variant="outline" className="text-xs">{typeMap[alert.type] || alert.type}</Badge>
        </div>

        <div className="flex items-center gap-2 pt-2">
          {!alert.is_read && (
            <Button
              variant="ghost"
              size="sm"
              className="h-7 px-2 text-xs"
              onClick={() => onMarkRead(alert.id)}
              disabled={isMutating}
            >
              <CheckCheck className="mr-1 h-3.5 w-3.5" />
              标记已读
            </Button>
          )}
        </div>
      </div>
    </div>
  );
}

function AlertsTab() {
  const [filterType, setFilterType] = React.useState<string>("all");
  const [filterSeverity, setFilterSeverity] = React.useState<string>("all");
  const [filterRead, setFilterRead] = React.useState<string>("all");

  const {
    data: alertsData,
    isLoading: alertsLoading,
    error: alertsError,
    refresh: refreshAlerts,
  } = useApi<AlertsResponse>("/api/v1/alerts?limit=50");

  const {
    data: unreadData,
    isLoading: unreadLoading,
    refresh: refreshUnread,
  } = useApi<UnreadCountResponse>("/api/v1/alerts/unread-count");

  const [mutatingId, setMutatingId] = React.useState<string | null>(null);
  const [mutatingAll, setMutatingAll] = React.useState(false);

  const handleMarkRead = async (alertId: string) => {
    try {
      setMutatingId(alertId);
      await alertsApi.markRead(alertId);
      refreshAlerts();
      refreshUnread();
    } finally {
      setMutatingId(null);
    }
  };

  const handleMarkAllRead = async () => {
    try {
      setMutatingAll(true);
      await alertsApi.markAllRead();
      refreshAlerts();
      refreshUnread();
    } finally {
      setMutatingAll(false);
    }
  };

  const alerts = alertsData?.items ?? [];
  const unreadCount = unreadData?.unread_count ?? 0;

  const filteredAlerts = alerts.filter((alert) => {
    if (filterType !== "all" && alert.type !== filterType) return false;
    if (filterSeverity !== "all" && alert.severity !== filterSeverity) return false;
    if (filterRead === "unread" && alert.is_read) return false;
    if (filterRead === "read" && !alert.is_read) return false;
    return true;
  });

  const criticalCount = alerts.filter((a) => a.severity === "critical").length;
  const todayCount = alerts.filter((a) => {
    const date = new Date(a.created_at);
    const today = new Date();
    return date.toDateString() === today.toDateString();
  }).length;
  const processedCount = alerts.filter((a) => a.is_read).length;
  const uniqueTypes = Array.from(new Set(alerts.map((a) => a.type)));

  if (alertsLoading || unreadLoading) {
    return <LoadingState rows={6} rowHeight="h-20" />;
  }

  if (alertsError) {
    return <ErrorState error={alertsError} onRetry={refreshAlerts} />;
  }

  return (
    <div className="space-y-6">
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
        <StatCard title="未读告警" value={unreadCount} icon={<Bell className="h-6 w-6" />} trend="需要处理" color="blue" />
        <StatCard title="严重告警" value={criticalCount} icon={<AlertTriangle className="h-6 w-6" />} trend="高优先级" color="red" />
        <StatCard title="今日新增" value={todayCount} icon={<Clock className="h-6 w-6" />} trend="今天" color="amber" />
        <StatCard title="已处理" value={processedCount} icon={<CheckCheck className="h-6 w-6" />} trend="已读" color="emerald" />
      </div>

      <Card>
        <CardHeader className="pb-3">
          <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
            <CardTitle className="flex items-center gap-2">
              <BellRing className="h-5 w-5" />
              告警列表
              {alerts.length > 0 && (
                <Badge variant="secondary" className="ml-2">{alerts.length}</Badge>
              )}
            </CardTitle>
            {unreadCount > 0 && (
              <Button variant="outline" size="sm" onClick={handleMarkAllRead} disabled={mutatingAll}>
                <CheckCheck className="mr-1 h-4 w-4" />
                全部标记已读
              </Button>
            )}
          </div>

          <div className="flex flex-wrap items-center gap-2 pt-2">
            <Filter className="h-4 w-4 text-muted-foreground" />
            <Select value={filterRead} onValueChange={setFilterRead}>
              <SelectTrigger className="h-8 w-[120px]">
                <SelectValue placeholder="已读状态" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">全部状态</SelectItem>
                <SelectItem value="unread">未读</SelectItem>
                <SelectItem value="read">已读</SelectItem>
              </SelectContent>
            </Select>

            <Select value={filterSeverity} onValueChange={setFilterSeverity}>
              <SelectTrigger className="h-8 w-[120px]">
                <SelectValue placeholder="严重程度" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">全部级别</SelectItem>
                <SelectItem value="critical">严重</SelectItem>
                <SelectItem value="warning">警告</SelectItem>
                <SelectItem value="info">信息</SelectItem>
              </SelectContent>
            </Select>

            {uniqueTypes.length > 0 && (
              <Select value={filterType} onValueChange={setFilterType}>
                <SelectTrigger className="h-8 w-[140px]">
                  <SelectValue placeholder="告警类型" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">全部类型</SelectItem>
                  {uniqueTypes.map((type) => (
                    <SelectItem key={type} value={type}>
                      {{
                        citation_drop: "引用下降",
                        ranking_drop: "排名下降",
                        new_competitor: "新竞争对手",
                        content_update: "内容更新",
                        system: "系统通知",
                      }[type] || type}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            )}
          </div>
        </CardHeader>

        <CardContent className="p-0">
          {filteredAlerts.length === 0 ? (
            <EmptyState
              icon={<Bell className="h-6 w-6 text-muted-foreground" />}
              message="暂无告警"
              description="当前没有符合条件的告警记录"
            />
          ) : (
            <div className="divide-y">
              {filteredAlerts.map((alert) => (
                <AlertRow
                  key={alert.id}
                  alert={alert}
                  onMarkRead={handleMarkRead}
                  isMutating={mutatingId === alert.id}
                />
              ))}
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  );
}

export default function MonitoringPage() {
  const router = useRouter();

  return (
    <div className="space-y-6">
      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
        <div>
          <h1 className="text-2xl font-bold tracking-tight">监测优化</h1>
          <p className="text-muted-foreground">
            实时监控品牌AI可见性，及时响应告警通知
          </p>
        </div>
        <Button
          variant="outline"
          onClick={() => router.push("/dashboard/monitoring/settings")}
        >
          <Settings className="mr-2 h-4 w-4" />
          告警配置
        </Button>
      </div>

      <Tabs defaultValue="records">
        <TabsList>
          <TabsTrigger value="records">
            <Eye className="mr-1.5 h-4 w-4" />
            监测记录
          </TabsTrigger>
          <TabsTrigger value="alerts">
            <Bell className="mr-1.5 h-4 w-4" />
            告警通知
          </TabsTrigger>
        </TabsList>

        <TabsContent value="records">
          <MonitoringRecordsTab />
        </TabsContent>

        <TabsContent value="alerts">
          <AlertsTab />
        </TabsContent>
      </Tabs>
    </div>
  );
}