import { useEffect, useState } from 'react';
import {
  Button,
  Input,
  NotificationsViewport,
  Select,
  useNotifications,
  type NotificationHideMethod,
  type NotificationPosition,
  type NotificationShowMethod,
  type NotificationVariant,
} from '../../lib';
import { DemoPageWithGuide } from '../DemoPageWithGuide';

const NOTIFICATIONS_GUIDE = {
  summary:
    'NotificationsProvider has no required props. notify() only requires message; other NotifyInput fields are optional. Defaults for options come from the provider (position, timing, progress UI, etc.).',
  propsOverview:
    'Provider: optional children only. useNotifications(): options, setOptions, notifications, notify, clearAll, clearById. notify({ message, id?, title?, variant?, durationMs? }). setOptions / defaults: position, newestOnTop, preventDuplicates, closeButton, progressBar, showDurationMs, hideDurationMs, showMethod, hideMethod, pauseOnHover.',
  features: ['Render NotificationsViewport once inside the provider tree so toasts appear'],
  codeLabel: 'Full example (message required on notify)',
  code: `import { NotificationsProvider, NotificationsViewport, useNotifications } from 'ccl-ui-components-react';

<NotificationsProvider>
  <NotificationsViewport />
  <App />
</NotificationsProvider>

const { notify, setOptions, clearAll, clearById } = useNotifications();

setOptions({
  position: 'toast-top-right',
  newestOnTop: true,
  preventDuplicates: false,
  closeButton: true,
  progressBar: true,
  showDurationMs: 300,
  hideDurationMs: 1000,
  showMethod: 'fade',
  hideMethod: 'fade',
  pauseOnHover: true,
});

notify({
  id: undefined,
  title: 'Done',
  message: 'Saved successfully.',
  variant: 'success',
  durationMs: 5000,
});

clearAll();
clearById('some-id');`,
} as const;

export default function NotificationsPage() {
  return (
    <DemoPageWithGuide guide={NOTIFICATIONS_GUIDE}>
    <main className="demo demo-page">
      <h1>Notifications</h1>
      <p className="demo-lead">Stacked notifications with positions, timing, and animations.</p>
      <NotificationsViewport />
      <NotificationsControls />
    </main>
    </DemoPageWithGuide>
  );
}

function NotificationsControls() {
  const { notify, clearAll, options, setOptions } = useNotifications();
  const [title, setTitle] = useState('');
  const [message, setMessage] = useState('Have fun storming the castle!');
  const [toastType, setToastType] = useState<NotificationVariant>('success');
  const [position, setPosition] = useState<typeof options.position>('toast-top-right');
  const [showDurationMs, setShowDurationMs] = useState(options.showDurationMs);
  const [hideDurationMs, setHideDurationMs] = useState(options.hideDurationMs);
  const [timeOut, setTimeOut] = useState(5000);
  const [closeButton, setCloseButton] = useState(options.closeButton);
  const [progressBar, setProgressBar] = useState(options.progressBar);
  const [preventDuplicates, setPreventDuplicates] = useState(options.preventDuplicates);
  const [newestOnTop, setNewestOnTop] = useState(options.newestOnTop);
  const [showMethod, setShowMethod] = useState<typeof options.showMethod>('fade');
  const [hideMethod, setHideMethod] = useState<typeof options.hideMethod>('fade');

  useEffect(() => {
    setOptions({
      position,
      closeButton,
      progressBar,
      preventDuplicates,
      newestOnTop,
      showDurationMs,
      hideDurationMs,
      showMethod,
      hideMethod,
    });
  }, [
    closeButton,
    hideDurationMs,
    hideMethod,
    newestOnTop,
    position,
    preventDuplicates,
    progressBar,
    setOptions,
    showDurationMs,
    showMethod,
  ]);

  return (
    <section className="demo-section">
      <h2>Controls</h2>

      <div className="demo-ff-stack" style={{ maxWidth: 720, margin: '0 auto' }}>
        <Input label="Title" value={title} onValueChange={setTitle} placeholder="Enter a title..." />
        <Input
          label="Message"
          value={message}
          onValueChange={setMessage}
          placeholder="Enter a message..."
        />

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
          <label style={{ display: 'grid', gap: 6 }}>
            <span style={{ fontSize: 14, fontWeight: 600 }}>Toast type</span>
            <Select
              options={[
                { value: 'success', label: 'Success' },
                { value: 'info', label: 'Info' },
                { value: 'warning', label: 'Warning' },
                { value: 'error', label: 'Error' },
              ]}
              value={toastType}
              onSelectionChange={(value) => setToastType(value as NotificationVariant)}
            />
          </label>

          <label style={{ display: 'grid', gap: 6 }}>
            <span style={{ fontSize: 14, fontWeight: 600 }}>Position</span>
            <Select
              options={[
                { value: 'toast-top-right', label: 'Top Right' },
                { value: 'toast-bottom-right', label: 'Bottom Right' },
                { value: 'toast-bottom-left', label: 'Bottom Left' },
                { value: 'toast-top-left', label: 'Top Left' },
                { value: 'toast-top-full-width', label: 'Top Full Width' },
                { value: 'toast-bottom-full-width', label: 'Bottom Full Width' },
                { value: 'toast-top-center', label: 'Top Center' },
                { value: 'toast-bottom-center', label: 'Bottom Center' },
              ]}
              value={position}
              onSelectionChange={(value) => setPosition(value as NotificationPosition)}
            />
          </label>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
          <label style={{ display: 'grid', gap: 6 }}>
            <span style={{ fontSize: 14, fontWeight: 600 }}>Show method</span>
            <Select
              options={[
                { value: 'fade', label: 'fade' },
                { value: 'slideDown', label: 'slideDown' },
              ]}
              value={showMethod}
              onSelectionChange={(value) => setShowMethod(value as NotificationShowMethod)}
            />
          </label>

          <label style={{ display: 'grid', gap: 6 }}>
            <span style={{ fontSize: 14, fontWeight: 600 }}>Hide method</span>
            <Select
              options={[
                { value: 'fade', label: 'fade' },
                { value: 'slideUp', label: 'slideUp' },
              ]}
              value={hideMethod}
              onSelectionChange={(value) => setHideMethod(value as NotificationHideMethod)}
            />
          </label>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 12 }}>
          <Input
            label="Show duration (ms)"
            type="number"
            value={String(showDurationMs)}
            onValueChange={(v) => setShowDurationMs(Number(v))}
          />
          <Input
            label="Hide duration (ms)"
            type="number"
            value={String(hideDurationMs)}
            onValueChange={(v) => setHideDurationMs(Number(v))}
          />
          <Input
            label="Time out (ms)"
            type="number"
            value={String(timeOut)}
            onValueChange={(v) => setTimeOut(Number(v))}
          />
        </div>

        <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
          <label style={{ display: 'inline-flex', gap: 8, alignItems: 'center' }}>
            <input type="checkbox" checked={closeButton} onChange={(e) => setCloseButton(e.target.checked)} />
            Close Button
          </label>
          <label style={{ display: 'inline-flex', gap: 8, alignItems: 'center' }}>
            <input type="checkbox" checked={progressBar} onChange={(e) => setProgressBar(e.target.checked)} />
            Progress Bar
          </label>
          <label style={{ display: 'inline-flex', gap: 8, alignItems: 'center' }}>
            <input type="checkbox" checked={preventDuplicates} onChange={(e) => setPreventDuplicates(e.target.checked)} />
            Prevent Duplicates
          </label>
          <label style={{ display: 'inline-flex', gap: 8, alignItems: 'center' }}>
            <input type="checkbox" checked={newestOnTop} onChange={(e) => setNewestOnTop(e.target.checked)} />
            Newest on top
          </label>
        </div>

        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
          <Button
            variant="primary"
            onClick={() => {
              notify({ title, message, variant: toastType, durationMs: timeOut });
            }}
          >
            Show Toast
          </Button>
          <Button
            variant="danger"
            onClick={() => {
              clearAll();
            }}
          >
            Clear Toasts
          </Button>
        </div>
      </div>
    </section>
  );
}