import { h } from "./jsx";
import { Sidebar } from "./components/Sidebar";
import { PaliadinWidget } from "./components/PaliadinWidget";
import { BottomNav } from "./components/BottomNav";
import { Footer } from "./components/Footer";
import { PWAHead } from "./components/PWAHead";

// Slice 1 (t-paliad-179) — the dedicated abstract-browse surface for
// procedural shape. Same backend (POST /api/tools/fristenrechner) +
// same renderer module (./client/views/verfahrensablauf-core) as
// /tools/fristenrechner; this page strips the Step 1 Akte picker /
// Step 2 cards / Pathway A wizard / Pathway B cascade / save modal,
// leaving just: proceeding-type tile picker + trigger date + court
// picker + result panel. Variant chips, lane view and compare arrive in
// Slices 2-4.

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" },
];

// DE proceedings split by type (Verletzung / Nichtigkeit) per m's
// 2026-05-18 ask. Labels are parallel: <court> (<procedural role>),
// so a user scanning the picker sees the instance-and-role at a glance
// without one tile reading "Berufung OLG" and another "Nichtigkeits-
// verfahren". Sub-group headers convey the type grouping. Combined-
// timeline behaviour (LG→OLG→BGH as one calc) is filed as m/paliad#41.
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" },
];

export function renderVerfahrensablauf(): string {
  const today = new Date().toISOString().split("T")[0];

  return "<!DOCTYPE html>" + (
    <html lang="de">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
        <meta name="theme-color" content="#BFF355" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="default" />
        <PWAHead />
        <title data-i18n="tools.verfahrensablauf.title">Verfahrensablauf &mdash; Paliad</title>
        <link rel="stylesheet" href="/assets/global.css" />
      </head>
      <body className="has-sidebar page-verfahrensablauf">
        <Sidebar currentPath="/tools/verfahrensablauf" />
        <BottomNav currentPath="/tools/verfahrensablauf" />

        <main>
          <section className="tool-page">
            <div className="container">
              <div className="tool-header">
                <h1 data-i18n="tools.verfahrensablauf.heading">Verfahrensablauf</h1>
                <p className="tool-subtitle" data-i18n="tools.verfahrensablauf.subtitle">
                  Typischen Verfahrensablauf einsehen &mdash; Verfahrensart w&auml;hlen, Datum optional setzen.
                </p>
              </div>

              {/* Verfahrensart picker (single-tile mode — same DOM ids as
                   /tools/fristenrechner so the shared renderer module and
                   court-picker primitives bind without parameterisation). */}
              <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>

                  {/* Perspective strip (t-paliad-250 / m/paliad#81, reordered
                       in t-paliad-279 / m/paliad#111). Side defines whose
                       perspective the columns project; appellant collapses
                       party=both rows for role-swap proceedings (Appeal etc.).
                       Moved above .date-input-group because party-side is the
                       most-defining input after proceeding-type — without
                       side, the column labels can't pick "your filings". Both
                       selectors are URL-driven (?side= + ?appellant=) so the
                       perspective survives reload and is shareable.

                       When the page is opened with ?project=<id> and that
                       project's our_side is set, side-row renders as a
                       read-only chip with an "Andere Seite wählen" override
                       link — see client/verfahrensablauf.ts. */}
                  <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>
                        {/* Prompt shown while the user hasn't picked a side
                            (m/paliad#120). Hidden by client when side is
                            claimant or defendant. Both columns still
                            render every rule in this state — picking a
                            side just focuses the user's column. */}
                        <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>
                      {/* Auto-fill chip — populated by the client when a
                          ?project=<id> URL resolves a project with our_side
                          set. Hidden by default; the radio cluster above is
                          hidden whenever this chip is shown. */}
                      <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>
                    {/* Appeal-target chip row (Slice B1 / m/paliad#124 §18.1).
                         Shown only when the unified upc.apl Berufung tile is
                         selected; lets the user narrow the timeline to the
                         rules whose applies_to_target contains the picked
                         decision kind. URL state ?target=<slug>. */}
                    <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>
                    {/* Show-hidden toggle (t-paliad-290 / m/paliad#122).
                         Re-surfaces optional cards the user has previously
                         marked "Überspringen" via the per-card popover.
                         The row hides itself when the projection has no
                         hidden cards (handled in client/verfahrensablauf.ts).
                         Default OFF; URL state ?show_hidden=1. */}
                    <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>

                  {/* Visual divider — keeps the perspective block (most-
                       defining inputs after proceeding-type) optically
                       separate from the date / court / flag knobs below. */}
                  <div className="verfahrensablauf-step2-divider" aria-hidden="true"></div>

                  <div className="date-input-group">
                    <div className="date-field-row">
                      {/* Read-only caption labelling the value <span>. Not a
                          <label htmlFor> — m/paliad#60: <label for=…> must
                          point at a labelable form control, never a span. */}
                      <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={today} />
                    </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>
                    {/* Proceeding-specific flag rows — mirror /tools/fristenrechner
                         so an abstract-browse user can model the same variants
                         (CCR, Patentänderung, Verletzungswiderklage,
                         Vorab-Einrede). Show/hide driven by selectedType in
                         the client. */}
                    <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="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>
                    {/* Durations toggle (m/paliad#133, t-paliad-302).
                         Default off — hover-tooltips on date spans are
                         the always-on path. */}
                    <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>
            </div>
          </section>
        </main>

        <Footer />
        <PaliadinWidget />
        <script src="/assets/verfahrensablauf.js"></script>
      </body>
    </html>
  );
}
