/**
 * Blog listing page.
 *
 * ✅ YOUR CODE - Safe to modify, will not be overwritten.
 * This file was generated once by Prism and is yours to customize.
 */

import { useState } from 'react';
import type { JSX } from 'react';
import { Link } from 'react-router-dom';
{% if dark_mode %}import { ThemeToggle } from '../ui/ThemeToggle';
{% endif %}
const APP_NAME = "{{ project_title }}";

interface BlogPost {
  id: string;
  title: string;
  excerpt: string;
  author: string;
  date: string;
  readTime: string;
  tags: string[];
  slug: string;
}

const SAMPLE_POSTS: BlogPost[] = [
  {
    id: '1',
    title: 'Getting Started with ' + APP_NAME,
    excerpt: 'Learn how to set up and configure your workspace for maximum productivity.',
    author: 'Team',
    date: new Date().toISOString().split('T')[0],
    readTime: '5 min read',
    tags: ['guide', 'getting-started'],
    slug: 'getting-started',
  },
];

export default function BlogPage(): JSX.Element {
  const [searchQuery, setSearchQuery] = useState('');

  const filteredPosts = SAMPLE_POSTS.filter(
    (post) =>
      post.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
      post.excerpt.toLowerCase().includes(searchQuery.toLowerCase()) ||
      post.tags.some((tag) => tag.toLowerCase().includes(searchQuery.toLowerCase())),
  );

  return (
    <div className="min-h-screen bg-surface text-foreground">
      {/* Header */}
      <header className="sticky top-0 z-50 bg-surface-elevated/80 backdrop-blur border-b border-border">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between h-16">
          <Link to="/" className="flex items-center gap-2">
            <div className="w-8 h-8 bg-primary rounded-md flex items-center justify-center">
              <span className="text-white font-bold text-sm">{APP_NAME.charAt(0).toUpperCase()}</span>
            </div>
            <span className="font-semibold text-foreground">{APP_NAME}</span>
          </Link>
          <div className="flex items-center gap-3">
{% if dark_mode %}            <ThemeToggle size="sm" />
{% endif %}            <Link to="/" className="btn-ghost text-sm px-4 py-2">Home</Link>
          </div>
        </div>
      </header>

      {/* Hero */}
      <section className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 pt-16 pb-8 text-center">
        <h1 className="text-4xl font-bold tracking-tight text-foreground">Blog</h1>
        <p className="mt-4 text-lg text-muted max-w-2xl mx-auto">
          News, updates, and insights from the {APP_NAME} team.
        </p>
        <div className="mt-8 max-w-md mx-auto">
          <input
            type="text"
            placeholder="Search posts..."
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            className="w-full px-4 py-2 border border-border rounded-md bg-surface text-foreground placeholder:text-muted focus:outline-none focus:ring-2 focus:ring-primary/50"
          />
        </div>
      </section>

      {/* Posts */}
      <section className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 pb-20">
        {filteredPosts.length === 0 ? (
          <p className="text-center text-muted py-12">No posts found.</p>
        ) : (
          <div className="space-y-8">
            {filteredPosts.map((post) => (
              <article
                key={post.id}
                className="card p-6 rounded-lg border border-border hover:border-primary/30 transition-colors"
              >
                <div className="flex flex-wrap gap-2 mb-3">
                  {post.tags.map((tag) => (
                    <span
                      key={tag}
                      className="text-xs font-medium px-2 py-1 bg-primary/10 text-primary rounded-full"
                    >
                      {tag}
                    </span>
                  ))}
                </div>
                <h2 className="text-xl font-semibold text-foreground hover:text-primary transition-colors">
                  <Link to={`/blog/${post.slug}`}>{post.title}</Link>
                </h2>
                <p className="mt-2 text-muted">{post.excerpt}</p>
                <div className="mt-4 flex items-center gap-4 text-sm text-muted">
                  <span>{post.author}</span>
                  <span>&middot;</span>
                  <span>{post.date}</span>
                  <span>&middot;</span>
                  <span>{post.readTime}</span>
                </div>
              </article>
            ))}
          </div>
        )}
      </section>

      {/* Footer */}
      <footer className="border-t border-border py-8">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col sm:flex-row items-center justify-between gap-4">
          <div className="flex items-center gap-2">
            <div className="w-6 h-6 bg-primary rounded-md flex items-center justify-center">
              <span className="text-white font-bold text-xs">{APP_NAME.charAt(0).toUpperCase()}</span>
            </div>
            <span className="text-sm font-medium text-foreground">{APP_NAME}</span>
          </div>
          <p className="text-xs text-muted">&copy; {new Date().getFullYear()} {APP_NAME}. All rights reserved.</p>
        </div>
      </footer>
    </div>
  );
}
