'use client';

import { useState } from 'react';
import styles from './PeriodSelector.module.css';

export type PeriodType = '7d' | '30d' | '90d' | 'ytd' | 'custom';

interface PeriodOption {
  value: PeriodType;
  label: string;
}

const PERIOD_OPTIONS: PeriodOption[] = [
  { value: '7d', label: '7 Days' },
  { value: '30d', label: '30 Days' },
  { value: '90d', label: '90 Days' },
  { value: 'ytd', label: 'Year to Date' },
];

interface PeriodSelectorProps {
  value: PeriodType;
  onChange: (period: PeriodType, customStart?: string, customEnd?: string) => void;
  allowCustomRange?: boolean;
}

/**
 * PeriodSelector - allows selecting time period for analytics
 *
 * Provides preset options (7d, 30d, 90d, YTD) and optional custom date range picker.
 */
export function PeriodSelector({ value, onChange, allowCustomRange = true }: PeriodSelectorProps) {
  const [showDatePicker, setShowDatePicker] = useState(false);
  const [customStart, setCustomStart] = useState('');
  const [customEnd, setCustomEnd] = useState('');

  const handlePresetClick = (period: PeriodType) => {
    setShowDatePicker(false);
    onChange(period);
  };

  const handleCustomClick = () => {
    setShowDatePicker(true);
  };

  const handleCustomApply = () => {
    if (customStart && customEnd) {
      onChange('custom', customStart, customEnd);
      setShowDatePicker(false);
    }
  };

  const handleCustomCancel = () => {
    setShowDatePicker(false);
    setCustomStart('');
    setCustomEnd('');
  };

  return (
    <div className={styles.container}>
      <div className={styles.presets}>
        {PERIOD_OPTIONS.map((option) => (
          <button
            key={option.value}
            className={`${styles.preset} ${value === option.value && !showDatePicker ? styles.active : ''}`}
            onClick={() => handlePresetClick(option.value)}
          >
            {option.label}
          </button>
        ))}
        {allowCustomRange && (
          <button
            className={`${styles.preset} ${value === 'custom' || showDatePicker ? styles.active : ''}`}
            onClick={handleCustomClick}
          >
            Custom
          </button>
        )}
      </div>

      {showDatePicker && (
        <div className={styles.datePicker}>
          <div className={styles.dateInputs}>
            <div className={styles.dateField}>
              <label className={styles.dateLabel}>Start Date</label>
              <input
                type="date"
                className={styles.dateInput}
                value={customStart}
                onChange={(e) => setCustomStart(e.target.value)}
                max={customEnd || undefined}
              />
            </div>
            <span className={styles.dateSeparator}>to</span>
            <div className={styles.dateField}>
              <label className={styles.dateLabel}>End Date</label>
              <input
                type="date"
                className={styles.dateInput}
                value={customEnd}
                onChange={(e) => setCustomEnd(e.target.value)}
                min={customStart || undefined}
                max={new Date().toISOString().split('T')[0]}
              />
            </div>
          </div>
          <div className={styles.dateActions}>
            <button className={styles.cancelButton} onClick={handleCustomCancel}>
              Cancel
            </button>
            <button
              className={styles.applyButton}
              onClick={handleCustomApply}
              disabled={!customStart || !customEnd}
            >
              Apply
            </button>
          </div>
        </div>
      )}
    </div>
  );
}

export default PeriodSelector;