import { useState } from "preact/hooks";
import type { Trip, SafetyData } from "../../lib/types";
import type { UserLocation } from "../../lib/use-location";
import { haversineKm, formatDistance } from "../../lib/geo";
import { PlaceCard } from "../shared/PlaceCard";
import { OfflineButton } from "../OfflineButton";

export function SafetyTab({ safety, location, trip }: { safety: SafetyData; location: UserLocation | null; trip: Trip }) {
  const [expandedHospital, setExpandedHospital] = useState<number | null>(null);

  const hospitals = location
    ? [...safety.hospitals].sort((a, b) => {
        const da = haversineKm({ lat: location.lat, lng: location.lng }, { lat: a.lat, lng: a.lng });
        const db = haversineKm({ lat: location.lat, lng: location.lng }, { lat: b.lat, lng: b.lng });
        return da - db;
      })
    : safety.hospitals;

  return (
    <div class="safety-tab">
      {safety.cellCoverage && safety.cellCoverage.length > 0 && (
        <div class="safety-section">
          <div class="itin-section-label">Cell Service Along Route</div>
          <div class="cell-coverage-card">
            {safety.cellCoverage.map((seg, i) => (
              <div key={i} class="cell-row">
                <span class="cell-segment">{seg.segment}</span>
                <span class={`cell-status cell-${seg.status}`}>
                  {seg.status === "full" ? "FULL" : seg.status === "spotty" ? "SPOTTY" : "NO SERVICE"}
                </span>
              </div>
            ))}
          </div>
        </div>
      )}

      {safety.crashProtocol && safety.crashProtocol.length > 0 && (
        <div class="safety-section">
          <div class="itin-section-label">If You Crash or Break Down</div>
          <div class="crash-steps">
            {safety.crashProtocol.map((step, i) => (
              <div key={i} class="crash-step">
                <div class="crash-step-num">{i + 1}</div>
                <div class="crash-step-text">{step}</div>
              </div>
            ))}
          </div>
        </div>
      )}

      {hospitals.length > 0 && (
        <div class="safety-section">
          <div class="itin-section-label">
            Nearest Hospitals {location && "(sorted by distance)"}
          </div>
          <div class="safety-cards">
            {hospitals.map((h, i) => (
              <PlaceCard
                key={h.name}
                place={h}
                expanded={expandedHospital === i}
                onToggle={() =>
                  setExpandedHospital(expandedHospital === i ? null : i)
                }
                location={location}
              />
            ))}
          </div>
        </div>
      )}

      {safety.contacts && safety.contacts.length > 0 && (
        <div class="safety-section">
          <div class="itin-section-label">Key Contacts</div>
          <div class="contact-cards">
            {safety.contacts.map((c, i) => (
              <div key={i} class="contact-card">
                <div class="contact-name">{c.name}</div>
                {c.notes && <div class="contact-notes">{c.notes}</div>}
                <a href={`tel:${c.phone}`} class="contact-phone">{c.phone}</a>
              </div>
            ))}
          </div>
        </div>
      )}

      {safety.checklist && safety.checklist.length > 0 && (
        <div class="safety-section">
          <div class="itin-section-label">Before You Leave (Solo Safety Checklist)</div>
          <ul class="safety-checklist">
            {safety.checklist.map((item, i) => (
              <li key={i}>{item}</li>
            ))}
          </ul>
        </div>
      )}

      <div class="safety-section">
        <div class="itin-section-label">Offline Mode</div>
        <OfflineButton trip={trip} />
      </div>
    </div>
  );
}