import { useState } from 'react';

import { useForm } from '@inertiajs/react';

import { Button } from '@/Components/ui/button';
import { Input } from '@/Components/ui/input';
import { LoadingButton } from '@/Components/ui/loading-button';

interface TimeWindowPickerProps {
  siteId: number;
  dataRange: { earliest: string | null; latest: string | null };
  currentRun: {
    before_start: string | null;
    before_end: string | null;
    after_start: string | null;
    after_end: string | null;
  } | null;
}

function addDays(dateStr: string, days: number): string {
  const date = new Date(dateStr);
  date.setDate(date.getDate() + days);
  return date.toISOString().split('T')[0];
}

export default function TimeWindowPicker({ siteId, dataRange, currentRun }: TimeWindowPickerProps) {
  const [mode, setMode] = useState<'preset' | 'custom'>('preset');

  const { data, setData, post, processing, errors } = useForm({
    before_start: currentRun?.before_start ?? '',
    before_end: currentRun?.before_end ?? '',
    after_start: currentRun?.after_start ?? '',
    after_end: currentRun?.after_end ?? '',
  });

  const applyPreset = (days: number) => {
    if (!dataRange.latest) return;
    const afterEnd = dataRange.latest;
    const afterStart = addDays(afterEnd, -(days - 1));
    const beforeEnd = addDays(afterStart, -1);
    const beforeStart = addDays(beforeEnd, -(days - 1));

    setData({
      before_start: beforeStart,
      before_end: beforeEnd,
      after_start: afterStart,
      after_end: afterEnd,
    });
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    post(route('analysis.store', siteId));
  };

  if (!dataRange.earliest || !dataRange.latest) {
    return (
      <div className="rounded-lg border bg-muted/50 p-4 mb-6">
        <p className="text-sm text-muted-foreground">
          No GSC data available yet. Data will appear after the first sync completes.
        </p>
      </div>
    );
  }

  return (
    <div className="rounded-lg border p-4 mb-6">
      <h3 className="text-sm font-medium mb-3">Time Window</h3>

      <div className="flex gap-2 mb-4">
        <Button
          variant="outline"
          size="sm"
          onClick={() => {
            applyPreset(30);
            setMode('preset');
          }}
        >
          Last 30d vs Prior 30d
        </Button>
        <Button
          variant="outline"
          size="sm"
          onClick={() => {
            applyPreset(90);
            setMode('preset');
          }}
        >
          Last 90d vs Prior 90d
        </Button>
        <Button
          variant={mode === 'custom' ? 'default' : 'outline'}
          size="sm"
          onClick={() => setMode('custom')}
        >
          Custom
        </Button>
      </div>

      <form onSubmit={handleSubmit}>
        {mode === 'custom' && (
          <div className="grid grid-cols-2 md:grid-cols-4 gap-3 mb-4">
            <div>
              <label htmlFor="before-start" className="text-xs text-muted-foreground">
                Before Start
              </label>
              <Input
                id="before-start"
                type="date"
                value={data.before_start}
                onChange={(e) => setData('before_start', e.target.value)}
                aria-describedby={errors.before_start ? 'before-start-error' : undefined}
              />
              {errors.before_start && (
                <p id="before-start-error" className="text-xs text-destructive mt-1">
                  {errors.before_start}
                </p>
              )}
            </div>
            <div>
              <label htmlFor="before-end" className="text-xs text-muted-foreground">
                Before End
              </label>
              <Input
                id="before-end"
                type="date"
                value={data.before_end}
                onChange={(e) => setData('before_end', e.target.value)}
                aria-describedby={errors.before_end ? 'before-end-error' : undefined}
              />
              {errors.before_end && (
                <p id="before-end-error" className="text-xs text-destructive mt-1">
                  {errors.before_end}
                </p>
              )}
            </div>
            <div>
              <label htmlFor="after-start" className="text-xs text-muted-foreground">
                After Start
              </label>
              <Input
                id="after-start"
                type="date"
                value={data.after_start}
                onChange={(e) => setData('after_start', e.target.value)}
                aria-describedby={errors.after_start ? 'after-start-error' : undefined}
              />
              {errors.after_start && (
                <p id="after-start-error" className="text-xs text-destructive mt-1">
                  {errors.after_start}
                </p>
              )}
            </div>
            <div>
              <label htmlFor="after-end" className="text-xs text-muted-foreground">
                After End
              </label>
              <Input
                id="after-end"
                type="date"
                value={data.after_end}
                onChange={(e) => setData('after_end', e.target.value)}
                aria-describedby={errors.after_end ? 'after-end-error' : undefined}
              />
              {errors.after_end && (
                <p id="after-end-error" className="text-xs text-destructive mt-1">
                  {errors.after_end}
                </p>
              )}
            </div>
          </div>
        )}

        {data.before_start && data.after_end && (
          <div className="flex items-center gap-3">
            <p className="text-sm text-muted-foreground">
              {data.before_start} — {data.before_end} vs {data.after_start} — {data.after_end}
            </p>
            <LoadingButton loading={processing} size="sm" loadingText="Queuing analysis...">
              Run Analysis
            </LoadingButton>
          </div>
        )}
      </form>
    </div>
  );
}