"use client"

import { AdminHeader } from "@/components/admin-header"
import { Card } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Sparkles, Plus, Wrench, ShieldCheck, ArrowUp } from "lucide-react"
import {
  CHANGELOG,
  TYPE_LABELS,
  TYPE_COLORS,
  getChangelogSummary,
  groupChangelogByMonth,
  type ChangelogEntryType,
} from "@/lib/changelog-data"
import packageJson from "@/package.json"

const TYPE_ICONS: Record<ChangelogEntryType, typeof Sparkles> = {
  NUEVA_FUNCION: Plus,
  MEJORA: ArrowUp,
  CORRECCION: Wrench,
  SEGURIDAD: ShieldCheck,
}

function formatDate(iso: string): string {
  const [year, month, day] = iso.split("-").map(Number)
  const date = new Date(year, month - 1, day)
  return date.toLocaleDateString("es-VE", { day: "numeric", month: "long", year: "numeric" })
}

export default function MejorasPage() {
  const summary = getChangelogSummary()
  const groups = groupChangelogByMonth()
  const currentVersion = packageJson.version

  return (
    <div className="min-h-screen bg-gray-50">
      <AdminHeader />

      <main className="max-w-4xl mx-auto px-4 py-8 space-y-8">
        {/* Encabezado */}
        <header className="space-y-3">
          <div className="flex items-center gap-3">
            <div className="h-12 w-12 rounded-lg bg-emerald-100 flex items-center justify-center">
              <Sparkles className="h-6 w-6 text-emerald-600" />
            </div>
            <div>
              <h1 className="text-2xl font-bold text-gray-900">Mejoras de la plataforma</h1>
              <p className="text-sm text-gray-600">
                Histórico de funcionalidades nuevas, mejoras y correcciones. Las más recientes aparecen primero.
              </p>
            </div>
          </div>
        </header>

        {/* Resumen */}
        <Card className="p-6">
          <div className="flex items-baseline justify-between flex-wrap gap-4">
            <div>
              <p className="text-xs uppercase tracking-wide text-gray-500 mb-1">Versión actual</p>
              <p className="text-3xl font-bold text-gray-900">v{currentVersion}</p>
            </div>

            <div className="flex flex-wrap gap-6 text-sm">
              <div className="text-right">
                <p className="text-2xl font-bold text-gray-900">{summary.total}</p>
                <p className="text-xs text-gray-500 uppercase tracking-wide">Total</p>
              </div>
              <div className="text-right">
                <p className="text-2xl font-bold text-emerald-600">{summary.nuevaFuncion}</p>
                <p className="text-xs text-gray-500 uppercase tracking-wide">Nueva función</p>
              </div>
              <div className="text-right">
                <p className="text-2xl font-bold text-blue-600">{summary.mejora}</p>
                <p className="text-xs text-gray-500 uppercase tracking-wide">Mejora</p>
              </div>
              <div className="text-right">
                <p className="text-2xl font-bold text-amber-600">{summary.correccion}</p>
                <p className="text-xs text-gray-500 uppercase tracking-wide">Corrección</p>
              </div>
              <div className="text-right">
                <p className="text-2xl font-bold text-red-600">{summary.seguridad}</p>
                <p className="text-xs text-gray-500 uppercase tracking-wide">Seguridad</p>
              </div>
            </div>
          </div>
        </Card>

        {/* Lista por mes */}
        {groups.map((group) => (
          <section key={group.monthKey} className="space-y-4">
            <h2 className="text-sm font-semibold uppercase tracking-wide text-gray-500 border-b border-gray-200 pb-2">
              {group.monthLabel}
            </h2>

            <div className="space-y-4">
              {group.entries.map((entry) => {
                const colors = TYPE_COLORS[entry.type]
                const Icon = TYPE_ICONS[entry.type]
                return (
                  <Card key={`${entry.version}-${entry.date}-${entry.title}`} className="overflow-hidden">
                    <div className={`h-1 ${colors.bar}`} />
                    <div className="p-6 space-y-3">
                      <div className="flex items-center gap-3 flex-wrap">
                        <Badge className={`${colors.badge} border gap-1.5 px-2.5 py-1`}>
                          <Icon className="h-3.5 w-3.5" />
                          {TYPE_LABELS[entry.type]}
                        </Badge>
                        <span className="text-sm text-gray-500">{formatDate(entry.date)}</span>
                        <Badge variant="outline" className="font-mono text-xs">
                          v{entry.version}
                        </Badge>
                      </div>

                      <h3 className="text-lg font-semibold text-gray-900">{entry.title}</h3>
                      <p className="text-sm text-gray-700 leading-relaxed">{entry.description}</p>

                      {entry.bullets && entry.bullets.length > 0 && (
                        <ul className="space-y-1.5 mt-2">
                          {entry.bullets.map((b, idx) => (
                            <li key={idx} className="text-sm text-gray-600 flex gap-2 leading-relaxed">
                              <span className="text-gray-400 flex-shrink-0">•</span>
                              <span>{b}</span>
                            </li>
                          ))}
                        </ul>
                      )}
                    </div>
                  </Card>
                )
              })}
            </div>
          </section>
        ))}

        <footer className="text-xs text-gray-500 text-center pt-6 border-t border-gray-200">
          Plataforma desarrollada por VIP Play Software. Última entrada del listado:{" "}
          {summary.latest ? formatDate(summary.latest) : "—"}.
        </footer>
      </main>
    </div>
  )
}