import React from 'react';

import { useLocale, useTranslations } from 'next-intl';

import Modal from '@/components/common/Modal';
import PdfButton from '@/components/pdf/PdfButton';
import { createPdfFileName } from '@/components/pdf/pdfUtils';
import { usePdfDownload } from '@/components/pdf/usePdfDownload';
import {
  getEventCultTypeLabel,
  getEventTimeIntervalString,
  getInstitutionLocationString,
  toBudapestDate,
} from '@/utils/eventHelpers';

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

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

import EventsPDFDocument from './EventsPDFDocument';
import type { EventsPdfLabels } from './EventsPDFDocument';

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

const PrintableEventList: React.FC<PrintableEventListProps> = ({
  events,
  onClose,
  dateRange,
  title,
}) => {
  const locale = useLocale();
  const tCalendar = useTranslations('eventsPage.calendar');
  const tEventCard = useTranslations('eventsPage.eventCard');
  const tPdf = useTranslations('pdf.programList');
  const { downloadPdf, isPdfLoading } = usePdfDownload();
  const pdfLabels: EventsPdfLabels = {
    affectedCreator: tPdf('affectedCreator'),
    affectedCreators: tPdf('affectedCreators'),
    info: tPdf('info'),
    // listTitle: tPdf('title'),
    location: tPdf('location'),
    ticket: tPdf('ticket'),
  };

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

  const handlePdfClick = () =>
    downloadPdf(
      <EventsPDFDocument
        events={sortedEvents}
        dateRange={dateRange}
        getLocationString={getInstitutionLocationString}
        labels={pdfLabels}
        locale={locale}
        title={title}
      />,
      createPdfFileName(tPdf('fileName'), dateRange || tPdf('listFileNameFallback'))
    );

  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 || tPdf('title')}
      subtitle={dateRange}
      closeLabel={tEventCard('close')}
      actionElement={
        <PdfButton
          onClick={handlePdfClick}
          isGenerating={isPdfLoading}
          variant="ghost"
          size="icon"
          className="text-mma-blue hover:bg-transparent hover:text-mma-yellow [&_svg]:size-6"
        />
      }
    >
      <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">
            {tCalendar('noEvent')}
          </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) ||
                tCalendar('categories.other');
              const categoryColor = getCategoryColors(categoryLabel).color;
              const sortedPersons = [...(event.szemely ?? [])].sort((a, b) =>
                a.szemely.name.localeCompare(b.szemely.name)
              );

              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, locale)}</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">
                        {tEventCard('location')}
                      </span>{' '}
                      {locationString}
                    </div>
                  )}

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

                  {sortedPersons.length > 0 && (
                    <div className="mt-3 text-sm text-[#151720]/75">
                      <span className="font-semibold uppercase tracking-[0.12em] text-[11px] text-[#151720]/60">
                        {sortedPersons.length > 1
                          ? tEventCard('affectedCreators')
                          : tEventCard('affectedCreator')}
                      </span>{' '}
                      <span className="inline">
                        {sortedPersons.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 < sortedPersons.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"
                        >
                          {tEventCard('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"
                        >
                          {tEventCard('ticket')}
                        </a>
                      )}
                    </div>
                  )}

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

export default PrintableEventList;