import { useId, useState } from 'react';
import { Button, ErrorMessage, Input } from '../../lib';
import { DemoPageWithGuide } from '../DemoPageWithGuide';

const ERROR_MESSAGE_GUIDE = {
  summary:
    'ErrorMessage renders accessible validation copy (default role alert). It renders nothing when children are empty, null, or whitespace-only strings.',
  propsOverview:
    'Optional: id (pair with aria-describedby on a control), role (alert | status | none), className, and native paragraph attributes. children: message text or nodes.',
  features: [
    'Use under custom fields or layouts that do not bundle error text like Input does',
    'Match ids with input aria-describedby for screen reader association',
  ],
  codeLabel: 'Minimal usage',
  code: `import { ErrorMessage, Input } from 'ccl-ui-components-react';

const errId = 'email-error';

<Input id="email" aria-describedby={error ? errId : undefined} aria-invalid={error} />
<ErrorMessage id={errId}>{error ? 'Invalid email.' : ''}</ErrorMessage>`,
} as const;

export default function ErrorMessagePage() {
  const uid = useId().replace(/:/g, '');
  const errId = `${uid}-email-err`;
  const inputId = `${uid}-email`;
  const [showError, setShowError] = useState(true);
  const [value, setValue] = useState('bad@');

  const invalid = showError && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value.trim());

  return (
    <DemoPageWithGuide guide={ERROR_MESSAGE_GUIDE}>
      <main className="demo demo-page demo-form-fields">
        <h1>Error message</h1>
        <p className="demo-lead">Standalone field error line, aligned with form field typography.</p>

        <section className="demo-section">
          <h2>Static</h2>
          <ErrorMessage>This value is already taken.</ErrorMessage>
        </section>

        <section className="demo-section">
          <h2>With Input (manual wiring)</h2>
          <div className="demo-ff-stack" style={{ maxWidth: 420 }}>
            <Input
              id={inputId}
              label="Email"
              type="email"
              value={value}
              onValueChange={setValue}
              error={invalid}
              errorMessage=""
              aria-describedby={invalid ? errId : undefined}
              helperText="Invalid email shows the ErrorMessage below (not inside Input)."
            />
            <ErrorMessage id={errId} role="alert">
              {invalid ? 'Enter a valid email address.' : ''}
            </ErrorMessage>
          </div>
        </section>

        <section className="demo-section">
          <h2>role status (less assertive)</h2>
          <ErrorMessage role="status">Suggestion: try a shorter username.</ErrorMessage>
        </section>

        <section className="demo-section">
          <h2>Toggle visibility</h2>
          <div className="demo-row" style={{ gap: '0.5rem', flexWrap: 'wrap', alignItems: 'center' }}>
            <Button type="button" variant="secondary" size="sm" onClick={() => setShowError((s) => !s)}>
              {showError ? 'Hide' : 'Show'} error
            </Button>
          </div>
          <div style={{ marginTop: '0.75rem' }}>
            <ErrorMessage>{showError ? 'Password must be at least 8 characters.' : ''}</ErrorMessage>
          </div>
        </section>
      </main>
    </DemoPageWithGuide>
  );
}