import { Reservation } from '@/types/types';
import { FiUser, FiPhone, FiUsers, FiCalendar, FiClock, FiEdit, FiCheckCircle, FiXCircle } from 'react-icons/fi';

type ReservationDialogProps = {
  isOpen: boolean;
  onClose: () => void;
  onSave: (reservation: Partial<Reservation>) => void;
  onDelete: (id: number) => void;
  reservation?: Partial<Reservation>;
};

export default function ReservationDialog({
  isOpen,
  onClose,
  onSave,
  onDelete,
  reservation
}: ReservationDialogProps) {
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    const formData = new FormData(e.target as HTMLFormElement);
    const data = Object.fromEntries(formData.entries());
    
    // Convert local datetime strings back to UTC
    const fromDate = new Date(data.from_date as string);
    const toDate = new Date(data.to_date as string);
    
    onSave({
      ...reservation,
      person_name: data.person_name as string,
      phone: data.phone as string,
      persons: Number(data.persons),
      description: data.description as string,
      from_date: fromDate.toISOString(),
      to_date: toDate.toISOString(),
      approved: data.approved === 'on',
    });
    onClose();
  };

  // Convert UTC to local datetime string
  const toLocalDateTimeString = (utcString?: string) => {
    if (!utcString) return '';
    const date = new Date(utcString);
    return date.toLocaleDateString('sv-SE', { // sv-SE gives YYYY-MM-DD format
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
    }) + 'T' + date.toLocaleTimeString('en-GB', { // en-GB gives 24-hour format
      hour: '2-digit',
      minute: '2-digit',
    });
  };

  if (!isOpen) return null;

  return (
    <dialog className="modal modal-open">
      <div className="modal-box w-11/12 max-w-2xl bg-white p-0 flex flex-col max-h-[90vh]">
        <h3 className="font-bold text-xl flex items-center gap-2 bg-white p-6 border-b sticky top-0">
          {reservation?.id ? (
            <>
              <FiEdit className="w-5 h-5" />
              Редактиране на резервация
            </>
          ) : (
            <>
              <FiCalendar className="w-5 h-5" />
              Нова резервация
            </>
          )}
        </h3>

        <form onSubmit={handleSubmit} className="flex flex-col flex-1">
          <div className="space-y-6 p-6 overflow-y-auto flex-1">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="space-y-4">
                <div>
                  <label className="label">
                    <span className="label-text font-medium">Име</span>
                  </label>
                  <label className="input input-bordered flex items-center gap-2 bg-white">
                    <FiUser className="w-4 h-4 opacity-70" />
                    <input
                      type="text"
                      name="person_name"
                      defaultValue={reservation?.person_name}
                      className="grow"
                      required
                    />
                  </label>
                </div>

                <div>
                  <label className="label">
                    <span className="label-text font-medium">Телефон</span>
                  </label>
                  <label className="input input-bordered flex items-center gap-2 bg-white">
                    <FiPhone className="w-4 h-4 opacity-70" />
                    <input
                      type="tel"
                      name="phone"
                      defaultValue={reservation?.phone}
                      className="grow"
                    />
                  </label>
                </div>

                <div>
                  <label className="label">
                    <span className="label-text font-medium">Брой гости</span>
                  </label>
                  <label className="input input-bordered flex items-center gap-2 bg-white">
                    <FiUsers className="w-4 h-4 opacity-70" />
                    <input
                      type="number"
                      name="persons"
                      defaultValue={reservation?.persons}
                      min="1"
                      max="60"
                      className="grow"
                      required
                    />
                  </label>
                </div>
              </div>

              <div className="space-y-4">
                <div>
                  <label className="label">
                    <span className="label-text font-medium">От</span>
                  </label>
                  <label className="input input-bordered flex items-center gap-2 bg-white">
                    <FiCalendar className="w-4 h-4 opacity-70" />
                    <input
                      type="datetime-local"
                      name="from_date"
                      defaultValue={toLocalDateTimeString(reservation?.from_date)}
                      className="grow"
                      required
                    />
                  </label>
                </div>

                <div>
                  <label className="label">
                    <span className="label-text font-medium">До</span>
                  </label>
                  <label className="input input-bordered flex items-center gap-2 bg-white">
                    <FiClock className="w-4 h-4 opacity-70" />
                    <input
                      type="datetime-local"
                      name="to_date"
                      defaultValue={toLocalDateTimeString(reservation?.to_date)}
                      className="grow"
                      required
                    />
                  </label>
                </div>

                <div>
                  <label className="label">
                    <span className="label-text font-medium">Статус</span>
                  </label>
                  <div className={`p-3 rounded-lg border flex items-center gap-2 transition-colors duration-300 ${reservation?.approved ? 'bg-green-100 border-green-300' : 'bg-red-100 border-red-300'}`}>
                    <label className="cursor-pointer flex items-center gap-2">
                      <input
                        type="checkbox"
                        name="approved"
                        defaultChecked={reservation?.approved}
                        className="checkbox checkbox-success w-4 h-4"
                      />
                      <span className="label-text font-medium flex items-center gap-2">
                        {reservation?.approved ? (
                          <>
                            <FiCheckCircle className="text-green-600" />
                            Потвърдена резервация
                          </>
                        ) : (
                          <>
                            <FiXCircle className="text-red-600" />
                            Непотвърдена резервация
                          </>
                        )}
                      </span>
                    </label>
                  </div>
                </div>
              </div>
            </div>

            <div>
              <label className="label">
                <span className="label-text font-medium">Описание</span>
              </label>
              <textarea
                name="description"
                defaultValue={reservation?.description}
                className="textarea textarea-bordered w-full bg-white h-24"
                placeholder="Добавете бележки към резервацията..."
              />
            </div>
          </div>

          <div className="flex items-center justify-between p-6 border-t sticky bottom-0 bg-white">
            {reservation?.id && (
              <button
                type="button"
                onClick={() => {
                  if (confirm('Сигурни ли сте, че искате да изтриете тази резервация?')) {
                    onDelete(reservation.id!);
                    onClose();
                  }
                }}
                className="btn btn-error btn-sm"
              >
                Изтрий резервацията
              </button>
            )}
            <div className="flex gap-2">
              <button
                type="button"
                onClick={onClose}
                className="btn btn-ghost btn-sm"
              >
                Затвори
              </button>
              <button
                type="submit"
                className="btn btn-primary btn-sm"
              >
                Запази
              </button>
            </div>
          </div>
        </form>
      </div>
      <div className="modal-backdrop bg-black/50" onClick={onClose} />
    </dialog>
  );
}