@extends('layouts.app')
@section('title', 'Automaten-Editor – Mealy & Moore grafisch erstellen | kotsch.tech')
@section('meta_description', 'Endliche Automaten online grafisch erstellen: Mealy, Moore und DFA. Zustände ziehen, Übergänge verbinden, Tabelle live synchron – Export als JSON, SVG, PNG und LaTeX.')
@section('meta_extra')
<meta name="keywords" content="Automaten Editor, Mealy Automat, Moore Automat, DFA, NFA, endlicher Automat, Zustandsdiagramm, Übergangstabelle, FSM, finite state machine, theoretische Informatik">
@endsection
@section('content')
@include('tools._tool_base')

<style>
/* ── Automaten-Editor specific ── */
/* Side-Ads ausblenden – würden mit dem breiten Editor-Container kollidieren.
   Banner-Ad unter dem Tool wird stattdessen immer angezeigt. */
.kt-side-ad, .side-ad { display: none !important; }
.kt-banner-ad { display: block !important; }

.ae-wide { width: min(100% - 32px, 1400px) !important; }
.ae-toolbar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.ae-toolbar .sep { width:1px; height:28px; background:var(--line); margin:0 4px; }
.ae-modes { display:inline-flex; background:var(--bg); border:1.5px solid var(--line); border-radius:12px; padding:3px; gap:2px; }
.ae-mode-btn { padding:8px 16px; border-radius:9px; border:0; background:transparent; font:inherit; font-weight:800; font-size:.85rem; color:var(--muted); cursor:pointer; transition:all .15s; }
.ae-mode-btn.active { background:var(--ink); color:#fff; }
.ae-mode-btn:hover:not(.active) { color:var(--ink); }

.ae-grid { display:grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap:16px; align-items:start; }
@media (max-width: 980px) { .ae-grid { grid-template-columns: 1fr; } }

/* Fullscreen Mode */
.ae-canvas-wrap.fullscreen {
    position: fixed !important;
    inset: 0;
    z-index: 9990;
    border-radius: 0;
    border: 0;
}
.ae-canvas-wrap.fullscreen .ae-canvas { height: 100vh !important; }
body.ae-fs-active { overflow: hidden; }

.ae-canvas-wrap { position:relative; background:#fff; border:1.5px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; box-shadow: var(--shadow); }
.ae-canvas { display:block; width:100%; height:760px; background:
    radial-gradient(circle at 1px 1px, #e2e8f0 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(180deg,#fff 0%, #f8fafc 100%);
    cursor:default;
    touch-action: none;
}
.ae-canvas.add-state-mode { cursor:crosshair; }
.ae-canvas.connect-mode { cursor:cell; }
.ae-canvas.pan-mode { cursor:grab; }
.ae-canvas.pan-mode.panning { cursor:grabbing; }

.ae-overlay-hint { position:absolute; top:12px; left:12px; background:rgba(15,23,42,.92); color:#fff; padding:8px 14px; border-radius:10px; font-size:.78rem; font-weight:700; pointer-events:none; opacity:0; transition:opacity .2s; max-width:340px; line-height:1.4; }
.ae-overlay-hint.show { opacity:1; }
.ae-overlay-hint kbd { background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.25); border-radius:5px; padding:1px 6px; font-family:'JetBrains Mono',monospace; font-size:.72rem; }

.ae-canvas-controls { position:absolute; bottom:12px; right:12px; display:flex; flex-direction:column; gap:6px; }
.ae-cc-btn { width:36px; height:36px; border-radius:10px; border:1.5px solid var(--line); background:#fff; color:var(--muted); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:.85rem; transition:all .15s; box-shadow:0 2px 8px -2px rgba(15,23,42,.1); }
.ae-cc-btn:hover { border-color:var(--accent); color:var(--accent); }
.ae-cc-btn.active { background:var(--ink); color:#fff; border-color:var(--ink); }

.ae-canvas-stats { position:absolute; bottom:12px; left:12px; display:flex; gap:6px; }
.ae-stat-pill { background:rgba(255,255,255,.92); border:1px solid var(--line); border-radius:999px; padding:4px 11px; font-size:.72rem; font-weight:800; color:var(--muted); backdrop-filter: blur(4px); }
.ae-stat-pill strong { color:var(--ink); }

/* SVG states & transitions */
.ae-state-circle { fill:#fff; stroke:#0f172a; stroke-width:2.5; cursor:grab; transition: fill .12s, stroke .12s; }
.ae-state-touch-hit { fill:transparent; stroke:transparent; cursor:grab; }
.ae-state-circle:hover { fill: #f1f5f9; }
.ae-state-circle.selected { stroke: #10b981; stroke-width:3.5; fill: rgba(16,185,129,.08); }
.ae-state-circle.dragging { cursor:grabbing; }
.ae-state-accept { fill:none; stroke:#0f172a; stroke-width:2; pointer-events:none; }
.ae-state-accept.selected { stroke:#10b981; }
.ae-state-label { font-family:'JetBrains Mono','Fira Mono',monospace; font-size:14px; font-weight:800; fill:#0f172a; text-anchor:middle; pointer-events:none; user-select:none; }
.ae-state-out { font-family:'JetBrains Mono',monospace; font-size:11px; fill:#10b981; font-weight:700; text-anchor:middle; pointer-events:none; user-select:none; }
.ae-state-start-arrow { stroke:#0f172a; stroke-width:2.5; fill:none; pointer-events:none; }
.ae-state-start-arrow.selected { stroke:#10b981; }

.ae-edge-path { fill:none; stroke:#475569; stroke-width:2; transition: stroke .12s; cursor:pointer; }
.ae-edge-path:hover { stroke:#10b981; stroke-width:3; }
.ae-edge-path.selected { stroke:#10b981; stroke-width:3.5; }
.ae-edge-hit { fill:none; stroke:transparent; stroke-width:22; cursor:pointer; }
.ae-edge-label-bg { fill:#fff; stroke:#cbd5e1; stroke-width:1; rx:5; cursor:pointer; }
.ae-edge-label-bg.selected { stroke:#10b981; stroke-width:2; }
.ae-edge-label { font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:700; fill:#0f172a; text-anchor:middle; pointer-events:none; user-select:none; dominant-baseline: middle; }
.ae-edge-pending { stroke:#10b981; stroke-width:2; stroke-dasharray: 6 4; fill:none; pointer-events:none; }

/* Tables panel */
.ae-tables-panel { display:flex; flex-direction:column; gap:12px; }
.ae-table-wrap { background:#fff; border:1.5px solid var(--line); border-radius:var(--radius-lg); padding:18px; box-shadow: var(--shadow); }
.ae-table-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.ae-table-head h3 { margin:0; font-size:.78rem; font-weight:900; color:var(--muted); text-transform:uppercase; letter-spacing:1.5px; }
.ae-table-actions { display:flex; gap:6px; }
.ae-mini-btn { padding:6px 10px; border-radius:8px; border:1.5px solid var(--line); background:#fff; cursor:pointer; font:inherit; font-size:.75rem; font-weight:700; color:var(--muted); transition:all .15s; }
.ae-mini-btn:hover { border-color:var(--accent); color:var(--accent); }
.ae-mini-btn.danger:hover { border-color:#ef4444; color:#ef4444; }

.ae-table { width:100%; border-collapse:separate; border-spacing:0; font-size:.85rem; }
.ae-table th, .ae-table td { border-bottom:1px solid var(--line); padding:6px 4px; text-align:center; }
.ae-table th { background:var(--bg); font-weight:800; color:var(--muted); text-transform:uppercase; font-size:.7rem; letter-spacing:1px; position:sticky; top:0; }
.ae-table th.row-head, .ae-table td.row-head { text-align:left; padding-left:10px; font-family:'JetBrains Mono',monospace; font-weight:800; color:var(--ink); }
.ae-table td input { width:100%; box-sizing:border-box; border:1.5px solid transparent; border-radius:6px; padding:6px 8px; font:inherit; font-family:'JetBrains Mono',monospace; font-size:.82rem; text-align:center; background:transparent; transition: all .15s; min-height:32px; }
.ae-table td input:hover { background:var(--bg); }
.ae-table td input:focus { border-color:var(--accent); background:#fff; outline:none; box-shadow:0 0 0 3px var(--accent-soft); }
.ae-table td.start-cell { background:rgba(16,185,129,.06); }
.ae-table tr:last-child td { border-bottom:none; }
.ae-table-empty { text-align:center; padding:24px; color:var(--muted); font-size:.85rem; }

.ae-state-list { display:flex; flex-direction:column; gap:6px; max-height:230px; overflow-y:auto; }
.ae-state-row { display:grid; grid-template-columns: auto 1fr auto auto; align-items:center; gap:8px; padding:8px 10px; border:1.5px solid var(--line); border-radius:10px; background:#fff; transition:all .15s; }
.ae-state-row:hover { border-color:var(--accent); background:rgba(16,185,129,.03); }
.ae-state-row.selected { border-color:var(--accent); background:rgba(16,185,129,.08); }
.ae-state-row .sr-id { font-family:'JetBrains Mono',monospace; font-weight:900; color:var(--ink); font-size:.85rem; min-width:30px; }
.ae-state-row input { border:1.5px solid var(--line); border-radius:7px; padding:5px 9px; font:inherit; font-family:'JetBrains Mono',monospace; font-size:.82rem; min-height:32px; }
.ae-state-row input:focus { border-color:var(--accent); outline:none; box-shadow:0 0 0 3px var(--accent-soft); }
.ae-state-row .sr-flags { display:flex; gap:4px; }
.ae-flag-btn { width:28px; height:28px; border-radius:7px; border:1.5px solid var(--line); background:#fff; cursor:pointer; font-size:.72rem; color:var(--muted); transition:all .15s; display:inline-flex; align-items:center; justify-content:center; }
.ae-flag-btn:hover { border-color:var(--accent); color:var(--accent); }
.ae-flag-btn.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.ae-flag-btn.start.active { background:#0f172a; border-color:#0f172a; }
.ae-flag-btn.del:hover { background:#fef2f2; border-color:#ef4444; color:#ef4444; }

/* Validation panel */
.ae-valid-panel { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; margin-top:14px; }
.ae-valid-card { padding:12px; border-radius:12px; border:1.5px solid var(--line); background:#fff; display:flex; align-items:center; gap:10px; }
.ae-valid-card .v-icon { width:36px; height:36px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0; }
.ae-valid-card.ok .v-icon { background:rgba(16,185,129,.12); color:#10b981; }
.ae-valid-card.warn .v-icon { background:rgba(245,158,11,.12); color:#f59e0b; }
.ae-valid-card.err .v-icon { background:rgba(239,68,68,.12); color:#ef4444; }
.ae-valid-card .v-text { flex:1; }
.ae-valid-card .v-title { font-size:.72rem; font-weight:900; color:var(--muted); text-transform:uppercase; letter-spacing:1px; margin-bottom:2px; }
.ae-valid-card .v-msg { font-size:.85rem; font-weight:700; color:var(--ink); line-height:1.3; }

/* Simulator */
.ae-sim-input { display:flex; gap:8px; align-items:center; }
.ae-sim-input input { flex:1; font-family:'JetBrains Mono',monospace; font-size:1.05rem; letter-spacing:1px; }
.ae-sim-palette { display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; align-items:center; }
.ae-sim-palette .lbl { font-size:.7rem; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:1px; margin-right:6px; }
.ae-sim-pal-btn { min-width:34px; height:32px; padding:0 10px; border-radius:8px; border:1.5px solid var(--line); background:#fff; cursor:pointer; font:inherit; font-family:'JetBrains Mono',monospace; font-weight:800; font-size:.85rem; color:var(--ink); transition:all .15s; }
.ae-sim-pal-btn:hover { border-color:var(--accent); background:var(--accent-soft); color:var(--accent); transform:translateY(-1px); }
.ae-sim-pal-btn.bs { color:#ef4444; border-color:#fee2e2; }
.ae-sim-pal-btn.bs:hover { background:#fef2f2; }
.ae-sim-tape { display:flex; gap:4px; flex-wrap:wrap; padding:12px; background:var(--bg); border-radius:10px; min-height:54px; font-family:'JetBrains Mono',monospace; align-items:center; }
.ae-sim-cell { position:relative; display:inline-flex; align-items:center; justify-content:center; min-width:30px; height:34px; padding:0 9px; border-radius:7px; background:#fff; border:1.5px solid var(--line); font-weight:800; font-size:.9rem; transition:all .25s cubic-bezier(.22,.68,0,1.4); }
.ae-sim-cell.active { background:var(--accent); color:#fff; border-color:var(--accent); transform:scale(1.18); box-shadow:0 6px 18px -4px rgba(16,185,129,.45); }
.ae-sim-cell.done { background:var(--accent-soft); border-color:rgba(16,185,129,.3); color:#065f46; }
.ae-sim-cell.error { background:#fef2f2; border-color:#ef4444; color:#dc2626; transform:scale(1.18); }
.ae-sim-status { padding:14px 16px; background:var(--bg); border-radius:10px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; min-height:60px; font-family:'JetBrains Mono',monospace; font-size:.92rem; }
.ae-sim-status .sim-block { display:flex; flex-direction:column; gap:3px; }
.ae-sim-status .sim-tag { font-size:.62rem; font-weight:900; color:var(--muted); text-transform:uppercase; letter-spacing:1.5px; }
.ae-sim-status .sim-val { font-weight:800; color:var(--ink); }
.ae-sim-status .sim-val.accent { color:#10b981; }
.ae-sim-status .sim-val.danger { color:#ef4444; }
.ae-sim-status .sim-state-pill { padding:5px 12px; border-radius:8px; background:#10b981; color:#fff; font-weight:900; box-shadow:0 4px 12px -2px rgba(16,185,129,.45); }
.ae-sim-status .sim-state-pill.danger { background:#ef4444; box-shadow:0 4px 12px -2px rgba(239,68,68,.45); }
.ae-sim-status .sim-arrow { color:var(--muted); }
.ae-sim-status .sim-out-tape { display:inline-flex; gap:3px; flex-wrap:wrap; align-items:center; padding:5px 9px; background:#fff; border:1.5px solid var(--line); border-radius:8px; font-size:.85rem; min-width:40px; }
.ae-sim-status .sim-out-tape span { background:rgba(16,185,129,.1); color:#065f46; padding:2px 7px; border-radius:5px; font-weight:800; }
.ae-sim-banner { padding:12px 16px; border-radius:10px; display:flex; align-items:center; gap:10px; font-weight:800; font-size:.92rem; margin-top:8px; }
.ae-sim-banner.acc { background:rgba(16,185,129,.1); color:#065f46; border:1.5px solid rgba(16,185,129,.3); }
.ae-sim-banner.rej { background:#fef2f2; color:#dc2626; border:1.5px solid rgba(239,68,68,.3); }
.ae-sim-banner.done { background:rgba(99,102,241,.08); color:#3730a3; border:1.5px solid rgba(99,102,241,.3); }
.ae-sim-banner i { font-size:1.2rem; }
.ae-sim-controls { display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; align-items:center; }
.ae-sim-speed { display:inline-flex; align-items:center; gap:6px; padding:5px 10px; background:var(--bg); border-radius:8px; font-size:.75rem; color:var(--muted); font-weight:700; margin-left:auto; }
.ae-sim-speed input { accent-color:var(--accent); width:90px; }

.ae-sim-trace { margin-top:10px; max-height:200px; overflow-y:auto; border:1.5px solid var(--line); border-radius:10px; }
.ae-sim-trace table { width:100%; border-collapse:collapse; font-size:.82rem; font-family:'JetBrains Mono',monospace; }
.ae-sim-trace th { background:var(--bg); text-align:left; padding:8px 10px; font-size:.66rem; font-weight:900; color:var(--muted); text-transform:uppercase; letter-spacing:1.2px; border-bottom:1px solid var(--line); position:sticky; top:0; }
.ae-sim-trace td { padding:7px 10px; border-bottom:1px solid var(--line); }
.ae-sim-trace tr:last-child td { border-bottom:none; }
.ae-sim-trace tr:hover td { background:var(--accent-soft); }
.ae-sim-trace tr.current td { background:rgba(16,185,129,.12); font-weight:900; }
.ae-sim-trace .ts-arrow { color:var(--muted); }
.ae-sim-trace-empty { text-align:center; padding:18px; color:var(--muted); font-size:.85rem; }

/* Sim highlights on canvas */
.ae-state-circle.sim-active { fill: rgba(16,185,129,.16); stroke:#10b981; stroke-width:4; animation: ae-sim-pulse 1.6s ease-in-out infinite; }
.ae-state-circle.sim-active-err { fill: rgba(239,68,68,.16); stroke:#ef4444; stroke-width:4; animation: ae-sim-pulse-err 1.2s ease-in-out infinite; }
.ae-state-circle.sim-visited { fill: rgba(16,185,129,.06); }
@keyframes ae-sim-pulse {
    0%, 100% { filter: drop-shadow(0 0 4px rgba(16,185,129,.5)); }
    50% { filter: drop-shadow(0 0 14px rgba(16,185,129,1)); }
}
@keyframes ae-sim-pulse-err {
    0%, 100% { filter: drop-shadow(0 0 4px rgba(239,68,68,.5)); }
    50% { filter: drop-shadow(0 0 14px rgba(239,68,68,1)); }
}
.ae-edge-path.sim-last { stroke:#10b981; stroke-width:4; animation: ae-edge-flow 1.2s ease-out forwards; }
@keyframes ae-edge-flow {
    from { stroke-dasharray: 14 6; stroke-dashoffset: 40; }
    to   { stroke-dasharray: 14 6; stroke-dashoffset: 0; }
}

/* Examples / Export modal */
.ae-modal-bg { position:fixed; inset:0; background:rgba(15,23,42,.6); z-index:9998; display:none; align-items:center; justify-content:center; backdrop-filter: blur(4px); }
.ae-modal-bg.open { display:flex; }
.ae-modal { background:#fff; border-radius:18px; padding:28px; width:min(96%, 640px); max-height:88vh; overflow-y:auto; box-shadow: 0 40px 80px -20px rgba(15,23,42,.4); }
.ae-modal h3 { margin:0 0 16px; font-size:1.3rem; font-weight:900; letter-spacing:-0.5px; }
.ae-modal-close { float:right; background:transparent; border:0; font-size:1.4rem; cursor:pointer; color:var(--muted); }
.ae-modal-close:hover { color:var(--ink); }
.ae-export-area { width:100%; min-height:240px; font-family:'JetBrains Mono',monospace; font-size:.78rem; border:1.5px solid var(--line); border-radius:10px; padding:12px; box-sizing:border-box; resize:vertical; }
.ae-example-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:520px) { .ae-example-grid { grid-template-columns:1fr; } }
.ae-example-card { padding:14px; border:1.5px solid var(--line); border-radius:12px; cursor:pointer; transition:all .15s; background:#fff; text-align:left; font:inherit; }
.ae-example-card:hover { border-color:var(--accent); background:rgba(16,185,129,.04); transform:translateY(-2px); }
.ae-example-card strong { display:block; font-size:.95rem; margin-bottom:4px; color:var(--ink); }
.ae-example-card small { color:var(--muted); font-size:.78rem; line-height:1.4; }

/* Tabs */
.ae-tab-content { display:none; }
.ae-tab-content.active { display:block; }

/* Context menu */
.ae-ctx-menu { position:fixed; background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:0 12px 32px -8px rgba(15,23,42,.2); padding:6px; z-index:9999; min-width:170px; display:none; }
.ae-ctx-menu.open { display:block; }
.ae-ctx-item { display:flex; align-items:center; gap:8px; padding:8px 12px; border:0; background:transparent; width:100%; text-align:left; cursor:pointer; border-radius:7px; font:inherit; font-size:.85rem; font-weight:700; color:var(--ink); }
.ae-ctx-item:hover { background:var(--accent-soft); color:var(--accent); }
.ae-ctx-item.danger:hover { background:#fef2f2; color:#ef4444; }
.ae-ctx-sep { height:1px; background:var(--line); margin:4px 0; }
.ae-ctx-item kbd { margin-left:auto; background:var(--bg); border:1px solid var(--line); border-radius:4px; padding:1px 5px; font-family:'JetBrains Mono',monospace; font-size:.7rem; color:var(--muted); }

/* Tiny inline editor */
.ae-inline-edit { position:fixed; z-index:9990; display:none; background:#fff; border:2px solid var(--accent); border-radius:10px; padding:10px; box-shadow:0 12px 28px -6px rgba(15,23,42,.25); }
.ae-inline-edit.open { display:block; }
.ae-inline-edit input { display:block; border:1.5px solid var(--line); border-radius:7px; padding:6px 10px; font:inherit; font-family:'JetBrains Mono',monospace; font-size:.85rem; margin-bottom:6px; width:160px; }
.ae-inline-edit input:focus { border-color:var(--accent); outline:none; }
.ae-inline-edit .label { font-size:.7rem; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:1px; margin-bottom:3px; }
.ae-inline-edit .row { display:flex; gap:6px; justify-content:flex-end; margin-top:4px; }
.ae-inline-edit button { padding:5px 10px; border-radius:7px; border:1.5px solid var(--line); background:#fff; cursor:pointer; font:inherit; font-size:.78rem; font-weight:800; }
.ae-inline-edit button.primary { background:var(--accent); color:#fff; border-color:var(--accent); }

.ae-tabs-bar { display:flex; gap:4px; border-bottom:1.5px solid var(--line); margin-bottom:14px; }
.ae-tabs-bar button { padding:9px 16px; border:0; background:transparent; font:inherit; font-weight:800; font-size:.85rem; color:var(--muted); cursor:pointer; border-bottom:2.5px solid transparent; margin-bottom:-1.5px; transition:all .15s; }
.ae-tabs-bar button.active { color:var(--accent); border-color:var(--accent); }
.ae-tabs-bar button:hover:not(.active) { color:var(--ink); }

.ae-help-list { font-size:.84rem; color:var(--muted); line-height:1.75; }
.ae-help-list kbd { background:var(--bg); border:1px solid var(--line); border-radius:5px; padding:1px 6px; font-family:'JetBrains Mono',monospace; font-size:.74rem; color:var(--ink); font-weight:700; }
.ae-help-list strong { color:var(--ink); }

@media (max-width: 980px) {
    .ae-wide { width: min(100% - 16px, 100%) !important; }
    .ae-toolbar { flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; }
    .ae-toolbar > * { flex:0 0 auto; scroll-snap-align:start; }
    .ae-toolbar .sep { display:none; }
    .ae-mode-btn, .ae-toolbar .t-btn, .ae-mini-btn, .ae-tabs-bar button, .ae-cc-btn, .ae-flag-btn, .ae-sim-pal-btn { min-height:44px; }
    .ae-toolbar .t-btn.sm { padding:10px 13px; }
    .ae-canvas { height:min(68vh, 620px); min-height:430px; }
    .ae-canvas-controls { flex-direction:row; top:10px; right:10px; bottom:auto; }
    .ae-canvas-stats { right:10px; bottom:10px; flex-wrap:wrap; }
    .ae-overlay-hint { top:auto; left:10px; right:10px; bottom:64px; max-width:none; }
    .ae-table-wrap, .ae-tables-panel .t-panel { padding:12px !important; }
    .ae-table th, .ae-table td { padding:8px 5px; }
    .ae-table td input, .ae-state-row input { min-height:42px; font-size:16px; }
    .ae-state-list { max-height:none; }
    .ae-state-row { grid-template-columns:auto 1fr; gap:10px; }
    .ae-state-row .sr-flags, .ae-state-row .ae-flag-btn.del { grid-column:auto; }
    .ae-tabs-bar { overflow-x:auto; -webkit-overflow-scrolling:touch; }
    .ae-tabs-bar button { white-space:nowrap; }
    .ae-sim-input { flex-direction:column; align-items:stretch; }
    .ae-sim-controls .t-btn { flex:1 1 120px; min-height:44px; }
    .ae-sim-speed { width:100%; margin-left:0; justify-content:space-between; }
    .ae-sim-speed input { flex:1; width:auto; }
}

@media (max-width: 560px) {
    .ae-canvas { height:62vh; min-height:360px; }
    .ae-stat-pill { font-size:.68rem; padding:4px 8px; }
    .ae-modal { width:min(100% - 18px, 640px); padding:18px; }
    .ae-inline-edit { left:10px !important; right:10px; width:auto; }
    .ae-inline-edit input { width:100%; box-sizing:border-box; font-size:16px; min-height:42px; }
    .ae-inline-edit button { min-height:42px; flex:1; }
}
</style>

<div class="tool-page">
<div class="tool-container ae-wide">
    <div class="tool-header">
        <span class="t-tag"><i class="fas fa-diagram-project"></i> Developer · Theoretische Informatik</span>
        <h1 class="tool-h1">Automaten<span>-Editor.</span></h1>
        <p class="tool-sub">Mealy, Moore und DFA grafisch erstellen: Zustände ziehen, Übergänge verbinden, Tabelle live synchron. Mit Simulator, Validierung und Export als JSON, SVG, PNG und LaTeX.</p>
    </div>

    {{-- TOOLBAR --}}
    <div class="t-panel">
        <div class="ae-toolbar">
            <div class="ae-modes" role="tablist">
                <button class="ae-mode-btn active" data-mode="mealy" onclick="setMode('mealy')" title="Ausgabe an Kanten (Eingabe/Ausgabe)">Mealy</button>
                <button class="ae-mode-btn" data-mode="moore" onclick="setMode('moore')" title="Ausgabe in Zuständen">Moore</button>
                <button class="ae-mode-btn" data-mode="dfa" onclick="setMode('dfa')" title="Akzeptanz-Automat ohne Ausgabe">DFA</button>
            </div>
            <span class="sep"></span>
            <button class="t-btn accent sm" onclick="setTool('add-state')" id="tool-add-state" title="Klick auf Canvas erzeugt Zustand (oder Doppelklick auf leeren Bereich)"><i class="fas fa-plus-circle"></i> Zustand</button>
            <button class="t-btn ghost sm" onclick="setTool('connect')" id="tool-connect" title="Quelle dann Ziel klicken (oder Shift+Drag)"><i class="fas fa-arrow-right-long"></i> Verbinden</button>
            <button class="t-btn ghost sm" onclick="setTool('select')" id="tool-select" title="Auswählen, Verschieben, Bearbeiten"><i class="fas fa-arrow-pointer"></i> Auswählen</button>
            <span class="sep"></span>
            <button class="t-btn ghost sm" onclick="autoLayout()" title="Zustände im Kreis anordnen"><i class="fas fa-circle-nodes"></i> Layout</button>
            <button class="t-btn ghost sm" onclick="undo()" id="btn-undo" title="Strg+Z"><i class="fas fa-rotate-left"></i></button>
            <button class="t-btn ghost sm" onclick="redo()" id="btn-redo" title="Strg+Y"><i class="fas fa-rotate-right"></i></button>
            <span class="sep"></span>
            <button class="t-btn ghost sm" onclick="openExamples()"><i class="fas fa-lightbulb"></i> Beispiele</button>
            <button class="t-btn ghost sm" onclick="openExport()"><i class="fas fa-download"></i> Export</button>
            <button class="t-btn ghost sm" onclick="openImport()"><i class="fas fa-upload"></i> Import</button>
            <button class="t-btn ghost sm danger" onclick="clearAll()" title="Alles löschen"><i class="fas fa-trash"></i></button>
        </div>
    </div>

    {{-- MAIN GRID --}}
    <div class="ae-grid">

        {{-- LEFT: Canvas --}}
        <div>
            <div class="ae-canvas-wrap">
                <svg class="ae-canvas" id="ae-canvas" xmlns="http://www.w3.org/2000/svg">
                    <defs>
                        <marker id="ae-arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse" markerUnits="strokeWidth">
                            <path d="M0,0 L10,5 L0,10 z" fill="#475569"/>
                        </marker>
                        <marker id="ae-arrow-sel" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse" markerUnits="strokeWidth">
                            <path d="M0,0 L10,5 L0,10 z" fill="#10b981"/>
                        </marker>
                    </defs>
                    <g id="ae-viewport">
                        <g id="ae-edges"></g>
                        <g id="ae-states"></g>
                        <g id="ae-overlay"></g>
                    </g>
                </svg>
                <div class="ae-overlay-hint" id="ae-hint"></div>
                <div class="ae-canvas-stats">
                    <span class="ae-stat-pill"><strong id="stat-states">0</strong> Zustände</span>
                    <span class="ae-stat-pill"><strong id="stat-trans">0</strong> Übergänge</span>
                    <span class="ae-stat-pill">Σ = <strong id="stat-alpha">∅</strong></span>
                </div>
                <div class="ae-canvas-controls">
                    <button class="ae-cc-btn" onclick="toggleFullscreen()" title="Vollbild (F)" id="btn-fs"><i class="fas fa-expand-arrows-alt"></i></button>
                    <button class="ae-cc-btn" onclick="zoom(1.2)" title="Zoom +"><i class="fas fa-plus"></i></button>
                    <button class="ae-cc-btn" onclick="zoom(1/1.2)" title="Zoom −"><i class="fas fa-minus"></i></button>
                    <button class="ae-cc-btn" onclick="resetView()" title="Ansicht zurücksetzen"><i class="fas fa-crosshairs"></i></button>
                </div>
            </div>

            {{-- Validation Panel --}}
            <div class="t-panel" style="margin-top:16px">
                <div class="t-panel-title"><i class="fas fa-check-circle"></i> Analyse</div>
                <div class="ae-valid-panel" id="ae-validation"></div>
            </div>

            {{-- Simulator --}}
            <div class="t-panel" style="margin-top:16px">
                <div class="t-panel-title"><i class="fas fa-play-circle"></i> Simulator</div>
                <div class="ae-sim-input">
                    <input type="text" class="t-input" id="sim-input" placeholder="z. B. 1011 – Eingabewort eingeben" oninput="onSimInputChange()" autocomplete="off" spellcheck="false">
                </div>
                <div class="ae-sim-palette" id="sim-palette"></div>
                <div class="ae-sim-tape" id="sim-tape" style="margin-top:10px"></div>
                <div class="ae-sim-status" id="sim-status" style="margin-top:8px"></div>
                <div class="ae-sim-controls">
                    <button class="t-btn ghost sm" onclick="simBack()" id="sim-btn-back" title="Schritt zurück (Pfeil links)"><i class="fas fa-backward-step"></i> Zurück</button>
                    <button class="t-btn accent sm" onclick="simStep()" id="sim-btn-step" title="Schritt vorwärts (Pfeil rechts)"><i class="fas fa-forward-step"></i> Schritt</button>
                    <button class="t-btn ghost sm" onclick="simRun()" id="sim-btn-run" title="Auto-Ablauf (Leertaste während Sim)"><i class="fas fa-play"></i> Auto</button>
                    <button class="t-btn ghost sm" onclick="simReset()" title="Reset (R)"><i class="fas fa-rotate-left"></i></button>
                    <span class="ae-sim-speed" title="Geschwindigkeit">
                        <i class="fas fa-gauge-high"></i>
                        <input type="range" min="120" max="1500" step="20" value="550" id="sim-speed" oninput="updateSimSpeed()">
                    </span>
                </div>
                <div class="ae-sim-trace" id="sim-trace" style="display:none">
                    <table>
                        <thead><tr><th>#</th><th>Zustand</th><th>Eingabe</th><th>→ Nächst</th><th>Ausgabe</th></tr></thead>
                        <tbody id="sim-trace-body"></tbody>
                    </table>
                </div>
            </div>
        </div>

        {{-- RIGHT: Tabs (Tabelle / Zustände / Hilfe) --}}
        <div class="ae-tables-panel">
            <div class="t-panel" style="padding:18px;">
                <div class="ae-tabs-bar">
                    <button class="active" data-tab="trans" onclick="switchTab('trans')"><i class="fas fa-table"></i> Übergangstabelle</button>
                    <button data-tab="states" onclick="switchTab('states')"><i class="fas fa-circle-dot"></i> Zustände</button>
                    <button data-tab="help" onclick="switchTab('help')"><i class="fas fa-circle-question"></i> Hilfe</button>
                </div>

                {{-- Transition Table --}}
                <div class="ae-tab-content active" id="tab-trans">
                    <div class="ae-table-head">
                        <h3>δ : Q × Σ → Q<span id="trans-mode-suffix"></span></h3>
                        <div class="ae-table-actions">
                            <button class="ae-mini-btn" onclick="addSymbol()" title="Spalte/Eingabesymbol hinzufügen"><i class="fas fa-plus"></i> Symbol</button>
                            <button class="ae-mini-btn" onclick="fillTable()" title="Tabelle vervollständigen (Lücken markieren)"><i class="fas fa-magic"></i> Auto</button>
                        </div>
                    </div>
                    <div style="overflow-x:auto;">
                        <table class="ae-table" id="trans-table"></table>
                    </div>
                    <div class="t-info" style="margin-top:10px; font-size:.75rem;">
                        <i class="fas fa-info-circle"></i> Zellen direkt bearbeiten: <code style="font-family:'JetBrains Mono',monospace; background:var(--bg); padding:1px 5px; border-radius:4px;">q1</code> (Mealy: <code style="font-family:'JetBrains Mono',monospace; background:var(--bg); padding:1px 5px; border-radius:4px;">q1/0</code>). Leere Zelle = kein Übergang.
                    </div>
                </div>

                {{-- States List --}}
                <div class="ae-tab-content" id="tab-states">
                    <div class="ae-table-head">
                        <h3>Q – Zustände</h3>
                        <div class="ae-table-actions">
                            <button class="ae-mini-btn" onclick="addStateAtCenter()"><i class="fas fa-plus"></i> Neu</button>
                        </div>
                    </div>
                    <div class="ae-state-list" id="state-list"></div>
                    <div class="t-info" style="margin-top:10px; font-size:.75rem;">
                        <i class="fas fa-info-circle"></i>
                        <i class="fas fa-play" style="color:#0f172a"></i> Startzustand ·
                        <i class="fas fa-check" style="color:#10b981"></i> akzeptierend ·
                        <span id="moore-output-hint" style="display:none"><i class="fas fa-bullhorn" style="color:#10b981"></i> Ausgabe (Moore) ·</span>
                        <i class="fas fa-trash" style="color:#ef4444"></i> löschen
                    </div>
                </div>

                {{-- Help --}}
                <div class="ae-tab-content" id="tab-help">
                    <div class="ae-help-list">
                        <p><strong>Zustand erstellen:</strong> Doppelklick auf leere Canvas oder Werkzeug „Zustand" → klicken.</p>
                        <p><strong>Übergang erstellen:</strong> Werkzeug „Verbinden" → Quelle, dann Ziel klicken. Alternativ <kbd>Shift</kbd> + Drag.</p>
                        <p><strong>Bearbeiten:</strong> Doppelklick auf Zustand oder Übergangs-Label öffnet Editor.</p>
                        <p><strong>Löschen:</strong> Element auswählen, dann <kbd>Entf</kbd>. Oder Rechtsklick.</p>
                        <p><strong>Verschieben:</strong> Zustand mit Maus ziehen. Pan: <kbd>Leertaste</kbd> + Drag oder Mittelklick-Drag.</p>
                        <p><strong>Zoom:</strong> Mausrad oder Buttons unten rechts.</p>
                        <p><strong>Startzustand:</strong> Zustand-Rechtsklick → „Als Start" oder in Zustands-Liste.</p>
                        <p><strong>Akzeptierend (DFA):</strong> Rechtsklick → „Akzeptierend" (Doppelkreis).</p>
                        <p><strong>Ausgabe (Moore):</strong> Doppelklick auf Zustand → Ausgabe-Feld.</p>
                        <p><strong>Mealy-Syntax:</strong> Übergangs-Label = <code>Eingabe/Ausgabe</code> (z. B. <code>1/0</code>). Mehrere Symbole pro Kante mit Komma: <code>0,1/1</code>.</p>
                        <p><strong>Tabelle ↔ Graph:</strong> Beide Richtungen live synchron – tippst du in der Tabelle, ändert sich der Graph und umgekehrt.</p>
                        <p style="margin-top:14px"><strong>Tastatur:</strong><br>
                        <kbd>Strg</kbd>+<kbd>Z</kbd> Undo · <kbd>Strg</kbd>+<kbd>Y</kbd> Redo · <kbd>Entf</kbd> löschen ·
                        <kbd>N</kbd> Zustand · <kbd>E</kbd> Verbinden · <kbd>V</kbd> Auswählen ·
                        <kbd>F</kbd> Vollbild · <kbd>Strg</kbd>+<kbd>S</kbd> Export</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @include('tools._ads_banner')
</div>
</div>

{{-- Inline Editor for Transitions/States --}}
<div class="ae-inline-edit" id="inline-edit">
    <div class="label" id="inline-label">Label</div>
    <input type="text" id="inline-input-1" placeholder="Eingabe" autocomplete="off">
    <input type="text" id="inline-input-2" placeholder="Ausgabe" autocomplete="off" style="display:none">
    <div class="row">
        <button onclick="cancelInlineEdit()">Abbrechen</button>
        <button class="primary" onclick="commitInlineEdit()">OK</button>
    </div>
</div>

{{-- Context menu --}}
<div class="ae-ctx-menu" id="ctx-menu"></div>

{{-- Modal: Examples --}}
<div class="ae-modal-bg" id="modal-examples" onclick="if(event.target===this)closeModal()">
    <div class="ae-modal">
        <button class="ae-modal-close" onclick="closeModal()">×</button>
        <h3><i class="fas fa-lightbulb" style="color:#f59e0b"></i> Beispiele laden</h3>
        <p style="color:var(--muted); font-size:.88rem; margin:0 0 16px">Wähle einen klassischen Automaten als Startpunkt – ersetzt den aktuellen Automaten.</p>
        <div class="ae-example-grid" id="examples-grid"></div>
    </div>
</div>

{{-- Modal: Export --}}
<div class="ae-modal-bg" id="modal-export" onclick="if(event.target===this)closeModal()">
    <div class="ae-modal">
        <button class="ae-modal-close" onclick="closeModal()">×</button>
        <h3><i class="fas fa-download" style="color:#10b981"></i> Export</h3>
        <div class="ae-tabs-bar" style="margin-bottom:14px">
            <button class="active" onclick="setExportTab('json',this)">JSON</button>
            <button onclick="setExportTab('latex',this)">LaTeX</button>
            <button onclick="setExportTab('markdown',this)">Markdown</button>
            <button onclick="setExportTab('graphviz',this)">DOT/Graphviz</button>
            <button onclick="setExportTab('svg',this)">SVG</button>
        </div>
        <textarea class="ae-export-area" id="export-area" readonly></textarea>
        <div style="display:flex; gap:8px; margin-top:12px; flex-wrap:wrap">
            <button class="t-btn accent sm" onclick="copyExport()"><i class="fas fa-copy"></i> Kopieren</button>
            <button class="t-btn ghost sm" onclick="downloadExport()"><i class="fas fa-download"></i> Datei herunterladen</button>
            <button class="t-btn ghost sm" onclick="downloadPNG()" id="btn-png" style="display:none"><i class="fas fa-image"></i> PNG-Bild</button>
        </div>
    </div>
</div>

{{-- Modal: Import --}}
<div class="ae-modal-bg" id="modal-import" onclick="if(event.target===this)closeModal()">
    <div class="ae-modal">
        <button class="ae-modal-close" onclick="closeModal()">×</button>
        <h3><i class="fas fa-upload" style="color:#0f172a"></i> Import</h3>
        <p style="color:var(--muted); font-size:.88rem; margin:0 0 12px">JSON-Definition einfügen oder Datei wählen – ersetzt den aktuellen Automaten.</p>
        <textarea class="ae-export-area" id="import-area" placeholder='{"type":"mealy","states":[…],"transitions":[…]}'></textarea>
        <div style="display:flex; gap:8px; margin-top:12px; flex-wrap:wrap">
            <button class="t-btn accent sm" onclick="commitImport()"><i class="fas fa-check"></i> Importieren</button>
            <input type="file" id="import-file" accept=".json,application/json" style="display:none" onchange="onImportFile(event)">
            <button class="t-btn ghost sm" onclick="document.getElementById('import-file').click()"><i class="fas fa-folder-open"></i> Datei wählen</button>
        </div>
        <div id="import-error" class="t-error" style="margin-top:10px"></div>
    </div>
</div>

<script>
(function(){
'use strict';

// ════════════════════════════════════════════════════════════════════════
//  MODEL
// ════════════════════════════════════════════════════════════════════════

let model = {
    type: 'mealy',          // 'mealy' | 'moore' | 'dfa'
    states: [],             // {id, label, x, y, output, isStart, isAccepting}
    transitions: [],        // {id, from, to, inputs:[], outputs:[]}  (parallel arrows merged)
    counter: 0,
};

const STORAGE_KEY = 'ae_state_v1';
const HISTORY_MAX = 50;
let history = [];
let historyIdx = -1;
let suppressHistory = false;

// ──────── State helpers ────────
function newStateId() {
    let n = model.counter;
    while (model.states.some(s => s.label === 'q'+n)) n++;
    model.counter = n + 1;
    return 'q' + n;
}
function uid() { return Math.random().toString(36).slice(2, 9); }
function findState(id) { return model.states.find(s => s.id === id); }
function findStateByLabel(label) { return model.states.find(s => s.label === label); }
function findTransition(from, to) { return model.transitions.find(t => t.from === from && t.to === to); }

// ──────── History ────────
function snapshot() {
    if (suppressHistory) return;
    const snap = JSON.stringify({type: model.type, states: model.states, transitions: model.transitions, counter: model.counter});
    history = history.slice(0, historyIdx + 1);
    history.push(snap);
    if (history.length > HISTORY_MAX) history.shift();
    historyIdx = history.length - 1;
    updateUndoButtons();
}
function restore(snap) {
    const obj = JSON.parse(snap);
    model.type = obj.type;
    model.states = obj.states;
    model.transitions = obj.transitions;
    model.counter = obj.counter || 0;
    selected = null;
    renderAll();
}
window.undo = function() {
    if (historyIdx <= 0) return;
    historyIdx--;
    restore(history[historyIdx]);
    updateUndoButtons();
    persist();
};
window.redo = function() {
    if (historyIdx >= history.length - 1) return;
    historyIdx++;
    restore(history[historyIdx]);
    updateUndoButtons();
    persist();
};
function updateUndoButtons() {
    document.getElementById('btn-undo').disabled = historyIdx <= 0;
    document.getElementById('btn-redo').disabled = historyIdx >= history.length - 1;
}

// ──────── Persistence ────────
function persist() {
    try { localStorage.setItem(STORAGE_KEY, JSON.stringify(model)); } catch(e){}
}
function loadPersisted() {
    try {
        const raw = localStorage.getItem(STORAGE_KEY);
        if (!raw) return false;
        const obj = JSON.parse(raw);
        if (!obj || !obj.states) return false;
        model = obj;
        return true;
    } catch(e) { return false; }
}

// ════════════════════════════════════════════════════════════════════════
//  CANVAS / SVG
// ════════════════════════════════════════════════════════════════════════
const svg = document.getElementById('ae-canvas');
const viewport = document.getElementById('ae-viewport');
const edgesG = document.getElementById('ae-edges');
const statesG = document.getElementById('ae-states');
const overlayG = document.getElementById('ae-overlay');

const STATE_R = 30;
let view = {x:0, y:0, k:1};
let tool = 'select';                 // 'select' | 'add-state' | 'connect'
let selected = null;                 // {type:'state'|'edge', id, key?}
let dragging = null;                 // {kind:'state'|'pan', id?, ox, oy, sx, sy}
let connecting = null;               // {from, x, y}
let panMode = false;
let spaceDown = false;
let lastTouchTap = {id:null, time:0};
let suppressStateClickUntil = 0;

function setSvgViewBox() {
    const r = svg.getBoundingClientRect();
    svg.setAttribute('viewBox', `0 0 ${r.width} ${r.height}`);
}
function applyViewTransform() {
    viewport.setAttribute('transform', `translate(${view.x},${view.y}) scale(${view.k})`);
}
function svgPoint(evt) {
    const r = svg.getBoundingClientRect();
    return { x: evt.clientX - r.left, y: evt.clientY - r.top };
}
function worldPoint(evt) {
    const p = svgPoint(evt);
    return { x: (p.x - view.x) / view.k, y: (p.y - view.y) / view.k };
}
function touchAsMouseEvent(e) {
    const t = e.touches[0] || e.changedTouches[0];
    return {
        clientX: t.clientX,
        clientY: t.clientY,
        button: 0,
        target: e.target,
        shiftKey: false,
        preventDefault: () => e.preventDefault(),
        stopPropagation: () => e.stopPropagation(),
    };
}

window.zoom = function(factor) {
    const r = svg.getBoundingClientRect();
    const cx = r.width/2, cy = r.height/2;
    const wx = (cx - view.x) / view.k;
    const wy = (cy - view.y) / view.k;
    view.k = Math.max(0.3, Math.min(3, view.k * factor));
    view.x = cx - wx * view.k;
    view.y = cy - wy * view.k;
    applyViewTransform();
};
window.resetView = function() {
    view = {x:0, y:0, k:1};
    applyViewTransform();
    if (model.states.length) fitView();
};

window.toggleFullscreen = function() {
    const wrap = document.querySelector('.ae-canvas-wrap');
    const isFs = wrap.classList.toggle('fullscreen');
    document.body.classList.toggle('ae-fs-active', isFs);
    const btn = document.getElementById('btn-fs');
    btn.innerHTML = isFs ? '<i class="fas fa-compress-arrows-alt"></i>' : '<i class="fas fa-expand-arrows-alt"></i>';
    btn.title = isFs ? 'Vollbild verlassen (F / Esc)' : 'Vollbild (F)';
    setTimeout(() => { setSvgViewBox(); fitView(); }, 50);
};
function fitView() {
    if (!model.states.length) return;
    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
    model.states.forEach(s => {
        minX = Math.min(minX, s.x - 60);
        minY = Math.min(minY, s.y - 60);
        maxX = Math.max(maxX, s.x + 60);
        maxY = Math.max(maxY, s.y + 60);
    });
    const r = svg.getBoundingClientRect();
    const w = maxX - minX, h = maxY - minY;
    const k = Math.min(r.width/w, r.height/h, 1.2);
    view.k = k;
    view.x = r.width/2 - (minX + w/2) * k;
    view.y = r.height/2 - (minY + h/2) * k;
    applyViewTransform();
}

svg.addEventListener('wheel', e => {
    e.preventDefault();
    const p = svgPoint(e);
    const factor = e.deltaY < 0 ? 1.1 : 1/1.1;
    const wx = (p.x - view.x) / view.k;
    const wy = (p.y - view.y) / view.k;
    view.k = Math.max(0.3, Math.min(3, view.k * factor));
    view.x = p.x - wx * view.k;
    view.y = p.y - wy * view.k;
    applyViewTransform();
}, {passive:false});

// ──────── Tool / cursor ────────
window.setTool = function(t) {
    tool = t;
    svg.classList.remove('add-state-mode', 'connect-mode', 'pan-mode');
    if (t === 'add-state') svg.classList.add('add-state-mode');
    else if (t === 'connect') svg.classList.add('connect-mode');
    document.querySelectorAll('#tool-add-state,#tool-connect,#tool-select').forEach(b => b.classList.remove('accent'));
    const btn = document.getElementById('tool-'+t);
    if (btn) { btn.classList.add('accent'); btn.classList.remove('ghost'); }
    ['select','connect','add-state'].forEach(x => {
        const b = document.getElementById('tool-'+x);
        if (b && x !== t) { b.classList.add('ghost'); b.classList.remove('accent'); }
    });
    showHint(
        t === 'add-state' ? 'Klick auf den Canvas, um einen Zustand zu erzeugen. Doppelklick funktioniert auch immer.'
        : t === 'connect' ? 'Erst Quell-Zustand klicken, dann Ziel-Zustand. Abbrechen mit Esc.'
        : ''
    );
    connecting = null;
    renderOverlay();
};

let hintTimer;
function showHint(text) {
    const el = document.getElementById('ae-hint');
    if (!text) { el.classList.remove('show'); return; }
    el.innerHTML = text;
    el.classList.add('show');
    clearTimeout(hintTimer);
    hintTimer = setTimeout(() => el.classList.remove('show'), 3500);
}

// ──────── Mode switch ────────
window.setMode = function(mode) {
    if (model.type === mode) return;
    snapshot();
    const wasMoore = model.type === 'moore';
    const becomesMoore = mode === 'moore';
    const becomesMealy = mode === 'mealy';

    if (wasMoore && becomesMealy) {
        // Move state outputs onto outgoing edges
        model.transitions.forEach(t => {
            const fromState = findState(t.from);
            const out = fromState && fromState.output ? fromState.output : '';
            // Set outputs[i] for each input that has no output yet
            t.outputs = t.inputs.map((_, i) => t.outputs[i] || out);
        });
        model.states.forEach(s => delete s.output);
    } else if (becomesMoore) {
        // Move outputs from edges into source state (use first output seen)
        const acc = {};
        model.transitions.forEach(t => {
            if (t.outputs && t.outputs.length) {
                const o = t.outputs.find(x => x);
                if (o && !acc[t.from]) acc[t.from] = o;
            }
        });
        model.states.forEach(s => { if (acc[s.id]) s.output = acc[s.id]; });
        model.transitions.forEach(t => delete t.outputs);
    } else if (mode === 'dfa') {
        // Drop outputs entirely
        model.transitions.forEach(t => delete t.outputs);
        model.states.forEach(s => delete s.output);
    }

    model.type = mode;
    document.querySelectorAll('.ae-mode-btn').forEach(b => b.classList.toggle('active', b.dataset.mode === mode));
    document.getElementById('trans-mode-suffix').textContent = mode === 'mealy' ? '   ·   λ : Q × Σ → Γ' : mode === 'moore' ? '   ·   λ : Q → Γ' : '   ·   F ⊆ Q';
    document.getElementById('moore-output-hint').style.display = mode === 'moore' ? '' : 'none';
    renderAll();
    persist();
};

// ════════════════════════════════════════════════════════════════════════
//  MODEL OPERATIONS
// ════════════════════════════════════════════════════════════════════════

function addState(x, y, label) {
    snapshot();
    const id = uid();
    const lab = label || newStateId();
    const isFirst = model.states.length === 0;
    const st = { id, label: lab, x, y, isStart: isFirst, isAccepting: false };
    if (model.type === 'moore') st.output = '';
    model.states.push(st);
    renderAll();
    persist();
    return st;
}

function deleteState(id) {
    snapshot();
    model.states = model.states.filter(s => s.id !== id);
    model.transitions = model.transitions.filter(t => t.from !== id && t.to !== id);
    if (model.states.length && !model.states.some(s => s.isStart)) {
        model.states[0].isStart = true;
    }
    renderAll();
    persist();
}

function addOrMergeTransition(from, to, inputs, outputs) {
    snapshot();
    let t = findTransition(from, to);
    if (!t) {
        t = { id: uid(), from, to, inputs: [], outputs: [] };
        model.transitions.push(t);
    }
    if (!inputs) inputs = [''];
    inputs.forEach((inp, i) => {
        if (!t.inputs.includes(inp)) {
            t.inputs.push(inp);
            if (model.type === 'mealy') t.outputs.push((outputs && outputs[i]) || '');
        } else if (model.type === 'mealy' && outputs && outputs[i] !== undefined) {
            const idx = t.inputs.indexOf(inp);
            t.outputs[idx] = outputs[i];
        }
    });
    renderAll();
    persist();
    return t;
}

function deleteTransition(id) {
    snapshot();
    model.transitions = model.transitions.filter(t => t.id !== id);
    renderAll();
    persist();
}

function updateStateLabel(id, label) {
    const s = findState(id);
    if (!s || s.label === label) return;
    snapshot();
    s.label = label;
    renderAll();
    persist();
}
function setStart(id) {
    snapshot();
    model.states.forEach(s => s.isStart = (s.id === id));
    renderAll();
    persist();
}
function toggleAccept(id) {
    snapshot();
    const s = findState(id);
    if (s) s.isAccepting = !s.isAccepting;
    renderAll();
    persist();
}
function setStateOutput(id, val) {
    const s = findState(id);
    if (!s || s.output === val) return;
    snapshot();
    s.output = val;
    renderAll();
    persist();
}

window.addStateAtCenter = function() {
    const r = svg.getBoundingClientRect();
    const wx = (r.width/2 - view.x) / view.k;
    const wy = (r.height/2 - view.y) / view.k;
    const offset = model.states.length * 14;
    addState(wx + offset, wy + offset);
};

window.clearAll = function() {
    if (!confirm('Alle Zustände und Übergänge löschen?')) return;
    snapshot();
    model.states = [];
    model.transitions = [];
    model.counter = 0;
    selected = null;
    renderAll();
    persist();
};

// ════════════════════════════════════════════════════════════════════════
//  RENDERING
// ════════════════════════════════════════════════════════════════════════
function renderAll() {
    // Sim safety: if active state was deleted, reset sim
    if (sim.current && !findState(sim.current.id)) {
        clearInterval(sim.autoTimer);
        sim.current = null; sim.finished = false; sim.error = null;
        sim.history = []; sim.visited = new Set(); sim.lastEdgeId = null;
        sim.outputs = []; sim.pos = 0; sim.tape = [];
    }
    renderStates();
    renderEdges();
    renderTable();
    renderStatesList();
    renderStats();
    renderValidation();
    renderPalette();
    renderSim();
}

function renderStats() {
    document.getElementById('stat-states').textContent = model.states.length;
    document.getElementById('stat-trans').textContent = model.transitions.length;
    const alpha = getAlphabet();
    document.getElementById('stat-alpha').textContent = alpha.length ? '{' + alpha.join(', ') + '}' : '∅';
}

function getAlphabet() {
    const set = new Set();
    model.transitions.forEach(t => t.inputs.forEach(i => { if (i !== '') set.add(i); }));
    return Array.from(set).sort();
}
function getDisplayAlphabet() {
    const orig = getAlphabet();
    const extra = (model._extraAlpha || []).filter(a => !orig.includes(a));
    return [...orig, ...extra].sort();
}
function getOutputAlphabet() {
    const set = new Set();
    if (model.type === 'mealy') {
        model.transitions.forEach(t => (t.outputs||[]).forEach(o => { if (o !== '') set.add(o); }));
    } else if (model.type === 'moore') {
        model.states.forEach(s => { if (s.output) set.add(s.output); });
    }
    return Array.from(set).sort();
}

// ──────── States rendering ────────
function renderStates() {
    statesG.innerHTML = '';
    model.states.forEach(s => {
        const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
        g.setAttribute('transform', `translate(${s.x},${s.y})`);
        g.dataset.id = s.id;
        const isSel = selected && selected.type === 'state' && selected.id === s.id;
        // Start arrow
        if (s.isStart) {
            const arrow = document.createElementNS('http://www.w3.org/2000/svg', 'path');
            arrow.setAttribute('d', `M ${-STATE_R - 24},0 L ${-STATE_R - 2},0`);
            arrow.setAttribute('class', 'ae-state-start-arrow' + (isSel ? ' selected' : ''));
            arrow.setAttribute('marker-end', isSel ? 'url(#ae-arrow-sel)' : 'url(#ae-arrow)');
            g.appendChild(arrow);
        }
        // Circle
        const c = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
        c.setAttribute('r', STATE_R);
        let simCls = '';
        if (sim && sim.current && sim.current.id === s.id) simCls = sim.error ? ' sim-active-err' : ' sim-active';
        else if (sim && sim.visited && sim.visited.has(s.id)) simCls = ' sim-visited';
        c.setAttribute('class', 'ae-state-circle' + (isSel ? ' selected' : '') + simCls);
        g.appendChild(c);
        // Accept (DFA) — inner circle
        if (s.isAccepting) {
            const ac = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
            ac.setAttribute('r', STATE_R - 5);
            ac.setAttribute('class', 'ae-state-accept' + (isSel ? ' selected' : ''));
            g.appendChild(ac);
        }
        // Larger invisible finger target for touch screens.
        const hit = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
        hit.setAttribute('r', STATE_R + 14);
        hit.setAttribute('class', 'ae-state-touch-hit');
        g.appendChild(hit);
        // Label
        const lab = document.createElementNS('http://www.w3.org/2000/svg', 'text');
        lab.setAttribute('class', 'ae-state-label');
        lab.setAttribute('y', model.type === 'moore' && s.output ? -3 : 5);
        lab.textContent = s.label;
        g.appendChild(lab);
        // Moore output
        if (model.type === 'moore' && s.output) {
            const o = document.createElementNS('http://www.w3.org/2000/svg', 'text');
            o.setAttribute('class', 'ae-state-out');
            o.setAttribute('y', 13);
            o.textContent = '/' + s.output;
            g.appendChild(o);
        }
        // Mouse interactions
        g.addEventListener('mousedown', e => onStateMouseDown(e, s.id));
        g.addEventListener('touchstart', e => onStateTouchStart(e, s.id), {passive:false});
        g.addEventListener('dblclick', e => { e.stopPropagation(); openStateEditor(s.id); });
        g.addEventListener('contextmenu', e => { e.preventDefault(); openContextMenu(e.clientX, e.clientY, 'state', s.id); });
        g.addEventListener('click', e => {
            if (Date.now() < suppressStateClickUntil) {
                e.stopPropagation();
                return;
            }
            if (tool === 'connect') {
                e.stopPropagation();
                handleConnectClick(s.id);
            }
        });
        statesG.appendChild(g);
    });
}

// ──────── Edges rendering ────────
function renderEdges() {
    edgesG.innerHTML = '';
    model.transitions.forEach(t => renderEdge(t));
}

function renderEdge(t) {
    const from = findState(t.from);
    const to = findState(t.to);
    if (!from || !to) return;
    const isSel = selected && selected.type === 'edge' && selected.id === t.id;

    let path, labelX, labelY;
    if (from.id === to.id) {
        // Self loop
        const cx = from.x, cy = from.y - STATE_R - 35;
        const r = 22;
        // Two attach points on the state circle
        const a1x = from.x - 14, a1y = from.y - STATE_R + 3;
        const a2x = from.x + 14, a2y = from.y - STATE_R + 3;
        path = `M ${a1x},${a1y} C ${cx-40},${cy} ${cx+40},${cy} ${a2x},${a2y}`;
        labelX = cx;
        labelY = cy - 5;
    } else {
        const dx = to.x - from.x, dy = to.y - from.y;
        const dist = Math.sqrt(dx*dx + dy*dy) || 1;
        const ux = dx/dist, uy = dy/dist;
        // perpendicular
        const px = -uy, py = ux;
        // does opposite edge exist?
        const opposite = findTransition(t.to, t.from);
        const curve = opposite ? 26 : 0;
        const sx = from.x + ux * STATE_R;
        const sy = from.y + uy * STATE_R;
        const ex = to.x - ux * STATE_R;
        const ey = to.y - uy * STATE_R;
        const mx = (sx + ex)/2 + px * curve;
        const my = (sy + ey)/2 + py * curve;
        // Quadratic curve
        path = `M ${sx},${sy} Q ${mx},${my} ${ex},${ey}`;
        labelX = mx + px * 8;
        labelY = my + py * 8;
    }

    // Hit area (transparent fat line for easy clicking)
    const hit = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    hit.setAttribute('d', path);
    hit.setAttribute('class', 'ae-edge-hit');
    hit.addEventListener('click', e => { e.stopPropagation(); selectEdge(t.id); });
    hit.addEventListener('dblclick', e => { e.stopPropagation(); openEdgeEditor(t.id); });
    hit.addEventListener('contextmenu', e => { e.preventDefault(); openContextMenu(e.clientX, e.clientY, 'edge', t.id); });
    edgesG.appendChild(hit);

    // Visible path
    const p = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    p.setAttribute('d', path);
    const isSimLast = sim && sim.lastEdgeId === t.id && !sim.error;
    p.setAttribute('class', 'ae-edge-path' + (isSel ? ' selected' : '') + (isSimLast ? ' sim-last' : ''));
    p.setAttribute('marker-end', (isSel || isSimLast) ? 'url(#ae-arrow-sel)' : 'url(#ae-arrow)');
    p.style.pointerEvents = 'none';
    edgesG.appendChild(p);

    // Label
    const labels = buildEdgeLabel(t);
    if (labels.length) {
        const text = labels.join(', ');
        const padX = 6, padY = 3;
        const approxW = text.length * 7 + padX*2;
        const approxH = 18;
        const bg = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
        bg.setAttribute('x', labelX - approxW/2);
        bg.setAttribute('y', labelY - approxH/2);
        bg.setAttribute('width', approxW);
        bg.setAttribute('height', approxH);
        bg.setAttribute('rx', 5);
        bg.setAttribute('class', 'ae-edge-label-bg' + (isSel ? ' selected' : ''));
        bg.addEventListener('click', e => { e.stopPropagation(); selectEdge(t.id); });
        bg.addEventListener('dblclick', e => { e.stopPropagation(); openEdgeEditor(t.id); });
        bg.addEventListener('contextmenu', e => { e.preventDefault(); openContextMenu(e.clientX, e.clientY, 'edge', t.id); });
        edgesG.appendChild(bg);
        const lbl = document.createElementNS('http://www.w3.org/2000/svg', 'text');
        lbl.setAttribute('class', 'ae-edge-label');
        lbl.setAttribute('x', labelX);
        lbl.setAttribute('y', labelY);
        lbl.textContent = text;
        edgesG.appendChild(lbl);
    }
}

function buildEdgeLabel(t) {
    const labels = [];
    t.inputs.forEach((inp, i) => {
        if (model.type === 'mealy') {
            const out = t.outputs && t.outputs[i];
            labels.push(out !== undefined && out !== '' ? `${inp}/${out}` : inp || 'ε');
        } else {
            labels.push(inp || 'ε');
        }
    });
    return labels;
}

// ──────── Overlay (pending connection) ────────
function renderOverlay() {
    overlayG.innerHTML = '';
    if (connecting) {
        const from = findState(connecting.from);
        if (from) {
            const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
            line.setAttribute('x1', from.x);
            line.setAttribute('y1', from.y);
            line.setAttribute('x2', connecting.x);
            line.setAttribute('y2', connecting.y);
            line.setAttribute('class', 'ae-edge-pending');
            overlayG.appendChild(line);
            // Highlight source state
            const ring = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
            ring.setAttribute('cx', from.x);
            ring.setAttribute('cy', from.y);
            ring.setAttribute('r', STATE_R + 5);
            ring.setAttribute('fill', 'none');
            ring.setAttribute('stroke', '#10b981');
            ring.setAttribute('stroke-width', '2');
            ring.setAttribute('stroke-dasharray', '4 3');
            ring.style.pointerEvents = 'none';
            overlayG.appendChild(ring);
        }
    }
}

// ════════════════════════════════════════════════════════════════════════
//  INTERACTIONS
// ════════════════════════════════════════════════════════════════════════
function onStateMouseDown(e, id) {
    if (e.button !== 0) return;
    if (panMode || spaceDown) return;
    e.stopPropagation();
    const s = findState(id);
    if (!s) return;

    if (tool === 'connect') return;

    if (e.shiftKey) {
        // Start connection
        const w = worldPoint(e);
        connecting = { from: id, x: w.x, y: w.y };
        renderOverlay();
        return;
    }

    selected = {type:'state', id};
    renderStates();
    renderStatesList();
    const w = worldPoint(e);
    dragging = { kind:'state', id, ox: w.x - s.x, oy: w.y - s.y, moved:false };
}
function onStateTouchStart(e, id) {
    if (e.touches.length !== 1) return;
    e.preventDefault();
    if (tool === 'connect') {
        e.stopPropagation();
        suppressStateClickUntil = Date.now() + 700;
        handleConnectClick(id);
        return;
    }
    onStateMouseDown(touchAsMouseEvent(e), id);
}

function handleConnectClick(toId) {
    if (!connecting) {
        const from = findState(toId);
        if (!from) return;
        connecting = { from: toId, x: from.x, y: from.y };
        selected = {type:'state', id:toId};
        renderStates();
        renderStatesList();
        renderOverlay();
        showHint('Ziel-Zustand antippen/klicken. Esc oder leere Fläche bricht ab.');
    } else {
        const fromId = connecting.from;
        if (!findState(fromId) || !findState(toId)) {
            connecting = null;
            renderOverlay();
            return;
        }
        connecting = null;
        // For DFA/Moore: input only; Mealy: input + output
        const inp = prompt(model.type === 'mealy'
            ? 'Eingabe-Symbol(e) (mehrere mit Komma trennen, z. B. 0,1):'
            : 'Eingabe-Symbol(e) (mehrere mit Komma trennen):', '0');
        if (inp === null) { renderOverlay(); return; }
        const inputs = inp.split(',').map(s => s.trim()).filter(s => s !== '');
        let outputs = [];
        if (model.type === 'mealy') {
            const out = prompt('Ausgabe-Symbol für jeden Eingang (mit Komma getrennt, oder ein einzelnes Symbol für alle):', '0');
            if (out !== null) {
                const arr = out.split(',').map(s => s.trim());
                outputs = inputs.map((_, i) => arr[i] !== undefined ? arr[i] : arr[0] || '');
            } else {
                outputs = inputs.map(() => '');
            }
        }
        addOrMergeTransition(fromId, toId, inputs.length ? inputs : [''], outputs);
        renderOverlay();
    }
}

svg.addEventListener('mousedown', e => {
    if (e.button === 1 || (e.button === 0 && (panMode || spaceDown))) {
        // Pan
        dragging = { kind:'pan', sx: e.clientX, sy: e.clientY, ox: view.x, oy: view.y };
        svg.classList.add('panning');
        e.preventDefault();
        return;
    }
    if (e.button !== 0) return;
    if (e.target === svg || e.target === viewport) {
        if (tool === 'add-state') {
            const w = worldPoint(e);
            addState(w.x, w.y);
        } else {
            // Deselect
            selected = null;
            connecting = null;
            renderStates(); renderEdges(); renderStatesList(); renderOverlay();
            closeContextMenu();
        }
    }
});

svg.addEventListener('touchstart', e => {
    if (e.touches.length === 2) {
        const a = e.touches[0], b = e.touches[1];
        dragging = {
            kind:'pinch',
            sx:(a.clientX + b.clientX) / 2,
            sy:(a.clientY + b.clientY) / 2,
            ox:view.x,
            oy:view.y,
            dist:Math.hypot(a.clientX - b.clientX, a.clientY - b.clientY),
            k:view.k,
        };
        e.preventDefault();
        return;
    }
    if (e.touches.length !== 1) return;
    const fake = touchAsMouseEvent(e);
    if (e.target === svg || e.target === viewport) {
        if (tool === 'add-state') {
            const w = worldPoint(fake);
            addState(w.x, w.y);
        } else if (tool === 'connect' && connecting) {
            connecting = null;
            selected = null;
            renderStates(); renderEdges(); renderStatesList(); renderOverlay();
        } else {
            dragging = { kind:'pan', sx:fake.clientX, sy:fake.clientY, ox:view.x, oy:view.y };
            svg.classList.add('panning');
        }
        e.preventDefault();
    }
}, {passive:false});

svg.addEventListener('dblclick', e => {
    if (e.target === svg || e.target === viewport) {
        const w = worldPoint(e);
        addState(w.x, w.y);
    }
});

window.addEventListener('mousemove', e => {
    if (connecting) {
        const w = worldPoint(e);
        connecting.x = w.x;
        connecting.y = w.y;
        renderOverlay();
    }
    if (!dragging) return;
    if (dragging.kind === 'state') {
        const w = worldPoint(e);
        const s = findState(dragging.id);
        if (s) {
            s.x = w.x - dragging.ox;
            s.y = w.y - dragging.oy;
            dragging.moved = true;
            renderStates();
            renderEdges();
        }
    } else if (dragging.kind === 'pan') {
        view.x = dragging.ox + (e.clientX - dragging.sx);
        view.y = dragging.oy + (e.clientY - dragging.sy);
        applyViewTransform();
    }
});

window.addEventListener('touchmove', e => {
    if (!dragging && !connecting) return;
    if (dragging && dragging.kind === 'pinch' && e.touches.length === 2) {
        const a = e.touches[0], b = e.touches[1];
        const cx = (a.clientX + b.clientX) / 2;
        const cy = (a.clientY + b.clientY) / 2;
        const dist = Math.hypot(a.clientX - b.clientX, a.clientY - b.clientY) || dragging.dist;
        const nextK = Math.max(0.3, Math.min(3, dragging.k * dist / Math.max(1, dragging.dist)));
        const wx = (dragging.sx - dragging.ox) / dragging.k;
        const wy = (dragging.sy - dragging.oy) / dragging.k;
        view.k = nextK;
        view.x = cx - wx * nextK;
        view.y = cy - wy * nextK;
        applyViewTransform();
        e.preventDefault();
        return;
    }
    if (e.touches.length !== 1) return;
    const fake = touchAsMouseEvent(e);
    if (connecting) {
        const w = worldPoint(fake);
        connecting.x = w.x;
        connecting.y = w.y;
        renderOverlay();
    }
    if (dragging && dragging.kind === 'state') {
        const w = worldPoint(fake);
        const s = findState(dragging.id);
        if (s) {
            s.x = w.x - dragging.ox;
            s.y = w.y - dragging.oy;
            dragging.moved = true;
            renderStates();
            renderEdges();
        }
    } else if (dragging && dragging.kind === 'pan') {
        view.x = dragging.ox + (fake.clientX - dragging.sx);
        view.y = dragging.oy + (fake.clientY - dragging.sy);
        applyViewTransform();
    }
    e.preventDefault();
}, {passive:false});

window.addEventListener('mouseup', e => {
    if (connecting && e.target === svg) {
        // Released on empty canvas → cancel
    }
    if (dragging && dragging.kind === 'state' && dragging.moved) {
        snapshot();
        persist();
    }
    dragging = null;
    svg.classList.remove('panning');
});

window.addEventListener('touchend', e => {
    if (!dragging) return;
    if (dragging && dragging.kind === 'state') {
        if (dragging.moved) {
            snapshot();
            persist();
        } else {
            const now = Date.now();
            if (lastTouchTap.id === dragging.id && now - lastTouchTap.time < 360) {
                openStateEditor(dragging.id);
                lastTouchTap = {id:null, time:0};
            } else {
                lastTouchTap = {id:dragging.id, time:now};
            }
        }
    }
    dragging = null;
    svg.classList.remove('panning');
    e.preventDefault();
}, {passive:false});

// Keyboard
window.addEventListener('keydown', e => {
    const inField = ['INPUT','TEXTAREA','SELECT'].includes(document.activeElement.tagName);
    if (e.code === 'Space' && !inField) { spaceDown = true; svg.classList.add('pan-mode'); }
    if (inField) return;
    if (e.ctrlKey || e.metaKey) {
        if (e.key === 'z') { e.preventDefault(); undo(); }
        else if (e.key === 'y' || (e.shiftKey && e.key === 'Z')) { e.preventDefault(); redo(); }
        else if (e.key === 's') { e.preventDefault(); openExport(); }
        return;
    }
    if (e.key === 'Delete' || e.key === 'Backspace') {
        if (selected) {
            if (selected.type === 'state') deleteState(selected.id);
            else if (selected.type === 'edge') deleteTransition(selected.id);
            selected = null;
        }
    } else if (e.key === 'Escape') {
        connecting = null;
        selected = null;
        closeContextMenu();
        cancelInlineEdit();
        if (document.querySelector('.ae-canvas-wrap').classList.contains('fullscreen')) toggleFullscreen();
        renderAll();
    } else if (e.key === 'n' || e.key === 'N') setTool('add-state');
    else if (e.key === 'e' || e.key === 'E') setTool('connect');
    else if (e.key === 'v' || e.key === 'V') setTool('select');
    else if (e.key === 'f' || e.key === 'F') toggleFullscreen();
});
window.addEventListener('keyup', e => {
    if (e.code === 'Space') { spaceDown = false; svg.classList.remove('pan-mode'); }
});

function selectEdge(id) {
    selected = {type:'edge', id};
    renderStates();
    renderEdges();
}

// ════════════════════════════════════════════════════════════════════════
//  TABLE RENDERING (Transitions)
// ════════════════════════════════════════════════════════════════════════
function renderTable() {
    const tbl = document.getElementById('trans-table');
    const alpha = getDisplayAlphabet();
    if (model.states.length === 0) {
        tbl.innerHTML = '<tr><td class="ae-table-empty">Noch keine Zustände – klick auf den Canvas oder „+ Zustand".</td></tr>';
        return;
    }

    let h = '<thead><tr><th class="row-head">Zustand</th>';
    alpha.forEach(a => h += `<th>δ(·, <code>${escapeHtml(a)}</code>)</th>`);
    if (model.type === 'moore') h += '<th>λ</th>';
    h += '</tr></thead><tbody>';

    model.states.forEach(s => {
        h += '<tr>';
        const flags = (s.isStart ? '→' : '') + (s.isAccepting ? '✓' : '');
        h += `<td class="row-head${s.isStart ? ' start-cell' : ''}">${flags ? `<span style="color:var(--accent); font-weight:900">${flags}</span> ` : ''}<input data-action="rename" data-id="${s.id}" value="${escapeHtml(s.label)}"></td>`;
        alpha.forEach(a => {
            const t = model.transitions.find(t => t.from === s.id && t.inputs.includes(a));
            let cell = '';
            if (t) {
                const to = findState(t.to);
                const idx = t.inputs.indexOf(a);
                if (model.type === 'mealy') {
                    const out = t.outputs && t.outputs[idx] ? t.outputs[idx] : '';
                    cell = to.label + (out ? '/' + out : '');
                } else {
                    cell = to.label;
                }
            }
            h += `<td><input data-action="trans" data-from="${s.id}" data-sym="${escapeHtml(a)}" value="${escapeHtml(cell)}" placeholder="—"></td>`;
        });
        if (model.type === 'moore') {
            h += `<td><input data-action="output" data-id="${s.id}" value="${escapeHtml(s.output||'')}" placeholder="—" style="text-align:center"></td>`;
        }
        h += '</tr>';
    });
    h += '</tbody>';
    tbl.innerHTML = h;

    // Wire events
    tbl.querySelectorAll('input[data-action]').forEach(inp => {
        inp.addEventListener('change', onTableChange);
        inp.addEventListener('blur', onTableChange);
    });
}

function onTableChange(e) {
    const inp = e.target;
    const action = inp.dataset.action;
    const val = inp.value.trim();
    if (action === 'rename') {
        if (!val) { renderTable(); return; }
        if (model.states.some(s => s.id !== inp.dataset.id && s.label === val)) {
            alert('Zustandsname existiert bereits.');
            renderTable(); return;
        }
        updateStateLabel(inp.dataset.id, val);
    } else if (action === 'output') {
        setStateOutput(inp.dataset.id, val);
    } else if (action === 'trans') {
        const fromId = inp.dataset.from;
        const sym = inp.dataset.sym;
        // Remove existing transition for this from+sym
        snapshot();
        suppressHistory = true;
        let removed = false;
        model.transitions.forEach(t => {
            if (t.from === fromId) {
                const idx = t.inputs.indexOf(sym);
                if (idx >= 0) {
                    t.inputs.splice(idx, 1);
                    if (t.outputs) t.outputs.splice(idx, 1);
                    removed = true;
                }
            }
        });
        // Drop empty transitions
        model.transitions = model.transitions.filter(t => t.inputs.length > 0);
        // Parse new value
        if (val) {
            let target = val, output = null;
            if (model.type === 'mealy' && val.includes('/')) {
                const parts = val.split('/');
                target = parts[0].trim();
                output = parts.slice(1).join('/').trim();
            }
            let toState = findStateByLabel(target);
            if (!toState) {
                // Auto-create state
                const r = svg.getBoundingClientRect();
                const wx = (r.width/2 - view.x) / view.k;
                const wy = (r.height/2 - view.y) / view.k;
                const off = model.states.length * 20;
                toState = { id: uid(), label: target, x: wx + off, y: wy + off, isStart: false, isAccepting: false };
                if (model.type === 'moore') toState.output = '';
                model.states.push(toState);
            }
            let t = findTransition(fromId, toState.id);
            if (!t) {
                t = { id: uid(), from: fromId, to: toState.id, inputs: [], outputs: [] };
                model.transitions.push(t);
            }
            t.inputs.push(sym);
            if (model.type === 'mealy') t.outputs.push(output || '');
        }
        suppressHistory = false;
        renderAll();
        persist();
    }
}

window.addSymbol = function() {
    const sym = prompt('Neues Eingabe-Symbol (Spalte hinzufügen):', '');
    if (!sym) return;
    const a = sym.trim();
    if (!a) return;
    if (getDisplayAlphabet().includes(a)) { alert('Symbol existiert bereits.'); return; }
    if (!model._extraAlpha) model._extraAlpha = [];
    if (!model._extraAlpha.includes(a)) model._extraAlpha.push(a);
    renderTable();
    persist();
};

window.fillTable = function() {
    if (!getDisplayAlphabet().length) {
        if (!model._extraAlpha) model._extraAlpha = [];
        if (!model._extraAlpha.includes('0')) model._extraAlpha.push('0');
        if (!model._extraAlpha.includes('1')) model._extraAlpha.push('1');
    }
    renderTable();
    persist();
};

// ════════════════════════════════════════════════════════════════════════
//  STATES LIST
// ════════════════════════════════════════════════════════════════════════
function renderStatesList() {
    const el = document.getElementById('state-list');
    if (!model.states.length) {
        el.innerHTML = '<div class="ae-table-empty">Noch keine Zustände – klick auf den Canvas.</div>';
        return;
    }
    el.innerHTML = '';
    model.states.forEach((s, i) => {
        const row = document.createElement('div');
        row.className = 'ae-state-row' + (selected && selected.type==='state' && selected.id===s.id ? ' selected' : '');
        const inp = `<input value="${escapeHtml(s.label)}" data-id="${s.id}" data-action="label">`;
        const outInp = model.type === 'moore'
            ? `<input value="${escapeHtml(s.output||'')}" data-id="${s.id}" data-action="output" placeholder="Ausgabe" style="width:80px">`
            : '';
        row.innerHTML = `
            <span class="sr-id">${i+1}.</span>
            <div style="display:flex; gap:6px; align-items:center">${inp}${outInp}</div>
            <div class="sr-flags">
                <button class="ae-flag-btn start ${s.isStart?'active':''}" title="Startzustand" data-id="${s.id}" data-action="start"><i class="fas fa-play"></i></button>
                <button class="ae-flag-btn ${s.isAccepting?'active':''}" title="Akzeptierend" data-id="${s.id}" data-action="accept"><i class="fas fa-check"></i></button>
            </div>
            <button class="ae-flag-btn del" data-id="${s.id}" data-action="delete" title="Löschen"><i class="fas fa-trash"></i></button>
        `;
        row.addEventListener('click', e => {
            if (e.target.closest('button') || e.target.tagName === 'INPUT') return;
            selected = {type:'state', id:s.id};
            renderStates();
            renderStatesList();
        });
        el.appendChild(row);
    });
    el.querySelectorAll('input').forEach(inp => {
        inp.addEventListener('change', () => {
            const action = inp.dataset.action;
            const id = inp.dataset.id;
            if (action === 'label') {
                const v = inp.value.trim();
                if (!v) { renderStatesList(); return; }
                if (model.states.some(x => x.id !== id && x.label === v)) {
                    alert('Name existiert bereits.');
                    renderStatesList(); return;
                }
                updateStateLabel(id, v);
            } else if (action === 'output') {
                setStateOutput(id, inp.value.trim());
            }
        });
    });
    el.querySelectorAll('button').forEach(b => {
        b.addEventListener('click', e => {
            const id = b.dataset.id;
            const action = b.dataset.action;
            if (action === 'start') setStart(id);
            else if (action === 'accept') toggleAccept(id);
            else if (action === 'delete') deleteState(id);
        });
    });
}

// ════════════════════════════════════════════════════════════════════════
//  VALIDATION
// ════════════════════════════════════════════════════════════════════════
function renderValidation() {
    const el = document.getElementById('ae-validation');
    const alpha = getAlphabet();
    const cards = [];

    if (!model.states.length) {
        el.innerHTML = '<div class="ae-valid-card warn"><div class="v-icon"><i class="fas fa-circle-info"></i></div><div class="v-text"><div class="v-title">Status</div><div class="v-msg">Leerer Automat</div></div></div>';
        return;
    }

    // Startzustand
    const starts = model.states.filter(s => s.isStart);
    cards.push({
        cls: starts.length === 1 ? 'ok' : 'err',
        icon: starts.length === 1 ? 'fa-play' : 'fa-exclamation-triangle',
        title: 'Startzustand',
        msg: starts.length === 0 ? 'Keiner definiert' : starts.length === 1 ? starts[0].label : starts.length + ' (sollte 1 sein)'
    });

    // Determinismus
    let deterministic = true;
    let conflict = null;
    model.states.forEach(s => {
        alpha.forEach(a => {
            const targets = model.transitions.filter(t => t.from === s.id && t.inputs.includes(a));
            if (targets.length > 1) { deterministic = false; conflict = `${s.label}, ${a}`; }
        });
    });
    cards.push({
        cls: deterministic ? 'ok' : 'warn',
        icon: deterministic ? 'fa-check' : 'fa-code-fork',
        title: 'Determinismus',
        msg: deterministic ? 'Deterministisch (DFA)' : 'Nicht-deterministisch (' + conflict + ')'
    });

    // Vollständigkeit
    if (alpha.length) {
        let complete = true, missing = 0;
        model.states.forEach(s => {
            alpha.forEach(a => {
                if (!model.transitions.some(t => t.from === s.id && t.inputs.includes(a))) {
                    complete = false; missing++;
                }
            });
        });
        cards.push({
            cls: complete ? 'ok' : 'warn',
            icon: complete ? 'fa-circle-check' : 'fa-circle-half-stroke',
            title: 'Vollständigkeit',
            msg: complete ? 'Vollständig' : missing + ' Übergänge fehlen'
        });
    }

    // Erreichbarkeit
    if (starts.length === 1) {
        const reachable = new Set([starts[0].id]);
        let changed = true;
        while (changed) {
            changed = false;
            model.transitions.forEach(t => {
                if (reachable.has(t.from) && !reachable.has(t.to)) {
                    reachable.add(t.to); changed = true;
                }
            });
        }
        const unreachable = model.states.length - reachable.size;
        cards.push({
            cls: unreachable === 0 ? 'ok' : 'warn',
            icon: unreachable === 0 ? 'fa-network-wired' : 'fa-circle-exclamation',
            title: 'Erreichbarkeit',
            msg: unreachable === 0 ? 'Alle erreichbar' : unreachable + ' unerreichbar'
        });
    }

    // Größe
    cards.push({
        cls: 'ok',
        icon: 'fa-database',
        title: 'Größe',
        msg: `|Q|=${model.states.length}, |Σ|=${alpha.length}, |δ|=${countTotalTransitions()}`
    });

    el.innerHTML = cards.map(c => `
        <div class="ae-valid-card ${c.cls}">
            <div class="v-icon"><i class="fas ${c.icon}"></i></div>
            <div class="v-text">
                <div class="v-title">${c.title}</div>
                <div class="v-msg">${c.msg}</div>
            </div>
        </div>
    `).join('');
}
function countTotalTransitions() {
    return model.transitions.reduce((sum, t) => sum + t.inputs.length, 0);
}

// ════════════════════════════════════════════════════════════════════════
//  SIMULATOR
// ════════════════════════════════════════════════════════════════════════
let sim = {
    tape: [],
    pos: 0,
    current: null,
    outputs: [],
    history: [],          // snapshots: {pos, currentId, outputs, lastEdgeId, error}
    visited: new Set(),
    lastEdgeId: null,
    error: null,
    finished: false,
    accepted: null,
    autoTimer: null,
    speed: 550,
    running: false,
};

function simInitial() {
    const start = model.states.find(s => s.isStart);
    if (!start) return null;
    return {
        pos: 0,
        currentId: start.id,
        outputs: model.type === 'moore' && start.output ? [start.output] : [],
        lastEdgeId: null,
        error: null,
        finished: false,
        accepted: null,
    };
}

function applySimSnapshot(snap) {
    sim.pos = snap.pos;
    sim.current = findState(snap.currentId);
    sim.outputs = [...snap.outputs];
    sim.lastEdgeId = snap.lastEdgeId;
    sim.error = snap.error;
    sim.finished = snap.finished;
    sim.accepted = snap.accepted;
    sim.visited.add(snap.currentId);
}

window.onSimInputChange = function() {
    if (sim.current) simReset();
    renderPalette();
};

window.simStep = function() {
    if (!model.states.length) return;
    if (!sim.current) {
        const init = simInitial();
        if (!init) { showHint('<i class="fas fa-exclamation-triangle"></i> Kein Startzustand definiert.'); return; }
        const input = document.getElementById('sim-input').value;
        sim.tape = input.split('');
        sim.history = [];
        sim.visited = new Set();
        applySimSnapshot(init);
        renderSim();
        return;
    }
    if (sim.finished || sim.error) return;
    if (sim.pos >= sim.tape.length) {
        // End of tape
        sim.finished = true;
        if (model.type === 'dfa') sim.accepted = sim.current.isAccepting;
        renderSim();
        return;
    }
    // Snapshot before transition
    const snapBefore = {
        pos: sim.pos, currentId: sim.current.id, outputs: [...sim.outputs],
        lastEdgeId: sim.lastEdgeId, error: sim.error,
        finished: sim.finished, accepted: sim.accepted,
    };
    sim.history.push(snapBefore);

    const sym = sim.tape[sim.pos];
    const t = model.transitions.find(tr => tr.from === sim.current.id && tr.inputs.includes(sym));
    if (!t) {
        sim.error = { sym, from: sim.current.label };
        sim.finished = true;
        sim.accepted = false;
        renderSim();
        return;
    }
    const idx = t.inputs.indexOf(sym);
    if (model.type === 'mealy' && t.outputs && t.outputs[idx]) sim.outputs.push(t.outputs[idx]);
    sim.current = findState(t.to);
    sim.lastEdgeId = t.id;
    sim.visited.add(sim.current.id);
    if (model.type === 'moore' && sim.current.output) sim.outputs.push(sim.current.output);
    sim.pos++;
    if (sim.pos >= sim.tape.length) {
        sim.finished = true;
        if (model.type === 'dfa') sim.accepted = sim.current.isAccepting;
    }
    renderSim();
};

window.simBack = function() {
    if (!sim.history.length) return;
    clearInterval(sim.autoTimer); sim.running = false;
    const prev = sim.history.pop();
    applySimSnapshot(prev);
    renderSim();
};

window.simRun = function() {
    if (!sim.current) simStep();
    if (sim.finished || sim.error) return;
    sim.running = true;
    clearInterval(sim.autoTimer);
    document.getElementById('sim-btn-run').innerHTML = '<i class="fas fa-pause"></i> Pause';
    document.getElementById('sim-btn-run').onclick = simPause;
    sim.autoTimer = setInterval(() => {
        simStep();
        if (sim.finished || sim.error) simPause();
    }, sim.speed);
};
window.simPause = function() {
    clearInterval(sim.autoTimer);
    sim.running = false;
    const btn = document.getElementById('sim-btn-run');
    btn.innerHTML = '<i class="fas fa-play"></i> Auto';
    btn.onclick = simRun;
};
window.simReset = function() {
    clearInterval(sim.autoTimer);
    sim = {
        tape:[], pos:0, current:null, outputs:[], history:[],
        visited: new Set(), lastEdgeId:null, error:null,
        finished:false, accepted:null, autoTimer:null, speed: sim.speed, running:false,
    };
    document.getElementById('sim-btn-run').innerHTML = '<i class="fas fa-play"></i> Auto';
    document.getElementById('sim-btn-run').onclick = simRun;
    renderSim();
    // Re-render canvas without sim highlights
    renderStates();
    renderEdges();
};
window.updateSimSpeed = function() {
    sim.speed = parseInt(document.getElementById('sim-speed').value, 10);
    if (sim.running) { simPause(); simRun(); }
};

// Symbol palette
function renderPalette() {
    const el = document.getElementById('sim-palette');
    const alpha = getAlphabet();
    if (!alpha.length) {
        el.innerHTML = '';
        return;
    }
    let h = '<span class="lbl">Σ klicken:</span>';
    alpha.forEach(a => {
        h += `<button class="ae-sim-pal-btn" data-sym="${escapeHtml(a)}">${escapeHtml(a)}</button>`;
    });
    h += `<button class="ae-sim-pal-btn bs" data-act="bs" title="Letztes Symbol entfernen"><i class="fas fa-delete-left"></i></button>`;
    h += `<button class="ae-sim-pal-btn" data-act="clr" title="Eingabe leeren"><i class="fas fa-eraser"></i></button>`;
    el.innerHTML = h;
    el.querySelectorAll('button[data-sym]').forEach(b => b.addEventListener('click', () => appendSymbol(b.dataset.sym)));
    const bs = el.querySelector('button[data-act="bs"]'); if (bs) bs.addEventListener('click', backspaceSymbol);
    const cl = el.querySelector('button[data-act="clr"]'); if (cl) cl.addEventListener('click', clearSymbol);
}
window.appendSymbol = function(s) {
    const inp = document.getElementById('sim-input');
    inp.value += s;
    if (sim.current) simReset();
    renderPalette();
};
window.backspaceSymbol = function() {
    const inp = document.getElementById('sim-input');
    inp.value = inp.value.slice(0, -1);
    if (sim.current) simReset();
};
window.clearSymbol = function() {
    document.getElementById('sim-input').value = '';
    if (sim.current) simReset();
};

function renderSim() {
    const tapeEl = document.getElementById('sim-tape');
    const statusEl = document.getElementById('sim-status');
    const traceEl = document.getElementById('sim-trace');
    const traceBody = document.getElementById('sim-trace-body');

    // Tape
    if (!sim.tape.length && !sim.current) {
        tapeEl.innerHTML = '<span style="color:var(--muted); font-size:.85rem">Eingabe oben tippen oder Σ-Button klicken, dann <strong>Schritt</strong> drücken…</span>';
    } else if (!sim.tape.length) {
        tapeEl.innerHTML = '<span style="color:var(--muted); font-size:.85rem">Leeres Wort ε</span>';
    } else {
        tapeEl.innerHTML = sim.tape.map((c, i) => {
            let cls = '';
            if (sim.error && i === sim.pos) cls = 'error';
            else if (i < sim.pos) cls = 'done';
            else if (i === sim.pos && sim.current && !sim.finished) cls = 'active';
            return `<span class="ae-sim-cell ${cls}">${escapeHtml(c)}</span>`;
        }).join('');
    }

    // Status
    if (!sim.current) {
        statusEl.innerHTML = '<span style="color:var(--muted); font-size:.85rem">Bereit. <strong>Schritt</strong> startet die Simulation.</span>';
    } else {
        let html = `
            <div class="sim-block">
                <span class="sim-tag">Schritt</span>
                <span class="sim-val">${sim.pos} / ${sim.tape.length}</span>
            </div>
            <span class="sim-arrow">·</span>
            <div class="sim-block">
                <span class="sim-tag">Zustand</span>
                <span class="sim-state-pill${sim.error ? ' danger' : ''}">${escapeHtml(sim.current.label)}</span>
            </div>`;
        if (model.type === 'moore' && sim.current.output) {
            html += `
                <span class="sim-arrow">·</span>
                <div class="sim-block">
                    <span class="sim-tag">λ (aktuell)</span>
                    <span class="sim-val accent">${escapeHtml(sim.current.output)}</span>
                </div>`;
        }
        if (model.type !== 'dfa') {
            html += `
                <span class="sim-arrow">·</span>
                <div class="sim-block" style="flex:1; min-width:120px">
                    <span class="sim-tag">Ausgabe-Trace</span>
                    <span class="sim-out-tape">${sim.outputs.length ? sim.outputs.map(o => `<span>${escapeHtml(o)}</span>`).join('') : '<small style="color:var(--muted)">ε</small>'}</span>
                </div>`;
        }
        statusEl.innerHTML = html;
    }

    // Banner (finished / error)
    let banner = '';
    if (sim.error) {
        banner = `<div class="ae-sim-banner rej"><i class="fas fa-circle-xmark"></i> Kein Übergang für Symbol „<code style="background:#fee2e2;padding:2px 6px;border-radius:4px">${escapeHtml(sim.error.sym)}</code>" aus Zustand „${escapeHtml(sim.error.from)}". Simulation gestoppt.</div>`;
    } else if (sim.finished) {
        if (model.type === 'dfa') {
            banner = sim.accepted
                ? `<div class="ae-sim-banner acc"><i class="fas fa-circle-check"></i> Wort akzeptiert – Endzustand „${escapeHtml(sim.current.label)}" ist akzeptierend.</div>`
                : `<div class="ae-sim-banner rej"><i class="fas fa-circle-xmark"></i> Wort abgelehnt – Endzustand „${escapeHtml(sim.current.label)}" ist nicht akzeptierend.</div>`;
        } else {
            const outStr = sim.outputs.join('') || 'ε';
            banner = `<div class="ae-sim-banner done"><i class="fas fa-flag-checkered"></i> Simulation fertig. Ausgabe: <code style="background:#fff;padding:2px 6px;border-radius:4px;margin-left:6px">${escapeHtml(outStr)}</code></div>`;
        }
    }
    // Replace any existing banner
    const existing = statusEl.parentElement.querySelector('.ae-sim-banner');
    if (existing) existing.remove();
    if (banner) statusEl.insertAdjacentHTML('afterend', banner);

    // Trace table
    if (sim.history.length || sim.current) {
        traceEl.style.display = '';
        let rows = '';
        // Build rows from history snapshots + current step
        const allSteps = [...sim.history.map(h => ({...h})), {
            pos: sim.pos, currentId: sim.current ? sim.current.id : null,
            outputs: [...sim.outputs], lastEdgeId: sim.lastEdgeId,
            error: sim.error, finished: sim.finished, accepted: sim.accepted,
        }];
        allSteps.forEach((snap, i) => {
            if (!snap.currentId) return;
            const st = findState(snap.currentId);
            const nextSym = snap.pos < sim.tape.length ? sim.tape[snap.pos] : null;
            const isCurrent = (i === allSteps.length - 1);
            // Find the next state: look at successor snapshot
            let nextLabel = '–', outVal = '';
            if (i < allSteps.length - 1) {
                const nx = allSteps[i+1];
                const nxSt = findState(nx.currentId);
                nextLabel = nxSt ? nxSt.label : '–';
                if (model.type === 'mealy') {
                    const newOuts = nx.outputs.slice(snap.outputs.length);
                    outVal = newOuts.join('');
                } else if (model.type === 'moore') {
                    const newOuts = nx.outputs.slice(snap.outputs.length);
                    outVal = newOuts.join('');
                }
            } else if (snap.error) {
                nextLabel = '<span style="color:#ef4444">⊥</span>';
            } else if (snap.finished) {
                nextLabel = model.type === 'dfa' ? (snap.accepted ? '<span style="color:#10b981">✓ accept</span>' : '<span style="color:#ef4444">✗ reject</span>') : '<span style="color:#6366f1">end</span>';
            }
            rows += `<tr class="${isCurrent ? 'current' : ''}">
                <td>${i}</td>
                <td><strong>${escapeHtml(st.label)}</strong></td>
                <td>${nextSym !== null && !snap.finished && !snap.error ? '<code style="background:var(--bg);padding:2px 6px;border-radius:4px">'+escapeHtml(nextSym)+'</code>' : '<span class="ts-arrow">—</span>'}</td>
                <td>${nextLabel === '–' ? '<span class="ts-arrow">—</span>' : nextLabel}</td>
                <td>${outVal ? '<code style="background:rgba(16,185,129,.1);color:#065f46;padding:2px 6px;border-radius:4px">'+escapeHtml(outVal)+'</code>' : '<span class="ts-arrow">—</span>'}</td>
            </tr>`;
        });
        traceBody.innerHTML = rows || '<tr><td colspan="5" class="ae-sim-trace-empty">—</td></tr>';
        // Scroll current row into view
        const cur = traceBody.querySelector('tr.current');
        if (cur) cur.scrollIntoView({block:'nearest'});
    } else {
        traceEl.style.display = 'none';
    }

    // Button states
    document.getElementById('sim-btn-back').disabled = !sim.history.length;
    document.getElementById('sim-btn-step').disabled = sim.finished || !!sim.error;

    // Highlight on canvas
    applySimHighlights();
}

function applySimHighlights() {
    // Re-render states & edges so sim classes from renderState/renderEdge re-apply with fresh animations
    renderStates();
    renderEdges();
}

function escapeAttr(s) { return String(s).replace(/'/g, "\\'").replace(/"/g, '&quot;'); }

// Keyboard for sim
window.addEventListener('keydown', e => {
    const inField = ['INPUT','TEXTAREA','SELECT'].includes(document.activeElement.tagName);
    if (inField) return;
    if (e.key === 'ArrowRight') { e.preventDefault(); simStep(); }
    else if (e.key === 'ArrowLeft') { e.preventDefault(); simBack(); }
    else if (e.key === 'r' || e.key === 'R') { simReset(); }
});

// ════════════════════════════════════════════════════════════════════════
//  TABS
// ════════════════════════════════════════════════════════════════════════
window.switchTab = function(tab) {
    document.querySelectorAll('.ae-tabs-bar button[data-tab]').forEach(b => b.classList.toggle('active', b.dataset.tab === tab));
    document.querySelectorAll('.ae-tab-content').forEach(c => c.classList.remove('active'));
    document.getElementById('tab-' + tab).classList.add('active');
};

// ════════════════════════════════════════════════════════════════════════
//  INLINE EDITORS
// ════════════════════════════════════════════════════════════════════════
let inlineCtx = null;
function openStateEditor(id) {
    const s = findState(id);
    if (!s) return;
    inlineCtx = { kind:'state', id };
    const el = document.getElementById('inline-edit');
    document.getElementById('inline-label').textContent = model.type === 'moore' ? 'Name / Ausgabe' : 'Zustandsname';
    const i1 = document.getElementById('inline-input-1');
    const i2 = document.getElementById('inline-input-2');
    i1.value = s.label;
    i1.placeholder = 'Name';
    if (model.type === 'moore') {
        i2.style.display = '';
        i2.value = s.output || '';
        i2.placeholder = 'Ausgabe λ';
    } else {
        i2.style.display = 'none';
    }
    // Position
    const r = svg.getBoundingClientRect();
    const wx = s.x * view.k + view.x + r.left;
    const wy = s.y * view.k + view.y + r.top + STATE_R * view.k + 8;
    el.style.left = (wx - 90) + 'px';
    el.style.top = wy + 'px';
    el.classList.add('open');
    setTimeout(() => i1.select(), 30);
}
function openEdgeEditor(id) {
    const t = model.transitions.find(x => x.id === id);
    if (!t) return;
    inlineCtx = { kind:'edge', id };
    const el = document.getElementById('inline-edit');
    document.getElementById('inline-label').textContent = model.type === 'mealy' ? 'Eingabe / Ausgabe (Komma getrennt)' : 'Eingabe-Symbole (Komma)';
    const i1 = document.getElementById('inline-input-1');
    const i2 = document.getElementById('inline-input-2');
    i1.value = t.inputs.join(',');
    i1.placeholder = 'z. B. 0,1';
    if (model.type === 'mealy') {
        i2.style.display = '';
        i2.value = (t.outputs||[]).join(',');
        i2.placeholder = 'Ausgaben';
    } else {
        i2.style.display = 'none';
    }
    const from = findState(t.from), to = findState(t.to);
    const mx = (from.x + to.x)/2, my = (from.y + to.y)/2;
    const r = svg.getBoundingClientRect();
    el.style.left = (mx * view.k + view.x + r.left - 90) + 'px';
    el.style.top  = (my * view.k + view.y + r.top + 18) + 'px';
    el.classList.add('open');
    setTimeout(() => i1.select(), 30);
}
window.commitInlineEdit = function() {
    if (!inlineCtx) return;
    const i1 = document.getElementById('inline-input-1').value.trim();
    const i2 = document.getElementById('inline-input-2').value.trim();
    if (inlineCtx.kind === 'state') {
        if (i1) {
            if (model.states.some(s => s.id !== inlineCtx.id && s.label === i1)) {
                alert('Name existiert bereits.');
                return;
            }
            updateStateLabel(inlineCtx.id, i1);
        }
        if (model.type === 'moore') setStateOutput(inlineCtx.id, i2);
    } else if (inlineCtx.kind === 'edge') {
        const inputs = i1.split(',').map(s => s.trim()).filter(s => s.length);
        let outputs = [];
        if (model.type === 'mealy') {
            const arr = i2.split(',').map(s => s.trim());
            outputs = inputs.map((_, i) => arr[i] !== undefined ? arr[i] : (arr[0] || ''));
        }
        snapshot();
        const t = model.transitions.find(x => x.id === inlineCtx.id);
        if (t) {
            t.inputs = inputs;
            if (model.type === 'mealy') t.outputs = outputs;
            else delete t.outputs;
            if (!t.inputs.length) {
                model.transitions = model.transitions.filter(x => x.id !== t.id);
            }
        }
        renderAll();
        persist();
    }
    cancelInlineEdit();
};
window.cancelInlineEdit = function() {
    inlineCtx = null;
    document.getElementById('inline-edit').classList.remove('open');
};
document.getElementById('inline-input-1').addEventListener('keydown', e => {
    if (e.key === 'Enter') commitInlineEdit();
    if (e.key === 'Escape') cancelInlineEdit();
});
document.getElementById('inline-input-2').addEventListener('keydown', e => {
    if (e.key === 'Enter') commitInlineEdit();
    if (e.key === 'Escape') cancelInlineEdit();
});

// ════════════════════════════════════════════════════════════════════════
//  CONTEXT MENU
// ════════════════════════════════════════════════════════════════════════
function openContextMenu(x, y, kind, id) {
    closeContextMenu();
    selected = {type: kind === 'edge' ? 'edge' : 'state', id};
    renderStates(); renderEdges();
    const menu = document.getElementById('ctx-menu');
    let html = '';
    if (kind === 'state') {
        const s = findState(id);
        html = `
            <button class="ae-ctx-item" onclick="openStateEditor('${id}'); closeContextMenu()"><i class="fas fa-edit"></i> Bearbeiten</button>
            <button class="ae-ctx-item" onclick="setStart('${id}'); closeContextMenu()"><i class="fas fa-play"></i> Als Startzustand</button>
            <button class="ae-ctx-item" onclick="toggleAccept('${id}'); closeContextMenu()"><i class="fas fa-check"></i> ${s.isAccepting?'Akzeptanz aufheben':'Akzeptierend'}</button>
            <div class="ae-ctx-sep"></div>
            <button class="ae-ctx-item danger" onclick="deleteState('${id}'); closeContextMenu()"><i class="fas fa-trash"></i> Löschen <kbd>Entf</kbd></button>
        `;
    } else if (kind === 'edge') {
        html = `
            <button class="ae-ctx-item" onclick="openEdgeEditor('${id}'); closeContextMenu()"><i class="fas fa-edit"></i> Bearbeiten</button>
            <div class="ae-ctx-sep"></div>
            <button class="ae-ctx-item danger" onclick="deleteTransition('${id}'); closeContextMenu()"><i class="fas fa-trash"></i> Löschen <kbd>Entf</kbd></button>
        `;
    }
    menu.innerHTML = html;
    menu.style.left = x + 'px';
    menu.style.top = y + 'px';
    menu.classList.add('open');
}
function closeContextMenu() {
    document.getElementById('ctx-menu').classList.remove('open');
}
document.addEventListener('click', e => {
    if (!e.target.closest('#ctx-menu')) closeContextMenu();
    if (!e.target.closest('#inline-edit') && !e.target.closest('.ae-state-circle') && !e.target.closest('.ae-state-touch-hit') && !e.target.closest('.ae-edge-label-bg') && !e.target.closest('.ae-edge-hit')) {
        if (document.getElementById('inline-edit').classList.contains('open')) {
            // keep open if click was on canvas elements; close otherwise
        }
    }
});

// ════════════════════════════════════════════════════════════════════════
//  AUTO LAYOUT (circle)
// ════════════════════════════════════════════════════════════════════════
window.autoLayout = function() {
    if (!model.states.length) return;
    snapshot();
    const r = svg.getBoundingClientRect();
    const cx = (r.width/2 - view.x) / view.k;
    const cy = (r.height/2 - view.y) / view.k;
    const radius = Math.max(120, model.states.length * 24);
    const N = model.states.length;
    model.states.forEach((s, i) => {
        const angle = -Math.PI/2 + (2*Math.PI*i)/N;
        s.x = cx + radius * Math.cos(angle);
        s.y = cy + radius * Math.sin(angle);
    });
    renderAll();
    persist();
};

// ════════════════════════════════════════════════════════════════════════
//  MODAL & EXPORT
// ════════════════════════════════════════════════════════════════════════
function closeModal() {
    document.querySelectorAll('.ae-modal-bg').forEach(m => m.classList.remove('open'));
}
window.closeModal = closeModal;

window.openExamples = function() {
    const grid = document.getElementById('examples-grid');
    grid.innerHTML = EXAMPLES.map((ex, i) => `
        <button class="ae-example-card" onclick="loadExample(${i})">
            <strong>${escapeHtml(ex.name)}</strong>
            <small>${escapeHtml(ex.desc)}</small>
        </button>
    `).join('');
    document.getElementById('modal-examples').classList.add('open');
};
window.loadExample = function(idx) {
    const ex = EXAMPLES[idx];
    if (!ex) return;
    snapshot();
    model = JSON.parse(JSON.stringify(ex.data));
    document.querySelectorAll('.ae-mode-btn').forEach(b => b.classList.toggle('active', b.dataset.mode === model.type));
    selected = null;
    simReset();
    renderAll();
    closeModal();
    persist();
    setTimeout(fitView, 50);
};

let currentExportFormat = 'json';
window.openExport = function() {
    document.getElementById('modal-export').classList.add('open');
    setExportTab('json', document.querySelector('#modal-export .ae-tabs-bar button'));
};
window.setExportTab = function(fmt, btn) {
    currentExportFormat = fmt;
    document.querySelectorAll('#modal-export .ae-tabs-bar button').forEach(b => b.classList.remove('active'));
    if (btn) btn.classList.add('active');
    document.getElementById('export-area').value = generateExport(fmt);
    document.getElementById('btn-png').style.display = fmt === 'svg' ? '' : 'none';
};
function generateExport(fmt) {
    switch(fmt) {
        case 'json': return JSON.stringify({
            type: model.type,
            alphabet: getAlphabet(),
            outputAlphabet: getOutputAlphabet(),
            states: model.states.map(s => ({
                id: s.id, label: s.label, x: Math.round(s.x), y: Math.round(s.y),
                isStart: !!s.isStart, isAccepting: !!s.isAccepting,
                ...(model.type === 'moore' ? {output: s.output || ''} : {})
            })),
            transitions: model.transitions.map(t => ({
                from: findState(t.from)?.label, to: findState(t.to)?.label,
                inputs: t.inputs,
                ...(model.type === 'mealy' ? {outputs: t.outputs || []} : {})
            }))
        }, null, 2);
        case 'latex': return exportLatex();
        case 'markdown': return exportMarkdown();
        case 'graphviz': return exportGraphviz();
        case 'svg': return exportSVG();
    }
    return '';
}
function exportLatex() {
    const alpha = getAlphabet();
    let s = '% kotsch.tech – Automaten-Editor Export\n\\begin{tabular}{|c|' + alpha.map(()=>'c|').join('') + (model.type==='moore'?'c|':'') + '}\n\\hline\n';
    s += '$\\delta$ & ' + alpha.map(a => '$' + a + '$').join(' & ');
    if (model.type === 'moore') s += ' & $\\lambda$';
    s += ' \\\\\n\\hline\n';
    model.states.forEach(st => {
        const marker = (st.isStart ? '$\\rightarrow$ ' : '') + (st.isAccepting ? '*' : '');
        s += marker + '$' + st.label + '$';
        alpha.forEach(a => {
            const t = model.transitions.find(t => t.from === st.id && t.inputs.includes(a));
            if (t) {
                const to = findState(t.to);
                const idx = t.inputs.indexOf(a);
                if (model.type === 'mealy') {
                    const out = (t.outputs||[])[idx] || '';
                    s += ' & $' + to.label + (out ? '/' + out : '') + '$';
                } else {
                    s += ' & $' + to.label + '$';
                }
            } else s += ' & --';
        });
        if (model.type === 'moore') s += ' & $' + (st.output || '') + '$';
        s += ' \\\\\n';
    });
    s += '\\hline\n\\end{tabular}\n';
    return s;
}
function exportMarkdown() {
    const alpha = getAlphabet();
    let s = '# Automat (' + model.type + ')\n\n';
    s += '| Zustand | ' + alpha.join(' | ') + (model.type==='moore'?' | λ':'') + ' |\n';
    s += '|' + '---|'.repeat(alpha.length + 1 + (model.type==='moore'?1:0)) + '\n';
    model.states.forEach(st => {
        const prefix = (st.isStart ? '→ ' : '') + (st.isAccepting ? '✓ ' : '');
        let row = '| ' + prefix + '`' + st.label + '`';
        alpha.forEach(a => {
            const t = model.transitions.find(t => t.from === st.id && t.inputs.includes(a));
            if (t) {
                const to = findState(t.to);
                const idx = t.inputs.indexOf(a);
                if (model.type === 'mealy') {
                    const out = (t.outputs||[])[idx] || '';
                    row += ' | `' + to.label + (out ? '/' + out : '') + '`';
                } else row += ' | `' + to.label + '`';
            } else row += ' | —';
        });
        if (model.type === 'moore') row += ' | `' + (st.output || '') + '`';
        s += row + ' |\n';
    });
    return s;
}
function exportGraphviz() {
    let s = 'digraph Automat {\n  rankdir=LR;\n  node [shape=circle, fontname="Helvetica"];\n';
    model.states.forEach(st => {
        const attrs = [];
        if (st.isAccepting) attrs.push('shape=doublecircle');
        const lab = st.label + (model.type === 'moore' && st.output ? `/${st.output}` : '');
        attrs.push('label="' + lab + '"');
        s += `  "${st.label}" [${attrs.join(', ')}];\n`;
    });
    // start arrow
    const start = model.states.find(s => s.isStart);
    if (start) {
        s += '  __start [shape=none, label=""];\n';
        s += `  __start -> "${start.label}";\n`;
    }
    model.transitions.forEach(t => {
        const from = findState(t.from), to = findState(t.to);
        const lab = t.inputs.map((inp, i) => {
            if (model.type === 'mealy') {
                const out = (t.outputs||[])[i] || '';
                return inp + (out ? '/' + out : '');
            }
            return inp;
        }).join(', ');
        s += `  "${from.label}" -> "${to.label}" [label="${lab}"];\n`;
    });
    s += '}\n';
    return s;
}
function exportSVG() {
    // Build standalone SVG snapshot
    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
    model.states.forEach(s => {
        minX = Math.min(minX, s.x - STATE_R - 30);
        minY = Math.min(minY, s.y - STATE_R - 30);
        maxX = Math.max(maxX, s.x + STATE_R + 30);
        maxY = Math.max(maxY, s.y + STATE_R + 30);
    });
    if (!isFinite(minX)) { minX = 0; minY = 0; maxX = 100; maxY = 100; }
    const w = maxX - minX, h = maxY - minY;
    let s = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${minX} ${minY} ${w} ${h}" width="${w}" height="${h}">\n`;
    s += `<defs><marker id="arr" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse"><path d="M0,0 L10,5 L0,10 z" fill="#475569"/></marker></defs>\n`;
    s += `<style>.s{fill:#fff;stroke:#0f172a;stroke-width:2.5}.sa{fill:none;stroke:#0f172a;stroke-width:2}.l{font-family:monospace;font-size:14px;font-weight:bold;fill:#0f172a;text-anchor:middle}.o{font-family:monospace;font-size:11px;fill:#10b981;font-weight:bold;text-anchor:middle}.e{fill:none;stroke:#475569;stroke-width:2}.el{font-family:monospace;font-size:12px;fill:#0f172a;text-anchor:middle}.eb{fill:#fff;stroke:#cbd5e1}</style>\n`;
    // edges
    model.transitions.forEach(t => {
        const from = findState(t.from), to = findState(t.to);
        if (!from || !to) return;
        let d, lx, ly;
        if (from.id === to.id) {
            const cx = from.x, cy = from.y - STATE_R - 35;
            const a1x = from.x - 14, a1y = from.y - STATE_R + 3;
            const a2x = from.x + 14, a2y = from.y - STATE_R + 3;
            d = `M ${a1x},${a1y} C ${cx-40},${cy} ${cx+40},${cy} ${a2x},${a2y}`;
            lx = cx; ly = cy - 5;
        } else {
            const dx = to.x - from.x, dy = to.y - from.y;
            const dist = Math.sqrt(dx*dx + dy*dy) || 1;
            const ux = dx/dist, uy = dy/dist;
            const px = -uy, py = ux;
            const opposite = findTransition(t.to, t.from);
            const curve = opposite ? 26 : 0;
            const sx = from.x + ux * STATE_R;
            const sy = from.y + uy * STATE_R;
            const ex = to.x - ux * STATE_R;
            const ey = to.y - uy * STATE_R;
            const mx = (sx + ex)/2 + px * curve;
            const my = (sy + ey)/2 + py * curve;
            d = `M ${sx},${sy} Q ${mx},${my} ${ex},${ey}`;
            lx = mx + px * 8; ly = my + py * 8;
        }
        s += `<path class="e" d="${d}" marker-end="url(#arr)"/>\n`;
        const labels = buildEdgeLabel(t);
        if (labels.length) {
            const txt = labels.join(', ');
            const tw = txt.length * 7 + 12;
            s += `<rect class="eb" x="${lx-tw/2}" y="${ly-9}" width="${tw}" height="18" rx="5"/>\n`;
            s += `<text class="el" x="${lx}" y="${ly}" dy="4">${escapeXml(txt)}</text>\n`;
        }
    });
    // states
    model.states.forEach(st => {
        if (st.isStart) {
            s += `<path class="e" d="M ${st.x - STATE_R - 24},${st.y} L ${st.x - STATE_R - 2},${st.y}" marker-end="url(#arr)"/>\n`;
        }
        s += `<circle class="s" cx="${st.x}" cy="${st.y}" r="${STATE_R}"/>\n`;
        if (st.isAccepting) s += `<circle class="sa" cx="${st.x}" cy="${st.y}" r="${STATE_R - 5}"/>\n`;
        const labY = (model.type === 'moore' && st.output) ? st.y - 3 : st.y + 5;
        s += `<text class="l" x="${st.x}" y="${labY}">${escapeXml(st.label)}</text>\n`;
        if (model.type === 'moore' && st.output) {
            s += `<text class="o" x="${st.x}" y="${st.y + 13}">/${escapeXml(st.output)}</text>\n`;
        }
    });
    s += '</svg>\n';
    return s;
}
window.copyExport = function() {
    const area = document.getElementById('export-area');
    area.select();
    navigator.clipboard.writeText(area.value).then(() => {
        showHint('In Zwischenablage kopiert.');
    }).catch(() => document.execCommand('copy'));
};
window.downloadExport = function() {
    const text = document.getElementById('export-area').value;
    const ext = currentExportFormat === 'graphviz' ? 'dot' : currentExportFormat === 'latex' ? 'tex' : currentExportFormat === 'markdown' ? 'md' : currentExportFormat;
    const mime = currentExportFormat === 'svg' ? 'image/svg+xml' : 'text/plain';
    const blob = new Blob([text], {type: mime + ';charset=utf-8'});
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url; a.download = 'automat.' + ext; a.click();
    setTimeout(() => URL.revokeObjectURL(url), 1000);
};
window.downloadPNG = function() {
    const svgText = exportSVG();
    const img = new Image();
    const blob = new Blob([svgText], {type:'image/svg+xml;charset=utf-8'});
    const url = URL.createObjectURL(blob);
    img.onload = () => {
        const canvas = document.createElement('canvas');
        canvas.width = img.width * 2;
        canvas.height = img.height * 2;
        const ctx = canvas.getContext('2d');
        ctx.fillStyle = '#fff';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.scale(2, 2);
        ctx.drawImage(img, 0, 0);
        URL.revokeObjectURL(url);
        canvas.toBlob(b => {
            const u = URL.createObjectURL(b);
            const a = document.createElement('a');
            a.href = u; a.download = 'automat.png'; a.click();
            setTimeout(() => URL.revokeObjectURL(u), 1000);
        });
    };
    img.src = url;
};
window.openImport = function() {
    document.getElementById('modal-import').classList.add('open');
    document.getElementById('import-area').value = '';
    document.getElementById('import-error').style.display = 'none';
};
window.onImportFile = function(ev) {
    const f = ev.target.files[0];
    if (!f) return;
    const r = new FileReader();
    r.onload = () => { document.getElementById('import-area').value = r.result; };
    r.readAsText(f);
};
window.commitImport = function() {
    const errEl = document.getElementById('import-error');
    errEl.style.display = 'none';
    try {
        const obj = JSON.parse(document.getElementById('import-area').value);
        if (!obj.states || !Array.isArray(obj.states)) throw new Error('Feld "states" fehlt oder ungültig.');
        snapshot();
        // Normalize
        const newModel = {
            type: obj.type || 'mealy',
            states: [],
            transitions: [],
            counter: 0,
        };
        // Position fallback in case missing
        const N = obj.states.length;
        obj.states.forEach((s, i) => {
            const angle = -Math.PI/2 + (2*Math.PI*i)/Math.max(N,1);
            const radius = Math.max(120, N * 24);
            const st = {
                id: s.id || uid(),
                label: s.label || ('q' + i),
                x: typeof s.x === 'number' ? s.x : 300 + radius * Math.cos(angle),
                y: typeof s.y === 'number' ? s.y : 250 + radius * Math.sin(angle),
                isStart: !!s.isStart,
                isAccepting: !!s.isAccepting,
            };
            if (newModel.type === 'moore') st.output = s.output || '';
            newModel.states.push(st);
        });
        // Resolve transitions by label OR id
        const byLabel = {};
        const byId = {};
        newModel.states.forEach(s => { byLabel[s.label] = s.id; byId[s.id] = s.id; });
        (obj.transitions || []).forEach(t => {
            const fromId = byLabel[t.from] || byId[t.from];
            const toId = byLabel[t.to] || byId[t.to];
            if (!fromId || !toId) return;
            const inputs = Array.isArray(t.inputs) ? t.inputs : (t.input !== undefined ? [t.input] : []);
            const outputs = Array.isArray(t.outputs) ? t.outputs : (t.output !== undefined ? [t.output] : []);
            const tr = { id: uid(), from: fromId, to: toId, inputs };
            if (newModel.type === 'mealy') tr.outputs = inputs.map((_, i) => outputs[i] !== undefined ? outputs[i] : (outputs[0] || ''));
            newModel.transitions.push(tr);
        });
        if (!newModel.states.some(s => s.isStart) && newModel.states.length) newModel.states[0].isStart = true;
        model = newModel;
        document.querySelectorAll('.ae-mode-btn').forEach(b => b.classList.toggle('active', b.dataset.mode === model.type));
        delete model._extraAlpha;
        selected = null;
        renderAll();
        persist();
        closeModal();
        setTimeout(fitView, 50);
    } catch(e) {
        errEl.textContent = 'Fehler: ' + e.message;
        errEl.style.display = 'block';
    }
};

// ════════════════════════════════════════════════════════════════════════
//  EXAMPLES
// ════════════════════════════════════════════════════════════════════════
const EXAMPLES = [
    {
        name: 'Mealy: 1-Bit-Verzögerung',
        desc: 'Gibt das vorherige Eingabe-Bit aus. Klassisches Mealy-Beispiel.',
        data: {
            type: 'mealy', counter: 2,
            states: [
                {id:'s1', label:'q0', x:240, y:280, isStart:true, isAccepting:false},
                {id:'s2', label:'q1', x:520, y:280, isStart:false, isAccepting:false}
            ],
            transitions: [
                {id:'t1', from:'s1', to:'s1', inputs:['0'], outputs:['0']},
                {id:'t2', from:'s1', to:'s2', inputs:['1'], outputs:['0']},
                {id:'t3', from:'s2', to:'s1', inputs:['0'], outputs:['1']},
                {id:'t4', from:'s2', to:'s2', inputs:['1'], outputs:['1']}
            ]
        }
    },
    {
        name: 'Moore: Paritätszähler',
        desc: 'Gibt 0 bei gerader, 1 bei ungerader Anzahl von Einsen aus.',
        data: {
            type: 'moore', counter: 2,
            states: [
                {id:'s1', label:'q_g', x:240, y:280, output:'0', isStart:true, isAccepting:false},
                {id:'s2', label:'q_u', x:520, y:280, output:'1', isStart:false, isAccepting:false}
            ],
            transitions: [
                {id:'t1', from:'s1', to:'s1', inputs:['0']},
                {id:'t2', from:'s1', to:'s2', inputs:['1']},
                {id:'t3', from:'s2', to:'s2', inputs:['0']},
                {id:'t4', from:'s2', to:'s1', inputs:['1']}
            ]
        }
    },
    {
        name: 'DFA: endet auf „11"',
        desc: 'Akzeptiert Wörter über {0,1}, die auf 11 enden.',
        data: {
            type: 'dfa', counter: 3,
            states: [
                {id:'s1', label:'q0', x:200, y:280, isStart:true, isAccepting:false},
                {id:'s2', label:'q1', x:400, y:280, isStart:false, isAccepting:false},
                {id:'s3', label:'q2', x:600, y:280, isStart:false, isAccepting:true}
            ],
            transitions: [
                {id:'t1', from:'s1', to:'s1', inputs:['0']},
                {id:'t2', from:'s1', to:'s2', inputs:['1']},
                {id:'t3', from:'s2', to:'s1', inputs:['0']},
                {id:'t4', from:'s2', to:'s3', inputs:['1']},
                {id:'t5', from:'s3', to:'s1', inputs:['0']},
                {id:'t6', from:'s3', to:'s3', inputs:['1']}
            ]
        }
    },
    {
        name: 'DFA: Modulo 3',
        desc: 'Akzeptiert Binärzahlen, die durch 3 teilbar sind.',
        data: {
            type: 'dfa', counter: 3,
            states: [
                {id:'s1', label:'r0', x:340, y:160, isStart:true, isAccepting:true},
                {id:'s2', label:'r1', x:540, y:340, isStart:false, isAccepting:false},
                {id:'s3', label:'r2', x:140, y:340, isStart:false, isAccepting:false}
            ],
            transitions: [
                {id:'t1', from:'s1', to:'s1', inputs:['0']},
                {id:'t2', from:'s1', to:'s2', inputs:['1']},
                {id:'t3', from:'s2', to:'s3', inputs:['0']},
                {id:'t4', from:'s2', to:'s1', inputs:['1']},
                {id:'t5', from:'s3', to:'s2', inputs:['0']},
                {id:'t6', from:'s3', to:'s3', inputs:['1']}
            ]
        }
    },
    {
        name: 'Mealy: Ampel-Detektor',
        desc: 'Erkennt Sequenz „rot-gelb-grün" (Ausgabe 1 bei Treffer).',
        data: {
            type: 'mealy', counter: 4,
            states: [
                {id:'s1', label:'S0', x:160, y:280, isStart:true, isAccepting:false},
                {id:'s2', label:'S1', x:340, y:280, isStart:false, isAccepting:false},
                {id:'s3', label:'S2', x:520, y:280, isStart:false, isAccepting:false}
            ],
            transitions: [
                {id:'t1', from:'s1', to:'s2', inputs:['r'], outputs:['0']},
                {id:'t2', from:'s1', to:'s1', inputs:['g','gn'], outputs:['0','0']},
                {id:'t3', from:'s2', to:'s3', inputs:['g'], outputs:['0']},
                {id:'t4', from:'s2', to:'s1', inputs:['r','gn'], outputs:['0','0']},
                {id:'t5', from:'s3', to:'s1', inputs:['gn'], outputs:['1']},
                {id:'t6', from:'s3', to:'s1', inputs:['r','g'], outputs:['0','0']}
            ]
        }
    },
    {
        name: 'Moore: Waschmaschine',
        desc: 'Komplette Waschmaschinen-Steuerung: Aus → Füllen → Waschen → Spülen → Schleudern → Fertig. Eingaben: s=Start, v=voll, l=leer, t=Timer, p=Stop.',
        data: {
            type: 'moore', counter: 6,
            states: [
                {id:'w1', label:'AUS',         x:250, y:200, output:'off',   isStart:true,  isAccepting:false},
                {id:'w2', label:'FUELLEN',     x:450, y:130, output:'fill',  isStart:false, isAccepting:false},
                {id:'w3', label:'WASCHEN',     x:650, y:200, output:'wash',  isStart:false, isAccepting:false},
                {id:'w4', label:'SPUELEN',     x:650, y:430, output:'rinse', isStart:false, isAccepting:false},
                {id:'w5', label:'SCHLEUDERN',  x:450, y:500, output:'spin',  isStart:false, isAccepting:false},
                {id:'w6', label:'FERTIG',      x:250, y:430, output:'done',  isStart:false, isAccepting:false}
            ],
            transitions: [
                {id:'wt1',  from:'w1', to:'w2', inputs:['s']},
                {id:'wt2',  from:'w2', to:'w3', inputs:['v']},
                {id:'wt3',  from:'w3', to:'w4', inputs:['t']},
                {id:'wt4',  from:'w4', to:'w5', inputs:['t','l']},
                {id:'wt5',  from:'w5', to:'w6', inputs:['t']},
                {id:'wt6',  from:'w6', to:'w1', inputs:['p','s']},
                {id:'wt7',  from:'w2', to:'w1', inputs:['p']},
                {id:'wt8',  from:'w3', to:'w1', inputs:['p']},
                {id:'wt9',  from:'w4', to:'w1', inputs:['p']},
                {id:'wt10', from:'w5', to:'w1', inputs:['p']},
                {id:'wt11', from:'w1', to:'w1', inputs:['p','t','v','l']},
                {id:'wt12', from:'w2', to:'w2', inputs:['s','t','l']},
                {id:'wt13', from:'w3', to:'w3', inputs:['s','v','l']},
                {id:'wt14', from:'w4', to:'w4', inputs:['s','v']},
                {id:'wt15', from:'w5', to:'w5', inputs:['s','v','l']},
                {id:'wt16', from:'w6', to:'w6', inputs:['t','v','l']}
            ]
        }
    },
    {
        name: 'Moore: Aufzug 3-Etagen',
        desc: 'Drei Etagen, Ausgabe = aktuelle Etage. Eingaben: u=up, d=down.',
        data: {
            type: 'moore', counter: 3,
            states: [
                {id:'s1', label:'E0', x:200, y:280, output:'0', isStart:true, isAccepting:false},
                {id:'s2', label:'E1', x:400, y:280, output:'1', isStart:false, isAccepting:false},
                {id:'s3', label:'E2', x:600, y:280, output:'2', isStart:false, isAccepting:false}
            ],
            transitions: [
                {id:'t1', from:'s1', to:'s2', inputs:['u']},
                {id:'t2', from:'s2', to:'s3', inputs:['u']},
                {id:'t3', from:'s3', to:'s2', inputs:['d']},
                {id:'t4', from:'s2', to:'s1', inputs:['d']},
                {id:'t5', from:'s1', to:'s1', inputs:['d']},
                {id:'t6', from:'s3', to:'s3', inputs:['u']}
            ]
        }
    }
];

// ════════════════════════════════════════════════════════════════════════
//  UTILITIES
// ════════════════════════════════════════════════════════════════════════
function escapeHtml(s) {
    return String(s ?? '').replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
}
function escapeXml(s) {
    return String(s ?? '').replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&apos;'}[c]));
}

// ════════════════════════════════════════════════════════════════════════
//  INIT
// ════════════════════════════════════════════════════════════════════════
window.addEventListener('resize', setSvgViewBox);
setSvgViewBox();

// Suppress browser context menu globally inside SVG
svg.addEventListener('contextmenu', e => { if (e.target === svg || e.target === viewport) e.preventDefault(); });

if (!loadPersisted()) {
    // Initial example
    loadExample(0);
} else {
    document.querySelectorAll('.ae-mode-btn').forEach(b => b.classList.toggle('active', b.dataset.mode === model.type));
    document.getElementById('trans-mode-suffix').textContent = model.type === 'mealy' ? '   ·   λ : Q × Σ → Γ' : model.type === 'moore' ? '   ·   λ : Q → Γ' : '   ·   F ⊆ Q';
    document.getElementById('moore-output-hint').style.display = model.type === 'moore' ? '' : 'none';
    renderAll();
    setTimeout(fitView, 50);
}
snapshot();   // baseline history entry
updateUndoButtons();
setTool('select');

})();
</script>


@include('tools._seo_content', ['toolSlug' => 'automaten-editor', 'toolName' => 'Automaten-Editor'])

@endsection