'use client';
import { useEvents } from './EventsProvider';
import { useState } from 'react';
import { Event } from '@/types/event';
import {
  FaCalendarAlt,
  FaInfoCircle,
  FaMoneyBill,
  FaTrash,
  FaHeading,
} from 'react-icons/fa';

export default function EventsList() {
  const { events, updateEvent, deleteEvent } = useEvents();
  const [editingField, setEditingField] = useState<{
    id: string;
    field: keyof Event;
  } | null>(null);
  const [fieldValue, setFieldValue] = useState<string | number | null>(null);

  const handleFieldClick = (
    id: string,
    field: keyof Event,
    value: string | number | null
  ) => {
    if (field === 'from_date' || field === 'to_date') {
      value = value
        ? new Date(new Date(value).getTime() + 2 * 60 * 60 * 1000).toISOString().slice(0, 16)
        : null;
    }
    setEditingField({ id, field });
    setFieldValue(value);
  };

  const handleFieldChange = (
    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
  ) => {
    setFieldValue(e.target.value);
  };

  const handleFieldBlur = () => {
    if (editingField && fieldValue !== null) {
      let valueToSave = fieldValue;
      if (editingField.field === 'from_date' || editingField.field === 'to_date') {
        valueToSave = new Date(new Date(fieldValue).getTime() - 0 * 60 * 60 * 1000).toISOString();
      }
      updateEvent(editingField.id, { [editingField.field]: valueToSave });
    }
    setEditingField(null);
    setFieldValue(null);
  };

  const handleFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    handleFieldBlur();
  };

  const handleDeleteClick = (id: string) => {
    if (confirm('Сигурни ли сте, че искате да изтриете този евент?')) {
      deleteEvent(id);
    }
  };

  const renderField = (
    event: Event,
    field: keyof Event,
    type: string = 'text'
  ) => {
    if (editingField?.id === event.id && editingField.field === field) {
      return (
        <form onSubmit={handleFormSubmit}>
          <input
            type={type}
            value={fieldValue !== null ? fieldValue : event[field]}
            onChange={handleFieldChange}
            onBlur={handleFieldBlur}
            autoFocus
            className="border input input-sm p-2 w-full rounded bg-white"
          />
        </form>
      );
    }

    let displayValue = event[field];
    if (type === 'datetime-local' && typeof displayValue === 'string') {
      const date = new Date(displayValue);
      displayValue = date.toLocaleTimeString([], {
        hour: '2-digit',
        minute: '2-digit'
      });
    }

    return (
      <span
        onClick={() =>
          handleFieldClick(event.id, field, event[field])
        }
        className="hover:bg-orange-200 rounded-sm rounded cursor-pointer inline-block p-1"
      >
        {displayValue}
      </span>
    );
  };

  if (events.length === 0) {
    return <p>Няма евенти за избраната дата.</p>;
  }

  return (
    <div>
      {events.map((event, index) => (
        <div key={event.id}>
          <div
            id={event.id}
            className="relative p-2 shadow rounded mb-2 bg-orange-100 group"
          >
            <button
              onClick={() => handleDeleteClick(event.id)}
              className="absolute top-2 right-2 text-gray-600 hover:text-gray-800 lg:hidden group-hover:block"
            >
              <FaTrash />
            </button>
            <table className="w-full table-fixed lg:table-auto">
              <tbody>
                <tr className="flex flex-wrap lg:flex-nowrap">
                  <td className="w-full lg:w-1/2">
                    <div className="flex">
                      <div className="font-bold w-1/6 lg:w-1/12 flex justify-center items-center">
                        <FaHeading />
                      </div>
                      <div className="w-5/6 lg:w-11/12">
                        {renderField(event, 'title')}
                      </div>
                    </div>
                  </td>
                  <td className="w-full lg:w-1/2">
                    <div className="flex">
                      <div className="font-bold w-1/6 lg:w-1/12 flex justify-center items-center">
                        <FaCalendarAlt />
                      </div>
                      <div className="w-5/6 lg:w-11/12">
                        {renderField(
                          event,
                          'from_date',
                          'datetime-local'
                        )}{' '}
                        -{' '}
                        {renderField(event, 'to_date', 'datetime-local')}
                      </div>
                    </div>
                  </td>
                </tr>
                <tr className="flex flex-wrap lg:flex-nowrap">
                  <td className="w-full lg:w-1/2">
                    <div className="flex">
                      <div className="font-bold w-1/6 lg:w-1/12 flex justify-center items-center">
                        <FaMoneyBill />
                      </div>
                      <div className="w-5/6 lg:w-11/12 flex items-center">
                        {renderField(event, 'price', 'number')} лв
                      </div>
                    </div>
                  </td>
                  <td className="w-full lg:w-1/2">
                    <div className="flex">
                      <div className="font-bold w-1/6 lg:w-1/12 flex justify-center items-center">
                        <FaInfoCircle />
                      </div>
                      <div className="w-5/6 lg:w-11/12">
                        {renderField(event, 'description')}
                      </div>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          {index < events.length - 1 && <hr className="my-4" />}{' '}
          {/* Add a divider between each event */}
        </div>
      ))}
    </div>
  );
}