import React, { useState } from 'react';

import { pdf } from '@react-pdf/renderer';
import { FaHourglassHalf } from 'react-icons/fa';
import { FaRegFilePdf } from 'react-icons/fa6';

import Modal from '@/components/common/Modal';
import {
  getEventCultTypeLabel,
  getEventTimeIntervalString,
  getInstitutionLocationString,
} from '@/utils/eventHelpers';

import { Event } from '@/types/Events';

import { getCategoryColors } from '@/config/calendarCategories';
import { Link } from '@/i18n/navigation';

import EventsPDFDocument from './EventsPDFDocument';

interface PrintableEventListProps {
  events: Event[];
  onClose: () => void;
  dateRange?: string;
  title?: string;
}

const PrintableEventList: React.FC<PrintableEventListProps> = ({
  events,
  onClose,
  dateRange,
  title,
}) => {
  const [isGenerating, setIsGenerating] = useState(false);

  function toBudapestDate(utcString: string) {
    const utcDate = new Date(utcString);
    const local = new Date(utcDate.toLocaleString('en-US', { timeZone: 'Europe/Budapest' }));
    return local;
  }

  const sortedEvents = [...events].sort((a, b) => {
    const dateA = toBudapestDate(a.kezdete).getTime();
    const dateB = toBudapestDate(b.kezdete).getTime();
    return dateA - dateB;
  });

  const handleDownloadPDF = async () => {
    setIsGenerating(true);

    try {
      const blob = await pdf(
        <EventsPDFDocument
          events={sortedEvents}
          dateRange={dateRange}
          title={title}
          getLocationString={getInstitutionLocationString}
        />
      ).toBlob();

      const url = window.URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = `azopus.hu-programnaptar-${dateRange || 'lista'}.pdf`;
      document.body.appendChild(a);
      a.click();
      window.URL.revokeObjectURL(url);
      document.body.removeChild(a);
    } catch (error) {
      console.error('PDF generation error:', error);
      alert('Hiba történt a PDF generálása során.');
    } finally {
      setIsGenerating(false);
    }
  };

  return (
    <Modal
      className="ui-panel min-w-full lg:min-w-[72vw] shadow-[0_30px_80px_-60px_rgba(20,25,40,0.45)]"
      isOpen={true}
      onClose={onClose}
      title={title || 'Programok'}
      subtitle={dateRange}
      actionButton={{
        icon: isGenerating ? (
          <div className="animate-spin">
            <FaHourglassHalf size={24} />
          </div>
        ) : (
          <FaRegFilePdf size={24} />
        ),
        onClick: handleDownloadPDF,
        ariaLabel: isGenerating ? 'PDF generálása...' : 'PDF letöltése',
        title: isGenerating ? 'PDF generálása...' : 'PDF letöltése',
      }}
    >
      <div className="w-full bg-[#151720]/[0.02] px-4 py-4 lg:px-8 lg:py-6">
        {sortedEvents.length === 0 ? (
          <p className="py-12 text-center text-sm font-semibold uppercase tracking-[0.18em] text-[#151720]/50">
            Nincs megjeleníthető esemény
          </p>
        ) : (
          <div className="space-y-4 lg:space-y-5">
            {sortedEvents.map((event, index) => {
              const institutionField = event.intezmeny?.[0];
              const locationString = institutionField
                ? getInstitutionLocationString(institutionField)
                : null;
              const categoryLabel =
                event.esemenyKategoria?.[0]?.nev ||
                event.category ||
                getEventCultTypeLabel(event) ||
                'Egyeb';
              const categoryColor = getCategoryColors(categoryLabel).color;

              return (
                <div
                  key={event.id}
                  className="ui-card break-inside-avoid border-l-4 px-4 py-4 shadow-[0_24px_60px_-50px_rgba(20,25,40,0.2)]"
                  style={{ borderLeftColor: categoryColor }}
                >
                  <div className="ui-meta mb-2 flex flex-wrap items-center gap-2">
                    <span>{getEventTimeIntervalString(event, true)}</span>
                    <span
                      className="ui-chip px-2 text-white"
                      style={{ backgroundColor: categoryColor }}
                    >
                      {categoryLabel}
                    </span>
                  </div>

                  <h3 className="mb-3 text-lg lg:text-xl font-semibold leading-tight text-[#151720]">
                    {event.nev}
                  </h3>

                  {locationString && (
                    <div className="mb-2 text-sm text-[#151720]/75">
                      <span className="font-semibold uppercase tracking-[0.12em] text-[11px] text-[#151720]/60">
                        Helyszín:
                      </span>{' '}
                      {locationString}
                    </div>
                  )}

                  {event.leiras && (
                    <div
                      className="mt-2 text-sm leading-relaxed text-[#151720]/75"
                      dangerouslySetInnerHTML={{ __html: event.leiras }}
                    />
                  )}

                  {event.szemely && event.szemely.length > 0 && (
                    <div className="mt-3 text-sm text-[#151720]/75">
                      <span className="font-semibold uppercase tracking-[0.12em] text-[11px] text-[#151720]/60">
                        {event.szemely.length > 1 ? 'Érintett alkotók:' : 'Érintett alkotó:'}
                      </span>{' '}
                      <span className="inline">
                        {event.szemely
                          .sort((a, b) => a.szemely.name.localeCompare(b.szemely.name))
                          .map((p, idx) => (
                            <span key={p.id}>
                              <Link
                                href={{
                                  pathname: '/alkoto/[id]',
                                  params: { id: p.szemely.alkotoAzonosito },
                                }}
                                className="text-mma-blue underline hover:text-mma-blue/80"
                                target="_blank"
                              >
                                {p.szemely.name}
                              </Link>
                              {p.szemely.szakma?.name && (
                                <span className="font-normal text-[#151720]/65">
                                  {' '}
                                  {p.szemely.szakma.name}
                                </span>
                              )}
                              {idx < event.szemely.length - 1 && ', '}
                            </span>
                          ))}
                      </span>
                    </div>
                  )}

                  {(event.infoUrl || event.jegyUrl) && (
                    <div className="mt-3 flex flex-wrap items-center gap-2 border-t border-[#151720]/10 pt-3">
                      {event.infoUrl && (
                        <a
                          href={event.infoUrl}
                          target="_blank"
                          rel="noopener noreferrer"
                          className="inline-flex items-center gap-2 border border-[#151720]/30 px-3 py-1.5 text-[10px] font-semibold uppercase tracking-[0.16em] text-[#151720]/75 transition hover:bg-[#151720]/10"
                        >
                          Info
                        </a>
                      )}
                      {event.jegyUrl && (
                        <a
                          href={event.jegyUrl}
                          target="_blank"
                          rel="noopener noreferrer"
                          className="inline-flex items-center gap-2 border border-[#151720]/30 px-3 py-1.5 text-[10px] font-semibold uppercase tracking-[0.16em] text-[#151720]/75 transition hover:bg-[#151720]/10"
                        >
                          Jegy
                        </a>
                      )}
                    </div>
                  )}

                  {index < sortedEvents.length - 1 && <hr className="mt-4 border-[#151720]/10" />}
                </div>
              );
            })}
          </div>
        )}
      </div>
    </Modal>
  );
};

export default PrintableEventList;