import { useState } from 'react';
import { defineStory, useBoolean, useSelect } from '@djangocfg/playground';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@djangocfg/ui-core/components';
import { CronScheduler } from './index';

export default defineStory({
  title: 'Tools/Cron Scheduler',
  component: CronScheduler,
  description: 'Compact cron expression builder with Apple HIG-style UI.',
});

export const Interactive = () => {
  const [cron, setCron] = useState('0 9 * * 1-5');

  const [defaultType] = useSelect('defaultType', {
    options: ['daily', 'weekly', 'monthly', 'custom'] as const,
    defaultValue: 'weekly',
    label: 'Default Type',
    description: 'Initial schedule type',
  });

  const [showPreview] = useBoolean('showPreview', {
    defaultValue: true,
    label: 'Show Preview',
    description: 'Show human-readable preview',
  });

  const [showCronExpression] = useBoolean('showCronExpression', {
    defaultValue: true,
    label: 'Show Cron Expression',
    description: 'Show raw cron expression in preview',
  });

  const [allowCopy] = useBoolean('allowCopy', {
    defaultValue: true,
    label: 'Allow Copy',
    description: 'Enable copy to clipboard',
  });

  const [timeFormat] = useSelect('timeFormat', {
    options: ['24h', '12h'] as const,
    defaultValue: '24h',
    label: 'Time Format',
    description: 'Time display format',
  });

  const [disabled] = useBoolean('disabled', {
    defaultValue: false,
    label: 'Disabled',
    description: 'Disable all interactions',
  });

  return (
    <div className="w-[400px]">
      <CronScheduler
        value={cron}
        onChange={setCron}
        defaultType={defaultType}
        showPreview={showPreview}
        showCronExpression={showCronExpression}
        allowCopy={allowCopy}
        timeFormat={timeFormat}
        disabled={disabled}
      />
    </div>
  );
};

export const Daily = () => {
  const [cron, setCron] = useState('0 9 * * *');

  return (
    <div className="w-[400px]">
      <CronScheduler
        value={cron}
        onChange={setCron}
        defaultType="daily"
        showPreview
      />
    </div>
  );
};

export const Weekly = () => {
  const [cron, setCron] = useState('30 14 * * 1,3,5');

  return (
    <div className="w-[400px]">
      <CronScheduler
        value={cron}
        onChange={setCron}
        defaultType="weekly"
        showPreview
      />
    </div>
  );
};

export const Monthly = () => {
  const [cron, setCron] = useState('0 9 1,15 * *');

  return (
    <div className="w-[400px]">
      <CronScheduler
        value={cron}
        onChange={setCron}
        defaultType="monthly"
        showPreview
      />
    </div>
  );
};

export const Custom = () => {
  const [cron, setCron] = useState('*/15 9-17 * * 1-5');

  return (
    <div className="w-[400px]">
      <CronScheduler
        value={cron}
        onChange={setCron}
        defaultType="custom"
        showPreview
        showCronExpression
      />
    </div>
  );
};

export const WithCronExpression = () => {
  const [cron, setCron] = useState('0 9 * * 1-5');

  return (
    <div className="w-[400px]">
      <CronScheduler
        value={cron}
        onChange={setCron}
        showPreview
        showCronExpression
        allowCopy
      />
    </div>
  );
};

export const TwelveHourFormat = () => {
  const [cron, setCron] = useState('0 14 * * *');

  return (
    <div className="w-[400px]">
      <CronScheduler
        value={cron}
        onChange={setCron}
        showPreview
        timeFormat="12h"
      />
    </div>
  );
};

export const Disabled = () => (
  <div className="w-[400px]">
    <CronScheduler
      value="0 9 * * 1-5"
      showPreview
      disabled
    />
  </div>
);

export const Compact = () => {
  const [cron, setCron] = useState('0 9 * * 1-5');

  return (
    <div className="w-[400px]">
      <CronScheduler
        value={cron}
        onChange={setCron}
        defaultType="weekly"
        showPreview={false}
      />
    </div>
  );
};

export const Controlled = () => {
  const [cron, setCron] = useState('0 9 * * *');

  const presets = [
    { label: 'Every day at 9am', value: '0 9 * * *' },
    { label: 'Weekdays at 6pm', value: '0 18 * * 1-5' },
    { label: 'Every Monday', value: '0 0 * * 1' },
    { label: '1st of month', value: '0 0 1 * *' },
  ];

  return (
    <div className="w-[400px] space-y-4">
      <div className="flex flex-wrap gap-2">
        {presets.map(({ label, value }) => (
          <button
            key={value}
            onClick={() => setCron(value)}
            className={`px-2 py-1 text-xs rounded-md transition-colors ${
              cron === value
                ? 'bg-primary text-primary-foreground'
                : 'bg-muted hover:bg-muted/80'
            }`}
          >
            {label}
          </button>
        ))}
      </div>
      <CronScheduler
        value={cron}
        onChange={setCron}
        showPreview
        allowCopy
      />
    </div>
  );
};

export const InDialog = () => {
  const [cron, setCron] = useState('0 9 * * 1-5');
  const [open, setOpen] = useState(false);

  return (
    <div className="p-4">
      <Dialog open={open} onOpenChange={setOpen}>
        <DialogTrigger asChild>
          <button className="px-4 py-2 bg-primary text-primary-foreground rounded-md">
            Open Schedule Dialog
          </button>
        </DialogTrigger>
        <DialogContent className="max-w-2xl">
          <DialogHeader>
            <DialogTitle>Create Schedule</DialogTitle>
            <DialogDescription>
              Configure a cron schedule for automated execution
            </DialogDescription>
          </DialogHeader>
          <div className="py-4">
            <CronScheduler
              value={cron}
              onChange={setCron}
              showPreview
              showCronExpression
              allowCopy
            />
          </div>
        </DialogContent>
      </Dialog>
      <div className="mt-4 text-sm text-muted-foreground">
        Current cron: <code className="bg-muted px-1 rounded">{cron}</code>
      </div>
    </div>
  );
};

export const InDialogMonthly = () => {
  const [cron, setCron] = useState('0 9 1,15 * *');
  const [open, setOpen] = useState(false);

  return (
    <div className="p-4">
      <Dialog open={open} onOpenChange={setOpen}>
        <DialogTrigger asChild>
          <button className="px-4 py-2 bg-primary text-primary-foreground rounded-md">
            Open Monthly Schedule
          </button>
        </DialogTrigger>
        <DialogContent className="max-w-2xl">
          <DialogHeader>
            <DialogTitle>Monthly Schedule</DialogTitle>
            <DialogDescription>
              Test monthly calendar grid inside dialog
            </DialogDescription>
          </DialogHeader>
          <div className="py-4">
            <CronScheduler
              value={cron}
              onChange={setCron}
              defaultType="monthly"
              showPreview
              showCronExpression
              allowCopy
            />
          </div>
        </DialogContent>
      </Dialog>
    </div>
  );
};
