import { getPricingConfig, getCatalog, getEnvioMode } from '@/db/pricing-queries';
import {
  crearMaterial,
  actualizarPrecio,
  borrarMaterial,
  actualizarConfig,
  actualizarExtras,
  actualizarEnvio,
  importarCatalogoCsv,
} from './actions';

export const dynamic = 'force-dynamic';

const CATEGORIAS = ['suelo', 'pared', 'pintura', 'mobiliario'] as const;
const CATEGORIA_LABEL: Record<(typeof CATEGORIAS)[number], string> = {
  suelo: 'Suelos',
  pared: 'Paredes / alicatado',
  pintura: 'Pinturas',
  mobiliario: 'Mobiliario',
};

export default async function PreciosPage() {
  const [config, catalog, envioMode] = await Promise.all([
    getPricingConfig(),
    getCatalog(),
    getEnvioMode(),
  ]);

  return (
    <div className="space-y-10">
      <div>
        <h1 className="font-display text-3xl tracking-tight text-black">Tabla de precios</h1>
        <p className="text-sm text-gray-500 mt-1">
          Define los precios unitarios y la mano de obra. El motor calcula el presupuesto a
          partir de estos valores y las medidas del lead.
        </p>
      </div>

      {/* Envío de presupuestos */}
      <section className="bg-white rounded-xl border border-gray-200 p-6">
        <h2 className="font-bold text-black mb-1">Envío de presupuestos</h2>
        <p className="text-sm text-gray-500 mb-4">
          Decide si el presupuesto se entrega al cliente automáticamente al final del funnel o si
          quieres revisarlo y editar los conceptos antes de enviarlo.
        </p>
        <form action={actualizarEnvio} className="flex flex-col gap-3">
          <label className="flex items-start gap-3 text-sm cursor-pointer">
            <input
              type="radio"
              name="modo"
              value="automatico"
              defaultChecked={envioMode === 'automatico'}
              className="mt-1"
            />
            <span>
              <span className="block font-medium text-black">Envío automático</span>
              <span className="block text-gray-500">
                El cliente recibe el presupuesto por WhatsApp en cuanto el funnel lo genera.
              </span>
            </span>
          </label>
          <label className="flex items-start gap-3 text-sm cursor-pointer">
            <input
              type="radio"
              name="modo"
              value="revision"
              defaultChecked={envioMode === 'revision'}
              className="mt-1"
            />
            <span>
              <span className="block font-medium text-black">Revisar antes de enviar</span>
              <span className="block text-gray-500">
                El funnel se detiene en cada lead para que revises los conceptos y pulses enviar.
              </span>
            </span>
          </label>
          <button className="self-start bg-primary-700 text-white rounded-lg px-4 py-2 text-sm font-medium">
            Guardar preferencia
          </button>
        </form>
      </section>

      {/* Config general */}
      <section className="bg-white rounded-xl border border-gray-200 p-6">
        <h2 className="font-bold text-black mb-4">Configuración general</h2>
        <form action={actualizarConfig} className="grid grid-cols-2 md:grid-cols-5 gap-3 items-end">
          <label className="text-sm">
            <span className="block text-xs text-gray-500 mb-1">Altura techo (m)</span>
            <input
              name="alturaTechoDefault"
              type="number"
              step="0.1"
              defaultValue={config.alturaTechoDefault}
              className="w-full border border-gray-300 rounded-lg px-2 py-1.5"
            />
          </label>
          {(
            [
              ['demolicion', 'Demolición'],
              ['impermeabilizacion', 'Impermeabilización'],
              ['fontaneria', 'Fontanería'],
              ['electricidad', 'Electricidad'],
              ['mano_de_obra', 'Mano de obra'],
            ] as const
          ).map(([k, etiqueta]) => (
            <label key={k} className="text-sm">
              <span className="block text-xs text-gray-500 mb-1">{etiqueta} (€/m²)</span>
              <input
                name={`mo_${k}`}
                type="number"
                step="0.01"
                defaultValue={(config.manoObra[k] ?? 0) / 100}
                className="w-full border border-gray-300 rounded-lg px-2 py-1.5"
              />
            </label>
          ))}
          <button className="col-span-2 md:col-span-5 justify-self-start bg-primary-700 text-white rounded-lg px-4 py-2 text-sm font-medium">
            Guardar configuración
          </button>
        </form>
      </section>

      {/* Extras fijos */}
      <section className="bg-white rounded-xl border border-gray-200 p-6">
        <h2 className="font-bold text-black mb-1">Extras fijos</h2>
        <p className="text-sm text-gray-500 mb-4">
          Importes fijos que no escalan con los metros. El boletín eléctrico se aplica siempre; las
          tuberías solo en pisos anteriores al año 2000 y la distribución al mover inodoro, ducha o
          bañera.
        </p>
        <form action={actualizarExtras} className="grid grid-cols-2 md:grid-cols-3 gap-3 items-end">
          {(
            [
              ['tuberias', 'Renovación de tuberías'],
              ['boletin', 'Boletín eléctrico'],
              ['distribucion', 'Cambio de distribución'],
            ] as const
          ).map(([k, etiqueta]) => (
            <label key={k} className="text-sm">
              <span className="block text-xs text-gray-500 mb-1">{etiqueta} (€)</span>
              <input
                name={`extra_${k}`}
                type="number"
                step="0.01"
                defaultValue={(config.extras?.[k] ?? 0) / 100}
                className="w-full border border-gray-300 rounded-lg px-2 py-1.5"
              />
            </label>
          ))}
          <button className="col-span-2 md:col-span-3 justify-self-start bg-primary-700 text-white rounded-lg px-4 py-2 text-sm font-medium">
            Guardar extras
          </button>
        </form>
      </section>

      {/* Catálogo por categoría */}
      {CATEGORIAS.map((categoria) => {
        const items = catalog.filter((c) => c.categoria === categoria);
        return (
          <section key={categoria} className="bg-white rounded-xl border border-gray-200 p-6">
            <h2 className="font-bold text-black mb-4">{CATEGORIA_LABEL[categoria]}</h2>
            <div className="space-y-2">
              {items.length === 0 && <p className="text-sm text-gray-400">Sin materiales.</p>}
              {items.map((item) => (
                <div
                  key={item.id}
                  className="flex flex-col gap-2 border-b border-gray-100 pb-3 text-sm sm:flex-row sm:items-center sm:gap-3 sm:pb-2"
                >
                  <div className="min-w-0 sm:flex-1">
                    <div className="font-medium text-black">{item.nombre}</div>
                    <div className="mt-0.5 flex items-center gap-2 text-xs text-gray-500">
                      <span className="capitalize">{item.calidad}</span>
                      <span className="text-gray-300">·</span>
                      <span>{item.unidad}</span>
                      {item.esDefault && (
                        <span className="bg-green-100 text-green-700 rounded px-1.5 py-0.5">default</span>
                      )}
                    </div>
                  </div>
                  <div className="flex items-center gap-3">
                    <form action={actualizarPrecio} className="flex items-center gap-2">
                      <input type="hidden" name="id" value={item.id} />
                      <div className="relative">
                        <input
                          name="precioEuros"
                          type="number"
                          step="0.01"
                          defaultValue={item.precioUnit / 100}
                          className="w-28 border border-gray-300 rounded-lg pl-3 pr-7 py-1.5 text-right"
                          aria-label={`Precio de ${item.nombre}`}
                        />
                        <span className="pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 text-gray-400">
                          €
                        </span>
                      </div>
                      <button className="text-xs font-medium text-blue-600 hover:underline">Guardar</button>
                    </form>
                    <form action={borrarMaterial}>
                      <input type="hidden" name="id" value={item.id} />
                      <button className="text-xs text-red-500 hover:underline">Borrar</button>
                    </form>
                  </div>
                </div>
              ))}
            </div>

            <form
              action={crearMaterial}
              className="mt-5 grid grid-cols-2 gap-2 border-t border-gray-100 pt-4 text-sm sm:flex sm:flex-wrap sm:items-end sm:border-t-0 sm:pt-0"
            >
              <input type="hidden" name="categoria" value={categoria} />
              <input
                name="nombre"
                placeholder="Nombre"
                required
                className="col-span-2 border border-gray-300 rounded-lg px-2 py-1.5 sm:col-auto"
              />
              <select name="calidad" className="border border-gray-300 rounded-lg px-2 py-1.5">
                <option value="basica">Básica</option>
                <option value="media">Media</option>
                <option value="premium">Premium</option>
              </select>
              <input
                name="precioEuros"
                type="number"
                step="0.01"
                placeholder="Precio €"
                required
                className="border border-gray-300 rounded-lg px-2 py-1.5 sm:w-24"
              />
              <select name="unidad" className="border border-gray-300 rounded-lg px-2 py-1.5">
                <option value="m2">m²</option>
                <option value="ml">ml</option>
                <option value="ud">ud</option>
              </select>
              <input
                name="sku"
                placeholder="SKU"
                required
                className="border border-gray-300 rounded-lg px-2 py-1.5 sm:w-28"
              />
              <input
                name="descriptorRender"
                placeholder="Descriptor render (opcional)"
                className="col-span-2 border border-gray-300 rounded-lg px-2 py-1.5 sm:col-auto sm:flex-1 sm:min-w-40"
              />
              <label className="col-span-2 flex items-center gap-2 text-gray-500 sm:col-auto">
                <input type="checkbox" name="esDefault" /> Marcar como default
              </label>
              <button className="col-span-2 bg-primary-700 text-white rounded-lg px-3 py-2 font-medium sm:col-auto sm:py-1.5">
                Añadir
              </button>
            </form>
          </section>
        );
      })}

      {/* Import CSV */}
      <section className="bg-white rounded-xl border border-gray-200 p-6">
        <h2 className="font-bold text-black mb-2">Importar catálogo (CSV)</h2>
        <p className="text-xs text-gray-500 mb-3">
          Cabecera: <code className="break-all">categoria,nombre,calidad,precio,unidad,descriptor_render,sku</code>. El
          precio en euros. Actualiza por SKU.
        </p>
        <form action={importarCatalogoCsv as unknown as (fd: FormData) => void}>
          <textarea
            name="csv"
            rows={5}
            placeholder="categoria,nombre,calidad,precio,unidad,descriptor_render,sku"
            className="w-full border border-gray-300 rounded-lg px-3 py-2 font-mono text-xs"
          />
          <button className="mt-2 bg-primary-700 text-white rounded-lg px-4 py-2 text-sm font-medium">
            Importar
          </button>
        </form>
      </section>
    </div>
  );
}
