import { useSeoMeta } from '@unhead/react';
import { MainLayout } from '@/components/layout/MainLayout';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Skeleton } from '@/components/ui/skeleton';
import { RelaySelector } from '@/components/RelaySelector';
import { useBlogPosts, type BlogPost } from '@/hooks/useBlogPosts';
import { BookOpen, Calendar, Clock, ArrowRight, FileText } from 'lucide-react';
import { Link } from 'react-router-dom';
import { nip19 } from 'nostr-tools';

const Blog = () => {
  useSeoMeta({
    title: 'Blog - Patrick Ulrich',
    description: 'Read Patrick\'s thoughts on Bitcoin, Nostr, and digital sovereignty.',
  });

  const { data: blogPosts, isLoading, error } = useBlogPosts();

  const formatDate = (timestamp: number) => {
    return new Date(timestamp * 1000).toLocaleDateString('en-US', {
      year: 'numeric',
      month: 'long',
      day: 'numeric',
    });
  };

  const estimateReadTime = (content: string) => {
    // Rough estimate: 200 words per minute
    const words = content.trim().split(/\s+/).length;
    const minutes = Math.ceil(words / 200);
    return `${minutes} min read`;
  };

  const getExcerpt = (content: string, maxLength = 200) => {
    // Remove markdown formatting for a cleaner excerpt
    const cleaned = content
      .replace(/#{1,6}\s/g, '') // Remove headers
      .replace(/\*\*(.*?)\*\*/g, '$1') // Remove bold
      .replace(/\*(.*?)\*/g, '$1') // Remove italic
      .replace(/\[([^\]]+)\]\([^)]+\)/g, '$1') // Remove links, keep text
      .replace(/`([^`]+)`/g, '$1') // Remove inline code
      .trim();

    if (cleaned.length <= maxLength) return cleaned;

    // Find the last complete word within the limit
    const truncated = cleaned.substring(0, maxLength);
    const lastSpace = truncated.lastIndexOf(' ');
    return (lastSpace > 0 ? truncated.substring(0, lastSpace) : truncated) + '...';
  };

  const getArticleUrl = (post: BlogPost) => {
    const naddr = nip19.naddrEncode({
      identifier: post.dTag,
      pubkey: post.pubkey,
      kind: 30023,
    });
    return `/blog/${naddr}`;
  };

  // Get featured post (most recent or first with image)
  const featuredPost = blogPosts?.find(post => post.image) || blogPosts?.[0];
  const otherPosts = blogPosts?.filter(post => post.id !== featuredPost?.id) || [];

  return (
    <MainLayout>
      <div className="container mx-auto px-4 py-8">
        <div className="mb-8">
          <h1 className="text-4xl font-bold mb-4 flex items-center gap-3">
            <BookOpen className="h-10 w-10 text-primary" />
            Blog
          </h1>
          <p className="text-lg text-muted-foreground">
            Long-form thoughts on Bitcoin, Nostr, and digital sovereignty. All articles are published on Nostr using NIP-23.
          </p>
        </div>

        {isLoading ? (
          <div className="space-y-8">
            {/* Featured Post Skeleton */}
            <section className="mb-12">
              <Card className="overflow-hidden">
                <div className="grid md:grid-cols-2">
                  <Skeleton className="aspect-video md:aspect-auto" />
                  <CardContent className="p-6 md:p-8 space-y-4">
                    <Skeleton className="h-6 w-20" />
                    <Skeleton className="h-8 w-full" />
                    <Skeleton className="h-4 w-full" />
                    <div className="flex gap-4">
                      <Skeleton className="h-4 w-24" />
                      <Skeleton className="h-4 w-20" />
                    </div>
                    <Skeleton className="h-10 w-32" />
                  </CardContent>
                </div>
              </Card>
            </section>

            {/* Other Posts Skeleton */}
            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
              {Array.from({ length: 6 }).map((_, i) => (
                <Card key={i}>
                  <CardHeader>
                    <Skeleton className="h-6 w-3/4" />
                    <div className="flex gap-2">
                      <Skeleton className="h-4 w-16" />
                      <Skeleton className="h-4 w-20" />
                    </div>
                  </CardHeader>
                  <CardContent>
                    <Skeleton className="h-4 w-full mb-2" />
                    <Skeleton className="h-4 w-4/5 mb-4" />
                    <div className="flex gap-2">
                      <Skeleton className="h-6 w-16" />
                      <Skeleton className="h-6 w-20" />
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          </div>
        ) : error ? (
          <div className="text-center py-12">
            <FileText className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
            <p className="text-muted-foreground mb-4">Failed to load blog posts</p>
            <RelaySelector />
          </div>
        ) : !blogPosts?.length ? (
          <div className="col-span-full">
            <Card className="border-dashed">
              <CardContent className="py-12 px-8 text-center">
                <div className="max-w-sm mx-auto space-y-6">
                  <FileText className="h-12 w-12 text-muted-foreground mx-auto" />
                  <p className="text-muted-foreground">
                    No blog posts found. Try another relay?
                  </p>
                  <RelaySelector className="w-full" />
                </div>
              </CardContent>
            </Card>
          </div>
        ) : (
          <div className="space-y-12">
            {/* Featured Post */}
            {featuredPost && (
              <section className="mb-12">
                <h2 className="text-2xl font-bold mb-6">Featured Article</h2>
                <Card className="overflow-hidden hover:shadow-lg transition-shadow">
                  <div className="grid md:grid-cols-2">
                    {featuredPost.image && (
                      <div className="aspect-video md:aspect-auto">
                        <img
                          src={featuredPost.image}
                          alt={featuredPost.title || 'Featured article'}
                          className="w-full h-full object-cover"
                        />
                      </div>
                    )}
                    <CardContent className={`p-6 md:p-8 space-y-4 ${!featuredPost.image ? 'md:col-span-2' : ''}`}>
                      <Badge variant="secondary">Featured</Badge>
                      <CardTitle className="text-2xl md:text-3xl">
                        {featuredPost.title || `Untitled Post #${featuredPost.dTag}`}
                      </CardTitle>
                      <p className="text-muted-foreground text-lg">
                        {featuredPost.summary || getExcerpt(featuredPost.content, 300)}
                      </p>
                      <div className="flex items-center gap-4 text-sm text-muted-foreground">
                        <span className="flex items-center gap-1">
                          <Calendar className="h-4 w-4" />
                          {formatDate(featuredPost.publishedAt || featuredPost.createdAt)}
                        </span>
                        <span className="flex items-center gap-1">
                          <Clock className="h-4 w-4" />
                          {estimateReadTime(featuredPost.content)}
                        </span>
                      </div>
                      {featuredPost.hashtags.length > 0 && (
                        <div className="flex flex-wrap gap-2">
                          {featuredPost.hashtags.slice(0, 3).map((tag) => (
                            <Badge key={tag} variant="outline">
                              #{tag}
                            </Badge>
                          ))}
                        </div>
                      )}
                      <Button asChild className="gap-2">
                        <Link to={getArticleUrl(featuredPost)}>
                          Read Article
                          <ArrowRight className="h-4 w-4" />
                        </Link>
                      </Button>
                    </CardContent>
                  </div>
                </Card>
              </section>
            )}

            {/* Other Posts Grid */}
            {otherPosts.length > 0 && (
              <section>
                <h2 className="text-2xl font-bold mb-6">Recent Articles</h2>
                <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                  {otherPosts.map((post) => (
                    <Card key={post.id} className="hover:shadow-lg transition-shadow">
                      <CardHeader>
                        <CardTitle className="line-clamp-2">
                          {post.title || `Untitled Post #${post.dTag}`}
                        </CardTitle>
                        <div className="flex items-center gap-4 text-sm text-muted-foreground">
                          <span className="flex items-center gap-1">
                            <Calendar className="h-3 w-3" />
                            {formatDate(post.publishedAt || post.createdAt)}
                          </span>
                          <span className="flex items-center gap-1">
                            <Clock className="h-3 w-3" />
                            {estimateReadTime(post.content)}
                          </span>
                        </div>
                      </CardHeader>
                      <CardContent className="space-y-4">
                        <p className="text-muted-foreground line-clamp-3">
                          {post.summary || getExcerpt(post.content)}
                        </p>
                        {post.hashtags.length > 0 && (
                          <div className="flex flex-wrap gap-1">
                            {post.hashtags.slice(0, 2).map((tag) => (
                              <Badge key={tag} variant="outline" className="text-xs">
                                #{tag}
                              </Badge>
                            ))}
                          </div>
                        )}
                        <Button asChild variant="outline" size="sm" className="w-full gap-2">
                          <Link to={getArticleUrl(post)}>
                            Read More
                            <ArrowRight className="h-3 w-3" />
                          </Link>
                        </Button>
                      </CardContent>
                    </Card>
                  ))}
                </div>
              </section>
            )}
          </div>
        )}
      </div>
    </MainLayout>
  );
};

export default Blog;