import { FormEvent, useCallback, useEffect, useState } from "react";
import { Link, useParams } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { api } from "../api/client";
import type { Booking, CheckoutBookingResult, RegisterReturnResult, VehicleDetail } from "../api/types";
import { useDemoManifest } from "../context/DemoManifestContext";
import { useLocaleFormat } from "../i18n/format";
import { StatusBadge } from "../components/Badge";
import { ReturnForm, ReturnResultPanel } from "../components/ReturnForm";
import { Icon } from "../components/Icons";
import { ErrorState, LoadingState, PageHeader } from "../components/PageChrome";
import { PRODUCT_NAME } from "../product";
import { describeApiError, type ApiErrorInfo } from "../api/errorMessages";
import { ApiErrorNotice } from "../components/PageChrome";
import { CheckoutForm } from "../components/CheckoutForm";

export function BookingDetail() {
  const { t } = useTranslation(["bookings", "returns", "errors"]);
  const { formatDateTime, formatNumber } = useLocaleFormat();
  const { publicRef } = useParams<{ publicRef: string }>();
  const { manifest, loading: manifestLoading } = useDemoManifest();
  const [booking, setBooking] = useState<Booking | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [returnResult, setReturnResult] = useState<RegisterReturnResult | null>(null);
  const [canonicalOdometerKm, setCanonicalOdometerKm] = useState<number | null>(null);
  const [cancelReason, setCancelReason] = useState("");
  const [cancelling, setCancelling] = useState(false);
  const [actionError, setActionError] = useState<ApiErrorInfo | null>(null);
  const [checkoutResult, setCheckoutResult] = useState<CheckoutBookingResult | null>(null);
  const [requirementsConfirmation, setRequirementsConfirmation] = useState("");
  const [confirmingRequirements, setConfirmingRequirements] = useState(false);

  const load = useCallback(() => {
    if (!publicRef) return;
    api
      .get<Booking>(`/api/v1/bookings/${publicRef}`)
      .then(setBooking)
      .catch(() => setError(t("detail.notFound")));
  }, [publicRef]);

  useEffect(() => {
    setBooking(null);
    setError(null);
    setReturnResult(null);
    load();
  }, [load]);

  // The odometer-regression demo scenario supplies its own suspicious reading (per the
  // brief: never ask a demo visitor to invent one) -- only fetched for that one known
  // scenario booking, not for every return.
  const isReturnAnomalyScenario =
    manifest?.scenarios.find((s) => s.id === "return-anomaly")?.start_path === `/bookings/${publicRef}`;

  useEffect(() => {
    setCanonicalOdometerKm(null);
    if (!isReturnAnomalyScenario || !booking) return;
    api
      .get<VehicleDetail>(`/api/v1/vehicles/${booking.vehicle_ref}`)
      .then((vehicle) => setCanonicalOdometerKm(vehicle.odometer_km))
      .catch(() => setCanonicalOdometerKm(null));
  }, [isReturnAnomalyScenario, booking]);

  function handleRegistered(result: RegisterReturnResult) {
    setReturnResult(result);
    load();
  }

  async function cancelBooking(event: FormEvent) {
    event.preventDefault();
    if (!publicRef) return;
    setCancelling(true);
    setActionError(null);
    try {
      const updated = await api.post<Booking>(`/api/v1/bookings/${publicRef}/cancel`, { reason: cancelReason });
      setBooking(updated);
      setCancelReason("");
    } catch (err) {
      setActionError(describeApiError(t, err, "bookings:detail.cancelFailed"));
    } finally {
      setCancelling(false);
    }
  }

  function handleCheckout(result: CheckoutBookingResult) {
    setCheckoutResult(result);
    load();
  }

  async function confirmRequirements(event: FormEvent) {
    event.preventDefault();
    if (!publicRef) return;
    setConfirmingRequirements(true);
    setActionError(null);
    try {
      const updated = await api.post<Booking>(`/api/v1/bookings/${publicRef}/complete-requirements`, {
        confirmation: requirementsConfirmation,
      });
      setBooking(updated);
      setRequirementsConfirmation("");
    } catch (err) {
      setActionError(describeApiError(t, err, "bookings:detail.requirementsFailed"));
    } finally {
      setConfirmingRequirements(false);
    }
  }

  if (error) return <ErrorState message={error} />;
  if (!booking) return <LoadingState label={t("detail.loading")} />;

  return (
    <div className="page">
      <Link className="back-link" to="/bookings"><Icon name="arrow-left" /> {t("detail.backLink")}</Link>
      <PageHeader eyebrow={t("detail.eyebrow")} title={booking.public_ref} description={`${booking.customer_name} · ${booking.vehicle_ref}`} actions={<StatusBadge status={booking.status} label={t(`statuses.${booking.status}`, { defaultValue: booking.status })} />} />
      <section className="record-surface" aria-label={t("detail.eyebrow")}><dl className="detail-grid">
        <div><dt>{t("detail.customer")}</dt><dd>{booking.customer_name} ({booking.customer_ref})</dd></div>
        <div><dt>{t("detail.vehicle")}</dt><dd><Link to={`/vehicles/${booking.vehicle_ref}`}>{booking.vehicle_ref}</Link></dd></div>
        <div><dt>{t("detail.starts")}</dt><dd>{formatDateTime(booking.starts_at)}</dd></div>
        <div><dt>{t("detail.ends")}</dt><dd>{formatDateTime(booking.ends_at)}</dd></div>
        <div><dt>{t("detail.startOdometer")}</dt><dd>{booking.start_odometer_km !== null ? `${formatNumber(booking.start_odometer_km)} km` : t("detail.startOdometerPending")}</dd></div>
        <div><dt>{t("detail.endOdometer")}</dt><dd>{booking.end_odometer_km !== null ? `${formatNumber(booking.end_odometer_km)} km` : t("detail.endOdometerPending")}</dd></div>
        <div><dt>{t("detail.requirementsComplete")}</dt><dd>{booking.requirements_complete ? t("detail.yes") : t("detail.no")}</dd></div>
      </dl></section>

      {booking.status === "reserved" && !booking.requirements_complete ? (
        <form className="record-surface requirements-confirmation" onSubmit={confirmRequirements}>
          <div>
            <h2>{t("detail.requirementsAction")}</h2>
            <p>{t("detail.requirementsActionDetail")}</p>
          </div>
          <ApiErrorNotice error={actionError} />
          <label>{t("detail.requirementsConfirmation")}<textarea required minLength={3} maxLength={500} value={requirementsConfirmation} onChange={(event) => setRequirementsConfirmation(event.target.value)} placeholder={t("detail.requirementsConfirmationPlaceholder")} /></label>
          <div className="form-actions"><button className="button button-primary" type="submit" disabled={confirmingRequirements || requirementsConfirmation.trim().length < 3}>{confirmingRequirements ? t("detail.requirementsSaving") : t("detail.requirementsConfirm")}</button></div>
        </form>
      ) : null}

      {booking.status === "reserved" && <form className="record-surface booking-cancel-form" onSubmit={cancelBooking}>
        <h2>{t("detail.cancelAction")}</h2>
        <ApiErrorNotice error={actionError} />
        <label>{t("detail.cancelReason")}<textarea required minLength={3} maxLength={500} value={cancelReason} onChange={(event) => setCancelReason(event.target.value)} placeholder={t("detail.cancelReasonPlaceholder")} /></label>
        <div className="form-actions"><button className="button button-danger" type="submit" disabled={cancelling || cancelReason.trim().length < 3}>{cancelling ? t("detail.cancelling") : t("detail.confirmCancel")}</button></div>
      </form>}

      {checkoutResult && <section className={`record-surface checkout-result ${checkoutResult.activated ? "success" : "warning"}`} role="status"><h2>{t(checkoutResult.activated ? "checkout.activatedTitle" : "checkout.blockedTitle")}</h2><p>{t(checkoutResult.activated ? "checkout.activatedDetail" : "checkout.blockedDetail", { inspection: checkoutResult.inspection_ref })}</p></section>}
      {!checkoutResult && booking.status === "reserved" && booking.requirements_complete && <CheckoutForm bookingRef={booking.public_ref} vehicleRef={booking.vehicle_ref} onRecorded={handleCheckout} />}

      {isReturnAnomalyScenario && !returnResult && canonicalOdometerKm !== null && (
        <section className="record-surface scenario-callout" aria-label={t("returns:scenario.ariaLabel")}>
          <Icon name="spark" />
          <div>
            <strong>{t("returns:scenario.title")}</strong>
            <p>{t("returns:scenario.body", { odometer: formatNumber(canonicalOdometerKm), productName: PRODUCT_NAME })}</p>
          </div>
        </section>
      )}

      {returnResult && <ReturnResultPanel result={returnResult} />}
      {/* Wait for the scenario's canonical odometer before mounting the form at all when
          this is the known demo scenario, so ReturnForm's suggestedOdometerKm is correct
          from its very first render -- never updated asynchronously after mount, which
          previously raced with anyone already typing into the field. */}
      {!returnResult && booking.status === "active" && (manifestLoading || (isReturnAnomalyScenario && canonicalOdometerKm === null)) && (
        <LoadingState label={t("returns:scenario.preparing")} />
      )}
      {!returnResult && booking.status === "active" && !manifestLoading && (!isReturnAnomalyScenario || canonicalOdometerKm !== null) && (
        <ReturnForm
          bookingRef={booking.public_ref}
          onRegistered={handleRegistered}
          suggestedOdometerKm={isReturnAnomalyScenario && canonicalOdometerKm !== null ? Math.max(0, canonicalOdometerKm - 50) : undefined}
        />
      )}
    </div>
  );
}