'use client';

import { useEffect, useState } from 'react';
import Link from 'next/link';
import { Card } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Skeleton } from '@/components/ui/skeleton';
import { FileText, Eye } from 'lucide-react';
import { marked } from 'marked';
import { API_BASE } from '@/lib/config';

interface Content {
  id: number; title: string; summary: string | null; cover: string | null;
  contentType: string; tags: string | null; authorName: string | null;
  viewCount: number; publishedAt: string; createdAt: string;
  category?: { id?: number; name: string }; content?: string; isAiGenerated?: boolean;
}

function ContentSkeleton() {
  return (
    <Card className="overflow-hidden">
      <Skeleton className="h-44 w-full" />
      <div className="p-5 space-y-2">
        <Skeleton className="h-4 w-24" />
        <Skeleton className="h-5 w-3/4" />
        <Skeleton className="h-4 w-full" />
        <Skeleton className="h-4 w-32" />
      </div>
    </Card>
  );
}

export default function ContentsPage() {
  const [pathname, setPathname] = useState('');
  const [contents, setContents] = useState<Content[]>([]);
  const [loading, setLoading] = useState(true);
  const [detailContent, setDetailContent] = useState<Content | null>(null);
  const [detailLoading, setDetailLoading] = useState(false);
  const [renderedHtml, setRenderedHtml] = useState<string | null>(null);
  const [error, setError] = useState('');

  useEffect(() => {
    setPathname(window.location.pathname);
  }, []);

  // Detect if URL is a detail page like /contents/109
  const pathParts = pathname.split('/').filter(Boolean);
  const lastPart = pathParts[pathParts.length - 1];
  const isDetailView = /^\d+$/.test(lastPart ?? '');
  const contentId = isDetailView ? lastPart : '';

  // Fetch detail content
  useEffect(() => {
    if (!isDetailView || !contentId) {
      setDetailContent(null);
      setRenderedHtml(null);
      setDetailLoading(false);
      setError('');
      return;
    }
    setDetailLoading(true);
    setError('');
    fetch(`${API_BASE}/contents/${contentId}`)
      .then(r => {
        if (!r.ok) throw new Error('内容不存在');
        return r.json();
      })
      .then(data => {
        if (!data || !data.id) throw new Error('内容不存在');
        setDetailContent(data);
      })
      .catch(e => setError(e.message))
      .finally(() => setDetailLoading(false));
  }, [contentId]);

  // Render markdown
  useEffect(() => {
    if (!detailContent?.content) {
      setRenderedHtml(null);
      return;
    }
    const result = marked(detailContent.content, { breaks: true, gfm: true });
    if (typeof result === 'string') {
      setRenderedHtml(result);
    } else {
      result.then(html => setRenderedHtml(html)).catch(() => setRenderedHtml(null));
    }
  }, [detailContent?.content]);

  // Fetch list
  useEffect(() => {
    if (isDetailView) return;
    setLoading(true);
    fetch(`${API_BASE}/contents`)
      .then(r => r.json()).then(data => setContents(data.items || []))
      .catch(() => {}).finally(() => setLoading(false));
  }, [pathname]);

  // Show detail view
  if (isDetailView && contentId) {
    if (detailLoading) {
      return (
        <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
          <Skeleton className="h-8 w-48 mb-6" />
          <Skeleton className="h-4 w-32 mb-8" />
          <Skeleton className="h-64 w-full mb-4" />
          <Skeleton className="h-4 w-full mb-2" />
          <Skeleton className="h-4 w-3/4" />
        </div>
      );
    }
    if (error || !detailContent) {
      return (
        <div className="max-w-3xl mx-auto px-4 py-20 text-center">
          <div className="w-16 h-16 bg-red-100 rounded-2xl flex items-center justify-center mx-auto mb-4">
            <svg className="w-8 h-8 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z" />
            </svg>
          </div>
          <h1 className="text-xl font-bold text-foreground mb-2">{error || '内容不存在'}</h1>
          <Link href="/contents" className="text-brand-600 hover:underline text-sm">返回文章列表</Link>
        </div>
      );
    }
    return (
      <article className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <div className="mb-8">
          <div className="flex items-center gap-3 text-sm text-muted-foreground mb-3">
            {detailContent.category && (
              <span className="bg-brand-50 text-brand-600 px-2 py-0.5 rounded">{detailContent.category.name}</span>
            )}
            <span>{detailContent.contentType === 'tutorial' ? '教程' : detailContent.contentType === 'news' ? '资讯' : '文章'}</span>
            <span>{detailContent.publishedAt ? new Date(detailContent.publishedAt).toLocaleDateString() : new Date(detailContent.createdAt).toLocaleDateString()}</span>
            <span>{detailContent.viewCount} 次阅读</span>
            {detailContent.isAiGenerated && (
              <span className="text-xs text-yellow-600 bg-yellow-50 px-2 py-0.5 rounded">AI 生成</span>
            )}
          </div>
          <h1 className="text-2xl sm:text-3xl font-bold text-foreground leading-tight">{detailContent.title}</h1>
          {detailContent.authorName && (
            <p className="mt-2 text-sm text-muted-foreground">作者：{detailContent.authorName}</p>
          )}
          {detailContent.summary && (
            <p className="mt-4 text-muted-foreground leading-relaxed">{detailContent.summary}</p>
          )}
          {detailContent.tags && (
            <div className="flex gap-2 mt-4 flex-wrap">
              {detailContent.tags.split(',').map(tag => (
                <span key={tag} className="text-xs text-muted-foreground bg-muted px-2 py-0.5 rounded">{tag.trim()}</span>
              ))}
            </div>
          )}
        </div>
        {detailContent.cover && (
          <div className="mb-8 rounded-xl overflow-hidden bg-muted aspect-video flex items-center justify-center text-muted-foreground">
            {detailContent.cover.startsWith('http') ? (
              <img src={detailContent.cover} alt={detailContent.title} className="w-full h-full object-cover" />
            ) : (
              <div className="w-full h-full flex items-center justify-center bg-gradient-to-br from-brand-50 to-blue-50">
                <svg className="w-16 h-16 text-brand-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                </svg>
              </div>
            )}
          </div>
        )}
        {renderedHtml ? (
          <div className="article-body text-foreground leading-relaxed" dangerouslySetInnerHTML={{ __html: renderedHtml }} />
        ) : (
          <p className="text-muted-foreground italic py-8 text-center">加载中...</p>
        )}
        <div className="mt-12 pt-8 border-t border-border">
          <Link href="/contents" className="text-brand-600 hover:text-brand-700 text-sm font-medium">
            &larr; 返回文章列表
          </Link>
        </div>
      </article>
    );
  }

  // List view
  return (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
      <div className="mb-10">
        <h1 className="text-3xl font-bold text-foreground">内容中心</h1>
        <p className="mt-2 text-muted-foreground">AI 相关的教程、资讯和深度文章</p>
      </div>
      {loading ? (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {[1,2,3].map(i => <ContentSkeleton key={i} />)}
        </div>
      ) : contents.length === 0 ? (
        <div className="text-center py-20 text-muted-foreground">
          <FileText className="w-12 h-12 mx-auto mb-4 opacity-30" />
          <p>暂无内容</p>
        </div>
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {contents.map((item) => (
            <Link key={item.id} href={`/contents/${item.id}`} className="block group">
              <Card className="overflow-hidden hover:shadow-lg transition-all hover:-translate-y-0.5">
                <div className="h-44 bg-gradient-to-br from-brand-50 to-blue-50 dark:from-brand-950/30 dark:to-blue-950/20 flex items-center justify-center">
                  <FileText className="w-12 h-12 text-brand-300 dark:text-brand-600" />
                </div>
                <div className="p-5">
                  <div className="flex items-center gap-2 text-xs text-muted-foreground mb-2">
                    {item.category && <Badge variant="secondary">{item.category.name}</Badge>}
                    <span>{item.publishedAt ? new Date(item.publishedAt).toLocaleDateString() : ''}</span>
                  </div>
                  <h3 className="font-semibold group-hover:text-brand-600 transition-colors">{item.title}</h3>
                  {item.summary && <p className="text-sm text-muted-foreground mt-1 line-clamp-2">{item.summary}</p>}
                  <div className="flex items-center gap-3 mt-3 text-xs text-muted-foreground">
                    <span className="flex items-center gap-1"><Eye className="w-3.5 h-3.5" />{item.viewCount} 次阅读</span>
                    {item.authorName && <span>{item.authorName}</span>}
                  </div>
                </div>
              </Card>
            </Link>
          ))}
        </div>
      )}
    </div>
  );
}