'use client'

import { useState, useEffect } from 'react'
import Header from '@/components/layout/Header'
import { CircleStackIcon, UserGroupIcon, DocumentTextIcon, ClipboardDocumentListIcon } from '@heroicons/react/24/outline'

type Stats = { totalUsers: number; activeUsers: number; totalDocs: number; totalAudit: number; totalNews: number }
type Login = { id: number; createdAt: string; user: { name: string; email: string } }
type Env = { nodeVersion: string; nextAuthUrl: string; dbUrl: string }

export default function SistemaPage() {
  const [stats, setStats] = useState<Stats | null>(null)
  const [recentLogins, setRecentLogins] = useState<Login[]>([])
  const [env, setEnv] = useState<Env | null>(null)
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    fetch('/api/admin/sistema')
      .then((r) => r.json())
      .then((d) => {
        setStats(d.stats)
        setRecentLogins(d.recentLogins)
        setEnv(d.env)
        setLoading(false)
      })
  }, [])

  const statCards = stats
    ? [
        { label: 'Usuarios totales', value: stats.totalUsers, icon: UserGroupIcon, color: 'text-blue-600 bg-blue-50' },
        { label: 'Usuarios activos', value: stats.activeUsers, icon: UserGroupIcon, color: 'text-green-600 bg-green-50' },
        { label: 'Documentos', value: stats.totalDocs, icon: DocumentTextIcon, color: 'text-purple-600 bg-purple-50' },
        { label: 'Registros de auditoría', value: stats.totalAudit, icon: ClipboardDocumentListIcon, color: 'text-orange-600 bg-orange-50' },
      ]
    : []

  return (
    <div>
      <Header title="Sistema" />
      <div className="p-6 space-y-6">
        {loading ? (
          <p className="text-gray-400 text-sm">Cargando...</p>
        ) : (
          <>
            <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
              {statCards.map(({ label, value, icon: Icon, color }) => (
                <div key={label} className="bg-white rounded-xl border border-gray-100 shadow-sm p-5">
                  <div className={`w-10 h-10 rounded-lg flex items-center justify-center mb-3 ${color}`}>
                    <Icon className="w-5 h-5" />
                  </div>
                  <p className="text-2xl font-bold text-gray-800">{value}</p>
                  <p className="text-xs text-gray-400 mt-0.5">{label}</p>
                </div>
              ))}
            </div>

            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
              <div className="bg-white rounded-xl border border-gray-100 shadow-sm p-5">
                <h3 className="text-sm font-semibold text-gray-700 mb-4 flex items-center gap-2">
                  <CircleStackIcon className="w-4 h-4 text-gray-400" />
                  Información del entorno
                </h3>
                <dl className="space-y-3 text-sm">
                  <div className="flex justify-between">
                    <dt className="text-gray-400">Node.js</dt>
                    <dd className="font-mono text-gray-700 text-xs">{env?.nodeVersion}</dd>
                  </div>
                  <div className="flex justify-between">
                    <dt className="text-gray-400">NEXTAUTH_URL</dt>
                    <dd className="text-gray-700 text-xs truncate max-w-[200px]">{env?.nextAuthUrl}</dd>
                  </div>
                  <div className="flex justify-between">
                    <dt className="text-gray-400">Base de datos</dt>
                    <dd className="font-mono text-gray-700 text-xs truncate max-w-[200px]">{env?.dbUrl}</dd>
                  </div>
                </dl>
              </div>

              <div className="bg-white rounded-xl border border-gray-100 shadow-sm p-5">
                <h3 className="text-sm font-semibold text-gray-700 mb-4">Últimos ingresos</h3>
                <div className="space-y-3">
                  {recentLogins.map((l) => (
                    <div key={l.id} className="flex items-center justify-between">
                      <div>
                        <p className="text-sm font-medium text-gray-700">{l.user.name}</p>
                        <p className="text-xs text-gray-400">{l.user.email}</p>
                      </div>
                      <span className="text-xs text-gray-400">
                        {new Date(l.createdAt).toLocaleString('es-CL')}
                      </span>
                    </div>
                  ))}
                  {recentLogins.length === 0 && (
                    <p className="text-xs text-gray-400">Sin registros</p>
                  )}
                </div>
              </div>
            </div>
          </>
        )}
      </div>
    </div>
  )
}