'use client'

import { useState, useEffect, useCallback } from 'react'
import Header from '@/components/layout/Header'
import { useSession } from 'next-auth/react'
import { PlusIcon, XMarkIcon, CheckIcon, PencilSquareIcon, TrashIcon, EnvelopeIcon, PhoneIcon } from '@heroicons/react/24/outline'

type Entry = {
  id: number; name: string; position: string | null; area: string | null
  email: string | null; phone: string | null; mobile: string | null
  active: boolean; order: number
}

const emptyForm = { name: '', position: '', area: '', email: '', phone: '', mobile: '', active: true, order: '0' }

export default function DirectorioPage() {
  const { data: session } = useSession()
  const canEdit = ['SUPER_ADMIN', 'ADMIN', 'EDITOR'].includes((session?.user as { role?: string })?.role ?? '')

  const [entries, setEntries] = useState<Entry[]>([])
  const [loading, setLoading] = useState(true)
  const [search, setSearch] = useState('')
  const [modal, setModal] = useState(false)
  const [editing, setEditing] = useState<Entry | null>(null)
  const [form, setForm] = useState(emptyForm)
  const [saving, setSaving] = useState(false)
  const [confirmDel, setConfirmDel] = useState<Entry | null>(null)

  const load = useCallback(async () => {
    setLoading(true)
    const res = await fetch('/api/directorio')
    setEntries(await res.json())
    setLoading(false)
  }, [])

  useEffect(() => { load() }, [load])

  function openNew() { setEditing(null); setForm(emptyForm); setModal(true) }
  function openEdit(e: Entry) {
    setEditing(e)
    setForm({ name: e.name, position: e.position ?? '', area: e.area ?? '', email: e.email ?? '', phone: e.phone ?? '', mobile: e.mobile ?? '', active: e.active, order: String(e.order) })
    setModal(true)
  }

  async function save() {
    setSaving(true)
    await fetch(editing ? `/api/directorio/${editing.id}` : '/api/directorio', {
      method: editing ? 'PUT' : 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ ...form, order: parseInt(form.order) }),
    })
    setSaving(false); setModal(false); load()
  }

  async function del(e: Entry) {
    await fetch(`/api/directorio/${e.id}`, { method: 'DELETE' })
    setConfirmDel(null); load()
  }

  const areas = Array.from(new Set(entries.map(e => e.area).filter(Boolean) as string[])).sort()
  const filtered = entries.filter(e =>
    e.active &&
    (e.name.toLowerCase().includes(search.toLowerCase()) ||
     (e.area ?? '').toLowerCase().includes(search.toLowerCase()) ||
     (e.position ?? '').toLowerCase().includes(search.toLowerCase()))
  )

  const byArea = areas.reduce<Record<string, Entry[]>>((acc, area) => {
    acc[area] = filtered.filter(e => e.area === area)
    return acc
  }, {})
  const sinArea = filtered.filter(e => !e.area)

  return (
    <div>
      <Header title="Directorio de Contactos" />
      <div className="p-6 space-y-5">
        <div className="flex items-center gap-3">
          <input type="text" placeholder="Buscar por nombre, área o cargo..."
            value={search} onChange={e => setSearch(e.target.value)}
            className="border border-gray-200 rounded-lg px-3 py-2 text-sm w-72 outline-none focus:ring-2 focus:ring-green-500" />
          <span className="text-xs text-gray-400">{filtered.length} contacto(s)</span>
          {canEdit && (
            <button onClick={openNew} className="ml-auto flex items-center gap-1.5 bg-green-600 hover:bg-green-700 text-white text-sm font-medium px-4 py-2 rounded-lg">
              <PlusIcon className="w-4 h-4" /> Agregar contacto
            </button>
          )}
        </div>

        {loading ? <p className="text-gray-400 text-sm">Cargando...</p> : (
          <>
            {Object.entries(byArea).map(([area, aEntries]) => aEntries.length > 0 && (
              <div key={area}>
                <h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">{area}</h3>
                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
                  {aEntries.map(e => <ContactCard key={e.id} e={e} canEdit={canEdit} onEdit={openEdit} onDel={setConfirmDel} />)}
                </div>
              </div>
            ))}
            {sinArea.length > 0 && (
              <div>
                {areas.length > 0 && <h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">Sin área</h3>}
                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
                  {sinArea.map(e => <ContactCard key={e.id} e={e} canEdit={canEdit} onEdit={openEdit} onDel={setConfirmDel} />)}
                </div>
              </div>
            )}
            {filtered.length === 0 && <p className="text-center py-12 text-gray-400 text-sm">Sin contactos registrados.</p>}
          </>
        )}

        {canEdit && (
          <div>
            {entries.filter(e => !e.active).length > 0 && (
              <details className="mt-4">
                <summary className="text-xs text-gray-400 cursor-pointer hover:text-gray-600">Ver contactos inactivos ({entries.filter(e => !e.active).length})</summary>
                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 mt-3">
                  {entries.filter(e => !e.active).map(e => (
                    <ContactCard key={e.id} e={e} canEdit={canEdit} onEdit={openEdit} onDel={setConfirmDel} inactive />
                  ))}
                </div>
              </details>
            )}
          </div>
        )}
      </div>

      {modal && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-xl shadow-2xl w-full max-w-lg">
            <div className="flex items-center justify-between p-5 border-b border-gray-100">
              <h3 className="font-semibold text-gray-800">{editing ? 'Editar contacto' : 'Nuevo contacto'}</h3>
              <button onClick={() => setModal(false)}><XMarkIcon className="w-5 h-5 text-gray-400" /></button>
            </div>
            <div className="p-5 space-y-4">
              <div className="grid grid-cols-2 gap-4">
                <div className="col-span-2">
                  <label className="block text-xs font-medium text-gray-500 mb-1.5">Nombre *</label>
                  <input value={form.name} onChange={e => setForm(f => ({ ...f, name: e.target.value }))}
                    className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-green-500" />
                </div>
                <div>
                  <label className="block text-xs font-medium text-gray-500 mb-1.5">Cargo</label>
                  <input value={form.position} onChange={e => setForm(f => ({ ...f, position: e.target.value }))}
                    className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-green-500" />
                </div>
                <div>
                  <label className="block text-xs font-medium text-gray-500 mb-1.5">Área</label>
                  <input value={form.area} onChange={e => setForm(f => ({ ...f, area: e.target.value }))}
                    className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-green-500" />
                </div>
                <div>
                  <label className="block text-xs font-medium text-gray-500 mb-1.5">Email</label>
                  <input type="email" value={form.email} onChange={e => setForm(f => ({ ...f, email: e.target.value }))}
                    className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-green-500" />
                </div>
                <div>
                  <label className="block text-xs font-medium text-gray-500 mb-1.5">Teléfono</label>
                  <input value={form.phone} onChange={e => setForm(f => ({ ...f, phone: e.target.value }))}
                    className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-green-500" />
                </div>
                <div>
                  <label className="block text-xs font-medium text-gray-500 mb-1.5">Celular</label>
                  <input value={form.mobile} onChange={e => setForm(f => ({ ...f, mobile: e.target.value }))}
                    className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-green-500" />
                </div>
                <div>
                  <label className="block text-xs font-medium text-gray-500 mb-1.5">Orden</label>
                  <input type="number" value={form.order} onChange={e => setForm(f => ({ ...f, order: e.target.value }))}
                    className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-green-500" min="0" />
                </div>
              </div>
              <label className="flex items-center gap-2 cursor-pointer">
                <input type="checkbox" checked={form.active} onChange={e => setForm(f => ({ ...f, active: e.target.checked }))}
                  className="w-4 h-4 rounded accent-green-600" />
                <span className="text-sm text-gray-700">Contacto activo</span>
              </label>
            </div>
            <div className="p-5 border-t border-gray-100 flex justify-end gap-3">
              <button onClick={() => setModal(false)} className="px-4 py-2 text-sm text-gray-600">Cancelar</button>
              <button onClick={save} disabled={saving || !form.name}
                className="flex items-center gap-1.5 px-4 py-2 text-sm bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-60 font-medium">
                <CheckIcon className="w-4 h-4" />{saving ? 'Guardando...' : 'Guardar'}
              </button>
            </div>
          </div>
        </div>
      )}

      {confirmDel && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-xl shadow-2xl w-full max-w-sm p-6">
            <h3 className="font-semibold text-gray-800 mb-2">Eliminar contacto</h3>
            <p className="text-sm text-gray-500 mb-5">¿Eliminar a <strong>{confirmDel.name}</strong>?</p>
            <div className="flex justify-end gap-3">
              <button onClick={() => setConfirmDel(null)} className="px-4 py-2 text-sm text-gray-600">Cancelar</button>
              <button onClick={() => del(confirmDel)} className="px-4 py-2 text-sm bg-red-600 text-white rounded-lg">Eliminar</button>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}

function ContactCard({ e, canEdit, onEdit, onDel, inactive }: {
  e: Entry; canEdit: boolean
  onEdit: (e: Entry) => void; onDel: (e: Entry) => void; inactive?: boolean
}) {
  const initials = e.name.split(' ').slice(0, 2).map(w => w[0]).join('').toUpperCase()

  return (
    <div className={`bg-white rounded-xl border shadow-sm p-4 ${inactive ? 'border-dashed border-gray-200 opacity-60' : 'border-gray-100'}`}>
      <div className="flex items-start gap-3">
        <div className="w-10 h-10 rounded-full bg-green-100 text-green-700 flex items-center justify-center font-semibold text-sm flex-shrink-0">
          {initials}
        </div>
        <div className="flex-1 min-w-0">
          <p className="font-semibold text-gray-800 text-sm truncate">{e.name}</p>
          {e.position && <p className="text-xs text-gray-500 truncate">{e.position}</p>}
          {e.area && <p className="text-xs text-gray-400">{e.area}</p>}
        </div>
        {canEdit && (
          <div className="flex gap-1 flex-shrink-0">
            <button onClick={() => onEdit(e)} className="text-gray-300 hover:text-green-600"><PencilSquareIcon className="w-4 h-4" /></button>
            <button onClick={() => onDel(e)} className="text-gray-300 hover:text-red-500"><TrashIcon className="w-4 h-4" /></button>
          </div>
        )}
      </div>
      <div className="mt-3 space-y-1.5">
        {e.email && (
          <a href={`mailto:${e.email}`} className="flex items-center gap-2 text-xs text-gray-500 hover:text-green-600 truncate">
            <EnvelopeIcon className="w-3.5 h-3.5 flex-shrink-0" />{e.email}
          </a>
        )}
        {e.phone && (
          <a href={`tel:${e.phone}`} className="flex items-center gap-2 text-xs text-gray-500 hover:text-green-600">
            <PhoneIcon className="w-3.5 h-3.5 flex-shrink-0" />{e.phone}
          </a>
        )}
        {e.mobile && !e.phone && (
          <a href={`tel:${e.mobile}`} className="flex items-center gap-2 text-xs text-gray-500 hover:text-green-600">
            <PhoneIcon className="w-3.5 h-3.5 flex-shrink-0" />{e.mobile}
          </a>
        )}
      </div>
    </div>
  )
}