---
import SubpageLayout from '../layouts/SubpageLayout.astro';
import { getModelloOrganizzativo } from '../data/modello-organizzativo';

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

const localize = (href: string) => {
  if (currentLocale === 'it') return href;
  if (href.startsWith(`/${currentLocale}`)) return href;
  if (href.startsWith('/#')) return `/${currentLocale}${href}`;
  if (href.startsWith('/')) return `/${currentLocale}${href}`;
  return href;
};

const link = 'text-sky-400/90 underline-offset-2 hover:text-sky-300 hover:underline';
const tbl = 'min-w-[22rem] w-full border-collapse text-left text-sm';
const th = 'border border-nx-border bg-nx-surface/60 px-3 py-2 font-semibold text-nx-fg';
const td = 'border border-nx-border px-3 py-2 align-top text-nx-muted';
const tableWrap = 'mt-2 overflow-x-auto';
const mark = (on?: boolean) => (on ? '●' : '');
---

<SubpageLayout
  title={page.title}
  description={page.description}
  heading={page.heading}
  lead={page.lead}
>
  <div class="[&_h3]:mt-6 [&_h3]:text-base [&_h3]:font-semibold [&_h3]:text-nx-fg">
    <p class="border-l-2 border-sky-500/35 pl-4 text-sm leading-relaxed text-nx-muted">
      {m.introBox}
    </p>
    <p class="mt-3 text-sm leading-relaxed text-nx-muted sm:text-base">
      {m.perimetro}
    </p>

    <h2 id="indice" class="!mt-8">{page.indexTitle}</h2>
    <ol class="!mt-3 list-decimal space-y-1.5 pl-5 text-sm leading-relaxed sm:text-base">
      {
        page.index.map((item) => (
          <li>
            <a class={link} href={item.href}>
              {item.label}
            </a>
          </li>
        ))
      }
    </ol>

    <h2 id="ruoli">{page.sectionTitles.ruoli}</h2>
    <p>
      {page.ruoliIntroBefore}{' '}
      <a class={link} href={localize(page.codiceEticoHref)}>{page.codiceEticoLabel}</a>
      {' '}
      {page.ruoliIntroAfter}
    </p>
    <ul>
      {
        m.ruoli.map((r) => (
          <li>
            <strong>{r.label}:</strong> {r.text}
          </li>
        ))
      }
    </ul>

    <h2 id="governance">{page.sectionTitles.governance}</h2>
    <ul>
      {
        m.governance.map((g) => (
          <li>
            <strong>{g.nome}:</strong> {g.partecipanti}.{' '}
            <span class="text-nx-muted/95">— {g.nota}</span>
          </li>
        ))
      }
    </ul>

    <h2 id="responsabilita">{page.sectionTitles.responsabilita}</h2>
    <ul>
      {m.responsabilitaSintesi.map((l) => <li>{l}</li>)}
    </ul>

    <h2 id="raci">{page.sectionTitles.raci}</h2>
    <p>
      <strong>{page.raciLegendBefore}</strong> {page.raciLegend}
    </p>

    {
      m.raci.map((matrix) => (
        <>
          <h3 class:list={[matrix.id === 'raci-release' && '!mt-5']} id={matrix.id}>
            {matrix.title}
          </h3>
          {'note' in matrix && matrix.note ? (
            <p class="text-sm text-nx-muted sm:text-base">
              {matrix.note}{' '}
              <a class={link} href={localize(matrix.noteLinkHref!)}>
                {matrix.noteLinkLabel}
              </a>
              {'noteAfter' in matrix ? matrix.noteAfter : null}
            </p>
          ) : null}
          <div class={tableWrap}>
            <table class={tbl}>
              <thead>
                <tr>
                  <th class={th} scope="col">
                    {page.roleCol}
                  </th>
                  <th class={th} scope="col">
                    R
                  </th>
                  <th class={th} scope="col">
                    A
                  </th>
                  <th class={th} scope="col">
                    C
                  </th>
                  <th class={th} scope="col">
                    I
                  </th>
                </tr>
              </thead>
              <tbody>
                {matrix.rows.map((row) => (
                  <tr>
                    <td class={td}>{row.role}</td>
                    <td class={td}>{mark(row.r)}</td>
                    <td class={td}>{mark(row.a)}</td>
                    <td class={td}>{mark(row.c)}</td>
                    <td class={td}>{mark(row.i)}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </>
      ))
    }

    <h2 id="flussi">{page.sectionTitles.flussi}</h2>
    <ul>
      {
        m.flussiDecisionali.map((f) => (
          <li>
            <strong>{f.titolo}:</strong> {f.testo}
          </li>
        ))
      }
    </ul>

    <h2 id="controlli">{page.sectionTitles.controlli}</h2>
    <ul>
      {m.controlliLean.map((c) => <li>{c}</li>)}
    </ul>

    <h2 id="kpi">{page.sectionTitles.kpi}</h2>
    <ul>
      {
        m.kpi.map((k) => (
          <li>
            <strong>{k.area}:</strong> {k.testo}
          </li>
        ))
      }
    </ul>

    <h2 id="documentazione">{page.sectionTitles.documentazione}</h2>
    <ul>
      {m.documentazione.map((d) => <li>{d}</li>)}
    </ul>

    <h2 id="piano-30">{page.sectionTitles.piano30}</h2>
    <ol>
      {
        m.piano30.map((p) => (
          <li>
            <strong>{p.quando}:</strong> {p.testo}
          </li>
        ))
      }
    </ol>

    <h2 id="outsourcing">{page.sectionTitles.outsourcing}</h2>
    <ul>
      {
        m.outsourcing.map((o) => (
          <li>
            <strong>{o.titolo}:</strong> {o.testo}
          </li>
        ))
      }
    </ul>

    <h2 id="note">{page.sectionTitles.note}</h2>
    <ul>
      {m.note.map((n) => <li>{n}</li>)}
    </ul>
  </div>
</SubpageLayout>