---
import Layout from '../layouts/Layout.astro';
import PaginatedGrid from '../components/PaginatedGrid.jsx';
import { searchMovies } from '../lib/api.js';

const q = Astro.url.searchParams.get('q') || '';
const page = parseInt(Astro.url.searchParams.get('page') || '1');

if (!q) {
  return Astro.redirect('/');
}

const data = await searchMovies(q, page);
---

<Layout
  title={`Tìm kiếm: ${q} - Trang ${page} | DPTXA`}
  description={`Kết quả tìm kiếm cho "${q}" trang ${page} tại DPTXA.`}
  slug={`/tim-kiem?q=${q}&page=${page}`}
>
  <div class="mx-auto max-w-7xl px-4 py-12">
    <div class="mb-12">
       <div class="flex items-center gap-3">
         <span class="h-10 w-2 rounded-full bg-primary shadow-[0_0_15px_rgba(229,9,20,0.5)]" />
         <h1 class="text-3xl font-black uppercase tracking-tighter text-white md:text-5xl">
           Kết quả: <span class="text-primary">{q}</span>
         </h1>
       </div>
       <p class="mt-4 text-xs font-black uppercase tracking-widest text-gray-500">Tìm thấy {data?.pagination?.totalItems || 0} kết quả phù hợp</p>
    </div>

    <PaginatedGrid 
       initialData={data} 
       query={q} 
       client:load 
    />
  </div>
</Layout>