import { h } from "../jsx";

interface ProceedingDef {
  code: string;
  i18nKey: string;
  name: string;
}

function proceedingBtn(p: ProceedingDef): string {
  return (
    <button type="button" className="proceeding-btn" data-code={p.code}>
      <strong data-i18n={p.i18nKey}>{p.name}</strong>
    </button>
  );
}

// Slice B1 (m/paliad#124 §18.1): the 3 separate Berufung tiles
// (upc.apl.merits / upc.apl.cost / upc.apl.order) collapse into ONE
// unified "Berufung" tile (upc.apl). After picking it, the user
// selects which decision the appeal is directed AT via the
// .appeal-target-row chip group below — the engine then filters
// rules whose applies_to_target contains the picked slug.
const UPC_TYPES: ProceedingDef[] = [
  { code: "upc.inf.cfi",     i18nKey: "deadlines.upc.inf.cfi",     name: "Verletzungsverfahren" },
  { code: "upc.rev.cfi",     i18nKey: "deadlines.upc.rev.cfi",     name: "Nichtigkeitsklage" },
  { code: "upc.ccr.cfi",     i18nKey: "deadlines.upc.ccr.cfi",     name: "Widerklage auf Nichtigkeit" },
  { code: "upc.pi.cfi",      i18nKey: "deadlines.upc.pi.cfi",      name: "Einstw. Maßnahmen" },
  { code: "upc.apl.unified", i18nKey: "deadlines.upc.apl.unified", name: "Berufung" },
  { code: "upc.dmgs.cfi",    i18nKey: "deadlines.upc.dmgs.cfi",    name: "Schadensbemessung" },
  { code: "upc.disc.cfi",    i18nKey: "deadlines.upc.disc.cfi",    name: "Bucheinsicht" },
];

const DE_INF_TYPES: ProceedingDef[] = [
  { code: "de.inf.lg",  i18nKey: "deadlines.de.inf.lg",  name: "LG (1. Instanz)" },
  { code: "de.inf.olg", i18nKey: "deadlines.de.inf.olg", name: "OLG (Berufung)" },
  { code: "de.inf.bgh", i18nKey: "deadlines.de.inf.bgh", name: "BGH (Revision / NZB)" },
];

const DE_NULL_TYPES: ProceedingDef[] = [
  { code: "de.null.bpatg", i18nKey: "deadlines.de.null.bpatg", name: "BPatG (1. Instanz)" },
  { code: "de.null.bgh",   i18nKey: "deadlines.de.null.bgh",   name: "BGH (Berufung)" },
];

const EPA_TYPES: ProceedingDef[] = [
  { code: "epa.opp.opd",   i18nKey: "deadlines.epa.opp.opd",   name: "Einspruchsverfahren" },
  { code: "epa.opp.boa",   i18nKey: "deadlines.epa.opp.boa",   name: "Beschwerdeverfahren" },
  { code: "epa.grant.exa", i18nKey: "deadlines.epa.grant.exa", name: "EP-Erteilungsverfahren" },
];

const DPMA_TYPES: ProceedingDef[] = [
  { code: "dpma.opp.dpma",     i18nKey: "deadlines.dpma.opp.dpma",     name: "Einspruch DPMA" },
  { code: "dpma.appeal.bpatg", i18nKey: "deadlines.dpma.appeal.bpatg", name: "Beschwerde BPatG (DPMA)" },
  { code: "dpma.appeal.bgh",   i18nKey: "deadlines.dpma.appeal.bgh",   name: "Rechtsbeschwerde BGH" },
];

// Shared Verfahrensablauf wizard body. Renders the proceeding picker,
// perspective + date inputs, scenario flag rows, detail-mode toggle,
// view toggle, and the timeline-container that client/verfahrensablauf.ts
// (via initVerfahrensablauf()) wires against. Used by both
// /tools/verfahrensablauf (legacy) and /tools/procedures (unified).
export function VerfahrensablaufBody({ todayIso }: { todayIso: string }): string {
  return (
    <div className="fristen-wizard" id="verfahrensablauf-wizard" data-mode="procedure">
      <div className="wizard-step" id="step-1">
        <h3 className="wizard-step-label">
          <span className="step-number">1</span>
          <span data-i18n="deadlines.step1">Verfahrensart w&auml;hlen</span>
        </h3>

        <div className="proceeding-group" data-forum="upc">
          <h4 data-i18n="deadlines.upc">UPC</h4>
          <div className="proceeding-btns">
            {UPC_TYPES.map((p) => proceedingBtn(p))}
          </div>
        </div>

        <div className="proceeding-group" data-forum="de">
          <h4 data-i18n="deadlines.de">Deutsche Gerichte</h4>
          <div className="proceeding-subgroup">
            <h5 className="proceeding-subgroup-heading" data-i18n="deadlines.de.group.inf">Verletzungsverfahren</h5>
            <div className="proceeding-btns">
              {DE_INF_TYPES.map((p) => proceedingBtn(p))}
            </div>
          </div>
          <div className="proceeding-subgroup">
            <h5 className="proceeding-subgroup-heading" data-i18n="deadlines.de.group.null">Nichtigkeitsverfahren</h5>
            <div className="proceeding-btns">
              {DE_NULL_TYPES.map((p) => proceedingBtn(p))}
            </div>
          </div>
        </div>

        <div className="proceeding-group" data-forum="epa">
          <h4 data-i18n="deadlines.epa">EPA</h4>
          <div className="proceeding-btns">
            {EPA_TYPES.map((p) => proceedingBtn(p))}
          </div>
        </div>

        <div className="proceeding-group" data-forum="dpma">
          <h4 data-i18n="deadlines.dpma">DPMA</h4>
          <div className="proceeding-btns">
            {DPMA_TYPES.map((p) => proceedingBtn(p))}
          </div>
        </div>

        <div className="proceeding-summary" id="proceeding-summary" style="display:none" role="group">
          <span className="proceeding-summary-label" data-i18n="deadlines.proceeding.selected">Verfahren:</span>
          <strong className="proceeding-summary-name" id="proceeding-summary-name">&mdash;</strong>
          <button type="button" className="proceeding-summary-reselect" id="proceeding-summary-reselect"
                  data-i18n="deadlines.proceeding.reselect">
            Anderes Verfahren w&auml;hlen
          </button>
        </div>
      </div>

      <div className="wizard-step" id="step-2" style="display:none">
        <h3 className="wizard-step-label">
          <span className="step-number">2</span>
          <span data-i18n="deadlines.step2.perspective">Perspektive und Datum</span>
        </h3>

        <div className="verfahrensablauf-perspective" id="verfahrensablauf-perspective">
          <div className="verfahrensablauf-perspective-row" id="side-row">
            <span className="date-label" data-i18n="deadlines.side.label">Seite:</span>
            <div className="side-radio-cluster" id="side-radio-cluster">
              <div className="fristen-view-toggle" role="radiogroup" aria-label="Side">
                <label className="fristen-view-option">
                  <input type="radio" name="side" value="claimant" />
                  <span data-i18n="deadlines.side.claimant">Klägerseite</span>
                </label>
                <label className="fristen-view-option">
                  <input type="radio" name="side" value="defendant" />
                  <span data-i18n="deadlines.side.defendant">Beklagtenseite</span>
                </label>
                <label className="fristen-view-option">
                  <input type="radio" name="side" value="" checked />
                  <span data-i18n="deadlines.side.undefined">Nicht festgelegt</span>
                </label>
              </div>
              <span className="side-hint" id="side-hint"
                    data-i18n="deadlines.side.hint">
                W&auml;hlen Sie eine Seite, um die Spalten zu fokussieren.
              </span>
            </div>
            <div className="side-chip" id="side-chip" style="display:none">
              <span className="side-chip-tag" data-i18n="deadlines.side.from_project">Aus Akte:</span>
              <strong className="side-chip-value" id="side-chip-value">&mdash;</strong>
              <button type="button" className="side-chip-override" id="side-chip-override"
                      data-i18n="deadlines.side.override">
                Andere Seite w&auml;hlen
              </button>
            </div>
          </div>
          <div className="verfahrensablauf-perspective-row" id="appeal-target-row" style="display:none">
            <span className="date-label" data-i18n="deadlines.appeal_target.label">Worauf richtet sich die Berufung?</span>
            <div className="fristen-view-toggle" role="radiogroup" aria-label="Appeal target">
              <label className="fristen-view-option">
                <input type="radio" name="appeal-target" value="endentscheidung" checked />
                <span data-i18n="deadlines.appeal_target.endentscheidung">Endentscheidung</span>
              </label>
              <label className="fristen-view-option">
                <input type="radio" name="appeal-target" value="kostenentscheidung" />
                <span data-i18n="deadlines.appeal_target.kostenentscheidung">Kostenentscheidung</span>
              </label>
              <label className="fristen-view-option">
                <input type="radio" name="appeal-target" value="anordnung" />
                <span data-i18n="deadlines.appeal_target.anordnung">Anordnung</span>
              </label>
              <label className="fristen-view-option">
                <input type="radio" name="appeal-target" value="schadensbemessung" />
                <span data-i18n="deadlines.appeal_target.schadensbemessung">Schadensbemessung</span>
              </label>
              <label className="fristen-view-option">
                <input type="radio" name="appeal-target" value="bucheinsicht" />
                <span data-i18n="deadlines.appeal_target.bucheinsicht">Bucheinsicht</span>
              </label>
            </div>
          </div>
          <div className="verfahrensablauf-perspective-row" id="show-hidden-row" style="display:none">
            <label className="fristen-view-option">
              <input type="checkbox" id="show-hidden-toggle" />
              <span data-i18n="choices.show_hidden.label">Ausgeblendete anzeigen</span>
            </label>
            <span className="show-hidden-count" id="show-hidden-count" aria-live="polite">&nbsp;</span>
          </div>
        </div>

        <div className="verfahrensablauf-step2-divider" aria-hidden="true"></div>

        <div className="date-input-group">
          <div className="date-field-row">
            <span className="date-label" data-i18n="deadlines.trigger.event">Ausl&ouml;sendes Ereignis:</span>
            <span id="trigger-event" className="trigger-event-name">&mdash;</span>
          </div>
          <div className="date-field-row">
            <label htmlFor="trigger-date" className="date-label" data-i18n="deadlines.trigger.date">Datum:</label>
            <input type="date" id="trigger-date" className="date-input" value={todayIso} />
          </div>
          <div className="date-field-row" id="court-picker-row" style="display:none">
            <label htmlFor="court-picker" className="date-label" data-i18n="deadlines.court.label">Gericht:</label>
            <select id="court-picker" className="date-input"></select>
          </div>
          <div className="date-field-row" id="ccr-flag-row" style="display:none">
            <label className="date-label">
              <input type="checkbox" id="ccr-flag" />
              <span data-i18n="deadlines.flag.ccr">Mit Widerklage auf Nichtigkeit</span>
            </label>
          </div>
          <div className="date-field-row date-field-row--nested" id="inf-amend-flag-row" style="display:none">
            <label className="date-label">
              <input type="checkbox" id="inf-amend-flag" />
              <span data-i18n="deadlines.flag.inf_amend">Mit Antrag auf Patent&auml;nderung (R.30)</span>
            </label>
          </div>
          <div className="date-field-row" id="rev-amend-flag-row" style="display:none">
            <label className="date-label">
              <input type="checkbox" id="rev-amend-flag" />
              <span data-i18n="deadlines.flag.rev_amend">Mit Antrag auf Patent&auml;nderung (R.49.2.a)</span>
            </label>
          </div>
          <div className="date-field-row" id="rev-cci-flag-row" style="display:none">
            <label className="date-label">
              <input type="checkbox" id="rev-cci-flag" />
              <span data-i18n="deadlines.flag.rev_cci">Mit Verletzungswiderklage (R.49.2.b)</span>
            </label>
          </div>
          <button type="button" id="calculate-btn" className="calculate-btn" data-i18n="deadlines.calculate">
            Fristen berechnen
          </button>
        </div>
      </div>

      <div className="wizard-step" id="step-3" style="display:none">
        <h3 className="wizard-step-label">
          <span className="step-number">3</span>
          <span data-i18n="deadlines.step3">Ergebnis</span>
        </h3>

        <div className="verfahrensablauf-detail-toggle" id="verfahrensablauf-detail-toggle"
             role="radiogroup" aria-label="Detail">
          <span className="fristen-view-label" data-i18n="deadlines.detail.label">Anzeige:</span>
          <label className="fristen-view-option">
            <input type="radio" name="detail-mode" value="mandatory_only" />
            <span data-i18n="deadlines.detail.mandatory_only">Nur Pflicht</span>
          </label>
          <label className="fristen-view-option">
            <input type="radio" name="detail-mode" value="selected" checked />
            <span data-i18n="deadlines.detail.selected">Gewählt</span>
          </label>
          <label className="fristen-view-option">
            <input type="radio" name="detail-mode" value="all_options" />
            <span data-i18n="deadlines.detail.all_options">Alle Optionen</span>
          </label>
        </div>

        <div className="fristen-view-toggle" id="fristen-view-toggle" role="radiogroup" aria-label="Ansicht">
          <span className="fristen-view-label" data-i18n="deadlines.view.label">Ansicht:</span>
          <label className="fristen-view-option">
            <input type="radio" name="fristen-view" value="columns" checked />
            <span data-i18n="deadlines.view.columns">Spalten</span>
          </label>
          <label className="fristen-view-option">
            <input type="radio" name="fristen-view" value="timeline" />
            <span data-i18n="deadlines.view.timeline">Zeitstrahl</span>
          </label>
          <label className="fristen-notes-option">
            <input type="checkbox" id="fristen-notes-show" />
            <span data-i18n="deadlines.notes.show">Hinweise anzeigen</span>
          </label>
          <label className="fristen-notes-option">
            <input type="checkbox" id="verfahrensablauf-durations-show" />
            <span data-i18n="deadlines.durations.show">Dauern anzeigen</span>
          </label>
        </div>

        <div id="timeline-container">
        </div>

        <div className="fristen-result-actions">
          <button type="button" id="fristen-print-btn" className="print-btn" style="display:none">
            <svg className="print-btn-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
              <polyline points="6 9 6 2 18 2 18 9"></polyline>
              <path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"></path>
              <rect x="6" y="14" width="12" height="8"></rect>
            </svg>
            <span data-i18n="deadlines.print">Drucken</span>
          </button>
        </div>
      </div>
    </div>
  );
}
