"use client"

import { useLocale } from "next-intl"

/**
 * Les quatre services de la sécurité, en rayonnement autour du site.
 *
 * Même figure que celle du Nouveau laboratoire : l'objet à gauche, ce qu'il
 * couvre à droite. La page ne répondait jamais à la question que tout visiteur
 * francophone se pose, sûreté ou sécurité, deux mots quasi homonymes : les deux
 * services sont donc placés l'un sous l'autre, et l'opposition de leurs objets
 *, face à l'accident, face à l'intention malveillante, lève la confusion.
 */

const TRAIT = "#8d9aa5"
const ENCRE = "#374151"
const GRIS_TEXTE = "#6b7785"

/** Le site : colonne de distillation, cheminée, réservoirs. */
function PictoSite({ x: px, y: py, echelle }: { x: number; y: number; echelle: number }) {
  return (
    <g transform={`translate(${px} ${py}) scale(${echelle})`} fill="none" stroke={ENCRE} strokeWidth={1.5 / echelle}>
      <path d="M6 34 L6 12 Q6 6 12 6 Q18 6 18 12 L18 34 Z" />
      <line x1="6" y1="17" x2="18" y2="17" />
      <line x1="6" y1="24" x2="18" y2="24" />
      <path d="M24 34 L24 10 L29 10 L29 34" />
      <path d="M33 34 L33 22 Q40 18 47 22 L47 34 Z" />
      <line x1="33" y1="27" x2="47" y2="27" />
      <path d="M53 34 L53 26 Q59 23 65 26 L65 34 Z" />
      <line x1="0" y1="34" x2="70" y2="34" strokeWidth={1.8 / echelle} />
    </g>
  )
}

export default function SchemaPerimetresHsse() {
  const isFr = useLocale() !== "en"
  const t = (fr: string, en: string) => (isFr ? fr : en)

  // Les objets trop longs sont coupes en deux lignes : au-dela d'une soixantaine
  // de caracteres, le texte deborde la largeur de la figure.
  const services: { nom: string; l1: string; l2?: string }[] = [
    {
      nom: t("Sécurité", "Safety"),
      l1: t("les personnes et les opérations, face à l’accident", "people and operations, against accidents"),
    },
    {
      nom: t("Sûreté", "Security"),
      l1: t("la clôture, les accès et les pipelines,", "the fence, access points and pipelines,"),
      l2: t("face à l’intention malveillante", "against malicious intent"),
    },
    {
      nom: t("Inspection", "Inspection"),
      l1: t("l’intérieur des équipements, sous pression", "the inside of equipment, under pressure"),
    },
    {
      nom: t("Environnement", "Environment"),
      l1: t("l’air, l’eau et les sols, au-delà du site", "air, water and soil, beyond the site"),
    },
  ]

  const Y = [46, 84, 128, 166]

  return (
    <div className="overflow-x-auto">
      <svg viewBox="0 32 560 160" className="h-auto w-full min-w-[560px]" role="img"
           aria-label={t(
             "Quatre services veillent sur le site : la sécurité sur les personnes et les opérations face à l’accident, la sûreté sur la clôture et les accès face à l’intention malveillante, l’inspection sur l’intérieur des équipements, l’environnement sur l’air, l’eau et les sols.",
             "Four departments watch over the site: safety over people and operations against accidents, security over the fence and access points against malicious intent, inspection over the inside of equipment, environment over air, water and soil.")}>
        <defs>
          <marker id="pointe-hsse" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto">
            <path d="M0 0 L10 5 L0 10 Z" fill={TRAIT} />
          </marker>
        </defs>

        {/* Le site, à gauche */}
        <PictoSite x={26} y={70} echelle={1.4} />
        <text x="78" y="136" textAnchor="middle" fontSize="13" fontWeight="800" letterSpacing="1" fill={ENCRE}>
          SAR
        </text>

        {/* Le tronc et les quatre branches */}
        <line x1="136" y1="106" x2="206" y2="106" stroke={TRAIT} strokeWidth="1.6" />
        <line x1="206" y1={Y[0]} x2="206" y2={Y[3]} stroke={TRAIT} strokeWidth="1.6" />
        {Y.map((y) => (
          <line key={y} x1="206" y1={y} x2="252" y2={y} stroke={TRAIT} strokeWidth="1.6" markerEnd="url(#pointe-hsse)" />
        ))}

        {services.map((s, i) => (
          <g key={s.nom}>
            <text x="264" y={Y[i] + 1} fontSize="12" fontWeight="800" fill={ENCRE}>{s.nom}</text>
            <text x="264" y={Y[i] + 16} fontSize="10.5" fill={GRIS_TEXTE}>{s.l1}</text>
            {s.l2 && <text x="264" y={Y[i] + 30} fontSize="10.5" fill={GRIS_TEXTE}>{s.l2}</text>}
          </g>
        ))}
      </svg>
    </div>
  )
}