---
import { localizedPath } from '@/i18n/utils';
import { flagIconClass } from '@/lib/countries/flag';
import { cvProfessionLabels } from '@/content.config';
import { listCvsForAdminPaginated, type CvListFilters } from '@/lib/admin/cv-actions';
import { formatAdminDate } from '@/lib/admin/format';
import { getAllCountries } from '@/lib/countries';
import AdminPageHint from '@/components/admin/AdminPageHint.astro';
import FlashMessage from '@/components/admin/FlashMessage.astro';
import type { Locale } from '@/data/site';

interface Props {
  lang: Locale;
}

const { lang } = Astro.props;
const params = Astro.url.searchParams;

const filters: CvListFilters = {
  q: params.get('q')?.trim() || undefined,
  country: params.get('country') || undefined,
  profession: params.get('profession') || undefined,
  featured: params.get('featured') === '1',
  sort: params.get('sort') === 'name' ? 'name' : 'newest',
};

const pageParam = Number.parseInt(params.get('page') ?? '1', 10);
const requestedPage = Number.isFinite(pageParam) && pageParam > 0 ? pageParam : 1;

const [{ rows, total, page, pageSize, totalPages }, countryOptions] = await Promise.all([
  listCvsForAdminPaginated(lang, filters, requestedPage),
  getAllCountries(),
]);
const professionOptions = Object.entries(cvProfessionLabels);

const success = params.get('success');
const error = params.get('error');

const hasActiveFilters = Boolean(
  filters.q || filters.country || filters.profession || filters.featured || filters.sort === 'name',
);

function listHref(nextPage?: number): string {
  const base = localizedPath(lang, 'admin/cvs');
  const query = new URLSearchParams();
  const pageNum = nextPage ?? page;

  if (filters.q) query.set('q', filters.q);
  if (filters.country) query.set('country', filters.country);
  if (filters.profession) query.set('profession', filters.profession);
  if (filters.featured) query.set('featured', '1');
  if (filters.sort === 'name') query.set('sort', 'name');
  if (pageNum > 1) query.set('page', String(pageNum));

  const qs = query.toString();
  return qs ? `${base}?${qs}` : base;
}

const rangeStart = total === 0 ? 0 : (page - 1) * pageSize + 1;
const rangeEnd = Math.min(page * pageSize, total);
---

<AdminPageHint
  tone="website"
  icon="users"
  text={
    lang === 'ar'
      ? 'السير الذاتية المعروضة على الموقع — يمكنك إضافتها وتعديلها وتفعيل التمييز.'
      : 'CV profiles shown on the website — add, edit, and feature them here.'
  }
/>

<div class="mb-6 flex flex-col gap-4">
  <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
    <p class="text-base-content/60">
      {
        total === 0
          ? lang === 'ar'
            ? 'لا توجد نتائج'
            : 'No results'
          : lang === 'ar'
            ? `عرض ${rangeStart}–${rangeEnd} من ${total} نتيجة`
            : `Showing ${rangeStart}–${rangeEnd} of ${total} results`
      }
    </p>
    <a href={localizedPath(lang, 'admin/cvs/new')} class="btn btn-primary">
      {lang === 'ar' ? '+ سيرة جديدة' : '+ New CV'}
    </a>
  </div>

  <FlashMessage success={success} error={error} locale={lang} />

  <form method="GET" class="flex flex-wrap items-end gap-3 rounded-box border border-accent/25 bg-accent/5 p-4">
    <label class="form-control">
      <span class="label-text mb-1 text-xs">{lang === 'ar' ? 'بحث' : 'Search'}</span>
      <input
        type="text"
        name="q"
        value={filters.q ?? ''}
        placeholder={lang === 'ar' ? 'اسم...' : 'Name...'}
        class="input input-sm input-bordered w-40 sm:w-48"
      />
    </label>
    <label class="form-control">
      <span class="label-text mb-1 text-xs">{lang === 'ar' ? 'الجنسية' : 'Country'}</span>
      <select name="country" class="select select-sm select-bordered w-36 sm:w-40">
        <option value="">{lang === 'ar' ? 'الكل' : 'All'}</option>
        {
          countryOptions.map((c) => (
            <option value={c.slug} selected={c.slug === filters.country}>
              {lang === 'ar' ? c.titleAr : c.titleEn}
            </option>
          ))
        }
      </select>
    </label>
    <label class="form-control">
      <span class="label-text mb-1 text-xs">{lang === 'ar' ? 'المهنة' : 'Profession'}</span>
      <select name="profession" class="select select-sm select-bordered w-36 sm:w-40">
        <option value="">{lang === 'ar' ? 'الكل' : 'All'}</option>
        {
          professionOptions.map(([value, label]) => (
            <option value={value} selected={value === filters.profession}>
              {label[lang]}
            </option>
          ))
        }
      </select>
    </label>
    <label class="flex cursor-pointer items-center gap-2 pb-1.5">
      <input type="checkbox" name="featured" value="1" checked={filters.featured} class="checkbox checkbox-sm" />
      <span class="text-sm">{lang === 'ar' ? 'مميزة فقط' : 'Featured only'}</span>
    </label>
    <label class="form-control">
      <span class="label-text mb-1 text-xs">{lang === 'ar' ? 'الترتيب' : 'Sort'}</span>
      <select name="sort" class="select select-sm select-bordered w-32 sm:w-36">
        <option value="newest" selected={filters.sort === 'newest'}>
          {lang === 'ar' ? 'الأحدث' : 'Newest'}
        </option>
        <option value="name" selected={filters.sort === 'name'}>
          {lang === 'ar' ? 'الاسم' : 'Name'}
        </option>
      </select>
    </label>
    <button type="submit" class="btn btn-sm btn-outline">{lang === 'ar' ? 'تصفية' : 'Filter'}</button>
    {
      hasActiveFilters && (
        <a href={localizedPath(lang, 'admin/cvs')} class="btn btn-sm btn-ghost">
          {lang === 'ar' ? 'إعادة ضبط' : 'Reset'}
        </a>
      )
    }
  </form>
</div>

<div class="overflow-x-auto rounded-box border border-accent/25 bg-base-100">
  <table class="table">
    <thead>
      <tr>
        <th></th>
        <th>{lang === 'ar' ? 'الاسم' : 'Name'}</th>
        <th>{lang === 'ar' ? 'تاريخ الإضافة' : 'Added'}</th>
        <th>{lang === 'ar' ? 'الجنسية' : 'Country'}</th>
        <th>{lang === 'ar' ? 'المهنة' : 'Profession'}</th>
        <th>{lang === 'ar' ? 'نوع الطلب' : 'Service type'}</th>
        <th>{lang === 'ar' ? 'مميزة' : 'Featured'}</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      {
        rows.length === 0 ? (
          <tr>
            <td colspan="8" class="text-center text-base-content/60">
              {lang === 'ar' ? 'لا توجد نتائج مطابقة.' : 'No matching CVs.'}
            </td>
          </tr>
        ) : (
          rows.map((row) => (
            <tr>
              <td>
                {row.photo ? (
                  <img src={row.photo} alt="" class="h-10 w-10 rounded-full object-cover" />
                ) : (
                  <div class="h-10 w-10 rounded-full bg-base-200" />
                )}
              </td>
              <td>{row.name}</td>
              <td class="whitespace-nowrap text-sm text-base-content/70">
                {formatAdminDate(row.createdAt, lang)}
              </td>
              <td>
                <span class={flagIconClass(row.countryLabel.isoCode)} aria-hidden="true" /> {row.countryLabel[lang]}
              </td>
              <td>{row.professionLabel}</td>
              <td>{row.serviceTypeLabel}</td>
              <td>
                <div class="flex gap-1">
                  {row.featured && <span class="badge badge-warning badge-sm">★</span>}
                  {row.hasVideo && <span class="badge badge-info badge-sm">▶</span>}
                </div>
              </td>
              <td>
                <div class="flex gap-2">
                  <a href={localizedPath(lang, `admin/cvs/${encodeURIComponent(row.slug)}/edit`)} class="btn btn-xs btn-outline">
                    {lang === 'ar' ? 'تعديل' : 'Edit'}
                  </a>
                  <form
                    method="POST"
                    action={`/api/admin/cvs/${encodeURIComponent(row.slug)}`}
                    onsubmit="return confirm('Delete this CV? This cannot be undone.')"
                  >
                    <input type="hidden" name="lang" value={lang} />
                    <input type="hidden" name="fromList" value="1" />
                    <input type="hidden" name="listPage" value={page} />
                    {filters.q && <input type="hidden" name="listQ" value={filters.q} />}
                    {filters.country && <input type="hidden" name="listCountry" value={filters.country} />}
                    {filters.profession && <input type="hidden" name="listProfession" value={filters.profession} />}
                    {filters.featured && <input type="hidden" name="listFeatured" value="1" />}
                    {filters.sort === 'name' && <input type="hidden" name="listSort" value="name" />}
                    <button type="submit" class="btn btn-xs btn-error btn-outline">
                      {lang === 'ar' ? 'حذف' : 'Delete'}
                    </button>
                  </form>
                </div>
              </td>
            </tr>
          ))
        )
      }
    </tbody>
  </table>
</div>

{
  totalPages > 1 && (
    <div class="mt-4 flex flex-col items-center gap-3 sm:flex-row sm:justify-between">
      <p class="text-sm text-base-content/60">
        {lang === 'ar' ? `صفحة ${page} من ${totalPages}` : `Page ${page} of ${totalPages}`}
      </p>
      <div class="join">
        {
          page > 1 ? (
            <a href={listHref(page - 1)} class="join-item btn btn-sm">
              {lang === 'ar' ? 'السابق' : 'Previous'}
            </a>
          ) : (
            <span class="join-item btn btn-sm btn-disabled">{lang === 'ar' ? 'السابق' : 'Previous'}</span>
          )
        }
        {
          page < totalPages ? (
            <a href={listHref(page + 1)} class="join-item btn btn-sm">
              {lang === 'ar' ? 'التالي' : 'Next'}
            </a>
          ) : (
            <span class="join-item btn btn-sm btn-disabled">{lang === 'ar' ? 'التالي' : 'Next'}</span>
          )
        }
      </div>
    </div>
  )
}