import { Metadata } from 'next'
import Link from 'next/link'
import { getAllTags, getTagCloud } from '@/lib/tags'
import { TagCloud } from '@/components/blog/tag-cloud'
import { TagBadge } from '@/components/blog/tag-badge'

export const metadata: Metadata = {
  title: 'Tag-uri',
  description: 'Explorează articolele după tag-uri',
}

export default async function TagsPage() {
  const allTags = await getAllTags()
  const tagCloud = await getTagCloud()

  if (allTags.length === 0) {
    return (
      <div className="min-h-screen bg-slate-950 text-slate-100">
        <div className="max-w-6xl mx-auto px-6 py-12">
          <div className="border-4 border-slate-800 bg-slate-900 p-12 text-center">
            <h1 className="font-mono text-3xl font-bold uppercase mb-4 text-cyan-400">
              TAG DATABASE
            </h1>
            <p className="font-mono text-zinc-400 mb-8">&gt; NO TAGS AVAILABLE</p>
            <Link
              href="/blog"
              className="inline-block px-6 py-3 font-mono text-sm uppercase border-2 border-cyan-400 bg-cyan-900 text-cyan-100 hover:bg-cyan-800 transition"
            >
              &gt; VIEW ALL POSTS
            </Link>
          </div>
        </div>
      </div>
    )
  }

  const groupedTags = allTags.reduce(
    (acc, tag) => {
      const firstLetter = tag.name[0].toUpperCase()
      if (!acc[firstLetter]) {
        acc[firstLetter] = []
      }
      acc[firstLetter].push(tag)
      return acc
    },
    {} as Record<string, typeof allTags>
  )

  const sortedLetters = Object.keys(groupedTags).sort()

  return (
    <div className="min-h-screen bg-slate-950 text-slate-100">
      <div className="max-w-6xl mx-auto px-6 py-12">
        <div className="border-4 border-slate-800 bg-slate-900 p-8 mb-8">
          <p className="font-mono text-xs text-zinc-500 uppercase tracking-widest mb-2">
            DOCUMENT TYPE: TAG DATABASE
          </p>
          <h1 className="font-mono text-4xl font-bold uppercase text-cyan-400 mb-4">
            TAG REGISTRY
          </h1>
          <p className="font-mono text-lg text-zinc-400">&gt; TOTAL TAGS: {allTags.length}</p>
        </div>

        <section className="mb-12">
          <div className="border-2 border-slate-700 bg-slate-900 p-6 mb-2">
            <p className="font-mono text-xs text-zinc-500 uppercase tracking-widest mb-4">
              SECTION: TAG CLOUD VISUALIZATION
            </p>
          </div>
          <div className="border-2 border-slate-700 bg-zinc-950 p-8">
            <TagCloud tags={tagCloud} />
          </div>
        </section>

        <section className="mb-12">
          <div className="border-2 border-slate-700 bg-slate-900 p-6 mb-2">
            <p className="font-mono text-xs text-zinc-500 uppercase tracking-widest">
              SECTION: ALPHABETICAL INDEX
            </p>
          </div>
          <div className="space-y-8">
            {sortedLetters.map(letter => (
              <div key={letter}>
                <div className="border-2 border-cyan-700 bg-cyan-950 p-4 mb-4">
                  <h3 className="font-mono text-xl font-bold text-cyan-400 uppercase">
                    &gt; [{letter}]
                  </h3>
                </div>
                <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
                  {groupedTags[letter].map(tag => (
                    <Link
                      key={tag.slug}
                      href={`/tags/${tag.slug}`}
                      className="flex items-center justify-between p-4 border-2 border-slate-700 bg-slate-900 hover:border-cyan-400 hover:bg-slate-800 transition"
                    >
                      <span className="font-mono text-sm uppercase">#{tag.name}</span>
                      <TagBadge count={tag.count} />
                    </Link>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </section>

        <section className="border-4 border-cyan-800 bg-cyan-950 p-8">
          <div className="mb-6">
            <p className="font-mono text-xs text-cyan-600 uppercase tracking-widest mb-2">
              DOCUMENT STATISTICS
            </p>
            <h2 className="font-mono text-2xl font-bold uppercase text-cyan-400">TAG METRICS</h2>
          </div>
          <div className="grid gap-6 sm:grid-cols-3">
            <div className="border-2 border-cyan-700 bg-slate-900 p-6 text-center">
              <div className="font-mono text-3xl font-bold text-cyan-400">{allTags.length}</div>
              <div className="font-mono text-xs text-zinc-400 uppercase mt-2">TOTAL TAGS</div>
            </div>
            <div className="border-2 border-cyan-700 bg-slate-900 p-6 text-center">
              <div className="font-mono text-3xl font-bold text-cyan-400">
                {Math.max(...allTags.map(t => t.count))}
              </div>
              <div className="font-mono text-xs text-zinc-400 uppercase mt-2">MAX POSTS/TAG</div>
            </div>
            <div className="border-2 border-cyan-700 bg-slate-900 p-6 text-center">
              <div className="font-mono text-3xl font-bold text-cyan-400">
                {Math.round(allTags.reduce((sum, t) => sum + t.count, 0) / allTags.length)}
              </div>
              <div className="font-mono text-xs text-zinc-400 uppercase mt-2">AVG POSTS/TAG</div>
            </div>
          </div>
        </section>
      </div>
    </div>
  )
}
