"use client";

import { useState, useEffect } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Skeleton } from "@/components/ui/skeleton";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "@/components/ui/tabs";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import {
  Send,
  CheckCircle,
  AlertCircle,
  XCircle,
  ChevronDown,
  ChevronUp,
  Eye,
  Clock,
  Tag,
  AlertTriangle,
  Check,
  RefreshCw,
  Globe,
  Settings,
} from "lucide-react";
import {
  distributionApi,
  analyticsApi,
  type PlatformInfo,
  type PublishRecordResponse,
} from "@/lib/api";

// ─── Types ───────────────────────────────────────────────────────────────────

type ValidationResult = "pass" | "warn" | "fail";

interface PlatformValidation {
  platform: string;
  result: ValidationResult;
  message: string;
}

// ─── Helpers ─────────────────────────────────────────────────────────────────

const PLATFORM_COLOR_MAP: Record<string, { label: string; color: string; bg: string }> = {
  wechat: { label: "微信", color: "text-green-700", bg: "bg-green-100" },
  zhihu: { label: "知乎", color: "text-blue-700", bg: "bg-blue-100" },
  xiaohongshu: { label: "小红书", color: "text-red-700", bg: "bg-red-100" },
  douyin: { label: "抖音", color: "text-slate-700", bg: "bg-slate-100" },
  baijiahao: { label: "百家号", color: "text-orange-700", bg: "bg-orange-100" },
  weibo: { label: "微博", color: "text-red-600", bg: "bg-red-100" },
  general: { label: "通用", color: "text-gray-700", bg: "bg-gray-100" },
};

function getPlatformConfig(platformId: string) {
  return PLATFORM_COLOR_MAP[platformId] ?? { label: platformId, color: "text-gray-700", bg: "bg-gray-100" };
}

function ValidationIcon({ result }: { result: ValidationResult }) {
  switch (result) {
    case "pass":
      return <CheckCircle className="h-4 w-4 text-emerald-500 shrink-0" />;
    case "warn":
      return <AlertCircle className="h-4 w-4 text-amber-500 shrink-0" />;
    case "fail":
      return <XCircle className="h-4 w-4 text-red-500 shrink-0" />;
  }
}

function PlatformAvatar({ platformId, name }: { platformId: string; name: string }) {
  const config = getPlatformConfig(platformId);
  return (
    <span
      className={`inline-flex h-7 w-7 items-center justify-center rounded-full text-xs font-bold ${config.bg} ${config.color}`}
      title={name || config.label}
    >
      {(name || config.label).charAt(0)}
    </span>
  );
}

function getPublishedStatusConfig(status: string) {
  switch (status) {
    case "published":
      return { label: "发布成功", className: "bg-emerald-50 text-emerald-600 border-emerald-200" };
    case "failed":
      return { label: "发布失败", className: "bg-red-50 text-red-600 border-red-200" };
    case "pending":
      return { label: "待发布", className: "bg-amber-50 text-amber-600 border-amber-200" };
    default:
      return { label: status, className: "bg-gray-50 text-gray-600 border-gray-200" };
  }
}

// ─── Sub-components ──────────────────────────────────────────────────────────

function PlatformCard({ platform }: { platform: PlatformInfo }) {
  const [expanded, setExpanded] = useState(false);
  const config = getPlatformConfig(platform.id);

  const validations: PlatformValidation[] = [
    {
      platform: platform.id,
      result: "pass",
      message: `最大标题长度：${platform.max_title_length} 字`,
    },
    {
      platform: platform.id,
      result: platform.max_content_length >= 1000 ? "pass" : "warn",
      message: `内容长度限制：${platform.min_content_length}–${platform.max_content_length} 字`,
    },
    {
      platform: platform.id,
      result: platform.format_features?.supports_markdown ? "pass" : "warn",
      message: platform.format_features?.supports_markdown
        ? "支持 Markdown 格式"
        : "不支持 Markdown，需转换格式",
    },
  ];

  return (
    <div className="bg-white rounded-xl border border-gray-200 p-5 hover:border-gray-300 transition-colors">
      <div className="p-5">
        {/* Title + Avatar */}
        <div className="flex items-start justify-between gap-3 mb-3">
          <div className="flex items-center gap-3">
            <PlatformAvatar platformId={platform.id} name={platform.name} />
            <div>
              <h3 className="text-base font-semibold text-gray-900">{platform.name}</h3>
              <p className="text-xs text-gray-500 mt-0.5">
                {platform.max_content_length.toLocaleString()} 字上限
              </p>
            </div>
          </div>
          <Badge variant="outline" className="text-xs font-medium bg-primary/10 text-primary border-primary/20">
            已配置
          </Badge>
        </div>

        {/* Best publish times */}
        {platform.best_publish_times.length > 0 && (
          <div className="flex items-center gap-1.5 text-xs text-gray-500 mb-3">
            <Clock className="h-3.5 w-3.5 text-primary" />
            <span>最佳发布时段：{platform.best_publish_times.slice(0, 3).join("、")}</span>
          </div>
        )}

        {/* SEO tips preview */}
        {platform.seo_tips.length > 0 && (
          <div className="text-xs text-gray-400 mb-3 line-clamp-1">
            💡 {platform.seo_tips[0]}
          </div>
        )}

        {/* Expandable rules */}
        <button
          onClick={() => setExpanded(!expanded)}
          className="flex items-center gap-1 text-xs text-primary hover:text-primary/80 transition-colors mb-2"
        >
          {expanded ? <ChevronUp className="h-3.5 w-3.5" /> : <ChevronDown className="h-3.5 w-3.5" />}
          平台规则详情
        </button>

        {expanded && (
          <div className="space-y-2 mb-4 pl-1">
            {validations.map((v, idx) => (
              <div key={idx} className="flex items-start gap-2 text-sm">
                <ValidationIcon result={v.result} />
                <span className="text-gray-500">{v.message}</span>
              </div>
            ))}
            {platform.rules.slice(0, 3).map((rule, idx) => (
              <div key={`rule-${idx}`} className="flex items-start gap-2 text-sm">
                <AlertTriangle className="h-4 w-4 text-amber-500 shrink-0" />
                <span className="text-gray-500">{rule}</span>
              </div>
            ))}
          </div>
        )}

        {/* Tags */}
        {platform.supported_media.length > 0 && (
          <div className="flex items-center gap-1 flex-wrap pt-2 border-t border-geo-border">
            <Tag className="h-3 w-3 text-gray-400" />
            {platform.supported_media.slice(0, 3).map((media) => (
              <Badge key={media} variant="outline" className="text-xs bg-gray-50 border-gray-200">
                {media}
              </Badge>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}

function EmptyPlatforms() {
  return (
    <div className="flex flex-col items-center justify-center rounded-xl border border-gray-200 bg-white py-16 text-center">
      <Globe className="h-12 w-12 text-gray-300 mb-3" />
      <h3 className="text-base font-semibold text-gray-900">暂无平台配置</h3>
      <p className="mt-2 text-sm text-gray-500 max-w-xs mx-auto">
        后端暂无平台规则数据，请检查后端服务状态
      </p>
    </div>
  );
}

function EmptyPublished() {
  return (
    <div className="flex flex-col items-center justify-center py-16 text-center">
      <Send className="h-10 w-10 text-gray-300 mb-3" />
      <p className="text-sm text-gray-500">暂无发布记录</p>
      <p className="text-xs text-gray-400 mt-1">在内容工坊生成内容并发布后，记录将在此显示</p>
    </div>
  );
}

// ─── Main Page ───────────────────────────────────────────────────────────────

export default function DistributionPage() {
  const [platforms, setPlatforms] = useState<PlatformInfo[]>([]);
  const [publishRecords, setPublishRecords] = useState<PublishRecordResponse[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  // Strategy dialog
  const [strategyOpen, setStrategyOpen] = useState(false);
  const [activePlatform, setActivePlatform] = useState<PlatformInfo | null>(null);

  useEffect(() => {
    async function fetchData() {
      try {
        setLoading(true);
        setError(null);
        const [platformsData, recordsData] = await Promise.all([
          distributionApi.getPlatforms(),
          // Use analytics publish endpoint to get publish records
          analyticsApi.getTopContent(undefined, { limit: 20 })
            .then((r) => r?.items ?? [])
            .catch(() => []),
        ]);
        setPlatforms(platformsData?.platforms ?? []);
        // Convert top content to publish-record-like shape for display
        setPublishRecords(
          recordsData.map((item) => ({
            id: item.publish_record_id,
            organization_id: "",
            content_title: item.content_title,
            content_id: null,
            platform: item.platform,
            published_url: item.published_url,
            status: "published",
            published_at: item.recorded_at,
            created_at: item.recorded_at ?? "",
          }))
        );
      } catch (err) {
        console.error("Distribution fetch error:", err);
        setError(err instanceof Error ? err.message : "数据加载失败");
      } finally {
        setLoading(false);
      }
    }
    fetchData();
  }, []);

  const handleViewStrategy = (platform: PlatformInfo) => {
    setActivePlatform(platform);
    setStrategyOpen(true);
  };

  if (loading) {
    return (
      <div className="space-y-6">
        <Skeleton className="h-8 w-48" />
        <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
          {Array.from({ length: 3 }).map((_, i) => (
            <Skeleton key={i} className="h-52 rounded-2xl" />
          ))}
        </div>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      {/* Top Area */}
      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between mb-8">
        <div>
          <h1 className="text-2xl font-bold text-gray-900">内容分发中心</h1>
          <p className="mt-1 text-sm text-gray-500">多平台智能分发与发布管理</p>
        </div>
      </div>

      {/* Error Banner */}
      {error && (
        <div className="flex items-center gap-3 rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-600">
          <AlertCircle className="h-4 w-4 shrink-0" />
          <span>{error}</span>
          <Button variant="ghost" size="sm" className="ml-auto h-7 text-xs" onClick={() => window.location.reload()}>
            <RefreshCw className="h-3.5 w-3.5 mr-1" />
            重试
          </Button>
        </div>
      )}

      {/* Tabs */}
      <Tabs defaultValue="platforms" className="space-y-6">
        <TabsList className="rounded-xl bg-white border border-gray-200 p-1">
          <TabsTrigger
            value="platforms"
            className="rounded-lg data-[state=active]:bg-primary data-[state=active]:text-primary-foreground text-sm px-4 py-1.5"
          >
            平台规则 ({platforms.length})
          </TabsTrigger>
          <TabsTrigger
            value="published"
            className="rounded-lg data-[state=active]:bg-primary data-[state=active]:text-primary-foreground text-sm px-4 py-1.5"
          >
            发布记录 ({publishRecords.length})
          </TabsTrigger>
        </TabsList>

        {/* Platforms Tab */}
        <TabsContent value="platforms" className="space-y-4">
          {platforms.length === 0 ? (
            <EmptyPlatforms />
          ) : (
            <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
              {platforms.map((platform) => (
                <div key={platform.id} className="space-y-2">
                  <PlatformCard platform={platform} />
                  <div className="flex gap-2">
                    <Button
                      variant="outline"
                      size="sm"
                      className="flex-1 rounded-xl text-xs h-8"
                      onClick={() => handleViewStrategy(platform)}
                    >
                      <Eye className="mr-1 h-3.5 w-3.5" />
                      最佳发布策略
                    </Button>
                    <Button
                      variant="outline"
                      size="sm"
                      className="rounded-xl text-xs h-8 px-3"
                    >
                      <Settings className="h-3.5 w-3.5" />
                    </Button>
                  </div>
                </div>
              ))}
            </div>
          )}
        </TabsContent>

        {/* Published Records Tab */}
        <TabsContent value="published">
          <Card className="rounded-xl border border-gray-200 bg-white">
            <CardContent className="p-0">
              {publishRecords.length === 0 ? (
                <EmptyPublished />
              ) : (
                <Table>
                  <TableHeader>
                    <TableRow className="hover:bg-transparent">
                      <TableHead className="text-xs font-semibold text-gray-500 uppercase tracking-wider">标题</TableHead>
                      <TableHead className="text-xs font-semibold text-gray-500 uppercase tracking-wider">平台</TableHead>
                      <TableHead className="text-xs font-semibold text-gray-500 uppercase tracking-wider">发布时间</TableHead>
                      <TableHead className="text-xs font-semibold text-gray-500 uppercase tracking-wider">状态</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {publishRecords.map((item) => {
                      const statusConfig = getPublishedStatusConfig(item.status);
                      const platformConfig = getPlatformConfig(item.platform);
                      const publishedAt = item.published_at
                        ? new Date(item.published_at).toLocaleString("zh-CN")
                        : "—";
                      return (
                        <TableRow key={item.id} className="hover:bg-gray-50">
                          <TableCell className="text-sm font-medium text-gray-900 max-w-[280px] truncate">
                            {item.content_title}
                          </TableCell>
                          <TableCell>
                            <span
                              className={`inline-flex h-6 px-2 items-center justify-center rounded-full text-xs font-bold ${platformConfig.bg} ${platformConfig.color}`}
                            >
                              {platformConfig.label}
                            </span>
                          </TableCell>
                          <TableCell className="text-sm text-gray-500">{publishedAt}</TableCell>
                          <TableCell>
                            <Badge variant="outline" className={`text-xs font-medium ${statusConfig.className}`}>
                              {statusConfig.label}
                            </Badge>
                          </TableCell>
                        </TableRow>
                      );
                    })}
                  </TableBody>
                </Table>
              )}
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>

      {/* Platform Strategy Dialog */}
      <Dialog open={strategyOpen} onOpenChange={setStrategyOpen}>
        <DialogContent className="max-w-lg rounded-2xl p-0 overflow-hidden gap-0">
          <DialogHeader className="p-6 pb-4">
            <DialogTitle className="text-lg font-semibold flex items-center gap-2">
              <Send className="h-5 w-5 text-primary" />
              {activePlatform?.name} 发布策略
            </DialogTitle>
            <DialogDescription>基于平台特性的最佳发布方案</DialogDescription>
          </DialogHeader>

          {activePlatform && (
            <div className="px-6 pb-2 space-y-5">
              {/* Best times */}
              {activePlatform.best_publish_times.length > 0 && (
                <div>
                  <h4 className="text-sm font-semibold text-gray-900 mb-2 flex items-center gap-1.5">
                    <Clock className="h-3.5 w-3.5" />
                    最佳发布时段
                  </h4>
                  <div className="flex flex-wrap gap-2">
                    {activePlatform.best_publish_times.map((time) => (
                      <Badge key={time} variant="outline" className="bg-primary/5 text-primary border-primary/20 text-xs">
                        {time}
                      </Badge>
                    ))}
                  </div>
                  {activePlatform.best_publish_days.length > 0 && (
                    <p className="text-xs text-geo-text-secondary mt-1">
                      推荐日期：{activePlatform.best_publish_days.join("、")}
                    </p>
                  )}
                </div>
              )}

              {/* SEO Tips */}
              {activePlatform.seo_tips.length > 0 && (
                <div>
                  <h4 className="text-sm font-semibold text-gray-900 mb-2 flex items-center gap-1.5">
                    <Tag className="h-3.5 w-3.5" />
                    SEO 优化建议
                  </h4>
                  <ul className="space-y-1.5">
                    {activePlatform.seo_tips.map((tip, idx) => (
                      <li key={idx} className="flex items-start gap-2 text-xs text-gray-500">
                        <span className="mt-0.5 h-1.5 w-1.5 rounded-full bg-primary shrink-0" />
                        {tip}
                      </li>
                    ))}
                  </ul>
                </div>
              )}

              {/* Rules */}
              {activePlatform.rules.length > 0 && (
                <div>
                  <h4 className="text-sm font-semibold text-gray-900 mb-2 flex items-center gap-1.5">
                    <AlertTriangle className="h-3.5 w-3.5" />
                    发布规则
                  </h4>
                  <ul className="space-y-1.5">
                    {activePlatform.rules.map((rule, idx) => (
                      <li key={idx} className="flex items-start gap-2 text-xs text-gray-500">
                        <span className="mt-0.5 h-1.5 w-1.5 rounded-full bg-amber-400 shrink-0" />
                        {rule}
                      </li>
                    ))}
                  </ul>
                </div>
              )}
            </div>
          )}

          <div className="p-6 pt-2">
            <Button
              onClick={() => setStrategyOpen(false)}
              className="w-full rounded-xl bg-primary hover:bg-primary/90 text-primary-foreground"
            >
              <Check className="mr-2 h-4 w-4" />
              知道了
            </Button>
          </div>
        </DialogContent>
      </Dialog>
    </div>
  );
}