// components/SearchResults.js
import { h, each } from "../sigpro.js";
import { Button, Table, Loading } from "sigpro-ui";

export const SearchResults = ({ results, loading, error, onSelect }) => {
  const columns = [
    { label: 'Código', key: 'CodigoPoliza', class: 'font-mono text-xs' },
    { label: 'Mediador', key: 'CodigoMediador', class: 'text-xs' },
    { label: 'Nombre', key: 'Nombre', class: 'font-medium text-xs' },
    { label: 'Apellidos', key: 'Apellidos', class: 'text-xs' },
    { label: 'Documento', key: 'Documento', class: 'text-xs' },
    { label: 'Riesgo', key: 'Riesgo', class: 'text-xs' },
    { label: 'Ramo', key: 'Ramo', class: 'text-xs' },
    { label: 'Localidad', key: 'Localidad', class: 'text-xs' },
    { 
      label: '', 
      key: 'action',
      class: 'w-0 p-0',
      render: (item) => Button({
        class: 'btn btn-ghost btn-xs',
        onclick: (e) => {
          e.stopPropagation();
          onSelect?.(item);
        }
      }, 'Seleccionar')
    }
  ];

  return h('div', { class: 'p-3 space-y-2' }, [
    // Estado de carga
    () => loading() ? h('div', { class: 'flex justify-center items-center py-6' }, [
      Loading({ class: 'loading-md' }),
      h('span', { class: 'ml-2 text-sm opacity-70' }, 'Buscando...')
    ]) : null,

    // Error
    () => !loading() && error() ? h('div', { class: 'alert alert-error py-2 px-3 text-sm' }, [
      h('span', { class: 'icon-[lucide--alert-circle]' }),
      h('span', {}, error())
    ]) : null,

    // Contador de resultados
    () => !loading() && !error() && results().length > 0 ? 
      h('div', { class: 'text-xs opacity-60 px-1' }, 
        `${results().length} resultado${results().length !== 1 ? 's' : ''} encontrado${results().length !== 1 ? 's' : ''}`
      ) 
    : null,

    // Tabla de resultados
    () => !loading() && !error() && results().length > 0 ? 
      h('div', { class: 'overflow-x-auto w-full' }, [
        h('table', { class: 'table table-xs table-zebra table-pin-rows w-full' }, [
          h('thead', {}, [
            h('tr', {}, columns.map(col => 
              h('th', { class: col.class || '' }, col.label)
            ))
          ]),
          h('tbody', {}, 
            each(results, (item) => 
              h('tr', { 
                class: 'hover cursor-pointer',
                onclick: () => onSelect?.(item)
              }, columns.map(col => 
                h('td', { class: col.class || '' }, 
                  col.render ? col.render(item) : (item[col.key] || '')
                )
              ))
            )
          )
        ])
      ])
    : null,

    // Sin resultados
    () => !loading() && !error() && results().length === 0 ?
      h('div', { class: 'text-center py-6 text-base-content/50' }, [
        h('span', { class: 'icon-[lucide--search-x] text-2xl mb-2 block' }),
        h('span', { class: 'text-sm' }, 'No se encontraron resultados')
      ])
    : null,

    // Estado inicial (menos de 3 caracteres)
    () => !loading() && !error() && results().length === 0 ?
      h('div', { class: 'text-center py-4 text-base-content/40 text-xs' },
        'Escribe al menos 3 caracteres para buscar'
      )
    : null
  ]);
};