'use client'

import { useMemo } from 'react'
import { BlogPost, CATEGORY_LABELS, BlogCategory } from '@/types/blog'
import { ScrollEffects } from '@/components/ScrollEffects'
import { FloatingElements } from '@/components/FloatingElements'
import { ClientOnly } from '@/components/ClientOnly'
import { BlogPostCard } from '@/components/BlogPost'

type HomePageClientProps = {
  posts: BlogPost[]
  selectedCategory?: string
}

export function HomePageClient({ posts, selectedCategory }: HomePageClientProps) {
  const { editorsPicks, regularPosts, latestPostId } = useMemo(() => {
    if (!posts.length) {
      return { editorsPicks: [], regularPosts: [], latestPostId: null }
    }

    const editorsPicks = posts.filter(post => post.isEditorsPick)
    const regularPosts = posts.filter(post => !post.isEditorsPick)

    const latestPostId = posts.reduce((latestId, current) => {
      if (!latestId) {
        return current.id
      }
      const latest = posts.find(post => post.id === latestId)
      if (!latest) {
        return current.id
      }
      return new Date(current.createdAt) > new Date(latest.createdAt) ? current.id : latestId
    }, posts[0].id)

    return { editorsPicks, regularPosts, latestPostId }
  }, [posts])

  return (
    <div style={{ minHeight: '100vh', backgroundColor: '#F7F1E1' }}>
      <ClientOnly>
        <ScrollEffects />
      </ClientOnly>

      <ClientOnly>
        <FloatingElements />
      </ClientOnly>

      <header className="vintage-header">
        <div className="container">
          <div className="masthead">
            <h1>The Curated Finds</h1>
            <div className="subtitle">BLOG</div>
            <div className="newspaper-rule"></div>
            <p className="tagline">
              Handpicked Treasures from the eBay Universe - Est. 2024
            </p>
            <div style={{ marginTop: '24px' }}>
              <div
                style={{
                  display: 'flex',
                  justifyContent: 'center',
                  gap: '24px',
                  flexWrap: 'wrap'
                }}
              >
                <a
                  href="/"
                  style={{
                    fontFamily: 'Space Mono, monospace',
                    fontSize: '12px',
                    letterSpacing: '0.1em',
                    textTransform: 'uppercase',
                    color: !selectedCategory ? '#1E1A17' : '#8B7D6B',
                    textDecoration: 'none',
                    fontWeight: !selectedCategory ? 'bold' : 'normal'
                  }}
                >
                  All
                </a>
                {(Object.keys(CATEGORY_LABELS) as BlogCategory[]).map((categoryKey) => (
                  <a
                    key={categoryKey}
                    href={`/?category=${categoryKey}`}
                    style={{
                      fontFamily: 'Space Mono, monospace',
                      fontSize: '12px',
                      letterSpacing: '0.1em',
                      textTransform: 'uppercase',
                      color: selectedCategory === categoryKey ? '#1E1A17' : '#8B7D6B',
                      textDecoration: 'none',
                      fontWeight: selectedCategory === categoryKey ? 'bold' : 'normal'
                    }}
                  >
                    {CATEGORY_LABELS[categoryKey]}
                  </a>
                ))}
              </div>
            </div>
          </div>
        </div>
      </header>

      <section className="hero-section">
        <div className="hero-content">
          <div className="editor-seal">
            Editor's
            <br />
            Choice
          </div>

          <div>
            <p className="drop-cap-text">
              Handpicked treasures from the eBay universe - updated weekly by experts who know quality when they see it. Every piece tells a story, every find has character, and every discovery connects you to the rich history of human craftsmanship.
            </p>
          </div>

          <div className="newspaper-rule"></div>

          <p className="hero-subheading">
            Curated Finds - Curated Collections - Expert Insights
          </p>

          <div className="hero-ctas">
            <a href="#blog-posts" className="ticket-button">
              Read Collector's Chronicles
            </a>
          </div>

          <div className="trust-badge">
            <div className="trust-badge-icon">OK</div>
            <p className="trust-badge-text">
              No spam, just curated finds - 100% authentic
            </p>
          </div>
        </div>
      </section>

      <section
        id="blog-posts"
        style={{
          padding: '64px 20px',
          backgroundColor: '#F7F1E1',
          borderTop: '2px solid #8B7D6B'
        }}
      >
        <div className="container">
          <div style={{ textAlign: 'center', marginBottom: '48px' }}>
            <h2
              style={{
                fontFamily: 'Abril Fatface, serif',
                fontSize: '48px',
                fontWeight: 900,
                color: '#1E1A17',
                marginBottom: '16px'
              }}
            >
              Collector's Chronicles
            </h2>
            <div className="newspaper-rule"></div>
            <p
              style={{
                fontFamily: 'Space Mono, monospace',
                fontSize: '14px',
                textTransform: 'uppercase',
                letterSpacing: '0.2em',
                color: '#8B7D6B'
              }}
            >
              Deep dives into remarkable finds
            </p>
          </div>

          <div
            style={{
              maxWidth: '1200px',
              margin: '0 auto'
            }}
          >
            {posts.length === 0 && (
              <p
                style={{
                  fontFamily: 'Spectral, serif',
                  fontSize: '18px',
                  textAlign: 'center',
                  color: '#8B7D6B'
                }}
              >
                No blog posts published yet. Visit the admin panel to add your first story.
              </p>
            )}

            {editorsPicks.length > 0 && (
              <div style={{ marginBottom: '48px' }}>
                {editorsPicks.map(post => (
                  <div key={post.id} style={{ maxWidth: '800px', margin: '0 auto' }}>
                    <BlogPostCard
                      post={post}
                      isLatest={latestPostId === post.id}
                    />
                  </div>
                ))}
              </div>
            )}

            {regularPosts.length > 0 && (
              <div
                style={{
                  display: 'grid',
                  gridTemplateColumns: 'repeat(auto-fit, minmax(350px, 1fr))',
                  gap: '32px',
                  maxWidth: '1200px',
                  margin: '0 auto'
                }}
              >
                {regularPosts.map(post => (
                  <BlogPostCard
                    key={post.id}
                    post={post}
                    isLatest={latestPostId === post.id}
                  />
                ))}
              </div>
            )}
          </div>
        </div>
      </section>

      <footer
        style={{
          backgroundColor: '#F7F1E1',
          borderTop: '2px solid #8B7D6B',
          padding: '32px 20px'
        }}
      >
        <div className="container">
          <div style={{ textAlign: 'center' }}>
            <h3
              style={{
                fontFamily: 'Abril Fatface, serif',
                fontSize: '24px',
                margin: 0,
                color: '#1E1A17'
              }}
            >
              The Curated Finds
            </h3>
            <p
              style={{
                fontFamily: 'Spectral, serif',
                fontSize: '14px',
                color: '#4A4A4A',
                marginTop: '8px'
              }}
            >
              Handpicked treasures. Honest descriptions. Careful packaging.
            </p>
            <p
              style={{
                fontFamily: 'Space Mono, monospace',
                fontSize: '11px',
                color: '#8B7D6B',
                marginTop: '12px',
                letterSpacing: '0.05em'
              }}
            >
              Handpicked Treasures from the eBay Universe - Est. 2024
            </p>
            <div
              className="newspaper-rule"
              style={{ margin: '16px auto', width: '120px' }}
            />
            <p
              style={{
                color: '#8B7D6B',
                fontFamily: 'Space Mono, monospace',
                fontSize: '12px'
              }}
            >
              (c) {new Date().getFullYear()} The Curated Finds - All rights reserved.
            </p>
            <button
              type="button"
              onClick={() => {
                const password = prompt('Admin-Passwort eingeben:')
                if (password === 'timo') {
                  window.location.href = '/admin'
                } else if (password !== null) {
                  alert('Falsches Passwort')
                }
              }}
              style={{
                marginTop: '16px',
                padding: '8px 16px',
                border: '1px solid #8B7D6B',
                backgroundColor: 'transparent',
                color: '#8B7D6B',
                fontFamily: 'Space Mono, monospace',
                fontSize: '10px',
                letterSpacing: '0.1em',
                textTransform: 'uppercase',
                cursor: 'pointer',
                opacity: 0.5
              }}
            >
              admin
            </button>
          </div>
        </div>
      </footer>

    </div>
  )
}


