/**
 * Live demo for service-desk/ui/ticket-detail.
 *
 * Labs' `DeskTicket.tsx` (feat/service-desk, 62ba4fc, 210 lines) — the client
 * portal's single-ticket screen — rebuilt as a presentational component. The
 * real page reads `useParams`, `useAuth` and two network calls (`getTicket`,
 * `getDeskConfig`) inside a `useCallback`/`useEffect` pair; this rebuild
 * replaces all three with props (`status`, `ticket`, `config`, `error`,
 * `account`, `workspace`) and renders inside the shell demo the way every
 * private page is (`Navigation` is a thin delegator to `AppShell`, same
 * convention as billing-credits/ui/subscription-manager and
 * identity-auth/ui/admin-users-console).
 *
 * DeskTicket.tsx pulls in six further source files that are one recipe's
 * worth of screen: `MessageThread.tsx` (+ its `AttachmentChip`),
 * `MessageComposer.tsx`, `StatusActions.tsx`, `TicketFieldsCard.tsx`,
 * `desk/ui.tsx` (`StatusChip`, `ClassChip`, `SlaBadge`, `Spinner`,
 * `ErrorNote`, `InfoNote`, `Modal`) and `ActingEmailBadge.tsx`. A demo folder
 * may only hold its own recipe's code (AUTHORING.md, "The folder"), so all
 * seven are collapsed into this one file, each kept as its own function in
 * the source's own order, with the source's own JSX and class names.
 *
 * What is kept byte-faithful: every class name (`card`, `chip`, `label`,
 * `field`, `field-sm`, `btn-primary`, `btn-ghost`, `btn-quiet`, the
 * `ink`/`ink-40`/`ink-60`/`purple`/`warn`/`danger`/`success` palette), the
 * German copy (`statusSentence`, every button label, every fallback
 * sentence), the status-machine mirror (`allowedTransitions`,
 * `deskFormat.ts` lines 267 to 349) and the required-field mirror
 * (`missingFieldLabels`, `isFieldMissing`), the component tree and its
 * conditionals (banner colour, composer placeholder, the Abnahme /
 * Nachbesserung / cancel buttons, the aside cards), and `fmtZurich` /
 * `slaState`'s explicit `timeZone: 'Europe/Zurich'` (unlike the
 * subscription-manager sibling's date formatter, this one already pins both
 * locale and time zone, so it needs no fixed-table replacement to render
 * identically in Node and a browser).
 *
 * What necessarily differs, and why:
 * - `Surface` is dropped as a parameter. The real components are shared with
 *   the agency ticket page and take `surface: 'agency' | 'portal'` on every
 *   call; DeskTicket.tsx always passes `'portal'`, so every `en ? … : …`
 *   ternary in the five child components always took the German branch here.
 *   That branch is what is kept; the English one is source code this screen
 *   never reaches, not a simplification of behaviour.
 * - `canEdit` is always `false` on this route (`TicketFieldsCard`'s only
 *   caller here passes it literally). Its `editing` branch — the inline
 *   field-by-field editor built on `TicketForm.tsx`'s `FieldInput`, agent-only
 *   in the real app — is therefore dead code on the client portal and is not
 *   ported; only the read view plus the `file`-field upload row (open to any
 *   non-viewer member, §4.4) is.
 * - Every write is a prop, not a network call: `acceptTicket` / `changeStatus`
 *   (`StatusActions`), `postMessage` / `uploadToTicket` (`MessageComposer`),
 *   `uploadToTicket` again (`TicketFieldsCard`'s file row) and
 *   `downloadAttachment` (`AttachmentChip`) all reach the network in the
 *   source; here the buttons and inputs render, the modal opens and closes,
 *   and the composer's textarea is a real controlled input, but nothing
 *   leaves the component and no state a caller passed in changes — the same
 *   "inert action" convention subscription-manager's top-up/cancel buttons
 *   and admin-users-console's confirm-gated row actions use.
 * - `slaState`'s `now` defaults to `new Date()` in the source; every call
 *   here passes a fixed reference timestamp instead, so the SLA badge's text
 *   ("noch 3 h 40 min", say) renders identically on every run rather than
 *   drifting with the wall clock.
 * - `TicketDetail`, `DeskConfig` and their nested types are trimmed to the
 *   fields this screen actually reads (`serviceDeskService.ts` carries a much
 *   larger shape used by the ticket list, the agency queue and the metrics
 *   pages — `number`, `blocked_by_us`, `capacity_month`, `events`,
 *   `routing_events`, `time_entries`, `timings`, `links`, `tags`,
 *   `pipeline_key` and more are never rendered by `DeskTicket.tsx` and are
 *   left out here, not silently dropped from the real interface).
 *
 * Genuine gap, not a demo simplification: `.btn-primary`, `.btn-ghost`,
 * `.btn-quiet`, `.field`, `.field-sm` and `.label` are real classes in
 * `alchemy_labs/frontend/src/index.css` (`@layer components`, lines 240 to
 * 431) that this screen's markup depends on, but `packages/alchemy-ui/src/
 * base.css` in this kit currently ports only `.card`, `.tnum`, `.ctx-link`
 * and `.chip` from that same layer (its own header comment names exactly
 * those four). Until a docs-host extraction pass adds the other six, every
 * button and every text input on this recipe's rendered frame falls back to
 * unstyled browser chrome for those classes specifically — render-smoke
 * still passes (it checks that the tree renders, not that a class resolves),
 * but a visual `compare.mjs` run against the real app will show it.
 */
import React, { useState } from 'react';
import { defineStates } from '@prima-modules/demo';
import { Shell, type ShellUser, type ShellWorkspace } from '../../../ui-design-system/ui/appshell-navigation/demo';
import { DOMAINS } from '../../../ui-design-system/ui/appshell-navigation/nav';

/* ---- types (trimmed serviceDeskService.ts + deskFormat.ts, portal-only) - */

type TicketStatus = 'new' | 'accepted' | 'in_progress' | 'waiting_on_client' | 'solved' | 'client_review' | 'done' | 'cancelled';
type DeskRole = 'agent' | 'requester' | 'viewer';
type TaskFieldType = 'text' | 'textarea' | 'url' | 'date' | 'select' | 'multiselect' | 'checkbox' | 'file';

interface TaskTypeField {
  key: string;
  /** The client's label. Authoritative, required, German (LANGUAGE.md R2). */
  label: string;
  type: TaskFieldType;
  required?: boolean;
  options?: string[];
  option_labels?: Record<string, string>;
  accept?: string[];
  help?: string;
  placeholder?: string;
}

interface TaskType {
  slug: string;
  label: string;
  fields: TaskTypeField[];
  required_any_of?: string[][];
}

interface DeskClass {
  key: string;
  label: string;
}

/** GET /api/desk/config's shape, as this screen reads it. */
interface DeskConfig {
  classes: DeskClass[];
  task_types: TaskType[];
  review_timeout_working_days: number;
  my_role: DeskRole;
  /** Is the viewer a named contact / deputy (Ziffer 3.15)? */
  my_is_designated?: boolean;
  /** WHICH mailbox is signed in, under a shared practice account. */
  acting_email?: string | null;
  shared_account?: boolean;
}

interface UserRef {
  id?: string | null;
  name?: string | null;
  email?: string | null;
}

interface RequesterRef {
  id?: string | null;
  email: string;
  name?: string | null;
  is_designated: boolean;
  acting_email?: string | null;
}

interface SlaInfo {
  due: string;
  responded_at?: string | null;
  state: 'open' | 'met' | 'breached';
  remaining_seconds: number;
}

interface Attachment {
  id: string;
  filename: string;
  mime: string;
  size_bytes: number;
  kind: string;
  field_key?: string | null;
  created_at: string;
}

interface DeskMessage {
  id: string;
  ticket_id: string;
  direction: 'in' | 'out';
  channel: string;
  author?: UserRef | null;
  body: string;
  is_internal: boolean;
  is_decision: boolean;
  email_sent_at?: string | null;
  /** Who wrote it, when the author is a shared account. */
  acting_email?: string | null;
  attachments: Attachment[];
  created_at: string;
}

/** What the portal stores on the ticket after the intake check (§4.8.4), trimmed to the two arrays this screen renders. */
interface IntakeCheckResult {
  questions?: string[];
  answers?: string[];
}

interface TicketDetail {
  id: string;
  ticket_key: string;
  title: string;
  type_slug: string;
  type_label: string;
  class_key: string;
  class_label: string;
  status: TicketStatus;
  requester: RequesterRef;
  assignee?: UserRef | null;
  received_at: string;
  client_review_started_at?: string | null;
  done_at?: string | null;
  sla: SlaInfo;
  fields: Record<string, unknown>;
  fields_complete: boolean;
  missing_fields: string[];
  intake_check?: IntakeCheckResult | null;
  messages: DeskMessage[];
  attachments: Attachment[];
}

interface TransitionOption {
  to: TicketStatus;
  label: string;
  needs?: 'message' | 'reason';
  quiet?: boolean;
  hint?: string;
  disabled?: boolean;
}

/* ---- props -------------------------------------------------------------- */

export interface Props {
  workspace: ShellWorkspace;
  /** The signed-in account (`useAuth().user`); `userId` decides `isOwnTicket`. */
  account: { userId?: string | null; email?: string | null; name?: string | null };
  /** `loading` is the first fetch (line 58); `error` is `load()` throwing (line 31 to 33). */
  status: 'loading' | 'ok' | 'error';
  ticket: TicketDetail | null;
  config: DeskConfig | null;
  error?: string | null;
}

/* ---- a fixed reference time, so the SLA badge renders the same every run - */

const NOW = new Date('2026-09-12T09:30:00Z');

/* ---- copy + formatting helpers (deskFormat.ts, German branch only) ------ */

const STATUS_DE: Record<TicketStatus, string> = {
  new: 'Neu',
  accepted: 'Angenommen',
  in_progress: 'In Arbeit',
  waiting_on_client: 'Wartet auf dich',
  solved: 'Gelöst',
  client_review: 'Zur Prüfung',
  done: 'Erledigt',
  cancelled: 'Storniert',
};

function statusLabel(status: TicketStatus): string {
  return STATUS_DE[status] ?? status;
}

/** Sentence for the portal detail header — client copy, German only (deskFormat.ts line 112 to 131). */
function statusSentence(status: TicketStatus): string {
  switch (status) {
    case 'new':
      return 'Dein Auftrag ist eingegangen. Wir melden uns innerhalb der zugesagten Reaktionszeit.';
    case 'accepted':
      return 'Jemand aus dem Team hat deinen Auftrag übernommen.';
    case 'in_progress':
      return 'Wir arbeiten daran.';
    case 'waiting_on_client':
      return 'Wir warten auf deine Antwort – schreib uns unten, dann geht es weiter.';
    case 'solved':
      return 'Von unserer Seite ist der Auftrag gelöst. Die Übergabe folgt gleich.';
    case 'client_review':
      return 'Bitte prüfe das Ergebnis. Passt alles? Dann schliess den Auftrag ab – sonst sag uns, was nachzubessern ist.';
    case 'done':
      return 'Erledigt. Danke!';
    case 'cancelled':
      return 'Dieser Auftrag wurde storniert.';
    default:
      return '';
  }
}

function classShort(classKey: string): string {
  return classKey.toUpperCase();
}

const ZURICH = 'Europe/Zurich';

/** "4. Sept. 2026, 14:05" — explicit locale and time zone both, so this renders
 *  identically in Node (render-smoke) and a browser (deskFormat.ts line 165 to 178). */
function fmtZurich(iso: string | null | undefined, withTime = true): string {
  if (!iso) return '—';
  const d = new Date(iso);
  if (Number.isNaN(d.getTime())) return '—';
  return new Intl.DateTimeFormat('de-CH', {
    timeZone: ZURICH,
    day: 'numeric',
    month: 'short',
    year: 'numeric',
    hourCycle: 'h23',
    ...(withTime ? { hour: '2-digit', minute: '2-digit' } : {}),
  }).format(d);
}

/** "1 h 20 min", "2 T 3 h", "45 min", "unter 1 min" (deskFormat.ts line 220 to 232). */
function fmtDuration(seconds: number | null | undefined): string {
  if (seconds == null || !Number.isFinite(seconds)) return '—';
  const s = Math.max(0, Math.round(seconds));
  if (s < 60) return 'unter 1 min';
  const m = Math.floor(s / 60);
  if (m < 60) return `${m} min`;
  const h = Math.floor(m / 60);
  const rm = m % 60;
  if (h < 24) return rm ? `${h} h ${rm} min` : `${h} h`;
  const d = Math.floor(h / 24);
  const rh = h % 24;
  return rh ? `${d} T ${rh} h` : `${d} T`;
}

type SlaVariant = 'ok' | 'soon' | 'breached' | 'met' | 'late';

/** Chip variant + relative text for the first-response clock (deskFormat.ts line 240 to 258). */
function slaState(sla: SlaInfo, now: Date = NOW): { variant: SlaVariant; text: string } {
  if (sla.responded_at) {
    const late = new Date(sla.responded_at).getTime() > new Date(sla.due).getTime();
    return late ? { variant: 'late', text: 'verspätet beantwortet' } : { variant: 'met', text: 'beantwortet' };
  }
  const remaining = (new Date(sla.due).getTime() - now.getTime()) / 1000;
  if (remaining < 0) return { variant: 'breached', text: `überfällig seit ${fmtDuration(-remaining)}` };
  const text = `noch ${fmtDuration(remaining)}`;
  if (remaining < 2 * 3600) return { variant: 'soon', text };
  return { variant: 'ok', text };
}

function displayName(u?: { name?: string | null; email?: string | null } | null): string {
  if (!u) return '—';
  return u.name || u.email || '—';
}

function fmtBytes(n: number): string {
  if (n < 1024) return `${n} B`;
  if (n < 1024 * 1024) return `${Math.round(n / 1024)} KB`;
  return `${(n / 1024 / 1024).toFixed(1)} MB`;
}

function optionLabel(field: Pick<TaskTypeField, 'option_labels'> | undefined, value: unknown): string {
  const v = value == null ? '' : String(value);
  return field?.option_labels?.[v] || v;
}

function fieldValueText(field: TaskTypeField | undefined, value: unknown): string {
  if (value == null || value === '') return '';
  if (Array.isArray(value)) return value.map((v) => optionLabel(field, v)).join(', ');
  if (typeof value === 'boolean') return value ? 'Ja' : 'Nein';
  if (field && (field.type === 'select' || field.type === 'multiselect')) return optionLabel(field, value);
  return String(value);
}

/** Field keys as their labels, for a sentence; an `"a|b"` group reads as a choice. */
function missingFieldLabels(type: TaskType | undefined, missing: string[] | undefined): string[] {
  const one = (k: string) => type?.fields.find((x) => x.key === k)?.label ?? k;
  return (missing ?? []).map((k) => (k.includes('|') ? k.split('|').map(one).join(' oder ') : one(k)));
}

function isFieldMissing(missing: string[] | undefined, key: string): boolean {
  return (missing ?? []).some((k) => k === key || k.split('|').includes(key));
}

function fieldLabel(type: TaskType | undefined, key: string | null | undefined): string | null {
  if (!key) return null;
  return type?.fields.find((x) => x.key === key)?.label ?? key;
}

/* ---- status machine mirror (deskFormat.ts line 297 to 375, both roles) -- */

function allowedTransitions(
  status: TicketStatus,
  role: DeskRole,
  o: { fieldsComplete?: boolean; isOwnTicket?: boolean; isDesignated?: boolean; unassigned?: boolean },
): TransitionOption[] {
  const gate = o.fieldsComplete === false;
  const fieldGate = gate ? { disabled: true, hint: 'Erst möglich, wenn alle Pflichtangaben da sind.' } : {};
  const cancel: TransitionOption = { to: 'cancelled', label: 'Stornieren', needs: 'reason', quiet: true };
  if (role === 'viewer') return [];
  if (role === 'agent') {
    switch (status) {
      case 'new':
        return [{ to: 'accepted', label: 'Annehmen' }, { to: 'in_progress', label: 'Annehmen & starten', ...fieldGate }, cancel];
      case 'accepted':
        return [
          ...(o.unassigned ? [{ to: 'accepted' as TicketStatus, label: 'Annehmen' }] : []),
          { to: 'in_progress', label: 'Arbeit starten', ...fieldGate },
          cancel,
        ];
      case 'in_progress':
        return [
          { to: 'waiting_on_client', label: 'Rückfrage stellen', needs: 'message', hint: 'Pausiert die Uhr, mailt die Frage.' },
          { to: 'solved', label: 'Gelöst & zur Prüfung', needs: 'message', hint: 'Mit Übergabetext geht es direkt zur Prüfung durch den Kunden.' },
          cancel,
        ];
      case 'waiting_on_client':
        return [{ to: 'in_progress', label: 'Weiterarbeiten' }, cancel];
      case 'solved':
        return [
          { to: 'client_review', label: 'Zur Prüfung senden', needs: 'message' },
          { to: 'in_progress', label: 'Nachbessern', quiet: true },
          cancel,
        ];
      case 'client_review':
        return [
          { to: 'done', label: 'Abschliessen (Frist abgelaufen)', hint: 'Nur nach Ablauf der Prüffrist; sonst nimmt der Kunde ab.' },
          { to: 'in_progress', label: 'Nachbessern', quiet: true },
          cancel,
        ];
      case 'done':
        return [{ to: 'in_progress', label: 'Wieder öffnen', quiet: true }];
      default:
        return [];
    }
  }
  // requester — Ziffer 3.15: Storno, Abnahme and Nachbesserung belong to the
  // person who ordered the work or to a designated contact / deputy.
  const mayDecide = o.isOwnTicket || o.isDesignated;
  if (!mayDecide) return [];
  switch (status) {
    case 'new':
    case 'accepted':
      return [{ to: 'cancelled', label: 'Auftrag zurückziehen', quiet: true }];
    case 'client_review':
      return [
        { to: 'done', label: 'Abnehmen' },
        { to: 'in_progress', label: 'Nachbesserung anfordern', needs: 'message', quiet: true },
      ];
    default:
      return [];
  }
}

/* ---- desk/ui.tsx: chips, spinner, inline notices, modal ------------------ */

const STATUS_CLS: Record<TicketStatus, string> = {
  new: 'bg-purple-100 text-purple-700',
  accepted: 'bg-purple-50 text-purple-700',
  in_progress: 'bg-ink/5 text-ink',
  waiting_on_client: 'bg-warn-bg text-warn',
  solved: 'bg-success-bg text-success',
  client_review: 'bg-purple text-white',
  done: 'bg-success-bg text-success',
  cancelled: 'bg-ink/5 text-ink-60',
};

/** This screen never passes `blocked` (only the ticket list does), so that branch is not ported. */
function StatusChip({ status }: { status: TicketStatus }) {
  return (
    <span className="inline-flex items-center gap-1 flex-wrap">
      <span className={`chip ${STATUS_CLS[status] ?? 'bg-ink/5 text-ink-60'}`}>{statusLabel(status)}</span>
    </span>
  );
}

const CLASS_CLS: Record<string, string> = { k1: 'bg-danger-bg text-danger', k2: 'bg-warn-bg text-warn', k3: 'bg-ink/5 text-ink-60' };

function ClassChip({ classKey }: { classKey: string }) {
  return <span className={`chip ${CLASS_CLS[classKey] ?? 'bg-ink/5 text-ink-60'}`}>{classShort(classKey)}</span>;
}

const SLA_CLS: Record<SlaVariant, string> = {
  ok: 'text-ink-60',
  soon: 'text-warn font-semibold',
  breached: 'text-danger font-semibold',
  met: 'text-success',
  late: 'text-danger',
};

function SlaBadge({ sla }: { sla: SlaInfo }) {
  const s = slaState(sla);
  return (
    <span className={`inline-flex flex-col leading-tight text-[12.5px] ${SLA_CLS[s.variant]}`}>
      <span>{s.text}</span>
      <span className="text-[11px] text-ink-40 font-normal tnum">bis {fmtZurich(sla.due)}</span>
    </span>
  );
}

function Spinner() {
  return <div className="py-12 text-center text-ink-60 text-[14px]">Laden…</div>;
}

function ErrorNote({ text }: { text?: string | null }) {
  if (!text) return null;
  return <div className="rounded-xl bg-danger-bg text-danger text-[13.5px] px-3.5 py-2.5">{text}</div>;
}

function InfoNote({ children }: { children: React.ReactNode }) {
  return <div className="rounded-xl bg-purple-50 text-purple-700 text-[13.5px] px-3.5 py-2.5">{children}</div>;
}

function Modal({ title, onClose, children }: { title: string; onClose: () => void; children: React.ReactNode }) {
  return (
    <div className="fixed inset-0 z-50 grid place-items-center bg-ink/40 p-4" onClick={onClose}>
      <div className="card w-full max-w-lg p-6" onClick={(e) => e.stopPropagation()} role="dialog" aria-modal="true">
        <div className="flex items-start justify-between gap-4 mb-4">
          <h2 className="text-[18px] font-bold text-ink">{title}</h2>
          <button type="button" onClick={onClose} className="text-ink-40 hover:text-ink text-[20px] leading-none" aria-label="Schliessen">
            ×
          </button>
        </div>
        {children}
      </div>
    </div>
  );
}

/* ---- ActingEmailBadge.tsx ------------------------------------------------ */

/**
 * "Du bist als lukas@… angemeldet · Konto kontakt@…" — a practice signs in
 * to ONE shared account from several mailboxes; `acting_email` names the
 * person at the keyboard, the account's own address names the practice.
 * Renders nothing for an ordinary login, where the two are the same address.
 */
function ActingEmailBadge({ config, accountEmail, accountName, className = '' }: { config: DeskConfig | null | undefined; accountEmail?: string | null; accountName?: string | null; className?: string }) {
  const acting = config?.acting_email ?? null;
  if (!config?.shared_account || !acting) return null;
  const account = (accountName || accountEmail || '').trim();
  return (
    <div className={`rounded-xl bg-purple-50 text-purple-700 text-[12.5px] px-3.5 py-2 ${className}`} data-testid="acting-email-badge">
      Du bist als <span className="font-semibold">{acting}</span> angemeldet
      {account && <span className="text-purple-700/70">{' · '}Konto {account}</span>}
    </div>
  );
}

/** The same fact for a message header: shown only when it differs from the account it acted through. */
function ActingEmailLine({ actingEmail, accountEmail }: { actingEmail?: string | null; accountEmail?: string | null }) {
  const acting = (actingEmail || '').trim().toLowerCase();
  if (!acting) return null;
  if (acting === (accountEmail || '').trim().toLowerCase()) return null;
  return (
    <span className="text-[11.5px] text-ink-40" data-testid="acting-email-line">
      von {acting}
    </span>
  );
}

/* ---- MessageThread.tsx ---------------------------------------------------- */

/** Messages ordered by time. `in` (client) left, `out` (us) right. Internal
 *  notes never reach the portal (the backend filters them before this array
 *  arrives), so `is_internal` is never true in this recipe's sample data. */
function MessageThread({ messages, type, accountEmail }: { messages: DeskMessage[]; type?: TaskType; accountEmail?: string | null }) {
  if (messages.length === 0) return <div className="text-[14px] text-ink-40 py-6 text-center">Noch keine Nachrichten.</div>;
  return (
    <ol className="space-y-3">
      {messages.map((m) => {
        const ours = m.direction === 'out';
        const who = ours ? displayName(m.author) || 'Alchemy' : displayName(m.author) || 'Du';
        return (
          <li key={m.id} className={`flex ${ours ? 'justify-end' : 'justify-start'}`}>
            <div className={`max-w-[85%] rounded-2xl px-4 py-3 text-[14px] leading-relaxed ${m.is_internal ? 'bg-warn-bg/70 text-ink border border-warn/20' : ours ? 'bg-purple-50 text-ink' : 'bg-white border border-line text-ink'}`}>
              <div className="flex flex-wrap items-center gap-x-2 gap-y-0.5 text-[11.5px] text-ink-60 mb-1.5">
                <span className="font-semibold text-ink">{who}</span>
                <span className="tnum">{fmtZurich(m.created_at)}</span>
                {m.is_decision && <span className="chip bg-purple-100 text-purple-700">Entscheid</span>}
                {m.channel === 'email' && <span className="chip bg-ink/5 text-ink-60">E-Mail</span>}
                <ActingEmailLine actingEmail={m.acting_email} accountEmail={m.author?.email ?? accountEmail} />
              </div>
              <div className="whitespace-pre-wrap break-words">{m.body}</div>
              {m.attachments.length > 0 && (
                <div className="mt-2 flex flex-wrap gap-1.5">
                  {m.attachments.map((a) => (
                    <AttachmentChip key={a.id} att={a} type={type} />
                  ))}
                </div>
              )}
            </div>
          </li>
        );
      })}
    </ol>
  );
}

/** The download click reaches `downloadAttachment` (a network call) in the
 *  source; here it is inert, the same convention as every other write in
 *  this file (header comment). */
function AttachmentChip({ att, type }: { att: Attachment; type?: TaskType }) {
  const forField = fieldLabel(type, att.field_key);
  return (
    <span className="inline-flex items-center gap-1.5">
      <button type="button" className="chip bg-white border border-line text-ink hover:border-purple/40 hover:text-purple max-w-[16rem]" title={`${att.filename} · ${fmtBytes(att.size_bytes)}`}>
        <span aria-hidden>📎</span>
        <span className="truncate">{att.filename}</span>
        <span className="text-ink-40 font-medium">{fmtBytes(att.size_bytes)}</span>
        {forField && <span className="text-ink-40 font-medium">· {forField}</span>}
      </button>
    </span>
  );
}

/* ---- MessageComposer.tsx --------------------------------------------------- */

/** Reply box. `postMessage` and `uploadToTicket` are network calls in the
 *  source; Send and Attach are inert here, the textarea and the file-field
 *  select stay real controlled inputs. */
function MessageComposer({ placeholder, fileFields = [] }: { placeholder?: string; fileFields?: TaskTypeField[] }) {
  const [body, setBody] = useState('');
  const [fieldKey, setFieldKey] = useState('');
  return (
    <div className="rounded-2xl border p-4 border-line bg-white">
      <textarea className="field min-h-[96px] bg-transparent" value={body} onChange={(e) => setBody(e.target.value)} placeholder={placeholder ?? 'Deine Nachricht ans Team'} />
      <div className="flex flex-wrap items-center gap-3 mt-3">
        <button type="button" className="btn-primary" disabled={!body.trim()}>
          Senden
        </button>
        <label className="btn-quiet cursor-pointer text-[13px]">
          <input type="file" className="hidden" accept="application/pdf,image/jpeg,image/png,image/webp,text/plain,.docx" onChange={() => {}} />
          📎 Datei anhängen
        </label>
        {fileFields.length > 0 && (
          <label className="inline-flex items-center gap-1.5 text-[12.5px] text-ink-60">
            <span className="text-warn font-semibold">fehlt:</span>
            <select className="field-sm" value={fieldKey} onChange={(e) => setFieldKey(e.target.value)}>
              <option value="">nur anhängen</option>
              {fileFields.map((f) => (
                <option key={f.key} value={f.key}>
                  als {f.label}
                </option>
              ))}
            </select>
          </label>
        )}
        <span className="text-[11.5px] text-ink-40 ml-auto">⌘↵ sendet</span>
      </div>
    </div>
  );
}

/* ---- StatusActions.tsx ----------------------------------------------------- */

/**
 * Only the legal transitions for this status + role. A transition that needs
 * text opens a small modal (kept, local `useState`); the actual write
 * (`acceptTicket` / `changeStatus`) is a network call in the source and is
 * inert here — confirming the modal just closes it, the same convention as
 * every other write in this file.
 */
function StatusActions({ ticket, role, myIsDesignated, userId, type }: { ticket: TicketDetail; role: DeskRole; myIsDesignated: boolean; userId?: string | null; type?: TaskType }) {
  const [pending, setPending] = useState<TransitionOption | null>(null);
  const [text, setText] = useState('');

  const options = allowedTransitions(ticket.status, role, {
    fieldsComplete: ticket.fields_complete,
    isOwnTicket: !!userId && ticket.requester.id === userId,
    isDesignated: myIsDesignated,
    unassigned: !ticket.assignee?.id,
  });
  if (options.length === 0) return null;

  const click = (opt: TransitionOption) => {
    if (opt.needs) {
      setPending(opt);
      setText('');
    }
  };

  const modalTitle = (opt: TransitionOption) =>
    opt.to === 'waiting_on_client'
      ? 'Rückfrage an den Kunden'
      : opt.to === 'cancelled'
        ? 'Warum wird storniert?'
        : opt.to === 'in_progress' && role !== 'agent'
          ? 'Was soll nachgebessert werden?'
          : 'Übergabetext für die Prüfung durch den Kunden';

  return (
    <div>
      <div className="flex flex-wrap gap-2">
        {options.map((opt) => (
          <button
            key={opt.to + opt.label}
            type="button"
            disabled={!!opt.disabled}
            onClick={() => click(opt)}
            className={`${opt.quiet ? 'btn-ghost' : 'btn-primary'} ${opt.disabled ? 'opacity-50 cursor-not-allowed' : ''}`}
            title={opt.hint}
          >
            {opt.label}
          </button>
        ))}
      </div>
      {options.some((o) => o.hint) && (
        <div className="text-[12px] mt-2 space-y-0.5">
          {options
            .filter((o) => o.hint)
            .map((o) => (
              <div key={o.to} className={o.disabled ? 'text-warn' : 'text-ink-40'}>
                {o.label}: {o.hint}
                {o.disabled && o.to === 'in_progress' && !ticket.fields_complete && missingFieldLabels(type, ticket.missing_fields).length > 0 && (
                  <> Es fehlt: {missingFieldLabels(type, ticket.missing_fields).join(', ')}.</>
                )}
              </div>
            ))}
        </div>
      )}
      {pending && (
        <Modal title={modalTitle(pending)} onClose={() => setPending(null)}>
          <textarea
            className="field min-h-[120px]"
            autoFocus
            value={text}
            onChange={(e) => setText(e.target.value)}
            placeholder={
              pending.needs === 'reason'
                ? 'Grund (wird dem Kunden mitgeteilt)'
                : pending.to === 'waiting_on_client'
                  ? 'Deine Frage – geht per E-Mail raus und pausiert die Uhr.'
                  : pending.to === 'in_progress'
                    ? 'Was passt noch nicht?'
                    : 'Was wurde gemacht, was soll der Kunde prüfen? Geht per E-Mail raus.'
            }
          />
          {pending.to === 'solved' && (
            <div className="text-[12px] text-ink-40 mt-2">
              Ohne Text bleibt das Ticket auf «Gelöst» und wartet auf die Übergabe; mit Text geht es sofort zur Prüfung durch den Kunden.
            </div>
          )}
          <div className="flex items-center gap-2 mt-4">
            <button type="button" className="btn-primary" onClick={() => setPending(null)}>
              {pending.label}
            </button>
            <button type="button" className="btn-quiet" onClick={() => setPending(null)}>
              Abbrechen
            </button>
          </div>
        </Modal>
      )}
    </div>
  );
}

/* ---- TicketFieldsCard.tsx --------------------------------------------------- */

/**
 * The type's required fields on an existing ticket. `canEdit` is always
 * `false` on this route (DeskTicket.tsx line 162), so the source's inline
 * editor branch (`editing`, `FieldInput`, agent-only in the real app) never
 * runs here and is not ported; only the read view and the `file`-field
 * upload row are.
 */
function TicketFieldsCard({ ticket, type, canUpload }: { ticket: TicketDetail; type: TaskType; canUpload: boolean }) {
  const fields = type.fields;
  const missingLabels = missingFieldLabels(type, ticket.missing_fields);
  const attachmentFor = (key: string) => ticket.attachments.find((a) => a.field_key === key);

  return (
    <div className="card p-4 text-[13px]">
      <div className="flex items-center justify-between gap-2">
        <div className="label mb-0">Pflichtangaben</div>
        <span className={`chip ${ticket.fields_complete ? 'bg-success-bg text-success' : 'bg-warn-bg text-warn'}`}>
          {ticket.fields_complete ? 'vollständig' : ticket.missing_fields.length === 1 ? '1 Angabe fehlt' : `${ticket.missing_fields.length} Angaben fehlen`}
        </span>
      </div>

      {!ticket.fields_complete && missingLabels.length > 0 && (
        <div className="mt-2 rounded-xl bg-warn-bg/60 px-3 py-2 text-[12.5px] text-warn">Es fehlt noch: {missingLabels.join(', ')}. Vorher kann die Arbeit nicht starten.</div>
      )}

      <dl className="mt-3 space-y-2">
        {fields.map((f) => {
          const missing = isFieldMissing(ticket.missing_fields, f.key);
          const att = attachmentFor(f.key);
          const text = fieldValueText(f, ticket.fields[f.key]);
          return (
            <div key={f.key}>
              <dt className={`text-[11.5px] ${missing ? 'text-warn font-semibold' : 'text-ink-40'}`}>
                {f.label}
                {f.required && ' *'}
                {missing && ' – fehlt'}
              </dt>
              <dd className="text-ink break-words whitespace-pre-wrap">
                {f.type === 'file' ? (
                  att ? (
                    <AttachmentChip att={att} type={type} />
                  ) : canUpload ? (
                    <FileRow field={f} missing={missing} />
                  ) : (
                    <span className="text-ink-40">—</span>
                  )
                ) : text ? (
                  text
                ) : (
                  <span className="text-ink-40">—</span>
                )}
              </dd>
            </div>
          );
        })}
      </dl>
    </div>
  );
}

/** Upload for one `file` field, `bare` form (the requester's own way to
 *  complete an incomplete ticket, §4.4). `uploadToTicket` is a network call
 *  in the source; the file input here is inert. */
function FileRow({ field: f, missing }: { field: TaskTypeField; missing: boolean }) {
  return (
    <label className={`btn-ghost cursor-pointer inline-flex text-[12.5px] ${missing ? 'border-warn' : ''}`}>
      <input type="file" className="hidden" accept={(f.accept ?? []).join(',') || undefined} onChange={() => {}} />
      Datei wählen
    </label>
  );
}

/* ---- DeskTicket.tsx --------------------------------------------------------- */

function Row({ label, value }: { label: string; value: React.ReactNode }) {
  return (
    <div className="flex items-start justify-between gap-3">
      <span className="text-ink-40 shrink-0">{label}</span>
      <span className="text-ink text-right min-w-0">{value}</span>
    </div>
  );
}

/** Client portal ticket: status in plain words, thread, reply, Abnahme. */
function DeskTicketPage({ account, status, ticket, config, error }: Omit<Props, 'workspace'>) {
  const role = config?.my_role ?? 'requester';
  const type = config?.task_types.find((t) => t.slug === ticket?.type_slug);
  const unfilledFileFields = (type?.fields ?? []).filter((f) => f.type === 'file' && !ticket?.attachments.some((a) => a.field_key === f.key));

  return (
    <div className="max-w-4xl">
      <div className="mb-3">
        <a href="/desk" className="text-[13px] text-ink-60 hover:text-purple">
          ← Deine Aufträge
        </a>
      </div>
      {error && <ErrorNote text={error} />}
      {status === 'loading' && <Spinner />}
      {ticket && (
        <>
          <div className="flex flex-wrap items-end justify-between gap-4 mb-7">
            <div>
              <div className="text-[12px] font-semibold uppercase tracking-[0.14em] text-purple mb-1.5">Service Desk · {ticket.ticket_key}</div>
              <h1 className="text-[28px] leading-none font-extrabold tracking-[-0.02em] text-ink">{ticket.title}</h1>
            </div>
            <div className="flex flex-col items-end gap-1">
              <StatusChip status={ticket.status} />
              <span className="text-[12px] text-ink-40">{ticket.type_label}</span>
            </div>
          </div>

          <ActingEmailBadge config={config} accountEmail={account.email} accountName={account.name} className="mb-4" />

          <div className={`rounded-2xl px-5 py-4 mb-5 text-[15px] ${ticket.status === 'waiting_on_client' || ticket.status === 'client_review' ? 'bg-warn-bg text-warn' : 'bg-purple-50 text-purple-700'}`}>
            <div className="font-semibold">{statusSentence(ticket.status)}</div>
            {ticket.status === 'client_review' && ticket.client_review_started_at && config && (
              <div className="text-[12.5px] mt-1 opacity-80">
                Meldest du dich {config.review_timeout_working_days} Werktage nicht, darf das Team den Auftrag selbst abschliessen.
              </div>
            )}
          </div>

          {role !== 'viewer' && (
            <div className="mb-6">
              <StatusActions ticket={ticket} role={role} userId={account.userId} myIsDesignated={!!config?.my_is_designated} type={type} />
            </div>
          )}

          <div className="grid md:grid-cols-[1fr_16rem] gap-5">
            <div className="space-y-4">
              <div className="card p-5">
                <div className="label">Verlauf</div>
                <MessageThread messages={ticket.messages} type={type} accountEmail={account.email} />
              </div>
              {role !== 'viewer' && ticket.status !== 'cancelled' && (
                <MessageComposer placeholder={ticket.status === 'waiting_on_client' ? 'Deine Antwort – damit geht es weiter.' : 'Deine Nachricht ans Team'} fileFields={unfilledFileFields} />
              )}
              {ticket.status === 'done' && <InfoNote>Der Auftrag ist erledigt. Schreibst du hier, sehen wir es trotzdem.</InfoNote>}
            </div>

            <aside className="space-y-4">
              <div className="card p-4 text-[13px] space-y-2">
                <Row label="Eingang" value={fmtZurich(ticket.received_at)} />
                <Row
                  label="Klasse"
                  value={
                    <span className="inline-flex items-center gap-1.5">
                      <ClassChip classKey={ticket.class_key} /> {ticket.class_label}
                    </span>
                  }
                />
                <Row label="Reaktionszeit" value={<SlaBadge sla={ticket.sla} />} />
                <Row label="Zuständig" value={ticket.assignee ? displayName(ticket.assignee) : 'noch offen'} />
                <Row
                  label="Angefragt von"
                  value={
                    ticket.requester.acting_email ? (
                      <span className="inline-flex flex-col items-end">
                        <span>{ticket.requester.acting_email}</span>
                        <span className="text-[11.5px] text-ink-40">{ticket.requester.name || ticket.requester.email}</span>
                      </span>
                    ) : (
                      ticket.requester.name || ticket.requester.email
                    )
                  }
                />
                {ticket.done_at && <Row label={ticket.status === 'cancelled' ? 'Storniert' : 'Erledigt'} value={fmtZurich(ticket.done_at)} />}
              </div>

              {type && <TicketFieldsCard ticket={ticket} type={type} canUpload={role !== 'viewer' && ticket.status !== 'cancelled'} />}

              {ticket.attachments.length > 0 && (
                <div className="card p-4 text-[13px]">
                  <div className="label">Dateien</div>
                  <div className="flex flex-col gap-1.5">
                    {ticket.attachments.map((a) => (
                      <AttachmentChip key={a.id} att={a} type={type} />
                    ))}
                  </div>
                </div>
              )}

              {ticket.intake_check && (ticket.intake_check.questions?.length ?? 0) > 0 && (
                <div className="card p-4 text-[13px]">
                  <div className="label">Rückfragen bei der Aufnahme</div>
                  <ol className="space-y-2">
                    {ticket.intake_check.questions!.map((q, i) => (
                      <li key={i}>
                        <div className="text-ink">{q}</div>
                        <div className="text-ink-60 whitespace-pre-wrap">{ticket.intake_check?.answers?.[i] || <span className="text-ink-40">nicht beantwortet</span>}</div>
                      </li>
                    ))}
                  </ol>
                </div>
              )}
            </aside>
          </div>
        </>
      )}
    </div>
  );
}

/* ---- sample data (Atelier Nordwind, the fictional tenant billing-credits/
   ui/subscription-manager's demo already established, kept for continuity) - */

const workspace: ShellWorkspace = { id: 'ws_1', name: 'Atelier Nordwind', slug: 'atelier-nordwind' };
const elena = { userId: 'usr_82', email: 'kontakt@atelier-nordwind.example', name: 'Elena Roth' };

const contentType: TaskType = {
  slug: 'content_update',
  label: 'Content-Anpassung',
  fields: [
    { key: 'seite', label: 'Betroffene Seite', type: 'url', required: true, placeholder: 'atelier-nordwind.example/leistungen' },
    { key: 'prioritaet', label: 'Priorität', type: 'select', required: true, options: ['normal', 'dringend'], option_labels: { normal: 'Normal', dringend: 'Dringend' } },
    { key: 'frist', label: 'Wunschtermin', type: 'date', required: false },
    { key: 'freigabe_noetig', label: 'Freigabe durch Praxisleitung nötig', type: 'checkbox', required: false },
    { key: 'referenz_pdf', label: 'Referenzdokument', type: 'file', required: true, accept: ['application/pdf'] },
  ],
};

const config: DeskConfig = {
  classes: [
    { key: 'k1', label: 'Störung' },
    { key: 'k2', label: 'Wichtig' },
    { key: 'k3', label: 'Normal' },
  ],
  task_types: [contentType],
  review_timeout_working_days: 3,
  my_role: 'requester',
  my_is_designated: true,
  acting_email: null,
  shared_account: false,
};

const sharedAccountConfig: DeskConfig = { ...config, acting_email: 'lukas@atelier-nordwind.example', shared_account: true };

const respondedSla: SlaInfo = { due: '2026-09-10T14:00:00Z', responded_at: '2026-09-10T10:12:00Z', state: 'met', remaining_seconds: 0 };

const jonas: UserRef = { id: 'agt_4', name: 'Jonas Berger', email: 'jonas@alchemy.zuerich.example' };

const referenzAttachment: Attachment = { id: 'att_1', filename: 'referenz-nordwind.pdf', mime: 'application/pdf', size_bytes: 482_331, kind: 'reference', field_key: 'referenz_pdf', created_at: '2026-09-11T08:14:00Z' };

const baseTicket: Omit<TicketDetail, 'status' | 'fields' | 'fields_complete' | 'missing_fields' | 'attachments' | 'messages' | 'done_at' | 'client_review_started_at'> = {
  id: 'tk_1',
  ticket_key: 'NORD-118',
  title: 'Leistungen-Seite: Text und Bilder aktualisieren',
  type_slug: 'content_update',
  type_label: 'Content-Anpassung',
  class_key: 'k2',
  class_label: 'Wichtig',
  requester: { id: 'usr_82', email: 'kontakt@atelier-nordwind.example', name: 'Elena Roth', is_designated: true, acting_email: null },
  assignee: jonas,
  received_at: '2026-09-10T09:05:00Z',
  sla: respondedSla,
};

const filledFields = { seite: 'https://atelier-nordwind.example/leistungen', prioritaet: 'dringend', frist: '2026-09-20', freigabe_noetig: true };

const requestMessage: DeskMessage = {
  id: 'm1',
  ticket_id: 'tk_1',
  direction: 'in',
  channel: 'portal',
  author: { id: null, name: null, email: 'kontakt@atelier-nordwind.example' },
  body: 'Können wir den Leistungen-Text bis Ende Monat anpassen? Ich schicke gleich das Referenzdokument mit.',
  is_internal: false,
  is_decision: false,
  email_sent_at: null,
  acting_email: 'lukas@atelier-nordwind.example',
  attachments: [],
  created_at: '2026-09-10T09:05:00Z',
};

const ackMessage: DeskMessage = {
  id: 'm2',
  ticket_id: 'tk_1',
  direction: 'out',
  channel: 'email',
  author: jonas,
  body: 'Danke, wir haben den Auftrag übernommen und melden uns mit einem Vorschlag.',
  is_internal: false,
  is_decision: false,
  email_sent_at: '2026-09-10T10:12:00Z',
  acting_email: null,
  attachments: [],
  created_at: '2026-09-10T10:12:00Z',
};

const handoverMessage: DeskMessage = {
  id: 'm3',
  ticket_id: 'tk_1',
  direction: 'out',
  channel: 'email',
  author: jonas,
  body: 'Der neue Text ist live. Bitte kurz gegenprüfen, ob alles passt – dann kannst du den Auftrag abnehmen.',
  is_internal: false,
  is_decision: true,
  email_sent_at: '2026-09-12T08:00:00Z',
  acting_email: null,
  attachments: [],
  created_at: '2026-09-12T08:00:00Z',
};

export const states = defineStates<Props>({
  default: {
    label: '"In Arbeit": no requester action for this status, full thread, complete fields, attachments and the answered intake check all shown',
    props: {
      workspace,
      account: elena,
      status: 'ok',
      config: sharedAccountConfig,
      ticket: {
        ...baseTicket,
        status: 'in_progress',
        fields: filledFields,
        fields_complete: true,
        missing_fields: [],
        attachments: [referenzAttachment],
        messages: [{ ...requestMessage, attachments: [referenzAttachment] }, ackMessage],
        done_at: null,
        client_review_started_at: null,
        intake_check: { questions: ['Ist die Domain bereits verifiziert?', 'Gibt es ein bestehendes Redesign-Konzept?'], answers: ['Ja, seit letzter Woche.', ''] },
      },
    },
  },
  'waiting-on-client': {
    label: 'Wartet auf dich: the amber banner, the composer’s placeholder swap, the missing file field gating "Pflichtangaben" and offered in the reply composer',
    props: {
      workspace,
      account: elena,
      status: 'ok',
      config: sharedAccountConfig,
      ticket: {
        ...baseTicket,
        status: 'waiting_on_client',
        fields: { seite: filledFields.seite, prioritaet: filledFields.prioritaet },
        fields_complete: false,
        missing_fields: ['referenz_pdf'],
        attachments: [],
        messages: [requestMessage, ackMessage, { ...handoverMessage, id: 'm2b', is_decision: false, body: 'Kannst du uns das Referenzdokument noch zuschicken? Ohne das können wir nicht starten.', created_at: '2026-09-10T11:30:00Z' }],
        done_at: null,
        client_review_started_at: null,
        intake_check: null,
      },
    },
  },
  'client-review': {
    label: 'Zur Prüfung: Abnahme / Nachbesserung buttons, the review-window sentence, the handover message marked as a decision',
    props: {
      workspace,
      account: elena,
      status: 'ok',
      config,
      ticket: {
        ...baseTicket,
        status: 'client_review',
        fields: filledFields,
        fields_complete: true,
        missing_fields: [],
        attachments: [referenzAttachment],
        messages: [requestMessage, ackMessage, handoverMessage],
        done_at: null,
        client_review_started_at: '2026-09-12T08:00:00Z',
        intake_check: null,
      },
    },
  },
  done: {
    label: 'Erledigt: the "still writes here" info note under a still-open composer, the "Erledigt" date row, no action buttons for the requester',
    props: {
      workspace,
      account: elena,
      status: 'ok',
      config,
      ticket: {
        ...baseTicket,
        status: 'done',
        fields: filledFields,
        fields_complete: true,
        missing_fields: [],
        attachments: [referenzAttachment],
        messages: [requestMessage, ackMessage, handoverMessage, { ...handoverMessage, id: 'm4', direction: 'in', channel: 'portal', author: { id: null, name: null, email: elena.email }, body: 'Passt so, danke!', is_decision: false, acting_email: null, created_at: '2026-09-12T09:10:00Z' }],
        done_at: '2026-09-12T09:10:00Z',
        client_review_started_at: '2026-09-12T08:00:00Z',
        intake_check: null,
      },
    },
  },
  cancelled: {
    label: 'Storniert: composer and info note both gone, no action buttons, the "Storniert" date row in the same slot "Erledigt" uses',
    props: {
      workspace,
      account: elena,
      status: 'ok',
      config,
      ticket: {
        ...baseTicket,
        status: 'cancelled',
        fields: { seite: filledFields.seite },
        fields_complete: false,
        missing_fields: ['prioritaet', 'referenz_pdf'],
        attachments: [],
        messages: [requestMessage, { ...ackMessage, id: 'm2c', body: 'Storniert auf deinen Wunsch – melde dich, falls der Auftrag doch noch aktuell wird.', is_decision: false }],
        done_at: '2026-09-11T16:00:00Z',
        client_review_started_at: null,
        intake_check: null,
      },
    },
  },
  'viewer-role': {
    label: 'A read-only viewer on the same "Zur Prüfung" ticket client-review shows with actions: no Abnahme/Nachbesserung buttons, no composer, no upload row',
    props: {
      workspace,
      account: { userId: 'usr_90', email: 'buchhaltung@atelier-nordwind.example', name: 'Team Buchhaltung' },
      status: 'ok',
      config: { ...config, my_role: 'viewer', my_is_designated: false },
      ticket: {
        ...baseTicket,
        requester: { ...baseTicket.requester, id: 'usr_82' },
        status: 'client_review',
        fields: filledFields,
        fields_complete: true,
        missing_fields: [],
        attachments: [referenzAttachment],
        messages: [requestMessage, ackMessage, handoverMessage],
        done_at: null,
        client_review_started_at: '2026-09-12T08:00:00Z',
        intake_check: null,
      },
    },
  },
  loading: {
    label: 'First fetch: the shell paints, only a spinner where the ticket will be (DeskTicket.tsx line 58)',
    props: { workspace, account: elena, status: 'loading', config: null, ticket: null, error: null },
    height: 420,
  },
  error: {
    label: 'load() threw: the fixed portal error sentence, no ticket at all',
    props: { workspace, account: elena, status: 'error', config: null, ticket: null, error: 'Auftrag konnte nicht geladen werden.' },
    height: 420,
  },
});

export default function Demo({ workspace: ws, account, status, ticket, config, error, galleryMode }: Props & { galleryMode?: boolean }) {
  const viewer: ShellUser = { name: account.name ?? account.email ?? '', email: account.email ?? '', isAdmin: false };
  return (
    <Shell domains={DOMAINS} user={viewer} workspaces={[ws]} currentWorkspaceId={ws.id} activePath="/desk" hasTour={false} hideChrome={galleryMode}>
      <DeskTicketPage account={account} status={status} ticket={ticket} config={config} error={error} />
    </Shell>
  );
}

<Route /desk/:id> PrivateRoute (children)
  Navigation = AppShell
    DeskSurfaceProvider value="portal"
      div.max-w-4xl
        Link "← Deine Auftraege"
        [error]          ErrorNote                                              (line 57)
        [!ticket && !error]  Spinner                                            (line 58)
        [ticket]
          PageHeader  eyebrow "Service Desk · {ticket_key}", title, actions: StatusChip + type_label   (line 61 to 70)
          ActingEmailBadge                                                       (shared-account only, line 72 to 78)
          status banner  div (warn colors on waiting_on_client|client_review, else purple)
                          statusSentence(status)
                          [client_review && client_review_started_at] review-window sentence            (line 80 to 91)
          [role !== viewer]  StatusActions
                               buttons: allowedTransitions(status, role, {...})   (Abnahme | Nachbesserung anfordern | Stornieren | agent transitions)
                               [opt.needs]  Modal: textarea + confirm/cancel      (line 93 to 105)
          grid md:grid-cols-[1fr_16rem]
            left   card "Verlauf" > MessageThread (ol of message bubbles, each optional AttachmentChip row)
                   [role !== viewer && status !== cancelled]  MessageComposer (textarea, Senden, Datei anhaengen, missing-field select)
                   [status === done]  InfoNote "Auftrag ist erledigt..."          (line 108 to 129)
            aside  card: Row x5 (Eingang, Klasse+ClassChip, Reaktionszeit+SlaBadge, Zustaendig, Angefragt von [+ acting_email], [done_at] Erledigt|Storniert)
                   [type]  TicketFieldsCard (Pflichtangaben chip, missing banner, dl of field key/value, file field -> AttachmentChip | upload row)
                   [attachments.length]  card "Dateien" > AttachmentChip list
                   [intake_check.questions.length]  card "Rueckfragen bei der Aufnahme" > ol of Q + A          (line 131 to 193)