---
import {
  cvProfessionLabels,
  cvMaritalLabels,
  cvEducationLabels,
  cvReligionLabels,
  cvServiceTypeLabels,
  cvPriceTypeLabels,
} from '../../content.config';
import type { Locale } from '../../data/site';
import type { CountryListItem } from '../../lib/countries';
import CvBasicsFields from '@/components/admin/cv-form/CvBasicsFields.astro';
import CvDetailsFields from '@/components/admin/cv-form/CvDetailsFields.astro';
import CvPhotoField from '@/components/admin/cv-form/CvPhotoField.astro';
import CvLocaleFields from '@/components/admin/cv-form/CvLocaleFields.astro';

export interface LocaleFields {
  name: string;
  experienceNote: string;
  languages: string;
  skills: string;
  bio: string;
}

interface Props {
  lang: Locale;
  country: string;
  profession: string;
  age: number | '';
  experienceYears: number | '';
  educationLevel: string;
  religion: string;
  serviceType: string;
  salary: number | '';
  priceType: string;
  hasVideo: boolean;
  featured: boolean;
  maritalStatus: string;
  currentPhoto: string | null;
  ar: LocaleFields;
  en: LocaleFields;
  skillOptions: Record<'ar' | 'en', string[]>;
  languageOptions: Record<'ar' | 'en', string[]>;
  countryOptions: CountryListItem[];
}

const props = Astro.props;
const optionalLabel = props.lang === 'ar' ? 'اختياري' : 'Optional';

const professions = Object.entries(cvProfessionLabels);
const educationLevels = Object.entries(cvEducationLabels);
const religions = Object.entries(cvReligionLabels);
const maritalStatuses = Object.entries(cvMaritalLabels);
const serviceTypes = Object.entries(cvServiceTypeLabels);
const priceTypes = Object.entries(cvPriceTypeLabels);

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

<div class="space-y-4 rounded-box border border-base-300 bg-base-100 p-6">
  <h2 class="text-lg font-bold">{props.lang === 'ar' ? 'الحقول المشتركة' : 'Shared fields'}</h2>
  <CvBasicsFields
    lang={props.lang}
    country={props.country}
    profession={props.profession}
    age={props.age}
    serviceType={props.serviceType}
    maritalStatus={props.maritalStatus}
    countryOptions={props.countryOptions}
    professions={professions}
    serviceTypes={serviceTypes}
    maritalStatuses={maritalStatuses}
    optionalLabel={optionalLabel}
  />
  <CvDetailsFields
    lang={props.lang}
    experienceYears={props.experienceYears}
    educationLevel={props.educationLevel}
    religion={props.religion}
    salary={props.salary}
    priceType={props.priceType}
    hasVideo={props.hasVideo}
    featured={props.featured}
    educationLevels={educationLevels}
    religions={religions}
    priceTypes={priceTypes}
    optionalLabel={optionalLabel}
  />
  <CvPhotoField lang={props.lang} currentPhoto={props.currentPhoto} optionalLabel={optionalLabel} />
</div>

{
  localeSections.map((section) => (
    <div class="mt-6 space-y-4 rounded-box border border-base-300 bg-base-100 p-6">
      <h2 class="text-lg font-bold">{section.label}</h2>
      <CvLocaleFields
        localeKey={section.key}
        values={section.values}
        languageOptions={props.languageOptions[section.key]}
        skillOptions={props.skillOptions[section.key]}
        optionalLabel={optionalLabel}
      />
    </div>
  ))
}