'use client';

/**
 * Chat — section 20 of /design-system.
 *
 * Shows:
 *   - Card primitive (padding variants)
 *   - ThreadList item mock
 *   - Chat bubble (outgoing / incoming)
 */

import { SectionShell } from '../../components/SectionShell';
import { ComponentEntry } from '../../components/ComponentEntry';
import { Card } from '@/components/ui/layout/Card';
import { useT, useLocale } from '@/lib/i18n/react';
import { formatDateTime } from '@/lib/format';

export function ChatSection() {
  const tChat = useT('chat');
  const { locale } = useLocale();
  return (
    <SectionShell
      id="chat"
      title="20. Chat"
      description="Card layout primitive + chat thread/message islands. ThreadList and ThreadView require authentication — shown here as static mocks."
    >
      <ComponentEntry
        name="Card"
        id="card-layout"
        description="Neutral surface container. White background, rounded corners, subtle border and shadow. Use for content grouping — not frosted-glass premium (use GlassCard for that)."
        path="src/components/ui/layout/Card/Card.tsx"
        tokens={['--color-surface', '--color-border', '--space-2', '--space-4', '--space-6']}
        a11yNotes={['Semantic div — no ARIA role required.', 'Inherits RTL layout from document direction.']}
        importSnippet="import { Card } from '@/components/ui/layout/Card';"
      >
        <div className="flex flex-col gap-[var(--space-3)]">
          <Card padding="sm">
            <p className="text-sm">Card — padding sm</p>
          </Card>
          <Card padding="md">
            <p className="text-sm">Card — padding md (default)</p>
          </Card>
          <Card padding="lg">
            <p className="text-sm">Card — padding lg</p>
          </Card>
          <Card padding="none" className="p-[var(--space-3)]">
            <p className="text-sm">Card — padding none + custom className</p>
          </Card>
        </div>
      </ComponentEntry>

      <ComponentEntry
        name="ThreadList row"
        id="thread-list-mock"
        description="Thread summary row using Card. Links to /threads/:id. Renders untitled threads with localised fallback."
        path="src/features/chat/ThreadList.tsx"
        tokens={['--space-2', '--space-4', '--color-text-muted']}
        a11yNotes={['Focusable <a> wrapping Card — keyboard navigable.', 'time element with ISO datetime attribute for screen readers.']}
        importSnippet="import { ThreadList } from '@/features/chat/ThreadList';"
      >
        <ul className="flex flex-col gap-[var(--space-2)] max-w-sm">
          {[
            { id: '1', title: 'שיחה עם הספק', ts: '2026-06-03T10:00:00.000Z' },
            { id: '2', title: null, ts: '2026-06-03T09:00:00.000Z' },
          ].map((thread) => (
            <li key={thread.id}>
              <Card className="p-[var(--space-4)]">
                <div className="font-semibold">{thread.title ?? tChat('untitled')}</div>
                <time className="text-[var(--color-text-muted)] text-sm">
                  {formatDateTime(thread.ts, locale)}
                </time>
              </Card>
            </li>
          ))}
        </ul>
      </ComponentEntry>

      <ComponentEntry
        name="Chat bubble (incoming / outgoing)"
        id="chat-bubble"
        description="Chat message rendered inside a Card. Outgoing aligns ms-auto (inline-end in RTL). Incoming aligns me-auto."
        path="src/features/chat/ThreadView.tsx"
        tokens={['--color-accent-bg', '--space-1', '--space-2', '--space-3', '--color-text-muted']}
        a11yNotes={['<li> items in a <ul>.', 'Outgoing = ms-auto; incoming = me-auto — logical props, RTL safe.']}
        importSnippet="import { ThreadView } from '@/features/chat/ThreadView';"
      >
        <ul className="flex flex-col gap-[var(--space-2)] max-w-sm">
          <li className="flex">
            <Card padding="sm" className="me-auto max-w-[70%]">
              <p className="text-sm">שלום! איך אני יכול לעזור?</p>
              <time className="text-xs text-[var(--color-text-muted)] block mt-[var(--space-1)]">
                10:00
              </time>
            </Card>
          </li>
          <li className="flex">
            <Card padding="sm" className="ms-auto max-w-[70%] bg-[var(--color-accent-bg)]">
              <p className="text-sm">אני רוצה לשאול על ההזמנה שלי</p>
              <time className="text-xs text-[var(--color-text-muted)] block mt-[var(--space-1)]">
                10:01
              </time>
            </Card>
          </li>
        </ul>
      </ComponentEntry>
    </SectionShell>
  );
}