import {
  Car,
  ChevronDown,
  Clock,
  CreditCard,
  Hotel,
  MapPin,
} from "lucide-react";
import type { Itinerary } from "../types";
import { useEffect, useState } from "react";

type Props = {
  className?: string;
  itinerary: Itinerary | undefined;
  isStreaming: boolean;
};

export const ItinerarySection = ({
  isStreaming,
  itinerary,
  className = "",
}: Props) => {
  const [expandedDays, setExpandedDays] = useState<number[]>([]);

  // Always run hooks before any early returns
  useEffect(() => {
    if (
      itinerary &&
      itinerary.data &&
      Array.isArray(itinerary.data.itinerarySummary)
    ) {
      const itineraryData = itinerary.data.itinerarySummary.find(
        (item) => item["view-type"] === "itinerary"
      );

      if (
        itineraryData &&
        itineraryData.itinerary &&
        Array.isArray(itineraryData.itinerary.days) &&
        itineraryData.itinerary.days.length > 0
      ) {
        setExpandedDays(itineraryData.itinerary.days.map((_, index) => index));
      }
    }
  }, [itinerary]);

  return (
    <div className={`itinerary-section-container ${className}`}>
      {isStreaming ? (
        <div className="itinerary-section-loading">
          <div className="itinerary-section-spinner"></div>
        </div>
      ) : !itinerary ? (
        <div className="itinerary-section-empty">
          <div className="itinerary-section-empty-content">
            <Hotel className="itinerary-section-empty-icon" />
            <p className="itinerary-section-empty-title">
              No itinerary available
            </p>
            <p className="itinerary-section-empty-subtitle">
              Ask me to create one for you!
            </p>
          </div>
        </div>
      ) : (
        <>
          <div className="itinerary-section-header">
            <div className="itinerary-section-header-content">
              <p className="itinerary-section-title">Itinerary</p>
              <span className="itinerary-section-days-count">
                {itinerary.data.itinerarySummary.find(
                  (item) => item["view-type"] === "itinerary"
                )?.itinerary.days.length || 0}{" "}
                days
              </span>
            </div>
          </div>
          <div className="itinerary-section-content">
            <div className="itinerary-days">
              {itinerary.data.itinerarySummary
                .find((item) => item["view-type"] === "itinerary")
                ?.itinerary.days.map((day, dayIndex) => (
                  <div key={dayIndex} className="itinerary-day">
                    <button
                      onClick={() => {
                        setExpandedDays((prev) =>
                          prev.includes(dayIndex)
                            ? prev.filter((index) => index !== dayIndex)
                            : [...prev, dayIndex]
                        );
                      }}
                      className="itinerary-day-button"
                    >
                      <div className="itinerary-day-info">
                        <p className="itinerary-day-title">Day {day.day}</p>
                        {day.date && (
                          <p className="itinerary-day-date">
                            {new Date(day.date).toLocaleDateString("en-US", {
                              day: "numeric",
                              month: "short",
                            })}
                          </p>
                        )}
                      </div>
                      <ChevronDown
                        className={`itinerary-day-chevron ${
                          expandedDays.includes(dayIndex)
                            ? "expanded"
                            : "collapsed"
                        }`}
                      />
                    </button>

                    <div
                      className={`itinerary-day-content ${
                        expandedDays.includes(dayIndex)
                          ? "expanded"
                          : "collapsed"
                      }`}
                    >
                      {day.inclusions?.length > 0 && (
                        <div className="itinerary-day-inclusions">
                          {day.inclusions
                            .filter(
                              (inclusion) =>
                                inclusion.type === "attraction" ||
                                inclusion.type === "transport"
                            )
                            .map((inclusion, idx) => {
                              const hasMetadata =
                                inclusion.metadata &&
                                inclusion.metadata.length > 0;
                              if (!hasMetadata) return null;

                              return (
                                <div key={idx} className="itinerary-inclusion">
                                  <div className="itinerary-inclusion-content">
                                    <div className="itinerary-inclusion-icon-container">
                                      {inclusion.type === "attraction" ? (
                                        <MapPin className="itinerary-inclusion-icon" />
                                      ) : (
                                        <Car className="itinerary-inclusion-icon" />
                                      )}
                                    </div>
                                    <div className="itinerary-inclusion-info">
                                      {inclusion.type === "attraction" &&
                                        inclusion.metadata[0]?.name && (
                                          <p className="itinerary-inclusion-title">
                                            {inclusion.metadata[0].name}
                                          </p>
                                        )}
                                      {inclusion.type === "transport" && (
                                        <p className="itinerary-inclusion-title">
                                          {inclusion.metadata[0]?.[
                                            "transport-type"
                                          ] ||
                                            inclusion["transport-type"] ||
                                            "Transport"}
                                        </p>
                                      )}
                                      <div className="itinerary-inclusion-details">
                                        {inclusion.time && (
                                          <div className="itinerary-inclusion-detail">
                                            <Clock className="itinerary-inclusion-detail-icon" />
                                            <span>{inclusion.time}</span>
                                          </div>
                                        )}
                                        {(inclusion.metadata[0]?.payment ||
                                          (inclusion.type === "transport" &&
                                            inclusion.payment)) && (
                                          <div className="itinerary-inclusion-detail">
                                            <CreditCard className="itinerary-inclusion-detail-icon" />
                                            <span>
                                              {inclusion.type === "transport"
                                                ? inclusion.payment ||
                                                  inclusion.metadata[0]?.payment
                                                : inclusion.metadata[0]
                                                    ?.payment}
                                            </span>
                                          </div>
                                        )}
                                      </div>
                                      {inclusion.type === "attraction" &&
                                        inclusion.metadata[0]?.description && (
                                          <p className="itinerary-inclusion-description">
                                            {inclusion.metadata[0].description}
                                          </p>
                                        )}
                                      <span
                                        className={`itinerary-inclusion-badge ${
                                          inclusion.type === "attraction"
                                            ? "attraction"
                                            : "transport"
                                        }`}
                                      >
                                        {inclusion.type}
                                      </span>
                                    </div>
                                  </div>
                                </div>
                              );
                            })}
                        </div>
                      )}
                    </div>
                  </div>
                ))}
            </div>
          </div>
        </>
      )}
    </div>
  );
};