import Link from "next/link";
import { notFound } from "next/navigation";
import { prisma } from "@/lib/prisma";
import { requireAgency } from "@/lib/auth";
import { formatDate, money } from "@/lib/format";
import { countryName, countryFlag, COUNTRIES } from "@/lib/countries";
import TripForm, { TripData } from "../TripForm";
import CollapsibleCard from "@/components/CollapsibleCard";
import AssignTravelerSearch from "./AssignTravelerSearch";
import {
  addItineraryDay,
  deleteItineraryDay,
  addItineraryItem,
  deleteItineraryItem,
  addEmergencyNumber,
  deleteEmergencyNumber,
  unassignTraveler,
} from "../../actions";

export default async function TripDetail({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const { agency } = await requireAgency();

  const trip = await prisma.trip.findFirst({
    where: { id, agencyId: agency.id },
    include: {
      itineraryDays: { orderBy: { order: "asc" }, include: { items: { orderBy: { order: "asc" } } } },
      emergencyNumbers: true,
      assignments: { include: { traveler: true, payments: true } },
    },
  });
  if (!trip) notFound();

  const assignedIds = new Set(trip.assignments.map((a) => a.travelerId));
  const available = await prisma.traveler.findMany({
    where: { agencyId: agency.id, id: { notIn: Array.from(assignedIds) } },
    orderBy: { firstName: "asc" },
  });

  const tripData: TripData = {
    ...trip,
    startDate: trip.startDate?.toISOString() ?? null,
    endDate: trip.endDate?.toISOString() ?? null,
  };

  return (
    <div className="space-y-6">
      <Link href="/agency/trips" className="text-sm text-blue-600">← Viajes</Link>

      <div className="card p-5 sm:p-6">
        <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
          <div>
            <h1 className="text-2xl font-bold">{trip.name}</h1>
            <p className="text-slate-500">
              {countryFlag(trip.originCountry)} {countryName(trip.originCountry)} →{" "}
              {countryFlag(trip.destinationCountry)} {countryName(trip.destinationCountry)}
            </p>
            <p className="mt-1 text-sm text-slate-400">
              {formatDate(trip.startDate)} – {formatDate(trip.endDate)} · Costo base {money(trip.baseCost)}
              {trip.exchangeRate ? ` · TC ${trip.exchangeRate} ${trip.currencyFrom}/${trip.currencyTo}` : ""}
            </p>
            {trip.description ? <p className="mt-2 text-sm text-slate-600">{trip.description}</p> : null}
          </div>
          <TripForm trip={tripData} />
        </div>
      </div>

      <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
        {/* Itinerario */}
        <div className="space-y-4 lg:col-span-2">
          <div className="card p-5">
            <h2 className="mb-3 font-semibold">📅 Itinerario</h2>
            <div className="space-y-4">
              {trip.itineraryDays.map((day) => (
                <div key={day.id} className="rounded-xl ring-1 ring-slate-200">
                  <div className="flex items-center justify-between bg-slate-50 px-3 py-2">
                    <div className="font-medium">
                      {day.title} <span className="text-xs text-slate-400">{day.date ? formatDate(day.date) : ""}</span>
                    </div>
                    <form action={deleteItineraryDay}>
                      <input type="hidden" name="tripId" value={trip.id} />
                      <input type="hidden" name="id" value={day.id} />
                      <button className="text-xs text-red-400 hover:text-red-600">Eliminar día</button>
                    </form>
                  </div>
                  <div className="space-y-1 p-3">
                    {day.items.map((it) => (
                      <div key={it.id} className="flex items-start justify-between border-b border-slate-50 pb-1 text-sm">
                        <div>
                          <span className="font-medium">{it.time ? `${it.time} · ` : ""}{it.title}</span>
                          {it.location ? <span className="text-slate-400"> @ {it.location}</span> : null}
                          {it.description ? <p className="text-xs text-slate-500">{it.description}</p> : null}
                        </div>
                        <form action={deleteItineraryItem}>
                          <input type="hidden" name="tripId" value={trip.id} />
                          <input type="hidden" name="id" value={it.id} />
                          <button className="text-red-400 hover:text-red-600">✕</button>
                        </form>
                      </div>
                    ))}
                    <form action={addItineraryItem} className="mt-2 grid grid-cols-1 gap-2 sm:grid-cols-12">
                      <input type="hidden" name="tripId" value={trip.id} />
                      <input type="hidden" name="dayId" value={day.id} />
                      <input name="time" placeholder="10:00" className="input sm:col-span-2" />
                      <input name="title" placeholder="Actividad" required className="input sm:col-span-3" />
                      <input name="location" placeholder="Lugar" className="input sm:col-span-3" />
                      <input name="description" placeholder="Detalle" className="input sm:col-span-3" />
                      <button className="btn-primary text-sm sm:col-span-1">+</button>
                    </form>
                  </div>
                </div>
              ))}
            </div>

            <form action={addItineraryDay} className="mt-4 grid grid-cols-1 gap-2 rounded-lg bg-slate-50 p-3 sm:grid-cols-12">
              <input type="hidden" name="tripId" value={trip.id} />
              <input name="title" placeholder="Título del día (ej. Día 1 - Llegada)" className="input sm:col-span-7" />
              <input name="date" type="date" className="input sm:col-span-3" />
              <button className="btn-primary text-sm sm:col-span-2">+ Agregar día</button>
            </form>
          </div>
        </div>

        {/* Lateral: asignaciones + emergencias */}
        <div className="space-y-4">
          <CollapsibleCard
            title={`👥 Viajeros asignados (${trip.assignments.length})`}
            defaultOpen={trip.assignments.length <= 5}
          >
            <div className="space-y-2">
              {trip.assignments.length === 0 ? (
                <p className="text-sm text-slate-400">Aún no hay viajeros asignados.</p>
              ) : (
                trip.assignments.map((a) => (
                  <div key={a.id} className="flex items-center justify-between rounded-lg bg-slate-50 p-2 text-sm">
                    <Link href={`/agency/travelers/${a.travelerId}`} className="font-medium text-blue-600">
                      {a.traveler.firstName} {a.traveler.lastName}
                    </Link>
                    <div className="flex items-center gap-2">
                      <span className="text-slate-500">{money(a.cost)}</span>
                      <form action={unassignTraveler}>
                        <input type="hidden" name="tripId" value={trip.id} />
                        <input type="hidden" name="assignmentId" value={a.id} />
                        <button className="text-red-400 hover:text-red-600">✕</button>
                      </form>
                    </div>
                  </div>
                ))
              )}
            </div>
            <div className="mt-3 border-t border-slate-100 pt-3">
              <AssignTravelerSearch
                tripId={trip.id}
                baseCost={trip.baseCost}
                available={available.map((t) => ({
                  id: t.id,
                  firstName: t.firstName,
                  lastName: t.lastName,
                }))}
              />
            </div>
          </CollapsibleCard>

          <CollapsibleCard
            title={`🚨 Teléfonos de emergencia (${trip.emergencyNumbers.length})`}
            defaultOpen={trip.emergencyNumbers.length <= 5}
          >
            <div className="space-y-2">
              {trip.emergencyNumbers.length === 0 ? (
                <p className="text-sm text-slate-400">Sin teléfonos registrados.</p>
              ) : (
                trip.emergencyNumbers.map((n) => (
                  <div key={n.id} className="flex items-center justify-between rounded-lg bg-slate-50 p-2 text-sm">
                    <span>{countryFlag(n.country)} <b>{n.label}</b>: {n.phone}</span>
                    <form action={deleteEmergencyNumber}>
                      <input type="hidden" name="tripId" value={trip.id} />
                      <input type="hidden" name="id" value={n.id} />
                      <button className="text-red-400 hover:text-red-600">✕</button>
                    </form>
                  </div>
                ))
              )}
            </div>
            <form action={addEmergencyNumber} className="mt-3 grid grid-cols-2 gap-2 border-t border-slate-100 pt-3">
              <input type="hidden" name="tripId" value={trip.id} />
              <input name="label" placeholder="Policía" className="input" />
              <input name="phone" placeholder="911" className="input" />
              <select name="country" defaultValue={trip.destinationCountry ?? ""} className="input col-span-2">
                <option value="">País (opcional)</option>
                {COUNTRIES.map((c) => <option key={c.code} value={c.code}>{c.flag} {c.name}</option>)}
              </select>
              <button className="btn-primary col-span-2 text-sm">+ Agregar teléfono</button>
            </form>
          </CollapsibleCard>
        </div>
      </div>
    </div>
  );
}