'use client';

/**
 * CronScheduler Client Component
 *
 * Compact cron expression builder following Apple HIG principles.
 * Uses context-based architecture for state management.
 */

import { cn } from '@djangocfg/ui-core/lib';
import { CronSchedulerProvider } from './context/CronSchedulerContext';
import { useCronType } from './context/hooks';
import {
  ScheduleTypeSelector,
  TimeSelector,
  DayChips,
  MonthDayGrid,
  CustomInput,
  SchedulePreview,
} from './components';
import type { CronSchedulerProps } from './types';

// ============================================================================
// Inner Component (uses context)
// ============================================================================

interface CronSchedulerInnerProps {
  showPreview: boolean;
  showCronExpression: boolean;
  allowCopy: boolean;
  timeFormat: '12h' | '24h';
  disabled: boolean;
  className?: string;
}

function CronSchedulerInner({
  showPreview,
  showCronExpression,
  allowCopy,
  timeFormat,
  disabled,
  className,
}: CronSchedulerInnerProps) {
  const { type } = useCronType();

  return (
    <div className={cn('space-y-3', className)}>
      {/* Schedule Type Selector */}
      <ScheduleTypeSelector disabled={disabled} />

      {/* Time Selector (shown for daily, weekly, monthly) */}
      {type !== 'custom' && (
        <TimeSelector format={timeFormat} disabled={disabled} />
      )}

      {/* Day Chips (weekly only) */}
      {type === 'weekly' && (
        <DayChips disabled={disabled} showPresets />
      )}

      {/* Month Day Grid (monthly only) */}
      {type === 'monthly' && (
        <MonthDayGrid disabled={disabled} showPresets />
      )}

      {/* Custom Input (custom only) */}
      {type === 'custom' && (
        <CustomInput disabled={disabled} />
      )}

      {/* Preview - always show cron expression */}
      {showPreview && (
        <SchedulePreview
          showCronExpression
          allowCopy={allowCopy}
        />
      )}
    </div>
  );
}

// ============================================================================
// Main Component (with Provider)
// ============================================================================

/**
 * CronScheduler - Compact cron expression builder
 *
 * A user-friendly interface for creating cron schedules without
 * needing to know cron syntax. Follows Apple HIG design principles.
 *
 * @example
 * // Basic usage
 * <CronScheduler
 *   value={cronExpression}
 *   onChange={setCronExpression}
 * />
 *
 * @example
 * // With all options
 * <CronScheduler
 *   value="0 9 * * 1-5"
 *   onChange={handleChange}
 *   defaultType="weekly"
 *   showPreview
 *   showCronExpression
 *   allowCopy
 *   timeFormat="24h"
 * />
 */
export function CronScheduler({
  value,
  onChange,
  defaultType = 'daily',
  showPreview = true,
  showCronExpression = false,
  allowCopy = false,
  timeFormat = '24h',
  disabled = false,
  className,
}: CronSchedulerProps) {
  return (
    <CronSchedulerProvider
      value={value}
      onChange={onChange}
      defaultType={defaultType}
    >
      <CronSchedulerInner
        showPreview={showPreview}
        showCronExpression={showCronExpression}
        allowCopy={allowCopy}
        timeFormat={timeFormat}
        disabled={disabled}
        className={className}
      />
    </CronSchedulerProvider>
  );
}

export default CronScheduler;
