'use client'

import { useEffect, useState } from 'react'
import { PortableTextRenderer } from '@/components/PortableTextRenderer'
import type { ChangelogEntry, RoadmapItemData, Tab } from '@/types/changelog'

const TABS: { id: Tab; label: string }[] = [
  { id: 'whats-new', label: "What's New" },
  { id: 'whats-next', label: "What's Next" },
  { id: 'give-feedback', label: 'Give Feedback' },
]

const TAG_STYLES: Record<string, string> = {
  feature: 'bg-amber-500/10 text-amber-400 border border-amber-500/25',
  fix: 'bg-green-500/10 text-green-400 border border-green-500/20',
  improvement: 'bg-blue-400/10 text-blue-400 border border-blue-400/20',
}

function formatDate(iso: string) {
  return new Date(iso).toLocaleDateString('en-US', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
  })
}

export function ChangelogTabs({
  entries,
  roadmapItems,
}: {
  entries: ChangelogEntry[]
  roadmapItems: RoadmapItemData[]
}) {
  const [activeTab, setActiveTab] = useState<Tab>('whats-new')

  useEffect(() => {
    const hash = window.location.hash.replace('#', '') as Tab
    if (TABS.some((t) => t.id === hash)) setActiveTab(hash)
  }, [])

  function handleTabChange(tab: Tab) {
    setActiveTab(tab)
    window.history.replaceState(null, '', `#${tab}`)
  }

  return (
    <div>
      {/* Tab bar */}
      <div className="mb-10 flex border-b border-zinc-800">
        {TABS.map(({ id, label }) => (
          <button
            key={id}
            onClick={() => handleTabChange(id)}
            className={[
              '-mb-px border-b-2 px-5 py-2.5 text-sm font-medium transition-colors',
              activeTab === id
                ? 'border-amber-400 text-amber-400'
                : 'border-transparent text-zinc-500 hover:text-zinc-300',
            ].join(' ')}
          >
            {label}
          </button>
        ))}
      </div>

      {/* ── What's New ── */}
      {activeTab === 'whats-new' && (
        <div>
          {entries.length === 0 ? (
            <p className="text-sm text-zinc-500">
              No releases yet — check back soon.
            </p>
          ) : (
            <div className="divide-y divide-zinc-900">
              {entries.map((entry) => (
                <div
                  key={entry._id}
                  className="grid grid-cols-[120px_1fr] gap-8 py-8"
                >
                  <div className="pt-1">
                    <p className="font-mono text-xs font-bold text-amber-400">
                      {entry.version}
                    </p>
                    <p className="mt-1 text-[11px] text-zinc-600">
                      {formatDate(entry.publishedAt)}
                    </p>
                  </div>
                  <div>
                    {(entry.tags?.length ?? 0) > 0 && (
                      <div className="mb-2.5 flex flex-wrap gap-1.5">
                        {(entry.tags ?? []).map((tag) => (
                          <span
                            key={tag}
                            className={`rounded-full px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide ${
                              TAG_STYLES[tag] ??
                              'border border-zinc-700 bg-zinc-800 text-zinc-400'
                            }`}
                          >
                            {tag}
                          </span>
                        ))}
                      </div>
                    )}
                    <h3 className="mb-3 text-[17px] font-semibold text-white">
                      {entry.title}
                    </h3>
                    {entry.body && (
                      <div className="text-sm text-zinc-400">
                        <PortableTextRenderer value={entry.body} />
                      </div>
                    )}
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
      )}

      {/* ── What's Next — stub, filled in Task 3 ── */}
      {activeTab === 'whats-next' && (
        <p className="text-sm text-zinc-500">Roadmap coming soon.</p>
      )}

      {/* ── Give Feedback — stub, filled in Task 6 ── */}
      {activeTab === 'give-feedback' && (
        <p className="text-sm text-zinc-500">Feedback form coming soon.</p>
      )}
    </div>
  )
}