"use client";

import { useState } from "react";
import Link from "next/link";
import { cn } from "@/shared/utils";

// Sample blog data
const categories = [
  { id: "all", label: "Latest", count: 5 },
  { id: "guides", label: "Guides", count: 2 },
  { id: "tech", label: "Tech Tips", count: 2 },
  { id: "news", label: "News", count: 1 },
];

const authors = {
  default: {
    name: "Author Name",
    role: "Assist Solutions",
    avatar: "/assets/images/avatar-placeholder.png",
  },
};

const PLACEHOLDER_EXCERPT =
  "Sample blog post content. This is a placeholder for future blog content that will be added to the website.";

const blogPosts = [
  {
    id: "1",
    slug: "blog-1",
    category: "guides",
    categoryLabel: "Guides",
    title: "Blog 1",
    excerpt: PLACEHOLDER_EXCERPT,
    image: "/assets/images/blog-placeholder-1.jpg",
    author: authors.default,
    date: "2025-01-10",
    featured: true,
  },
  {
    id: "2",
    slug: "blog-2",
    category: "tech",
    categoryLabel: "Tech Tips",
    title: "Blog 2",
    excerpt: PLACEHOLDER_EXCERPT,
    image: "/assets/images/blog-placeholder-2.jpg",
    author: authors.default,
    date: "2025-01-08",
    featured: true,
  },
  {
    id: "3",
    slug: "blog-3",
    category: "guides",
    categoryLabel: "Guides",
    title: "Blog 3",
    excerpt: PLACEHOLDER_EXCERPT,
    image: "/assets/images/blog-placeholder-3.jpg",
    author: authors.default,
    date: "2025-01-05",
  },
  {
    id: "4",
    slug: "blog-4",
    category: "tech",
    categoryLabel: "Tech Tips",
    title: "Blog 4",
    excerpt: PLACEHOLDER_EXCERPT,
    image: "/assets/images/blog-placeholder-4.jpg",
    author: authors.default,
    date: "2025-01-03",
  },
  {
    id: "5",
    slug: "blog-5",
    category: "news",
    categoryLabel: "News",
    title: "Blog 5",
    excerpt: PLACEHOLDER_EXCERPT,
    image: "/assets/images/blog-placeholder-5.jpg",
    author: authors.default,
    date: "2024-12-28",
  },
];

function BlogPostCard({ post }: { post: (typeof blogPosts)[number] }) {
  return (
    <article className="group">
      <Link href={`/blog/${post.slug}`} className="block">
        <div className="relative aspect-[16/10] rounded-2xl overflow-hidden bg-muted mb-4">
          <div className="absolute inset-0 bg-gradient-to-br from-primary/20 to-sky-200/30 flex items-center justify-center">
            <span className="text-4xl font-bold text-primary/30">{post.title.charAt(0)}</span>
          </div>
          <div className="absolute inset-0 bg-primary/5 opacity-0 group-hover:opacity-100 transition-opacity" />
        </div>
        <span className="text-xs font-semibold text-primary uppercase tracking-wider">
          {post.categoryLabel}
        </span>
        <h2 className="text-xl font-bold text-foreground mt-2 mb-3 group-hover:text-primary transition-colors leading-snug">
          {post.title}
        </h2>
        <p className="text-sm text-muted-foreground leading-relaxed line-clamp-3 mb-4">
          {post.excerpt}
        </p>
        <div className="flex items-center gap-3">
          <div className="w-10 h-10 rounded-full bg-muted flex items-center justify-center text-muted-foreground text-sm font-bold">
            {post.author.name.charAt(0)}
          </div>
          <div>
            <p className="text-sm font-semibold text-foreground">{post.author.name}</p>
            <p className="text-xs text-muted-foreground">{post.author.role}</p>
          </div>
        </div>
      </Link>
    </article>
  );
}

export default function BlogPage() {
  const [activeCategory, setActiveCategory] = useState("all");

  const filteredPosts =
    activeCategory === "all"
      ? blogPosts
      : blogPosts.filter(post => post.category === activeCategory);

  return (
    <div className="max-w-7xl mx-auto px-4 py-8 sm:py-12">
      <div className="grid grid-cols-1 lg:grid-cols-[240px_1fr] gap-10 lg:gap-14">
        {/* Sidebar */}
        <aside className="lg:sticky lg:top-24 lg:self-start">
          <div className="mb-8">
            <h1 className="text-3xl sm:text-4xl font-extrabold text-foreground leading-tight">
              Blog
            </h1>
            <p className="text-base italic text-primary mt-1">&amp; Updates</p>
            <p className="text-sm text-muted-foreground mt-4 leading-relaxed">
              Latest updates and information.
            </p>
          </div>

          <div className="border-t border-border/60 pt-6">
            <h2 className="text-sm font-bold text-foreground mb-4">Categories</h2>
            <nav className="space-y-1">
              {categories.map(category => (
                <button
                  key={category.id}
                  type="button"
                  onClick={() => setActiveCategory(category.id)}
                  className={cn(
                    "w-full flex items-center justify-between px-3 py-2 rounded-lg text-sm font-medium transition-colors",
                    activeCategory === category.id
                      ? "bg-primary/10 text-primary"
                      : "text-muted-foreground hover:text-foreground hover:bg-muted/50"
                  )}
                >
                  <span>{category.label}</span>
                  <span
                    className={cn(
                      "text-xs px-2 py-0.5 rounded-full",
                      activeCategory === category.id
                        ? "bg-primary/20 text-primary"
                        : "bg-muted text-muted-foreground"
                    )}
                  >
                    {category.count}
                  </span>
                </button>
              ))}
            </nav>
          </div>
        </aside>

        {/* Blog Grid */}
        <main>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            {filteredPosts.map(post => (
              <BlogPostCard key={post.id} post={post} />
            ))}
          </div>

          {/* Empty state */}
          {filteredPosts.length === 0 && (
            <div className="text-center py-16">
              <p className="text-muted-foreground">No posts found in this category.</p>
            </div>
          )}
        </main>
      </div>
    </div>
  );
}
