import { useState, useEffect, useCallback } from 'react';
import { Button, Input, Select, Modal } from '../ui';
import { pickupOptions } from '../../constants/pickup';
import { formatDateForInput, parseDateFromInput, getTodayFrontend } from '../../utils/date';
import type { Delivery, PickupLocation, DeliveryStatus } from '../../types';

interface DeliveryFormProps {
  isOpen: boolean;
  onClose: () => void;
  onSubmit: (delivery: Omit<Delivery, 'id' | 'createdAt' | 'updatedAt'>) => void | Promise<void>;
  initialData?: Delivery | null;
  defaultDate?: string;
  isSubmitting?: boolean;
}

// Phone validation regex for Kazakhstan numbers
const PHONE_REGEX = /^\+7\s?\(?\d{3}\)?\s?\d{3}[\s-]?\d{2}[\s-]?\d{2}$/;

// City is not shown in UI but is included in the saved address (used for 2GIS search).
const CITY_LABEL = 'Кокшетау';

const buildAddressString = (
  street: string,
  house: string,
  apartment: string,
  entrance: string,
): string => {
  const parts: string[] = [CITY_LABEL];
  if (street) parts.push(`ул. ${street}`);
  if (house) parts.push(`д. ${house}`);
  if (apartment) parts.push(`кв. ${apartment}`);
  if (entrance) parts.push(`подъезд ${entrance}`);
  return parts.join(', ');
};

export const DeliveryForm = ({ isOpen, onClose, onSubmit, initialData, defaultDate, isSubmitting }: DeliveryFormProps) => {
  const [formData, setFormData] = useState({
    date: defaultDate || getTodayFrontend(),
    pickupLocation: 'warehouse' as PickupLocation,
    pickupLocation2: null as PickupLocation | null,
    productName: '',
    productName2: '',
    customerName: '',
    address: '',
    street: '',
    house: '',
    apartment: '',
    entrance: '',
    floor: '',
    phone: '',
    additionalPhone: '',
    hasElevator: false,
    serviceInfo: '',
    comment: '',
    status: 'new' as DeliveryStatus,
  });
  const [showSecondPickup, setShowSecondPickup] = useState(false);

  useEffect(() => {
    if (initialData) {
      setFormData({
        date: initialData.date,
        pickupLocation: initialData.pickupLocation,
        pickupLocation2: initialData.pickupLocation2 || null,
        productName: initialData.productName,
        productName2: initialData.productName2 || '',
        customerName: initialData.customerName,
        address: initialData.address,
        street: initialData.street,
        house: initialData.house,
        apartment: initialData.apartment || '',
        entrance: initialData.entrance || '',
        floor: initialData.floor || '',
        phone: initialData.phone,
        additionalPhone: initialData.additionalPhone || '',
        hasElevator: initialData.hasElevator,
        serviceInfo: initialData.serviceInfo || '',
        comment: initialData.comment,
        status: initialData.status,
      });
      setShowSecondPickup(!!initialData.pickupLocation2);
    } else if (defaultDate) {
      setFormData(prev => ({ ...prev, date: defaultDate }));
    }
  }, [initialData, defaultDate, isOpen]);

  const validatePhone = useCallback((phone: string): boolean => {
    if (!phone) return false;
    return PHONE_REGEX.test(phone);
  }, []);

  const isPhoneValid = !formData.phone || validatePhone(formData.phone);
  const isAdditionalPhoneValid = !formData.additionalPhone || validatePhone(formData.additionalPhone);
  const isFormValid = formData.productName && formData.phone && isPhoneValid && formData.customerName && formData.street && formData.house;

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!isFormValid) return;
    try {
      const payload = {
        ...formData,
        address: buildAddressString(formData.street, formData.house, formData.apartment, formData.entrance),
      };
      await onSubmit(payload);
      if (!initialData) {
        setFormData({
          date: defaultDate || getTodayFrontend(),
          pickupLocation: 'warehouse',
          pickupLocation2: null,
          productName: '',
          productName2: '',
          customerName: '',
          address: '',
          street: '',
          house: '',
          apartment: '',
          entrance: '',
          floor: '',
          phone: '',
          additionalPhone: '',
          hasElevator: false,
          serviceInfo: '',
          comment: '',
          status: 'new',
        });
        setShowSecondPickup(false);
      }
      onClose();
    } catch {
      // Error is handled by parent, keep form open
    }
  };


  return (
    <Modal
      isOpen={isOpen}
      onClose={onClose}
      title={initialData ? 'Редактировать доставку' : 'Новая доставка'}
      footer={
        <>
          <Button variant="ghost" onClick={onClose} disabled={isSubmitting}>
            Отмена
          </Button>
          <Button type="submit" form="delivery-form" disabled={isSubmitting || !isFormValid}>
            {isSubmitting ? 'Сохранение...' : initialData ? 'Сохранить' : 'Создать'}
          </Button>
        </>
      }
    >
      <form id="delivery-form" onSubmit={handleSubmit} className="space-y-4">
        <div>
          <label className="block text-sm font-medium text-[#1b1b1d] mb-1">
            Дата доставки
          </label>
          <input
            type="date"
            value={formatDateForInput(formData.date)}
            onChange={(e) => setFormData({ ...formData, date: parseDateFromInput(e.target.value) })}
            className="w-full px-3 py-2 bg-[#f5f3f5] border border-[#c5c6cd] rounded-md text-[#1b1b1d] focus:outline-none focus:ring-2 focus:ring-[#1B263B] focus:border-transparent transition-colors"
            required
          />
        </div>

        <Select
          label="Место загрузки"
          value={formData.pickupLocation}
          onChange={(e) => setFormData({ ...formData, pickupLocation: e.target.value as PickupLocation })}
          options={pickupOptions}
        />

        <Input
          label="Название товара"
          value={formData.productName}
          onChange={(e) => setFormData({ ...formData, productName: e.target.value })}
          placeholder="Введите название товара"
          required
        />

        {/* Address fields */}
        <div className="bg-[#f5f3f5] rounded-lg p-4 space-y-3">
          <p className="text-sm font-medium text-[#1b1b1d]">Адрес доставки</p>
            <div className="grid grid-cols-2 gap-3">
              <div>
                <label className="block text-xs text-[#75777d] mb-1">Улица *</label>
                <input
                  type="text"
                  value={formData.street}
                  onChange={(e) => setFormData({ ...formData, street: e.target.value })}
                  className="w-full px-2 py-1.5 bg-white border border-[#c5c6cd] rounded text-sm"
                  required
                />
              </div>
              <div>
                <label className="block text-xs text-[#75777d] mb-1">Дом *</label>
                <input
                  type="text"
                  value={formData.house}
                  onChange={(e) => setFormData({ ...formData, house: e.target.value })}
                  className="w-full px-2 py-1.5 bg-white border border-[#c5c6cd] rounded text-sm"
                  required
                />
              </div>
              <div>
                <label className="block text-xs text-[#75777d] mb-1">Квартира</label>
                <input
                  type="text"
                  value={formData.apartment}
                  onChange={(e) => setFormData({ ...formData, apartment: e.target.value })}
                  className="w-full px-2 py-1.5 bg-white border border-[#c5c6cd] rounded text-sm"
                />
              </div>
              <div>
                <label className="block text-xs text-[#75777d] mb-1">Подъезд</label>
                <input
                  type="text"
                  value={formData.entrance}
                  onChange={(e) => setFormData({ ...formData, entrance: e.target.value })}
                  className="w-full px-2 py-1.5 bg-white border border-[#c5c6cd] rounded text-sm"
                />
              </div>
              <div>
                <label className="block text-xs text-[#75777d] mb-1">Этаж</label>
                <input
                  type="text"
                  value={formData.floor}
                  onChange={(e) => setFormData({ ...formData, floor: e.target.value })}
                  className="w-full px-2 py-1.5 bg-white border border-[#c5c6cd] rounded text-sm"
                />
              </div>
            </div>
        </div>

        <Input
          label="ФИО клиента *"
          value={formData.customerName}
          onChange={(e) => setFormData({ ...formData, customerName: e.target.value })}
          placeholder="Иванов Иван Иванович"
          required
        />

        <Input
          label="Телефон покупателя *"
          type="tel"
          value={formData.phone}
          onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
          onFocus={(e) => {
            if (!e.target.value) {
              setFormData({ ...formData, phone: '+7' });
            }
          }}
          placeholder="+7 (776)-567-89-01"
          required
          aria-invalid={!isPhoneValid}
          aria-describedby={!isPhoneValid ? 'phone-error' : undefined}
        />
        {!isPhoneValid && formData.phone && (
          <p id="phone-error" className="text-sm text-red-500 mt-1">
            Введите корректный номер: +7 (XXX) XXX-XX-XX
          </p>
        )}

        <Input
          label="Дополнительный номер телефона"
          type="tel"
          value={formData.additionalPhone}
          onChange={(e) => setFormData({ ...formData, additionalPhone: e.target.value })}
          onFocus={(e) => {
            if (!e.target.value) {
              setFormData({ ...formData, additionalPhone: '+7' });
            }
          }}
          placeholder="+7 (776)-567-89-01"
          aria-invalid={!isAdditionalPhoneValid}
          aria-describedby={!isAdditionalPhoneValid ? 'additional-phone-error' : undefined}
        />
        {!isAdditionalPhoneValid && formData.additionalPhone && (
          <p id="additional-phone-error" className="text-sm text-red-500 mt-1">
            Введите корректный номер: +7 (XXX) XXX-XX-XX
          </p>
        )}

        {/* Second pickup location */}
        <div className="flex items-center gap-2">
          <input
            type="checkbox"
            id="hasSecondPickup"
            checked={showSecondPickup}
            onChange={(e) => {
              setShowSecondPickup(e.target.checked);
              if (!e.target.checked) {
                setFormData({ ...formData, pickupLocation2: null, productName2: '' });
              }
            }}
            className="w-4 h-4 text-[#1B263B] border-[#c5c6cd] rounded focus:ring-[#1B263B]"
          />
          <label htmlFor="hasSecondPickup" className="text-sm text-[#1b1b1d]">
            Добавить вторую точку загрузки
          </label>
        </div>

        {showSecondPickup && (
          <div className="bg-[#f5f3f5] rounded-lg p-4 space-y-3">
            <p className="text-sm font-medium text-[#1b1b1d]">Вторая точка загрузки</p>
            <Select
              label="Место загрузки 2"
              value={formData.pickupLocation2 || ''}
              onChange={(e) => setFormData({ ...formData, pickupLocation2: e.target.value as PickupLocation })}
              options={pickupOptions}
            />
            <Input
              label="Название товара 2"
              value={formData.productName2}
              onChange={(e) => setFormData({ ...formData, productName2: e.target.value })}
              placeholder="Название товара со второй точки"
            />
          </div>
        )}

        <div className="flex items-center gap-2">
          <input
            type="checkbox"
            id="hasElevator"
            checked={formData.hasElevator}
            onChange={(e) => setFormData({ ...formData, hasElevator: e.target.checked })}
            className="w-4 h-4 text-[#1B263B] border-[#c5c6cd] rounded focus:ring-[#1B263B]"
          />
          <label htmlFor="hasElevator" className="text-sm text-[#1b1b1d]">
            Наличие лифта
          </label>
        </div>

        <Input
          label="Услуги (сборка, подъём)"
          value={formData.serviceInfo}
          onChange={(e) => setFormData({ ...formData, serviceInfo: e.target.value })}
          placeholder="Сборка 5000 тг, подъём на этаж 3000 тг"
        />

        <Input
          label="Комментарий"
          value={formData.comment}
          onChange={(e) => setFormData({ ...formData, comment: e.target.value })}
          placeholder="Дополнительная информация..."
        />
      </form>
    </Modal>
  );
};