import type { TripTimeState } from "../lib/use-trip-time";
import type { UserLocation } from "../lib/use-location";
import type { SafetyData } from "../lib/types";

function getCellStatus(location: UserLocation | null, safety: SafetyData): { segment: string; status: string } | null {
  if (!location || !safety.cellCoverage?.length) return null;

  const lat = location.lat;
  const lng = location.lng;

  const zones: { minLat: number; maxLat: number; minLng: number; maxLng: number; idx: number }[] = [
    { minLat: 37.2, maxLat: 37.5, minLng: -122.2, maxLng: -121.5, idx: 0 },
    { minLat: 36.5, maxLat: 37.2, minLng: -121.8, maxLng: -121.0, idx: 1 },
    { minLat: 36.0, maxLat: 36.5, minLng: -121.5, maxLng: -120.5, idx: 2 },
    { minLat: 35.4, maxLat: 36.0, minLng: -120.8, maxLng: -120.0, idx: 3 },
    { minLat: 34.8, maxLat: 35.4, minLng: -120.5, maxLng: -119.5, idx: 4 },
    { minLat: 35.5, maxLat: 36.0, minLng: -120.5, maxLng: -120.0, idx: 5 },
  ];

  for (const z of zones) {
    if (lat >= z.minLat && lat <= z.maxLat && lng >= z.minLng && lng <= z.maxLng) {
      if (z.idx < safety.cellCoverage.length) return safety.cellCoverage[z.idx];
    }
  }
  return null;
}

export function NowBanner({ time, location, safety }: {
  time: TripTimeState;
  location: UserLocation | null;
  safety: SafetyData;
}) {
  if (time.tripEnded) {
    return (
      <div class="now-banner now-ended">
        <div class="now-label">Trip complete</div>
      </div>
    );
  }

  if (!time.tripStarted) {
    const firstDate = new Date(time.now);
    return (
      <div class="now-banner now-pre">
        <div class="now-label">Trip hasn't started yet</div>
        {time.nextStop && (
          <div class="now-detail">First stop: {time.nextStop.name}</div>
        )}
      </div>
    );
  }

  if (!time.today) {
    return null;
  }

  const cell = getCellStatus(location, safety);

  return (
    <div class="now-banner now-active">
      {time.currentStop && (
        <div class="now-current">
          <div class="now-label">Now</div>
          <div class="now-name">{time.currentStop.name}</div>
          {time.currentStop.purpose && (
            <div class="now-purpose">{time.currentStop.purpose}</div>
          )}
        </div>
      )}
      {time.currentStop && time.nextStop && (
        <div class="now-next">
          <div class="now-label">Next</div>
          <div class="now-name">{time.nextStop.name}</div>
          {time.nextStop.arrival && (
            <div class="now-time">{time.nextStop.arrival}</div>
          )}
        </div>
      )}
      {!time.currentStop && time.nextStop && (
        <div class="now-current">
          <div class="now-label">Pack & Depart</div>
          <div class="now-name">{time.nextStop.name}</div>
          {time.nextStop.arrival && (
            <div class="now-time">{time.nextStop.arrival}</div>
          )}
        </div>
      )}
      {!time.currentStop && !time.nextStop && time.today && (
        <div class="now-current">
          <div class="now-label">Free time</div>
          <div class="now-purpose">No more stops today</div>
        </div>
      )}
    </div>
  );
}