'use client'

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

export default function ProveedoresPage() {
  const [proveedores, setProveedores] = useState<any[]>([])
  const [loading, setLoading] = useState(true)
  const [search, setSearch] = useState('')
  const [modalOpen, setModalOpen] = useState(false)
  const [editing, setEditing] = useState<any>(null)
  const [form, setForm] = useState({ code: '', name: '', rtn: '', phone: '', email: '', address: '' })
  const [saving, setSaving] = useState(false)
  const [error, setError] = useState('')

  const fetchProveedores = async () => {
    setLoading(true)
    try {
      const r = await api.get('/suppliers', { params: search ? { search } : {} })
      setProveedores(Array.isArray(r.data) ? r.data : r.data.data ?? [])
    } catch (e) { console.error(e) }
    finally { setLoading(false) }
  }

  useEffect(() => { fetchProveedores() }, [search])

  const openCreate = () => {
    setEditing(null)
    setForm({ code: '', name: '', rtn: '', phone: '', email: '', address: '' })
    setError('')
    setModalOpen(true)
  }

  const openEdit = (p: any) => {
    setEditing(p)
    setForm({ code: p.code, name: p.name, rtn: p.rtn || '', phone: p.phone || '', email: p.email || '', address: p.address || '' })
    setError('')
    setModalOpen(true)
  }

  const handleSave = async () => {
    if (!form.code?.trim()) {
      setError('El código es requerido')
      return
    }
    if (!form.name?.trim()) {
      setError('El nombre es requerido')
      return
    }
    setSaving(true); setError('')
    try {
      const payload = {
        code: form.code.trim(),
        name: form.name.trim(),
        rtn: form.rtn?.trim() || undefined,
        phone: form.phone?.trim() || undefined,
        email: form.email?.trim() || undefined,
        address: form.address?.trim() || undefined,
      }
      if (editing) { 
        await api.patch(`/suppliers/${editing.id}`, payload) 
      } else { 
        await api.post('/suppliers', payload) 
      }
      setModalOpen(false); fetchProveedores()
    } catch (e: any) {
      console.error('Error saving supplier:', e)
      let msg = 'Error al guardar el proveedor'
      if (e.response?.data) {
        if (e.response.data.message) {
          msg = e.response.data.message
        } else if (e.response.data.error) {
          msg = e.response.data.error
        } else if (Array.isArray(e.response.data)) {
          msg = e.response.data.map((err: any) => err.message || err).join(', ')
        } else if (typeof e.response.data === 'string') {
          msg = e.response.data
        }
      }
      setError(msg)
    }
    finally { setSaving(false) }
  }

  const handleDeactivate = async (id: number) => {
    if (!confirm('¿Desactivar este proveedor?')) return
    await api.delete(`/suppliers/${id}`)
    fetchProveedores()
  }

  const handleReactivate = async (id: number) => {
    if (!confirm('¿Reactivar este proveedor?')) return
    try {
      await api.patch(`/suppliers/${id}`, { active: true })
      fetchProveedores()
    } catch (e: any) {
      alert(e.response?.data?.message || 'No se pudo reactivar')
    }
  }

  const f = (key: keyof typeof form, label: string, type = 'text', disabled = false, placeholder = '') => (
    <div>
      <label className="block text-xs font-medium text-gray-700 mb-1">{label}</label>
      <input
        type={type}
        disabled={disabled}
        placeholder={placeholder}
        className="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"
        value={form[key]}
        onChange={(e) => setForm({ ...form, [key]: e.target.value })}
      />
    </div>
  )

  return (
    <div className="space-y-4">
      {/* Toolbar */}
      <div className="flex flex-col sm:flex-row gap-3 items-start sm:items-center justify-between">
        <input
          type="text"
          placeholder="Buscar por código, nombre, RTN..."
          className="border rounded-lg px-3 py-2 text-sm text-black w-full sm:w-72 focus:outline-none focus:ring-2 focus:ring-indigo-400"
          value={search}
          onChange={(e) => setSearch(e.target.value)}
        />
        <button
          onClick={openCreate}
          className="w-full sm:w-auto bg-indigo-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-indigo-700 transition whitespace-nowrap"
        >
          + Nuevo Proveedor
        </button>
      </div>

      {/* Table */}
      <div className="bg-white rounded-xl shadow-sm border overflow-hidden">
        <div className="overflow-x-auto">
          <table className="min-w-full text-sm">
            <thead className="bg-gray-50 text-gray-700 uppercase text-xs font-semibold">
              <tr>
                <th className="px-4 py-3 text-left">Código</th>
                <th className="px-4 py-3 text-left">Nombre</th>
                <th className="px-4 py-3 text-left">RTN</th>
                <th className="px-4 py-3 text-left">Teléfono</th>
                <th className="px-4 py-3 text-left">Email</th>
                <th className="px-4 py-3 text-center">Estado</th>
                <th className="px-4 py-3 text-center">Acciones</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-gray-100">
              {loading ? (
                <tr><td colSpan={7} className="text-center py-10 text-gray-500">Cargando...</td></tr>
              ) : proveedores.length === 0 ? (
                <tr><td colSpan={7} className="text-center py-10 text-gray-500">No se encontraron proveedores</td></tr>
              ) : proveedores.map((p) => (
                <tr key={p.id} className="hover:bg-gray-50">
                  <td className="px-4 py-3 font-mono text-black font-medium">{p.code}</td>
                  <td className="px-4 py-3 font-semibold text-black">{p.name}</td>
                  <td className="px-4 py-3 text-gray-700">{p.rtn || '—'}</td>
                  <td className="px-4 py-3 text-gray-700">{p.phone || '—'}</td>
                  <td className="px-4 py-3 text-gray-700">{p.email || '—'}</td>
                  <td className="px-4 py-3 text-center">
                    <span className={`px-2 py-0.5 rounded-full text-xs font-semibold ${p.active ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-600'}`}>
                      {p.active ? 'Activo' : 'Inactivo'}
                    </span>
                  </td>
                  <td className="px-4 py-3 text-center space-x-3">
                    <button type="button" onClick={() => openEdit(p)} className="text-indigo-700 font-medium hover:underline text-xs">Editar</button>
                    {p.active ? (
                      <button type="button" onClick={() => handleDeactivate(p.id)} className="text-red-600 font-medium hover:underline text-xs">Desactivar</button>
                    ) : (
                      <button type="button" onClick={() => handleReactivate(p.id)} className="text-emerald-600 font-medium hover:underline text-xs">Reactivar</button>
                    )}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      {/* Modal */}
      <Modal open={modalOpen} onClose={() => setModalOpen(false)} title={editing ? 'Editar Proveedor' : 'Nuevo Proveedor'}>
        {error && <div className="bg-red-50 text-red-800 border border-red-200 rounded-lg p-3 text-sm mb-3 font-medium">{error}</div>}
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
          {f('code', 'Código *', 'text', !!editing)}
          {f('name', 'Nombre / Razón Social *')}
          {f('rtn', 'RTN')}
          {f('phone', 'Teléfono')}
          {f('email', 'Email', 'email')}
          <div className="sm:col-span-2">
            <label className="block text-xs font-medium text-gray-700 mb-1">Dirección</label>
            <textarea
              rows={2}
              className="w-full border rounded-lg px-3 py-2 text-sm text-black focus:outline-none focus:ring-2 focus:ring-indigo-400"
              value={form.address}
              onChange={(e) => setForm({ ...form, address: e.target.value })}
            />
          </div>
        </div>
        <div className="flex justify-end gap-2 mt-4">
          <button onClick={() => setModalOpen(false)} className="px-4 py-2 rounded-lg border text-sm font-medium text-black hover:bg-gray-50">Cancelar</button>
          <button onClick={handleSave} disabled={saving} className="px-4 py-2 rounded-lg bg-indigo-600 text-white text-sm font-medium hover:bg-indigo-700 disabled:opacity-50">
            {saving ? 'Guardando...' : 'Guardar'}
          </button>
        </div>
      </Modal>
    </div>
  )
}