---
import type { Locale } from '../../data/site';
import type { CountryFormValues } from '../../lib/countries/form';
import type { IsoCountryOption } from '../../lib/countries/iso';
import { getCountryName } from '../../lib/countries/iso';
import { flagIconClass } from '../../lib/countries/flag';
import CountryPicker from './CountryPicker';
import RichTextEditor from './RichTextEditor';

interface Props {
  locale: Locale;
  form: CountryFormValues;
  isEdit?: boolean;
  isoCode?: string;
  countryOptions: IsoCountryOption[];
  excludeCodes: string[];
}

const { locale, form, isEdit = false, isoCode = '', countryOptions, excludeCodes } = Astro.props;

const localeSections: Array<{ key: 'ar' | 'en'; label: string; values: CountryFormValues['ar'] }> = [
  { key: 'ar', label: 'العربية / Arabic', values: form.ar },
  { key: 'en', label: 'English', values: form.en },
];

const optionalLabel = locale === 'ar' ? 'اختياري' : 'Optional';
const contentPlaceholder =
  locale === 'ar'
    ? 'أضف معلومات عن الاستقدام من هذه الدولة…'
    : 'Add information about recruiting from this country…';
---

<div class="space-y-8">
  <div class="space-y-4 rounded-box border border-base-300 bg-base-100 p-6">
    <h2 class="text-lg font-bold">{locale === 'ar' ? 'الدولة' : 'Country'}</h2>

    {
      isEdit && isoCode ? (
        <div class="flex items-center gap-4 rounded-box border border-base-300 bg-base-200/50 p-4">
          <span class={`${flagIconClass(isoCode)} text-4xl`} aria-hidden="true" />
          <div>
            <p class="font-bold">{getCountryName(isoCode, 'en')}</p>
            <p class="text-sm text-base-content/70">{getCountryName(isoCode, 'ar')}</p>
          </div>
        </div>
      ) : (
        <CountryPicker
          client:load
          options={countryOptions}
          excludeCodes={excludeCodes}
          initialCode={form.isoCode}
          labels={{
            search: locale === 'ar' ? 'ابحث عن دولة…' : 'Search for a country…',
            select: locale === 'ar' ? 'اختر الدولة' : 'Select country',
            alreadyAdded: locale === 'ar' ? 'مضافة' : 'Added',
            selected: locale === 'ar' ? 'الدولة المختارة' : 'Selected country',
          }}
        />
      )
    }

    <label class="form-control w-full max-w-xs">
      <span class="label-text mb-1 font-medium">{locale === 'ar' ? 'ترتيب العرض' : 'Sort order'}</span>
      <input type="number" name="sortOrder" value={form.sortOrder} class="input input-bordered w-full" />
    </label>
  </div>

  {
    localeSections.map(({ key, label, values }) => (
      <div class="space-y-4 rounded-box border border-base-300 bg-base-100 p-6">
        <h2 class="text-lg font-bold">{label}</h2>

        <label class="form-control w-full">
          <span class="label-text mb-1 font-medium">
            {locale === 'ar' ? 'وصف قصير' : 'Short description'}
            <span class="ms-1 text-base-content/50">({optionalLabel})</span>
          </span>
          <input
            type="text"
            name={`${key}_description`}
            value={values.description}
            class="input input-bordered w-full"
            placeholder={
              key === 'ar'
                ? 'يظهر تحت اسم الدولة في الصفحة'
                : 'Shown under the country name on the page'
            }
          />
        </label>

        <div class="form-control w-full">
          <span class="label-text mb-1 font-medium">
            {locale === 'ar' ? 'محتوى الصفحة' : 'Page content'}
            <span class="ms-1 text-base-content/50">({optionalLabel})</span>
          </span>
          <RichTextEditor
            client:load
            name={`${key}_body`}
            initialContent={values.body}
            locale={key}
            placeholder={contentPlaceholder}
          />
        </div>
      </div>
    ))
  }
</div>