import Link from 'next/link';
import type { Metadata } from 'next';
import { requireUser } from '@/lib/auth/current-user';
import { db } from '@/db';
import { tenants } from '@/db/schema';
import { eq } from 'drizzle-orm';

export const metadata: Metadata = {
  title: 'Panel · Reformix',
  description: 'Panel de leads del reformista',
};

export default async function PanelLayout({ children }: { children: React.ReactNode }) {
  const user = await requireUser();
  const [tenant] = user.tenantId
    ? await db.select().from(tenants).where(eq(tenants.id, user.tenantId)).limit(1)
    : [];
  const nombreEmpresa = tenant?.nombreEmpresa ?? 'Reformix';

  return (
    <div className="min-h-screen bg-gray-50">
      <header className="sticky top-0 z-10 bg-white border-b border-gray-200">
        <div className="max-w-6xl mx-auto px-6 h-16 flex items-center justify-between">
          <Link href="/panel" className="flex items-center gap-3">
            <span className="inline-flex items-center justify-center w-8 h-8 rounded-lg bg-black text-white font-black italic text-lg leading-none">
              R
            </span>
            <span className="font-extrabold tracking-tight text-black">Reformix</span>
            <span className="text-gray-300">/</span>
            <span className="text-sm font-medium text-gray-600">{nombreEmpresa}</span>
          </Link>
          <nav className="flex items-center gap-4 text-xs font-medium">
            <Link href="/panel" className="text-gray-500 hover:text-black">Leads</Link>
            <Link href="/panel/precios" className="text-gray-500 hover:text-black">Precios</Link>
            <form action="/logout" method="post">
              <button type="submit" className="text-gray-500 hover:text-black">Salir</button>
            </form>
          </nav>
        </div>
      </header>
      <main className="max-w-6xl mx-auto px-6 py-8">{children}</main>
    </div>
  );
}
