'use client';
import { useEffect, useRef, useState } from 'react';
import { ArrowUpRight, Check, Download, Plus, Settings } from 'lucide-react';
import { BrandButton, CodeBlock, CopyButton, Feedback, SearchField, StatusDot } from './primitives';
import { useBrandTheme } from '../foundations/BrandTheme';
import styles from './enhancements.module.css';

function ButtonExamples() {
  const [busy, setBusy] = useState(false);
  const [message, setMessage] = useState('');
  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
  useEffect(
    () => () => {
      if (timer.current) clearTimeout(timer.current);
    },
    []
  );
  function save() {
    setBusy(true);
    setMessage('');
    timer.current = setTimeout(() => {
      setBusy(false);
      setMessage('Example saved.');
    }, 800);
  }
  return (
    <div className={styles.block}>
      <section id="sizes">
        <h2>Sizes and variants</h2>
        <p>
          Small for dense controls, medium for everyday actions, large for prominent decisions.
          Touch targets expand to 44 px on narrow screens.
        </p>
        {(['primary', 'secondary', 'quiet', 'danger'] as const).map((variant) => (
          <div className={styles.demoRow} key={variant}>
            {(['small', 'medium', 'large'] as const).map((size) => (
              <BrandButton key={size} variant={variant} size={size}>
                {variant === 'danger' ? 'Delete draft' : 'Save program'}
              </BrandButton>
            ))}
          </div>
        ))}
      </section>
      <section id="icons">
        <h2>Icons and navigation</h2>
        <div className={styles.demoRow}>
          <BrandButton>
            <Plus aria-hidden="true" />
            Create program
          </BrandButton>
          <BrandButton variant="secondary">
            Export
            <Download aria-hidden="true" />
          </BrandButton>
          <BrandButton variant="secondary" aria-label="Open program settings">
            <Settings aria-hidden="true" />
          </BrandButton>
          <a href="#resources">
            Get assets <ArrowUpRight size={14} />
          </a>
        </div>
        <p>
          Use a button for an action and a link for navigation. Icon-only buttons name the action
          and target. Keep leading and trailing icons on the same square geometry.
        </p>
      </section>
      <section id="states">
        <h2>Loading, disabled, and focus</h2>
        <div className={styles.demoRow}>
          <BrandButton className={styles.saveButton} busy={busy} onClick={save}>
            {busy ? 'Saving…' : 'Try saving'}
          </BrandButton>
          <BrandButton disabled>Save unavailable</BrandButton>
          <span role="status">{message}</span>
        </div>
        <p>
          Loading preserves the button’s focus and blocks duplicate activation. Explain why an
          action is unavailable. Use Tab to inspect the focus ring and Space or Enter to activate.
        </p>
      </section>
      <CodeBlock
        label="Button usage"
        code={`import { BrandButton } from '@/app/brand/workspace/primitives';\n\n<BrandButton variant="secondary" busy={saving} onClick={save}>\n  {saving ? 'Saving…' : 'Save program'}\n</BrandButton>`}
      />
    </div>
  );
}
function SearchExamples() {
  const [query, setQuery] = useState('');
  const members = ['Avery Morgan', 'Jamie Chen', 'Robin Hale'];
  const found = members.filter((n) => n.toLowerCase().includes(query.trim().toLowerCase()));
  return (
    <section className={styles.block} id="search">
      <h2>Search and clear</h2>
      <SearchField
        label="Search members"
        value={query}
        onChange={setQuery}
        placeholder="Try Avery…"
      />
      <p role="status">
        {found.length
          ? `${found.length} members match`
          : 'No members match. Clear the search or try another name.'}
      </p>
      <ul>
        {found.map((name) => (
          <li key={name}>{name}</li>
        ))}
      </ul>
      <p>
        Search keeps its visible label. Clear returns focus to the input; Escape clears the current
        query. Announce result changes without moving focus.
      </p>
      <CodeBlock
        label="Search input usage"
        code={`<SearchField label="Search members" value={query} onChange={setQuery} />`}
      />
    </section>
  );
}
function CopyExamples() {
  return (
    <div className={styles.block}>
      <h2>Text with copy</h2>
      <div className={styles.demoRow}>
        <code>MEMBER_00284</code>
        <CopyButton value="MEMBER_00284" label="Copy member identifier" />
      </div>
      <p>
        Copy reports success through a live region. If clipboard access is unavailable, a selected
        read-only field provides the same value for manual copying.
      </p>
      <CodeBlock
        label="Copy button usage"
        code={`<CopyButton value="MEMBER_00284" label="Copy member identifier" />`}
      />
    </div>
  );
}
function StatusExamples() {
  return (
    <div className={styles.block}>
      <h2>Status and size</h2>
      <div className={styles.demoRow}>
        <StatusDot tone="neutral">Not started</StatusDot>
        <StatusDot tone="info">Processing</StatusDot>
        <StatusDot tone="success">Complete</StatusDot>
        <StatusDot tone="warning">Needs review</StatusDot>
        <StatusDot tone="error">Failed</StatusDot>
      </div>
      <div className={styles.demoRow}>
        {([6, 8, 10] as const).map((size) => (
          <StatusDot key={size} size={size} tone="success">
            {size} px
          </StatusDot>
        ))}
      </div>
      <p>
        The dot is decorative; the adjacent label carries the state. Use 8 px by default, 6 px in
        dense rows, and 10 px alongside larger text. These operational states do not change the
        fixed rarity palette.
      </p>
      <CodeBlock
        label="Status dot usage"
        code={`<StatusDot tone="success" size={8}>Complete</StatusDot>`}
      />
    </div>
  );
}
function FeedbackExamples() {
  const [resolved, setResolved] = useState(false);
  return (
    <div className={styles.block}>
      <h2>Notes, banners, and recovery</h2>
      <p>
        A note explains local context. A banner describes a condition affecting the whole view. A
        failure belongs beside the affected task and offers recovery.
      </p>
      <div style={{ display: 'grid', gap: 16 }}>
        <Feedback title="Draft program" tone="info">
          <p>Members will see this program after it is published.</p>
        </Feedback>
        <Feedback title="Review required" tone="warning">
          <p>Check the reward amount before continuing.</p>
        </Feedback>
        <Feedback
          title={resolved ? 'Connection restored' : 'Could not load the preview'}
          tone={resolved ? 'success' : 'error'}
        >
          <p>
            {resolved
              ? 'The example recovered successfully.'
              : 'The example connection is unavailable. Your draft is safe.'}
          </p>
          <BrandButton variant="secondary" onClick={() => setResolved(!resolved)}>
            {resolved ? 'Reset example' : 'Retry preview'}
          </BrandButton>
          <span role="status">{resolved ? ' Recovered.' : ''}</span>
        </Feedback>
      </div>
      <CodeBlock
        label="Feedback usage"
        code={`<Feedback tone="error" title="Could not save the draft">\n  <p>Your changes are still available. Try again.</p>\n  <BrandButton onClick={retry}>Try again</BrandButton>\n</Feedback>`}
      />
    </div>
  );
}
function ThemeExample() {
  const { theme } = useBrandTheme();
  return (
    <div className={styles.block}>
      <h2>One control, everywhere</h2>
      <p>
        Use the System, Light, and Dark control in the header to try the real shared component.
        Current preference: <strong>{theme}</strong>.
      </p>
      <p>
        System follows your device. A manual choice persists when you browse topics or reload. Theme
        changes supporting surfaces and text while preserving specified identity and rarity
        swatches.
      </p>
      <CodeBlock
        label="Theme control usage"
        code={`import BrandFrame from '@/app/brand/foundations/BrandFrame';\nimport ThemeControl from '@/app/brand/foundations/ThemeControl';\n\n<BrandFrame>\n  <ThemeControl />\n  {/* The themed interface */}\n</BrandFrame>`}
      />
      <a href="/brand/source/theme-control" download>
        Download the shared theme control ↓
      </a>
    </div>
  );
}
function CodeExamples() {
  return (
    <div className={styles.block}>
      <h2>Inline, block, and overflow</h2>
      <p>
        Use inline <code>memberId</code> for a short identifier. Use a labeled code block for a
        complete example. Preserve exact whitespace and allow local horizontal scrolling for long
        lines.
      </p>
      <CodeBlock
        label="Member value example"
        code={`const member = {\n  name: 'Avery Morgan',\n  tier: 'Epic',\n  availableValue: 284.20,\n};\n\n// Long lines scroll inside the example, preserving the page width.\nconst formattedValue = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(member.availableValue);`}
      />
      <p>
        Examples render as escaped text, never executable markup. The preview uses plain code so
        copying preserves exactly what is shown.
      </p>
      <CodeBlock label="Code block usage" code={`<CodeBlock label="Example" code={source} />`} />
    </div>
  );
}
export default function ComponentEnhancements({ slug }: { slug: string }) {
  if (slug === 'button') return <ButtonExamples />;
  if (slug === 'input') return <SearchExamples />;
  if (slug === 'copy') return <CopyExamples />;
  if (slug === 'status-dot') return <StatusExamples />;
  if (slug === 'feedback') return <FeedbackExamples />;
  if (slug === 'theme-switcher') return <ThemeExample />;
  if (slug === 'code') return <CodeExamples />;
  return null;
}