'use client'

import { useEffect, useState } from 'react'
import api from '@/lib/api'

export default function KardexPage() {
  const [entries, setEntries] = useState<any[]>([])
  const [loading, setLoading] = useState(false)
  const [pagination, setPagination] = useState({ page: 1, total: 0, totalPages: 1 })
  const [articulos, setArticulos] = useState<any[]>([])
  const [proyectos, setProyectos] = useState<any[]>([])
  const [bodegas, setBodegas] = useState<any[]>([])
  const [filters, setFilters] = useState({ itemId: '', warehouseId: '', projectId: '', startDate: '', endDate: '' })
  const [selectedProject, setSelectedProject] = useState('')

  useEffect(() => {
    Promise.all([
      api.get('/items', { params: { activeOnly: true } }),
      api.get('/projects', { params: { activeOnly: true } }),
    ]).then(([ia, ip]) => { setArticulos(ia.data); setProyectos(ip.data) })
  }, [])

  useEffect(() => {
    if (selectedProject) {
      api.get('/warehouses', { params: { projectId: selectedProject, activeOnly: true } }).then((r) => setBodegas(r.data))
    } else { setBodegas([]) }
    setFilters((f) => ({ ...f, warehouseId: '', projectId: selectedProject }))
  }, [selectedProject])

  const fetchKardex = async (page = 1) => {
    setLoading(true)
    try {
      const r = await api.get('/kardex', {
        params: { page, limit: 50, itemId: filters.itemId || undefined, warehouseId: filters.warehouseId || undefined, projectId: filters.projectId || undefined, startDate: filters.startDate || undefined, endDate: filters.endDate || undefined },
      })
      setEntries(r.data.data)
      setPagination(r.data.pagination)
    } catch (e) { console.error(e) }
    finally { setLoading(false) }
  }

  const movTypeBadge = (type: string) => {
    const m: any = { in: 'bg-green-100 text-green-700', out: 'bg-orange-100 text-orange-700', cancellation: 'bg-red-100 text-red-700', adjustment: 'bg-blue-100 text-blue-700' }
    const l: any = { in: 'Entrada', out: 'Salida', cancellation: 'Cancelación', adjustment: 'Ajuste' }
    return <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${m[type] || 'bg-gray-100 text-gray-600'}`}>{l[type] || type}</span>
  }

  return (
    <div className="space-y-4">
      {/* Filters */}
      <div className="bg-white rounded-xl shadow-sm border p-4">
        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3">
          <div>
            <label className="block text-xs text-gray-500 mb-1">Artículo</label>
            <select className="w-full border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400"
              value={filters.itemId} onChange={(e) => setFilters({ ...filters, itemId: e.target.value })}>
              <option value="">Todos</option>
              {articulos.map((a) => <option key={a.id} value={a.id}>{a.name}</option>)}
            </select>
          </div>
          <div>
            <label className="block text-xs text-gray-500 mb-1">Proyecto</label>
            <select className="w-full border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400"
              value={selectedProject} onChange={(e) => setSelectedProject(e.target.value)}>
              <option value="">Todos</option>
              {proyectos.map((p) => <option key={p.id} value={p.id}>{p.name}</option>)}
            </select>
          </div>
          <div>
            <label className="block text-xs text-gray-500 mb-1">Bodega</label>
            <select disabled={!selectedProject} className="w-full border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400 disabled:bg-gray-50"
              value={filters.warehouseId} onChange={(e) => setFilters({ ...filters, warehouseId: e.target.value })}>
              <option value="">Todas</option>
              {bodegas.map((b) => <option key={b.id} value={b.id}>{b.name}</option>)}
            </select>
          </div>
          <div>
            <label className="block text-xs text-gray-500 mb-1">Fecha desde</label>
            <input type="date" className="w-full border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400"
              value={filters.startDate} onChange={(e) => setFilters({ ...filters, startDate: e.target.value })} />
          </div>
          <div>
            <label className="block text-xs text-gray-500 mb-1">Fecha hasta</label>
            <input type="date" className="w-full border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400"
              value={filters.endDate} onChange={(e) => setFilters({ ...filters, endDate: e.target.value })} />
          </div>
          <div className="flex items-end">
            <button onClick={() => fetchKardex(1)} className="w-full px-4 py-2 bg-indigo-600 text-white rounded-lg text-sm hover:bg-indigo-700">
              🔍 Consultar
            </button>
          </div>
        </div>
      </div>

      {/* Results */}
      <div className="bg-white rounded-xl shadow-sm border overflow-hidden">
        {!loading && entries.length > 0 && (
          <div className="px-4 py-2 bg-gray-50 border-b text-xs text-gray-500">
            {pagination.total} movimiento(s) encontrado(s)
          </div>
        )}
        <div className="overflow-x-auto">
          <table className="min-w-full text-sm">
            <thead className="bg-gray-50 text-gray-500 uppercase text-xs">
              <tr>
                <th className="px-3 py-3 text-left">Fecha</th>
                <th className="px-3 py-3 text-left">Artículo</th>
                <th className="px-3 py-3 text-left">Bodega</th>
                <th className="px-3 py-3 text-center">Tipo</th>
                <th className="px-3 py-3 text-left">Doc. Ref.</th>
                <th className="px-3 py-3 text-right">Entrada</th>
                <th className="px-3 py-3 text-right">Salida</th>
                <th className="px-3 py-3 text-right">Costo Unit.</th>
                <th className="px-3 py-3 text-right">Saldo Qty</th>
                <th className="px-3 py-3 text-right">Saldo Valor</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-gray-100">
              {loading ? (
                <tr><td colSpan={10} className="text-center py-10 text-gray-400">Cargando...</td></tr>
              ) : entries.length === 0 ? (
                <tr><td colSpan={10} className="text-center py-10 text-gray-400">
                  {Object.values(filters).some(Boolean) ? 'Sin resultados para los filtros seleccionados' : 'Seleccione filtros y haga clic en Consultar'}
                </td></tr>
              ) : entries.map((e) => (
                <tr key={e.id} className={`hover:bg-gray-50 ${e.movementType === 'cancellation' ? 'opacity-60 bg-red-50/40' : ''}`}>
                  <td className="px-3 py-2 text-gray-600">{new Date(e.date).toLocaleDateString('es-HN')}</td>
                  <td className="px-3 py-2">
                    <p className="font-medium text-gray-800 text-xs">{e.item?.name}</p>
                    <p className="text-gray-400 text-xs font-mono">{e.item?.sku}</p>
                  </td>
                  <td className="px-3 py-2 text-gray-600 text-xs">{e.warehouse?.name}</td>
                  <td className="px-3 py-2 text-center">{movTypeBadge(e.movementType)}</td>
                  <td className="px-3 py-2 font-mono text-xs text-indigo-600">{e.docRef}</td>
                  <td className="px-3 py-2 text-right text-green-700 font-medium">
                    {Number(e.qtyIn) > 0 ? Number(e.qtyIn).toLocaleString('es-HN', { minimumFractionDigits: 2 }) : '—'}
                  </td>
                  <td className="px-3 py-2 text-right text-orange-700 font-medium">
                    {Number(e.qtyOut) > 0 ? Number(e.qtyOut).toLocaleString('es-HN', { minimumFractionDigits: 2 }) : '—'}
                  </td>
                  <td className="px-3 py-2 text-right text-gray-700">L. {Number(e.unitCost).toLocaleString('es-HN', { minimumFractionDigits: 2 })}</td>
                  <td className="px-3 py-2 text-right font-semibold text-gray-800">{Number(e.balanceQty).toLocaleString('es-HN', { minimumFractionDigits: 2 })}</td>
                  <td className="px-3 py-2 text-right font-semibold text-indigo-700">L. {Number(e.balanceValue).toLocaleString('es-HN', { minimumFractionDigits: 2 })}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        {pagination.totalPages > 1 && (
          <div className="flex justify-center items-center gap-3 py-4 border-t text-sm">
            <button disabled={pagination.page <= 1} onClick={() => fetchKardex(pagination.page - 1)} className="px-3 py-1 border rounded disabled:opacity-40 hover:bg-gray-50">← Anterior</button>
            <span className="text-gray-600">Página {pagination.page} de {pagination.totalPages}</span>
            <button disabled={pagination.page >= pagination.totalPages} onClick={() => fetchKardex(pagination.page + 1)} className="px-3 py-1 border rounded disabled:opacity-40 hover:bg-gray-50">Siguiente →</button>
          </div>
        )}
      </div>
    </div>
  )
}