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>
  );
}

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.merits", i18nKey: "deadlines.upc.apl.merits", name: "Berufung" },
  { code: "upc.dmgs.cfi",   i18nKey: "deadlines.upc.dmgs.cfi",   name: "Schadensbemessung" },
  { code: "upc.disc.cfi",   i18nKey: "deadlines.upc.disc.cfi",   name: "Bucheinsicht" },
  { code: "upc.apl.cost",   i18nKey: "deadlines.upc.apl.cost",   name: "Berufung Kosten" },
  { code: "upc.apl.order",  i18nKey: "deadlines.upc.apl.order",  name: "Berufung Anordnungen" },
];

// 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">
        <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">Ausgangsdatum eingeben</span>
                  </h3>

                  <div className="date-input-group">
                    <div className="date-field-row">
                      <label htmlFor="trigger-event" className="date-label" data-i18n="deadlines.trigger.event">Ausl&ouml;sendes Ereignis:</label>
                      <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>
                  </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>
  );
}
