/**
 * Vacation responder — toggle + date range + auto-reply text.
 */

import React, { useState, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { Button } from '@/components/ui/Button';
import { Input } from '@/components/ui/Input';
import { Card } from '@/components/ui/Card';
import { useToast } from '@/components/ui/Toast';
import { configureVacation, type VacationPayload } from '@/api/mail';

export function VacationResponder({ accountId }: { accountId: string }) {
  const { t } = useTranslation();
  const toast = useToast();
  const [enabled, setEnabled] = useState(false);
  const [startDate, setStartDate] = useState('');
  const [endDate, setEndDate] = useState('');
  const [subject, setSubject] = useState('');
  const [body, setBody] = useState('');
  const [saving, setSaving] = useState(false);

  const handleSave = useCallback(async () => {
    setSaving(true);
    try {
      const payload: VacationPayload = {
        enabled,
        start_date: startDate || null,
        end_date: endDate || null,
        subject,
        body,
      };
      await configureVacation(payload);
      toast.success(t('mail.vacationSaved'));
    } catch (err) {
      toast.error(err instanceof Error ? err.message : String(err));
    } finally {
      setSaving(false);
    }
  }, [enabled, startDate, endDate, subject, body, toast, t]);

  return (
    <div data-testid="vacation-responder">
      <Card title={t('mail.vacationResponder')}>
        <div className="space-y-4">
          <label className="flex items-center gap-3 cursor-pointer">
            <input
              type="checkbox"
              checked={enabled}
              onChange={(e) => setEnabled(e.target.checked)}
              className="w-5 h-5 rounded border-secondary-300 text-primary-600 focus:ring-primary-500"
              data-testid="vacation-toggle"
            />
            <span className="text-sm font-medium text-secondary-700">{t('mail.enableVacation')}</span>
          </label>

          {enabled && (
            <div className="space-y-3" data-testid="vacation-settings">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                <Input
                  label={t('mail.vacationStart')}
                  type="date"
                  value={startDate}
                  onChange={(e) => setStartDate(e.target.value)}
                />
                <Input
                  label={t('mail.vacationEnd')}
                  type="date"
                  value={endDate}
                  onChange={(e) => setEndDate(e.target.value)}
                />
              </div>
              <Input
                label={t('mail.vacationSubject')}
                value={subject}
                onChange={(e) => setSubject(e.target.value)}
                placeholder={t('mail.vacationSubjectPlaceholder')}
              />
              <div>
                <label className="block text-sm font-medium text-secondary-700 mb-1">{t('mail.vacationBody')}</label>
                <textarea
                  value={body}
                  onChange={(e) => setBody(e.target.value)}
                  className="w-full min-h-32 border border-secondary-300 rounded-md p-3 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500"
                  placeholder={t('mail.vacationBodyPlaceholder')}
                  data-testid="vacation-body"
                />
              </div>
            </div>
          )}

          <Button onClick={handleSave} isLoading={saving} size="sm" data-testid="vacation-save">
            {t('common.save')}
          </Button>
        </div>
      </Card>
    </div>
  );
}