'use client';

/**
 * /design-system#support-tickets — Phase 3 support ticket UI components.
 *
 * Registers: SLABadge, CategoryPicker, SupportThread, SupportMessageComposer.
 * Token usage + a11y notes per Hard Rule §9.
 */

import { SLABadge } from '@/components/ui/domain/support/SLABadge';
import { CategoryPicker } from '@/components/ui/domain/support/CategoryPicker';
import { SupportThread } from '@/components/ui/domain/support/SupportThread';
import { SupportMessageComposer } from '@/components/ui/domain/support/SupportMessageComposer';
import type { SupportMessageView, SupportAttachmentView } from '@/server/support/types';

const SAMPLE_MESSAGES: SupportMessageView[] = [
  {
    id: '00000000-0000-0000-0000-000000000001',
    parentType: 'ticket',
    parentId: '00000000-0000-0000-0000-000000000010',
    authorType: 'customer',
    authorId: '00000000-0000-0000-0000-000000000020',
    visibility: 'public',
    body: 'שלום, ניסיתי לממש את הדיל אבל העסק אמר שהוא לא תקף. יש לכם פתרון?',
    createdAt: new Date(Date.now() - 3600_000).toISOString(),
    editedAt: null,
    deletedAt: null,
  },
  {
    id: '00000000-0000-0000-0000-000000000002',
    parentType: 'ticket',
    parentId: '00000000-0000-0000-0000-000000000010',
    authorType: 'human_agent',
    authorId: null,
    visibility: 'public',
    body: 'שלום! אנחנו בודקים את הנושא מול העסק ונחזור אליכם תוך 24 שעות.',
    createdAt: new Date(Date.now() - 1800_000).toISOString(),
    editedAt: null,
    deletedAt: null,
  },
  {
    id: '00000000-0000-0000-0000-000000000003',
    parentType: 'ticket',
    parentId: '00000000-0000-0000-0000-000000000010',
    authorType: 'system',
    authorId: null,
    visibility: 'public',
    body: 'הפנייה עברה לטיפול נציג.',
    createdAt: new Date().toISOString(),
    editedAt: null,
    deletedAt: null,
  },
];

const SAMPLE_ATTACHMENTS: SupportAttachmentView[] = [];

export function SupportTicketsSection() {
  return (
    <section id="support-tickets" className="space-y-[var(--space-8)]">
      <header>
        <h2 className="text-xl font-semibold">16. Support Tickets — Phase 3 UI</h2>
        <p className="text-text-secondary text-sm">
          Ticket UI components: SLABadge, CategoryPicker, SupportThread, SupportMessageComposer. All
          tokens, RTL-safe, IS 5568 / WCAG 2.1 AA.
        </p>
      </header>

      {/* ─── SLABadge ─────────────────────────────────────────────────────── */}
      <div id="slabadge-component" className="space-y-[var(--space-3)]">
        <h3 className="text-lg font-medium">SLABadge</h3>
        <p className="text-text-secondary text-sm">
          Tokens: bg-success-50/warning-50/danger-50 + ring. Clock icon. aria-hidden on icon.
        </p>
        <div className="flex flex-wrap gap-3">
          <SLABadge tone="healthy" />
          <SLABadge tone="warning" />
          <SLABadge tone="breached" />
        </div>
      </div>

      {/* ─── CategoryPicker ───────────────────────────────────────────────── */}
      <div id="categorypicker-component" className="max-w-xs space-y-[var(--space-3)]">
        <h3 className="text-lg font-medium">CategoryPicker</h3>
        <p className="text-text-secondary text-sm">
          i18n Select. Billing redirect InlineNotice. Radix Select semantics.
        </p>
        <CategoryPicker value={undefined} onChange={() => {}} />
        <div>
          <p className="text-text-secondary mb-1 text-xs">billing selected (shows notice):</p>
          <CategoryPicker value="billing" onChange={() => {}} />
        </div>
        <div>
          <p className="text-text-secondary mb-1 text-xs">disabled:</p>
          <CategoryPicker value="bug" onChange={() => {}} disabled />
        </div>
      </div>

      {/* ─── SupportThread ────────────────────────────────────────────────── */}
      <div id="supportthread-component" className="space-y-[var(--space-3)]">
        <h3 className="text-lg font-medium">SupportThread</h3>
        <p className="text-text-secondary text-sm">
          Visibility-filtered message list. Customer messages aligned end. System messages muted.
          Author labels i18n.
        </p>
        <div className="border-border rounded-lg border p-4">
          <SupportThread
            messages={SAMPLE_MESSAGES}
            attachments={SAMPLE_ATTACHMENTS}
            viewerRole="customer"
          />
        </div>
        <div>
          <p className="text-text-secondary mb-1 text-xs">empty state:</p>
          <div className="border-border rounded-lg border p-4">
            <SupportThread messages={[]} attachments={[]} viewerRole="customer" />
          </div>
        </div>
      </div>

      {/* ─── SupportMessageComposer ───────────────────────────────────────── */}
      <div id="supportmessagecomposer-component" className="space-y-[var(--space-3)]">
        <h3 className="text-lg font-medium">SupportMessageComposer</h3>
        <p className="text-text-secondary text-sm">
          Reply box with attachment upload. Closed status → hidden. Non-permitted → notice. Camera
          icon button for file picker. Keyboard accessible.
        </p>
        <div className="border-border rounded-lg border p-4">
          <SupportMessageComposer
            ticketStatus="awaiting_user"
            parentId="00000000-0000-0000-0000-000000000010"
            parentType="ticket"
            onSubmit={async () => {}}
          />
        </div>
        <div>
          <p className="text-text-secondary mb-1 text-xs">closed status (hidden):</p>
          <div className="border-border rounded-lg border p-4">
            <SupportMessageComposer
              ticketStatus="closed"
              parentId="00000000-0000-0000-0000-000000000010"
              parentType="ticket"
              onSubmit={async () => {}}
            />
            <p className="text-text-secondary text-xs">(nothing rendered above = correct)</p>
          </div>
        </div>
        <div>
          <p className="text-text-secondary mb-1 text-xs">
            awaiting_agent (no composer, shows notice):
          </p>
          <div className="border-border rounded-lg border p-4">
            <SupportMessageComposer
              ticketStatus="awaiting_agent"
              parentId="00000000-0000-0000-0000-000000000010"
              parentType="ticket"
              onSubmit={async () => {}}
            />
          </div>
        </div>
      </div>
    </section>
  );
}