import { Button, Tooltip } from '../../lib';
import { DemoPageWithGuide } from '../DemoPageWithGuide';

const TOOLTIP_GUIDE = {
  summary:
    'Tooltip wraps a single focusable child (or plain text) and shows `content` on hover and keyboard focus. Props: `content` (required when tooltip is shown), `children`, optional `placement` (top | bottom | left | right, default top), `disabled`, and standard span attributes on the outer wrapper.',
  propsOverview:
    'Required for visible tooltip: content. Optional: placement (default top), disabled (renders children only), className, id, style, data-*, etc. on the outer span. With a React element child, aria-describedby is merged; with text/mixed children, a focusable span wrapper is used (tabIndex 0) so keyboard users can open the tooltip.',
  features: ['Uses role="tooltip" and aria-describedby for screen readers', 'Hovering the tooltip panel keeps it open (panel is inside the hover target)'],
  codeLabel: 'Full example (props optional except content when enabled)',
  code: `import { Button, Tooltip } from 'ccl-ui-components-react';

<Tooltip content="Saves your draft" placement="top">
  <Button type="button" variant="secondary">
    Save
  </Button>
</Tooltip>

<Tooltip content="Keyboard: Tab to this text, then focus stays on the wrapper." disabled={false}>
  <span>Inline help</span>
</Tooltip>`,
} as const;

export default function TooltipPage() {
  return (
    <DemoPageWithGuide guide={TOOLTIP_GUIDE}>
      <main className="demo demo-page">
        <h1>Tooltip</h1>
        <p className="demo-lead">Short hints on hover and focus, without extra dependencies.</p>

        <section className="demo-section">
          <h2>On buttons</h2>
          <div className="demo-row" style={{ flexWrap: 'wrap', gap: '0.75rem', alignItems: 'center' }}>
            <Tooltip content="Submit the form for review.">
              <Button type="button" variant="primary">
                Submit
              </Button>
            </Tooltip>
            <Tooltip content="Discards unsaved edits." placement="bottom">
              <Button type="button" variant="secondary" outline>
                Cancel
              </Button>
            </Tooltip>
            <Tooltip content="Tooltip disabled — no overlay." disabled>
              <Button type="button" variant="secondary">
                No tooltip
              </Button>
            </Tooltip>
          </div>
        </section>

        <section className="demo-section">
          <h2>Placement</h2>
          <p className="demo-muted" style={{ marginBottom: '1rem' }}>
            Space the row so each side has room; tooltips are absolutely positioned next to the trigger.
          </p>
          <div
            className="demo-row"
            style={{
              flexWrap: 'wrap',
              gap: '2rem',
              alignItems: 'center',
              justifyContent: 'space-between',
              minHeight: 120,
              padding: '0 1rem',
            }}
          >
            <Tooltip content="Above the control" placement="top">
              <Button type="button" variant="secondary">
                Top
              </Button>
            </Tooltip>
            <Tooltip content="Below the control" placement="bottom">
              <Button type="button" variant="secondary">
                Bottom
              </Button>
            </Tooltip>
            <Tooltip content="To the left" placement="left">
              <Button type="button" variant="secondary">
                Left
              </Button>
            </Tooltip>
            <Tooltip content="To the right" placement="right">
              <Button type="button" variant="secondary">
                Right
              </Button>
            </Tooltip>
          </div>
        </section>

        <section className="demo-section">
          <h2>Inline text</h2>
          <p style={{ maxWidth: 480 }}>
            Processing fee{' '}
            <Tooltip content="We charge 2.9% + 30¢ per successful card charge.">
              <span
                tabIndex={0}
                style={{ textDecoration: 'underline', textDecorationStyle: 'dotted', cursor: 'help' }}
              >
                (fee info)
              </span>
            </Tooltip>{' '}
            appears on your statement.
          </p>
        </section>
      </main>
    </DemoPageWithGuide>
  );
}