import { de } from '@/lib/i18n/de'
import { fillPlaceholders, isInputField } from '@/lib/templates/fields'
import { RedactedText } from '@/components/Redacted'
import { SectionEditor } from './SectionEditor'
import type { RenderedSection } from '@/lib/cases/sectionService'

/**
 * Abschnitte einer Fallakte: der aktuelle Sachstand, aus der Vorlage erzeugt.
 *
 * Feste Textbausteine der Vorlage werden gerendert, nicht bearbeitet — ihre
 * Platzhalter ziehen die Werte der Eingabefelder. Damit trägt dieselbe
 * Darstellung ein Formular und einen Vertragstext.
 */
export function Sections({
  caseNumber,
  sections,
  canEdit,
}: {
  caseNumber: string
  sections: RenderedSection[]
  canEdit: boolean
}) {
  if (sections.length === 0) {
    return <p className="text-text-dim">{de.section.empty}</p>
  }

  const werte = Object.fromEntries(
    sections.filter((s) => s.visible).map((s) => [s.fieldKey, s.value]),
  )

  return (
    <dl className="space-y-8">
      {sections.map((section) => {
        const field = section.field

        // Feste Bausteine der Vorlage.
        if (!isInputField(field)) {
          if (field.type === 'pagebreak') return <hr key={field.key} className="border-line" />
          if (field.type === 'signature') {
            return (
              <div key={field.key} className="pt-8">
                <div className="w-64 border-t border-line" />
                <p className="mt-1 text-2xs text-text-dim">{field.label}</p>
              </div>
            )
          }
          const text = fillPlaceholders(field.text ?? '', werte)
          return field.type === 'heading' ? (
            <h3 key={field.key} className="font-condensed">
              {text || field.label}
            </h3>
          ) : (
            <p key={field.key} className="max-w-(--container-measure) text-sm whitespace-pre-wrap">
              {text}
            </p>
          )
        }

        return (
          <div key={field.key}>
            <dt className="flex flex-wrap items-baseline gap-x-3">
              <span className="font-condensed text-xs text-text-dim">{field.label}</span>
              {field.requiredToClose ? (
                <span className="font-condensed text-2xs text-stamp-3">
                  {de.section.requiredToClose}
                </span>
              ) : null}
            </dt>
            <dd>
              {!section.visible ? (
                // Serverseitig ersetzt: der echte Wert ist gar nicht erst hier.
                <p className="mt-1.5 flex items-center gap-2">
                  <span className="redaction inline-block h-[1.1rem] w-40" aria-hidden />
                  <span className="font-mono text-2xs text-text-dim">
                    {de.section.lockedField(section.value.requiredLevel)}
                  </span>
                </p>
              ) : section.segments ? (
                <div className="mt-1.5">
                  <RedactedText segments={section.segments} />
                  {canEdit ? (
                    <SectionEditor
                      caseNumber={caseNumber}
                      fieldKey={field.key}
                      label={field.label}
                      type={field.type}
                      options={field.options}
                      requiredToClose={field.requiredToClose}
                      initialValue={section.value}
                      initialVersion={section.version}
                      readOnly={false}
                    />
                  ) : null}
                </div>
              ) : (
                <SectionEditor
                  caseNumber={caseNumber}
                  fieldKey={field.key}
                  label={field.label}
                  type={field.type}
                  options={field.options}
                  requiredToClose={field.requiredToClose}
                  initialValue={section.value}
                  initialVersion={section.version}
                  readOnly={!canEdit}
                />
              )}
            </dd>
          </div>
        )
      })}
    </dl>
  )
}