'use client';

/**
 * CustomInput
 *
 * Raw cron expression input with validation and help popover.
 */

import { useState, useEffect } from 'react';
import { Input } from '@djangocfg/ui-core/components';
import { cn } from '@djangocfg/ui-core/lib';
import { AlertCircle, CheckCircle2 } from 'lucide-react';
import { useCronCustom } from '../context/hooks';
import { isValidCron } from '../utils/cron-parser';

export interface CustomInputProps {
  disabled?: boolean;
  className?: string;
}

export function CustomInput({ disabled, className }: CustomInputProps) {
  const { customCron, isValid, setCustomCron } = useCronCustom();
  const [localValue, setLocalValue] = useState(customCron);
  const [localValid, setLocalValid] = useState(isValid);

  useEffect(() => {
    setLocalValue(customCron);
    setLocalValid(isValid);
  }, [customCron, isValid]);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;
    setLocalValue(value);
    const valid = isValidCron(value);
    setLocalValid(valid);
    setCustomCron(value);
  };

  const showError = !localValid && localValue.trim().length > 0;

  return (
    <div className={cn('space-y-2', className)}>
      <label htmlFor="cron-custom-input" className="text-sm text-muted-foreground">
        Cron expression
      </label>

      <div className="relative">
        <Input
          id="cron-custom-input"
          type="text"
          value={localValue}
          onChange={handleChange}
          disabled={disabled}
          placeholder="* * * * *"
          autoComplete="off"
          autoCapitalize="off"
          autoCorrect="off"
          spellCheck={false}
          aria-invalid={showError}
          aria-describedby={showError ? 'cron-custom-error' : undefined}
          className={cn(
            'font-mono text-base pr-10 h-11',
            showError && 'border-destructive focus-visible:ring-destructive/50'
          )}
        />
        <div className="absolute right-3 top-1/2 -translate-y-1/2">
          {localValue.trim() && (
            localValid ? (
              <CheckCircle2 aria-hidden="true" className="h-5 w-5 text-success" />
            ) : (
              <AlertCircle aria-hidden="true" className="h-5 w-5 text-destructive" />
            )
          )}
        </div>
      </div>

      {showError && (
        <p id="cron-custom-error" role="alert" className="text-xs text-destructive">
          Invalid cron expression — expected 5 fields: minute hour day month weekday.
        </p>
      )}
    </div>
  );
}
