'use client'

import { useEffect, useState } from 'react'
import api from '@/lib/api'
import {
  BarChart, Bar, LineChart, Line,
  XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer,
} from 'recharts'

export default function DashboardPage() {
  const [data, setData] = useState<any>(null)
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    api.get('/dashboard')
      .then((r) => setData(r.data))
      .catch(console.error)
      .finally(() => setLoading(false))
  }, [])

  if (loading) {
    return (
      <div className="flex items-center justify-center h-64">
        <div className="animate-spin rounded-full h-10 w-10 border-b-2 border-indigo-600"></div>
      </div>
    )
  }

  return (
    <div className="space-y-6">
      {/* Summary cards */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        <StatCard label="Proyectos activos" value={data?.inventoryValueByProject?.length ?? 0} icon="🏗️" color="indigo" />
        <StatCard label="Items en stock bajo" value={data?.lowStockAlerts?.length ?? 0} icon="⚠️" color="yellow" />
        <StatCard label="Top ítem del mes" value={data?.topItemsByConsumption?.[0]?.item?.name ?? '—'} icon="📦" color="green" small />
        <StatCard label="Movimientos hoy" value={data?.movementsOverTime?.slice(-1)[0]?.count ?? 0} icon="🔄" color="purple" />
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* Valor por proyecto */}
        <div className="bg-white rounded-xl shadow-sm border p-5">
          <h3 className="text-base font-semibold text-gray-700 mb-4">Valor de Inventario por Proyecto</h3>
          <ResponsiveContainer width="100%" height={250}>
            <BarChart data={data?.inventoryValueByProject ?? []}>
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis dataKey="project.name" tick={{ fontSize: 11 }} />
              <YAxis tick={{ fontSize: 11 }} />
              <Tooltip formatter={(v: any) => `L. ${Number(v).toLocaleString('es-HN', { minimumFractionDigits: 2 })}`} />
              <Bar dataKey="value" fill="#6366f1" radius={[4, 4, 0, 0]} />
            </BarChart>
          </ResponsiveContainer>
        </div>

        {/* Top 10 items */}
        <div className="bg-white rounded-xl shadow-sm border p-5">
          <h3 className="text-base font-semibold text-gray-700 mb-4">Top 10 Ítems por Consumo (últimos 30 días)</h3>
          <ResponsiveContainer width="100%" height={250}>
            <BarChart data={data?.topItemsByConsumption ?? []} layout="vertical">
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis type="number" tick={{ fontSize: 11 }} />
              <YAxis dataKey="item.name" type="category" width={120} tick={{ fontSize: 10 }} />
              <Tooltip />
              <Bar dataKey="quantity" fill="#10b981" radius={[0, 4, 4, 0]} />
            </BarChart>
          </ResponsiveContainer>
        </div>
      </div>

      {/* Movimientos en el tiempo */}
      <div className="bg-white rounded-xl shadow-sm border p-5">
        <h3 className="text-base font-semibold text-gray-700 mb-4">Movimientos en el Tiempo</h3>
        <ResponsiveContainer width="100%" height={220}>
          <LineChart data={data?.movementsOverTime ?? []}>
            <CartesianGrid strokeDasharray="3 3" />
            <XAxis dataKey="date" tick={{ fontSize: 11 }} />
            <YAxis tick={{ fontSize: 11 }} />
            <Tooltip />
            <Legend />
            <Line type="monotone" dataKey="qtyIn" stroke="#6366f1" name="Entradas" dot={false} strokeWidth={2} />
            <Line type="monotone" dataKey="qtyOut" stroke="#f59e0b" name="Salidas" dot={false} strokeWidth={2} />
          </LineChart>
        </ResponsiveContainer>
      </div>

      {/* Alertas de stock bajo */}
      {data?.lowStockAlerts?.length > 0 && (
        <div className="bg-white rounded-xl shadow-sm border p-5">
          <h3 className="text-base font-semibold text-gray-700 mb-4 flex items-center gap-2">
            <span>⚠️</span> Alertas de Stock Bajo
          </h3>
          <div className="overflow-x-auto">
            <table className="min-w-full text-sm">
              <thead>
                <tr className="bg-gray-50 text-gray-500 uppercase text-xs">
                  <th className="px-4 py-2 text-left">Artículo</th>
                  <th className="px-4 py-2 text-left">Bodega</th>
                  <th className="px-4 py-2 text-left">Proyecto</th>
                  <th className="px-4 py-2 text-right">Cantidad</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-gray-100">
                {data.lowStockAlerts.map((a: any, i: number) => (
                  <tr key={i} className="hover:bg-gray-50">
                    <td className="px-4 py-2 font-medium text-gray-800">{a.item?.name}</td>
                    <td className="px-4 py-2 text-gray-600">{a.warehouse?.name}</td>
                    <td className="px-4 py-2 text-gray-600">{a.warehouse?.project?.name}</td>
                    <td className="px-4 py-2 text-right">
                      <span className="bg-red-100 text-red-700 px-2 py-0.5 rounded-full font-semibold">
                        {a.quantity}
                      </span>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      )}
    </div>
  )
}

function StatCard({ label, value, icon, color, small }: any) {
  const colors: Record<string, string> = {
    indigo: 'bg-indigo-50 text-indigo-700 border-indigo-200',
    yellow: 'bg-yellow-50 text-yellow-700 border-yellow-200',
    green: 'bg-green-50 text-green-700 border-green-200',
    purple: 'bg-purple-50 text-purple-700 border-purple-200',
  }
  return (
    <div className={`rounded-xl border p-4 ${colors[color]}`}>
      <div className="text-2xl mb-2">{icon}</div>
      <p className={`font-bold truncate ${small ? 'text-sm' : 'text-2xl'}`}>{value}</p>
      <p className="text-xs mt-1 opacity-70">{label}</p>
    </div>
  )
}