'use client'

import { useEffect, useState } from 'react'
import { useRouter } from 'next/navigation'
import Link from 'next/link'
import api from '@/lib/api'

interface LineItem { itemId: string; quantity: string; unitPrice: string; currency: string }

export default function NuevoIngresoPage() {
  const router = useRouter()
  const [proyectos, setProyectos] = useState<any[]>([])
  const [bodegas, setBodegas] = useState<any[]>([])
  const [articulos, setArticulos] = useState<any[]>([])
  const [proveedores, setProveedores] = useState<any[]>([])
  const [selectedProject, setSelectedProject] = useState('')
  const [form, setForm] = useState({
    date: new Date().toISOString().split('T')[0],
    warehouseId: '',
    reference: '',
    supplierId: '',
    supplier: '',
    currency: 'HNL',
    exchangeRate: '1',
  })
  const [lines, setLines] = useState<LineItem[]>([
    { itemId: '', quantity: '', unitPrice: '', currency: 'HNL' },
  ])
  const [saving, setSaving] = useState(false)
  const [error, setError] = useState('')

  useEffect(() => {
    Promise.all([
      api.get('/projects', { params: { activeOnly: true } }),
      api.get('/items', { params: { activeOnly: true } }),
      api.get('/suppliers', { params: { active: true, limit: 500 } }),
    ]).then(([rp, ri, rs]) => {
      setProyectos(Array.isArray(rp.data) ? rp.data : rp.data.data ?? [])
      setArticulos(Array.isArray(ri.data) ? ri.data : ri.data.data ?? [])
      setProveedores(Array.isArray(rs.data) ? rs.data : rs.data.data ?? [])
    }).catch(console.error)
  }, [])

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

  const addLine = () => setLines([...lines, { itemId: '', quantity: '', unitPrice: '', currency: form.currency }])
  const removeLine = (i: number) => setLines(lines.filter((_, idx) => idx !== i))
  const updateLine = (i: number, field: keyof LineItem, value: string) => {
    const updated = [...lines]; updated[i] = { ...updated[i], [field]: value }; setLines(updated)
  }

  const total = lines.reduce((sum, l) => {
    const q = parseFloat(l.quantity) || 0
    const p = parseFloat(l.unitPrice) || 0
    return sum + q * p
  }, 0)

  const handleSupplierId = (id: string) => {
    const sup = proveedores.find((p) => p.id.toString() === id)
    setForm({ ...form, supplierId: id, supplier: sup?.name || '' })
  }

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!form.warehouseId) { setError('Seleccione una bodega'); return }
    if (lines.some((l) => !l.itemId || !l.quantity || !l.unitPrice)) { setError('Complete todos los artículos'); return }
    setSaving(true); setError('')
    try {
      await api.post('/ingresos', {
        ...form,
        warehouseId: Number(form.warehouseId),
        supplierId: form.supplierId ? Number(form.supplierId) : undefined,
        exchangeRate: parseFloat(form.exchangeRate),
        items: lines.map((l) => ({
          itemId: Number(l.itemId),
          quantity: parseFloat(l.quantity),
          unitPrice: parseFloat(l.unitPrice),
          currency: l.currency,
        })),
      })
      router.push('/ingresos')
    } catch (e: any) { setError(e.response?.data?.message || 'Error al crear ingreso') }
    finally { setSaving(false) }
  }

  const inputCls = 'w-full border rounded-lg px-3 py-2 text-sm text-black focus:outline-none focus:ring-2 focus:ring-indigo-400 disabled:bg-gray-100'
  const labelCls = 'block text-xs font-semibold text-black mb-1'

  return (
    <form onSubmit={handleSubmit} className="space-y-5 max-w-4xl w-full">
      {/* Page actions */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-3">
          <Link href="/ingresos" className="text-black hover:text-indigo-700 text-sm font-medium">← Volver</Link>
          <span className="text-gray-400">|</span>
          <Link
            href="/ingresos/importar"
            className="text-indigo-700 font-semibold text-sm hover:underline"
          >
            📥 Importar desde Excel
          </Link>
        </div>
      </div>

      {error && <div className="bg-red-50 text-red-800 border border-red-200 rounded-lg p-3 text-sm font-medium">{error}</div>}

      {/* Header fields */}
      <div className="bg-white rounded-xl shadow-sm border p-5">
        <h3 className="font-bold text-black mb-4">Datos del Documento</h3>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
          <div>
            <label className={labelCls}>Fecha *</label>
            <input type="date" required className={inputCls} value={form.date} onChange={(e) => setForm({ ...form, date: e.target.value })} />
          </div>
          <div>
            <label className={labelCls}>Proyecto *</label>
            <select required className={inputCls} value={selectedProject} onChange={(e) => setSelectedProject(e.target.value)}>
              <option value="">Seleccionar...</option>
              {proyectos.map((p) => <option key={p.id} value={p.id}>{p.name}</option>)}
            </select>
          </div>
          <div>
            <label className={labelCls}>Bodega *</label>
            <select required disabled={!selectedProject} className={inputCls} value={form.warehouseId} onChange={(e) => setForm({ ...form, warehouseId: e.target.value })}>
              <option value="">Seleccionar...</option>
              {bodegas.map((b) => <option key={b.id} value={b.id}>{b.name}</option>)}
            </select>
          </div>
          <div>
            <label className={labelCls}>Referencia / N° Factura</label>
            <input type="text" className={inputCls} value={form.reference} onChange={(e) => setForm({ ...form, reference: e.target.value })} placeholder="FAC-001" />
          </div>
          <div>
            <label className={labelCls}>Proveedor</label>
            <select className={inputCls} value={form.supplierId} onChange={(e) => handleSupplierId(e.target.value)}>
              <option value="">— Sin proveedor —</option>
              {proveedores.map((p) => <option key={p.id} value={p.id}>{p.code} — {p.name}</option>)}
            </select>
          </div>
          <div className="flex gap-2">
            <div className="flex-1">
              <label className={labelCls}>Moneda</label>
              <select className={inputCls} value={form.currency} onChange={(e) => setForm({ ...form, currency: e.target.value })}>
                <option value="HNL">HNL — Lempira</option>
                <option value="USD">USD — Dólar</option>
              </select>
            </div>
            {form.currency === 'USD' && (
              <div className="flex-1">
                <label className={labelCls}>Tipo de cambio</label>
                <input type="number" step="0.01" className={inputCls} value={form.exchangeRate} onChange={(e) => setForm({ ...form, exchangeRate: e.target.value })} />
              </div>
            )}
          </div>
        </div>
      </div>

      {/* Line items */}
      <div className="bg-white rounded-xl shadow-sm border p-5">
        <div className="flex items-center justify-between mb-4">
          <h3 className="font-bold text-black">Artículos</h3>
          <button type="button" onClick={addLine} className="text-indigo-700 font-semibold text-sm hover:underline">+ Agregar línea</button>
        </div>

        {/* Desktop table */}
        <div className="hidden md:block space-y-2">
          <div className="grid grid-cols-12 gap-2 text-xs font-semibold text-black uppercase px-1">
            <div className="col-span-5">Artículo</div>
            <div className="col-span-2">Cantidad</div>
            <div className="col-span-2">Precio Unit.</div>
            <div className="col-span-2">Moneda</div>
            <div className="col-span-1"></div>
          </div>
          {lines.map((line, i) => (
            <div key={i} className="grid grid-cols-12 gap-2 items-center">
              <div className="col-span-5">
                <select required className={inputCls} value={line.itemId} onChange={(e) => updateLine(i, 'itemId', e.target.value)}>
                  <option value="">Artículo...</option>
                  {articulos.map((a) => <option key={a.id} value={a.id}>{a.sku} — {a.name}</option>)}
                </select>
              </div>
              <div className="col-span-2">
                <input type="number" min="0.01" step="any" required placeholder="0.00" className={inputCls} value={line.quantity} onChange={(e) => updateLine(i, 'quantity', e.target.value)} />
              </div>
              <div className="col-span-2">
                <input type="number" min="0" step="any" required placeholder="0.00" className={inputCls} value={line.unitPrice} onChange={(e) => updateLine(i, 'unitPrice', e.target.value)} />
              </div>
              <div className="col-span-2">
                <select className={inputCls} value={line.currency} onChange={(e) => updateLine(i, 'currency', e.target.value)}>
                  <option value="HNL">HNL</option>
                  <option value="USD">USD</option>
                </select>
              </div>
              <div className="col-span-1 text-center">
                {lines.length > 1 && <button type="button" onClick={() => removeLine(i)} className="text-red-500 hover:text-red-700 text-xl font-bold leading-none">×</button>}
              </div>
            </div>
          ))}
        </div>

        {/* Mobile cards */}
        <div className="md:hidden space-y-3">
          {lines.map((line, i) => (
            <div key={i} className="border rounded-lg p-3 space-y-2 bg-gray-50">
              <div className="flex items-center justify-between">
                <span className="text-xs font-bold text-black uppercase">Línea {i + 1}</span>
                {lines.length > 1 && <button type="button" onClick={() => removeLine(i)} className="text-red-600 text-sm font-bold">× Eliminar</button>}
              </div>
              <select required className={inputCls} value={line.itemId} onChange={(e) => updateLine(i, 'itemId', e.target.value)}>
                <option value="">Seleccionar artículo...</option>
                {articulos.map((a) => <option key={a.id} value={a.id}>{a.sku} — {a.name}</option>)}
              </select>
              <div className="grid grid-cols-3 gap-2">
                <div>
                  <label className="block text-xs font-semibold text-black mb-1">Cantidad</label>
                  <input type="number" min="0.01" step="any" required className={inputCls} value={line.quantity} onChange={(e) => updateLine(i, 'quantity', e.target.value)} />
                </div>
                <div>
                  <label className="block text-xs font-semibold text-black mb-1">Precio</label>
                  <input type="number" min="0" step="any" required className={inputCls} value={line.unitPrice} onChange={(e) => updateLine(i, 'unitPrice', e.target.value)} />
                </div>
                <div>
                  <label className="block text-xs font-semibold text-black mb-1">Moneda</label>
                  <select className={inputCls} value={line.currency} onChange={(e) => updateLine(i, 'currency', e.target.value)}>
                    <option value="HNL">HNL</option>
                    <option value="USD">USD</option>
                  </select>
                </div>
              </div>
            </div>
          ))}
        </div>

        <div className="mt-4 flex items-center justify-between">
          <button type="button" onClick={addLine} className="text-indigo-700 font-semibold text-sm hover:underline md:hidden">+ Agregar línea</button>
          <div className="ml-auto text-right">
            <span className="text-sm font-semibold text-black">Total estimado: </span>
            <span className="text-lg font-bold text-indigo-700">{form.currency} {total.toLocaleString('es-HN', { minimumFractionDigits: 2 })}</span>
          </div>
        </div>
      </div>

      {/* Actions */}
      <div className="flex flex-col sm:flex-row justify-end gap-3">
        <button type="button" onClick={() => router.back()} className="w-full sm:w-auto px-5 py-2 border rounded-lg text-sm font-semibold text-black hover:bg-gray-50">
          Cancelar
        </button>
        <button type="submit" disabled={saving} className="w-full sm:w-auto px-5 py-2 bg-indigo-600 text-white rounded-lg text-sm font-semibold hover:bg-indigo-700 disabled:opacity-50">
          {saving ? 'Guardando...' : '✓ Registrar Ingreso'}
        </button>
      </div>
    </form>
  )
}