import { getTenantPerfil } from '@/db/tenant-queries';
import { actualizarEmpresa } from './actions';
import LogoUploader from '@/components/panel/LogoUploader';

export const dynamic = 'force-dynamic';

export default async function EmpresaPage() {
  const perfil = await getTenantPerfil();

  return (
    <div className="space-y-10 max-w-2xl">
      <div>
        <h1 className="text-2xl font-extrabold tracking-tight text-black">Datos de empresa</h1>
        <p className="text-sm text-gray-500 mt-1">
          Estos datos y el logo aparecen en la cabecera de los presupuestos en PDF que recibe el
          cliente. Manténlos al día.
        </p>
      </div>

      <section className="bg-white rounded-xl border border-gray-200 p-6">
        <h2 className="font-bold text-black mb-4">Logo</h2>
        <LogoUploader logoUrl={perfil.logoUrl} />
      </section>

      <section className="bg-white rounded-xl border border-gray-200 p-6">
        <h2 className="font-bold text-black mb-4">Identidad</h2>
        <form action={actualizarEmpresa} className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <label className="text-sm md:col-span-2">
            <span className="block text-gray-500 mb-1">Nombre de la empresa *</span>
            <input
              name="nombreEmpresa"
              required
              defaultValue={perfil.nombreEmpresa}
              className="w-full border border-gray-300 rounded-lg px-3 py-2"
            />
          </label>
          <label className="text-sm">
            <span className="block text-gray-500 mb-1">CIF / NIF</span>
            <input
              name="cif"
              defaultValue={perfil.cif ?? ''}
              className="w-full border border-gray-300 rounded-lg px-3 py-2"
            />
          </label>
          <label className="text-sm">
            <span className="block text-gray-500 mb-1">Provincia</span>
            <input
              name="provincia"
              defaultValue={perfil.provincia ?? ''}
              className="w-full border border-gray-300 rounded-lg px-3 py-2"
            />
          </label>
          <label className="text-sm md:col-span-2">
            <span className="block text-gray-500 mb-1">Dirección</span>
            <input
              name="direccion"
              defaultValue={perfil.direccion ?? ''}
              className="w-full border border-gray-300 rounded-lg px-3 py-2"
            />
          </label>
          <label className="text-sm">
            <span className="block text-gray-500 mb-1">Teléfono</span>
            <input
              name="telefono"
              defaultValue={perfil.telefono ?? ''}
              className="w-full border border-gray-300 rounded-lg px-3 py-2"
            />
          </label>
          <label className="text-sm">
            <span className="block text-gray-500 mb-1">Email</span>
            <input
              name="email"
              type="email"
              defaultValue={perfil.email ?? ''}
              className="w-full border border-gray-300 rounded-lg px-3 py-2"
            />
          </label>
          <label className="text-sm md:col-span-2">
            <span className="block text-gray-500 mb-1">Web</span>
            <input
              name="web"
              defaultValue={perfil.web ?? ''}
              className="w-full border border-gray-300 rounded-lg px-3 py-2"
            />
          </label>
          <button className="md:col-span-2 justify-self-start bg-black text-white rounded-lg px-4 py-2 text-sm font-medium">
            Guardar datos
          </button>
        </form>
      </section>
    </div>
  );
}