import { CashflowEvent } from "@/types/cashflow";
import { parseAmountFromHtml } from "@/lib/common";

interface EventDetailsModalProps {
  event: CashflowEvent;
  onClose: () => void;
}

export function EventDetailsModal({ event, onClose }: EventDetailsModalProps) {
  return (
    <div
      className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 p-4"
      onClick={onClose}
    >
      <div
        className="bg-white rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto"
        onClick={(e) => e.stopPropagation()}
      >
        {/* Modal Header */}
        <div className="sticky top-0 bg-white border-b border-gray-200 px-6 py-4 flex items-center justify-between">
          <h3 className="text-xl font-bold text-gray-900">Event Details</h3>
          <button
            onClick={onClose}
            className="text-gray-400 hover:text-gray-600 transition-colors"
            aria-label="Close modal"
          >
            <svg
              className="w-6 h-6"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M6 18L18 6M6 6l12 12"
              />
            </svg>
          </button>
        </div>

        {/* Modal Content */}
        <div className="p-6 space-y-4">
          {/* Event Title */}
          <div>
            <h4 className="text-sm font-medium text-gray-500 mb-1">Title</h4>
            <p className="text-base text-gray-900">{event.title}</p>
          </div>

          {/* Event Date */}
          <div className="grid grid-cols-2 gap-4">
            <div>
              <h4 className="text-sm font-medium text-gray-500 mb-1">Date</h4>
              <p className="text-base text-gray-900">
                {event.details?.event_date ||
                  new Date(event.start).toLocaleDateString()}
              </p>
            </div>
            <div>
              <h4 className="text-sm font-medium text-gray-500 mb-1">
                Asset Class
              </h4>
              <p className="text-base text-gray-900">
                {event.details?.asset_class}
              </p>
            </div>
          </div>

          {/* Amount */}
          <div>
            <h4 className="text-sm font-medium text-gray-500 mb-1">Amount</h4>
            <p className="text-base text-gray-900 font-semibold">
              {parseAmountFromHtml(event.details?.amount ?? "")}
            </p>
          </div>

          {/* Quantity */}
          {event.details?.quantity && (
            <div>
              <h4 className="text-sm font-medium text-gray-500 mb-1">
                Quantity
              </h4>
              <p className="text-base text-gray-900">
                {event.details.quantity}
              </p>
            </div>
          )}

          {/* Ticker/ISIN */}
          {(event.details?.ticker || event.details?.isin) && (
            <div className="grid grid-cols-2 gap-4">
              {event.details.ticker && (
                <div>
                  <h4 className="text-sm font-medium text-gray-500 mb-1">
                    Ticker
                  </h4>
                  <p className="text-base text-gray-900">
                    {event.details.ticker}
                  </p>
                </div>
              )}
              {event.details.isin && (
                <div>
                  <h4 className="text-sm font-medium text-gray-500 mb-1">
                    ISIN
                  </h4>
                  <p className="text-base text-gray-900">
                    {event.details.isin}
                  </p>
                </div>
              )}
            </div>
          )}

          {/* Security Name */}
          {event.details?.name && (
            <div>
              <h4 className="text-sm font-medium text-gray-500 mb-1">
                Security Name
              </h4>
              <p className="text-base text-gray-900">{event.details.name}</p>
            </div>
          )}

          {/* Dividend Details */}
          {event.details?.dividend_details && (
            <div className="border-t border-gray-200 pt-4 mt-4">
              <h4 className="text-sm font-medium text-gray-700 mb-3">
                Dividend Details
              </h4>
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <h5 className="text-xs font-medium text-gray-500 mb-1">
                    Per Share
                  </h5>
                  <p className="text-sm text-gray-900">
                    {event.details.dividend_details.per_share}
                  </p>
                </div>
                <div>
                  <h5 className="text-xs font-medium text-gray-500 mb-1">
                    Type
                  </h5>
                  <p className="text-sm text-gray-900">
                    {event.details.dividend_details.type}
                  </p>
                </div>
                <div>
                  <h5 className="text-xs font-medium text-gray-500 mb-1">
                    Payment Date
                  </h5>
                  <p className="text-sm text-gray-900">
                    {event.details.dividend_details.payment_date}
                  </p>
                </div>
                <div>
                  <h5 className="text-xs font-medium text-gray-500 mb-1">
                    Ticker
                  </h5>
                  <p className="text-sm text-gray-900">
                    {event.details.dividend_details.ticker}
                  </p>
                </div>
                {event.details.dividend_details.name && (
                  <div className="col-span-2">
                    <h5 className="text-xs font-medium text-gray-500 mb-1">
                      Name
                    </h5>
                    <p className="text-sm text-gray-900">
                      {event.details.dividend_details.name}
                    </p>
                  </div>
                )}
              </div>
            </div>
          )}

          {/* Detail URL Link */}
          {event.detailUrl && (
            <div className="border-t border-gray-200 pt-4 mt-4">
              <a
                href={event.detailUrl}
                target="_blank"
                rel="noopener noreferrer"
                className="inline-flex items-center text-blue-600 hover:text-blue-800 font-medium"
              >
                View Full Details
                <svg
                  className="w-4 h-4 ml-1"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
                  />
                </svg>
              </a>
            </div>
          )}
        </div>

        {/* Modal Footer */}
        <div className="sticky bottom-0 bg-gray-50 border-t border-gray-200 px-6 py-4">
          <button
            onClick={onClose}
            className="w-full px-4 py-2 bg-[#428B4D] text-white rounded-lg hover:bg-[#357a3d] transition-colors font-medium"
          >
            Close
          </button>
        </div>
      </div>
    </div>
  );
}