'use client';

import { FiCalendar, FiEdit, FiClock, FiLink } from 'react-icons/fi';
import { useState, useEffect } from 'react';

type QuizDialogProps = {
  isOpen: boolean;
  onClose: () => void;
  onSave: (quiz: { name: string; date: string; url: string }) => void;
  initialValues?: {
    name: string | null;
    date: string | null;
    url: string | null;
  };
};

export function QuizDialog({ isOpen, onClose, onSave, initialValues }: QuizDialogProps) {
  const defaultDate = new Date().toISOString().split('T')[0];
  
  const [name, setName] = useState('');
  const [date, setDate] = useState(defaultDate);
  const [url, setUrl] = useState('');

  useEffect(() => {
    if (initialValues) {
      setName(initialValues.name || '');
      const dateValue = initialValues.date ? new Date(initialValues.date).toISOString().split('T')[0] : defaultDate;
      setDate(dateValue);
      setUrl(initialValues.url || '');
    } else {
      setName('');
      setDate(defaultDate);
      setUrl('');
    }
  }, [initialValues, defaultDate]);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    
    if (!name || !date) {
      alert('Моля попълнете всички полета');
      return;
    }

    onSave({ name, date, url });
    onClose();
  };

  // Set default date to today and time to 19:00 (7 PM)
  const today = new Date();
  today.setHours(19, 0, 0, 0);
  const defaultTime = '19:00';

  if (!isOpen) return null;

  return (
    <dialog className={`modal ${isOpen ? '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">
          <FiCalendar className="w-5 h-5" />
          {initialValues ? 'Редактиране на куиз' : 'Нов куиз'}
        </h3>

        <form onSubmit={handleSubmit} className="flex flex-col flex-1">
          <div className="space-y-6 p-6 overflow-y-auto flex-1">
            <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">
                  <FiEdit className="w-4 h-4 opacity-70" />
                  <input
                    type="text"
                    name="name"
                    value={name}
                    onChange={(e) => setName(e.target.value)}
                    className="grow"
                    required
                    placeholder="Въведете име на куиза..."
                  />
                </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">
                  <FiCalendar className="w-4 h-4 opacity-70" />
                  <input
                    type="date"
                    name="date"
                    value={date}
                    onChange={(e) => setDate(e.target.value)}
                    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="time"
                    name="time"
                    defaultValue={defaultTime}
                    className="grow"
                    required
                  />
                </label>
              </div>

              <div>
                <label className="label">
                  <span className="label-text font-medium">Линк към презентацията</span>
                  <span className="label-text-alt text-gray-500">Линк към Canva презентацията с въпросите</span>
                </label>
                <label className="input input-bordered flex items-center gap-2 bg-white">
                  <FiLink className="w-4 h-4 opacity-70" />
                  <input
                    type="url"
                    name="url"
                    value={url}
                    onChange={(e) => setUrl(e.target.value)}
                    className="grow"
                    placeholder="https://www.canva.com/..."
                  />
                </label>
                <details className="mt-2 text-sm text-gray-600">
                  <summary className="cursor-pointer hover:text-gray-800 transition-colors">
                    Как да взема линка към презентацията?
                  </summary>
                  <div className="mt-2 pl-4">
                    <ol className="list-decimal list-inside space-y-1">
                      <li>Отворете презентацията в Canva</li>
                      <li>Кликнете на бутона &quot;Споделяне/Share&quot; (горе вдясно)</li>
                      <li>Изберете таба &quot;Вгради/Embed&quot;</li>
                      <li>Копирайте &quot;Smart embed link&quot;-а</li>
                    </ol>
                  </div>
                </details>
              </div>
            </div>
          </div>

          <div className="flex items-center justify-end p-6 border-t sticky bottom-0 bg-white">
            <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"
              >
                {initialValues ? 'Запази' : 'Създай'}
              </button>
            </div>
          </div>
        </form>
      </div>
      <div className="modal-backdrop bg-black/50" onClick={onClose} />
    </dialog>
  );
}