"use client";

import { useState } from "react";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Button } from "@/components/ui/button";
import { PLATFORM_MAP } from "@/lib/platforms";
import { Check, X, Quote, Filter } from "lucide-react";
import { useApi } from "@/lib/hooks/use-api";
import { LoadingState } from "@/components/ui/api-states";

interface CitationItem {
  id: string;
  query_id: string;
  platform: string;
  cited: boolean;
  citation_position: number | null;
  citation_text: string | null;
  competitor_brands: string[];
  queried_at: string;
}

interface QueryOption {
  id: string;
  keyword: string;
}

export default function CitationsPage() {
  const [selectedQuery, setSelectedQuery] = useState<string>("all");
  const [selectedPlatform, setSelectedPlatform] = useState<string>("all");
  const [startDate, setStartDate] = useState<string>("");
  const [endDate, setEndDate] = useState<string>("");
  // 用于手动触发筛选
  const [filterKey, setFilterKey] = useState(0);

  // 构建引用记录查询 URL
  const citationsUrl = (() => {
    const params = new URLSearchParams();
    if (selectedQuery && selectedQuery !== "all") params.append("query_id", selectedQuery);
    if (selectedPlatform && selectedPlatform !== "all") params.append("platform", selectedPlatform);
    if (startDate) params.append("start_date", startDate);
    if (endDate) params.append("end_date", endDate);
    const qs = params.toString();
    // filterKey 作为虚拟参数，即使筛选条件不变也允许重新请求
    return `/api/v1/citations/${qs ? `?${qs}&_k=${filterKey}` : `?_k=${filterKey}`}`;
  })();

  const {
    data: citationsData,
    isLoading,
    error: citationsError,
    refresh: refreshCitations,
  } = useApi<{ items: CitationItem[] }>(
    citationsUrl,
    { dedupingInterval: 0 }
  );

  const {
    data: queriesData,
  } = useApi<{ items: QueryOption[] }>("/api/v1/queries/");

  const citations: CitationItem[] = citationsData?.items ?? [];
  const queries: QueryOption[] = queriesData?.items ?? [];

  function handleFilter() {
    setFilterKey((k) => k + 1);
  }

  function handleReset() {
    setSelectedQuery("all");
    setSelectedPlatform("all");
    setStartDate("");
    setEndDate("");
    setFilterKey((k) => k + 1);
  }

  if (isLoading && citations.length === 0) {
    return (
      <div className="space-y-4">
        <div>
          <h2 className="text-2xl font-bold tracking-tight">引用记录</h2>
          <p className="text-muted-foreground">查看各平台的引用检测结果</p>
        </div>
        <LoadingState rows={4} rowHeight="h-12" />
      </div>
    );
  }

  return (
    <div className="space-y-4">
      <div>
        <h2 className="text-2xl font-bold tracking-tight">引用记录</h2>
        <p className="text-muted-foreground">查看各平台的引用检测结果</p>
      </div>

      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2 text-base">
            <Filter className="h-4 w-4" />
            筛选条件
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-5">
            <div className="space-y-2">
              <Label htmlFor="query-filter">查询词</Label>
              <Select value={selectedQuery} onValueChange={setSelectedQuery}>
                <SelectTrigger id="query-filter">
                  <SelectValue placeholder="全部查询词" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">全部查询词</SelectItem>
                  {queries.map((q) => (
                    <SelectItem key={q.id} value={q.id}>
                      {q.keyword}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
            <div className="space-y-2">
              <Label htmlFor="platform-filter">平台</Label>
              <Select value={selectedPlatform} onValueChange={setSelectedPlatform}>
                <SelectTrigger id="platform-filter">
                  <SelectValue placeholder="全部平台" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">全部平台</SelectItem>
                  {Object.entries(PLATFORM_MAP).map(([key, label]) => (
                    <SelectItem key={key} value={key}>
                      {label}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
            <div className="space-y-2">
              <Label htmlFor="start-date">开始日期</Label>
              <Input
                id="start-date"
                type="date"
                value={startDate}
                onChange={(e) => setStartDate(e.target.value)}
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="end-date">结束日期</Label>
              <Input
                id="end-date"
                type="date"
                value={endDate}
                onChange={(e) => setEndDate(e.target.value)}
              />
            </div>
            <div className="flex items-end gap-2">
              <Button onClick={handleFilter} className="flex-1">
                筛选
              </Button>
              <Button variant="outline" onClick={handleReset} className="flex-1">
                重置
              </Button>
            </div>
          </div>
        </CardContent>
      </Card>

      {citationsError && (
        <div className="rounded-md bg-destructive/10 px-4 py-3 text-sm text-destructive">
          {citationsError.message}
        </div>
      )}

      <Card>
        <CardHeader>
          <CardTitle className="text-base">引用记录列表</CardTitle>
        </CardHeader>
        <CardContent>
          {citations.length === 0 ? (
            <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
              <Quote className="mb-4 h-12 w-12 opacity-20" />
              <p>暂无引用记录</p>
              <p className="text-sm">添加查询词并执行查询后将在此显示结果</p>
            </div>
          ) : (
            <div className="overflow-x-auto">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>平台</TableHead>
                    <TableHead>是否引用</TableHead>
                    <TableHead>引用位置</TableHead>
                    <TableHead>引用文本片段</TableHead>
                    <TableHead>竞争品牌</TableHead>
                    <TableHead>查询时间</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {citations.map((item) => (
                    <TableRow key={item.id}>
                      <TableCell className="font-medium">
                        {PLATFORM_MAP[item.platform] || item.platform}
                      </TableCell>
                      <TableCell>
                        {item.cited ? (
                          <div className="flex items-center gap-1 text-emerald-600">
                            <Check className="h-4 w-4" />
                            <span className="text-sm">已引用</span>
                          </div>
                        ) : (
                          <div className="flex items-center gap-1 text-red-500">
                            <X className="h-4 w-4" />
                            <span className="text-sm">未引用</span>
                          </div>
                        )}
                      </TableCell>
                      <TableCell>
                        {item.citation_position !== null
                          ? `第 ${item.citation_position} 位`
                          : "—"}
                      </TableCell>
                      <TableCell className="max-w-xs truncate">
                        {item.citation_text || "—"}
                      </TableCell>
                      <TableCell>
                        <div className="flex flex-wrap gap-1">
                          {item.competitor_brands?.length > 0 ? (
                            item.competitor_brands.map((brand) => (
                              <Badge key={brand} variant="secondary" className="text-xs">
                                {brand}
                              </Badge>
                            ))
                          ) : (
                            <span className="text-muted-foreground">—</span>
                          )}
                        </div>
                      </TableCell>
                      <TableCell className="text-muted-foreground">
                        {new Date(item.queried_at).toLocaleString("zh-CN")}
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  );
}