---
import SubpageLayout from '../layouts/SubpageLayout.astro';
import { getAllegatiCodiceEtico } from '../data/allegati-codice-etico';

const path = Astro.url.pathname;
const localeMatch = path.match(/^\/(en|th)(\/|$)/);
const currentLocale = (localeMatch?.[1] ?? 'it') as 'it' | 'en' | 'th';
const a = getAllegatiCodiceEtico(currentLocale);
const { page, allegati } = a;

const link = 'text-sky-400/90 underline-offset-2 hover:text-sky-300 hover:underline';

const isLabeledFields = (item: unknown): item is { label: string; fields: string[] } =>
  typeof item === 'object' && item !== null && 'label' in item && 'fields' in item;

const isLabeledText = (item: unknown): item is { label: string; text: string } =>
  typeof item === 'object' && item !== null && 'label' in item && 'text' in item;
---

<SubpageLayout
  title={page.title}
  description={page.description}
  heading={page.heading}
  lead={page.lead}
>
  <p class="mb-8 text-sm">
    <a class={link} href={`/${currentLocale === 'it' ? '' : currentLocale + '/'}codice-etico`}>
      {page.backLabel}
    </a>
  </p>

  <div class="space-y-16">
    {
      allegati.map((allegato) => (
        <section id={allegato.id} class="scroll-mt-8">
          <h2 class="border-b border-nx-border pb-2 text-xl font-bold text-nx-fg">
            {allegato.heading}
          </h2>
          <p class="mt-1 text-sm text-nx-muted">{allegato.description}</p>

          {allegato.intro ? (
            <p class="mt-4 text-sm italic text-nx-muted/90">{allegato.intro}</p>
          ) : null}

          <div class="mt-6 space-y-6">
            {
              allegato.sections.map((section) => (
                <div>
                  {section.title ? (
                    <h3 class="mb-3 text-base font-semibold text-nx-fg">{section.title}</h3>
                  ) : null}
                  {section.intro ? (
                    <p class="mb-3 text-sm text-nx-muted">{section.intro}</p>
                  ) : null}

                  {Array.isArray(section.content) ? (
                    section.content.length > 0 && typeof section.content[0] === 'string' ? (
                      <ul class="list-disc space-y-1.5 pl-5 text-sm leading-relaxed sm:text-base">
                        {(section.content as string[]).map((item) => (
                          <li>{item}</li>
                        ))}
                      </ul>
                    ) : section.content.length > 0 && isLabeledFields(section.content[0]) ? (
                      <dl class="space-y-3">
                        {(section.content as { label: string; fields: string[] }[]).map((item) => (
                          <div class="border-l-2 border-nx-border pl-4">
                            <dt class="text-sm font-medium text-nx-fg">{item.label}</dt>
                            <dd class="mt-0.5 font-mono text-sm text-nx-muted">
                              {item.fields.join('  |  ')}
                            </dd>
                          </div>
                        ))}
                      </dl>
                    ) : section.content.length > 0 && isLabeledText(section.content[0]) ? (
                      <dl class="space-y-3">
                        {(section.content as { label: string; text: string }[]).map((item) => (
                          <div class="border-l-2 border-nx-border pl-4">
                            <dt class="text-sm font-semibold text-nx-fg">{item.label}</dt>
                            <dd class="mt-0.5 text-sm leading-relaxed text-nx-muted">{item.text}</dd>
                          </div>
                        ))}
                      </dl>
                    ) : (
                      <p class="text-sm text-nx-muted">{String(section.content)}</p>
                    )
                  ) : (
                    <p class="text-sm leading-relaxed sm:text-base">{String(section.content)}</p>
                  )}

                  {section.note ? (
                    <p class="mt-3 border-l-2 border-sky-500/30 pl-4 text-sm leading-relaxed text-nx-muted">
                      {section.note}
                    </p>
                  ) : null}
                </div>
              ))
            }
          </div>

          {allegato.footer ? (
            <p class="mt-8 border-t border-nx-border pt-4 text-sm text-nx-fg">
              {allegato.footer}
            </p>
          ) : null}
        </section>
      ))
    }
  </div>
</SubpageLayout>