web/src/pages/Routes.tsx

import { Suspense, lazy, useCallback, useEffect, useMemo, useState } from "react";
import { useBranding } from "../BrandingContext.js";
import type { RouteMapStop } from "../components/RouteMap.js";

// Leaflet is heavy and only needed on this page — load it as a separate chunk.
const RouteMap = lazy(() => import("../components/RouteMap.js"));

// ─── Types (mirror groombook/api /api/routes responses) ─────────────────────────

type RouteStatus = "draft" | "optimized" | "in_progress" | "completed";

interface RouteRow {
  id: string;
  staffId: string;
  routeDate: string;
  status: RouteStatus;
  totalTravelMins: number | null;
  totalDistanceKm: string | null;
}

interface ConflictFlags {
  hasConflict: boolean;
}

interface RouteStop {
  id: string;
  appointmentId: string;
  stopOrder: number;
  latitude: number;
  longitude: number;
  travelMinsFromPrev: number | null;
  travelDistanceKmFromPrev: string | null;
  bufferMins: number;
  appointmentStartTime: string;
  appointmentEndTime: string;
  appointmentStatus: string;
  clientId: string;
  clientName: string;
  clientAddress: string | null;
  conflict: ConflictFlags;
}

interface RouteResponse {
  route: RouteRow;
  stops: RouteStop[];
  hasConflicts: boolean;
  conflictCount: number;
  warnings?: string[];
  skipped?: Array<{ appointmentId: string; clientName: string; reason: string }>;
}

interface StaffMember {
  id: string;
  name: string;
  role: "groomer" | "receptionist" | "manager";
  active: boolean;
}

// ─── Helpers ────────────────────────────────────────────────────────────────────

function todayIso(): string {
  return new Date().toISOString().slice(0, 10);
}

function fmtDuration(mins: number | null | undefined): string {
  if (mins == null) return "—";
  if (mins < 60) return `${mins} min`;
  const h = Math.floor(mins / 60);
  const m = mins % 60;
  return m === 0 ? `${h} h` : `${h} h ${m} min`;
}

function fmtTime(iso: string): string {
  const d = new Date(iso);
  if (Number.isNaN(d.getTime())) return iso;
  return d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
}

const STATUS_STYLES: Record<RouteStatus, { bg: string; fg: string; label: string }> = {
  draft: { bg: "#f1f5f9", fg: "#475569", label: "Draft" },
  optimized: { bg: "#ecfdf5", fg: "#047857", label: "Optimized" },
  in_progress: { bg: "#eff6ff", fg: "#1d4ed8", label: "In progress" },
  completed: { bg: "#f5f3ff", fg: "#6d28d9", label: "Completed" },
};

function StatusBadge({ status }: { status: RouteStatus }) {
  const s = STATUS_STYLES[status] ?? STATUS_STYLES.draft;
  return (
    <span
      style={{
        background: s.bg,
        color: s.fg,
        borderRadius: 999,
        padding: "0.2rem 0.7rem",
        fontSize: 12,
        fontWeight: 600,
        textTransform: "none",
      }}
    >
      {s.label}
    </span>
  );
}

const inputStyle: React.CSSProperties = {
  padding: "0.4rem 0.6rem",
  borderRadius: 6,
  border: "1px solid #cbd5e1",
  fontSize: 14,
};

// ─── Page ───────────────────────────────────────────────────────────────────────

export function RoutesPage() {
  const { branding } = useBranding();
  const primaryColor = branding.primaryColor || "#4f8a6f";

  const [me, setMe] = useState<StaffMember | null>(null);
  const [meLoaded, setMeLoaded] = useState(false);
  const [groomers, setGroomers] = useState<StaffMember[]>([]);
  const [staffId, setStaffId] = useState<string>("");
  const [date, setDate] = useState<string>(todayIso());

  const [data, setData] = useState<RouteResponse | null>(null);
  const [loading, setLoading] = useState(false);
  const [optimizing, setOptimizing] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const isGroomer = me?.role === "groomer";

  // Resolve the current staff member; groomers are pinned to their own route.
  useEffect(() => {
    fetch("/api/staff/me")
      .then((r) => (r.ok ? r.json() : null))
      .then((row: StaffMember | null) => {
        setMe(row);
        if (row?.role === "groomer") setStaffId(row.id);
      })
      .catch(() => setMe(null))
      .finally(() => setMeLoaded(true));
  }, []);

  // Managers / receptionists pick a groomer; groomers never see the selector.
  useEffect(() => {
    if (!meLoaded || isGroomer) return;
    fetch("/api/staff")
      .then((r) => (r.ok ? r.json() : []))
      .then((rows: StaffMember[]) => {
        const gs = rows.filter((s) => s.active && s.role === "groomer");
        setGroomers(gs);
        setStaffId((cur) => cur || gs[0]?.id || "");
      })
      .catch(() => setGroomers([]));
  }, [meLoaded, isGroomer]);

  const loadRoute = useCallback(async () => {
    if (!staffId || !date) return;
    setLoading(true);
    setError(null);
    try {
      const r = await fetch(
        `/api/routes/daily?staffId=${encodeURIComponent(staffId)}&date=${encodeURIComponent(date)}`
      );
      if (!r.ok) {
        const body = await r.json().catch(() => ({}));
        throw new Error(body.error || `Failed to load route (${r.status})`);
      }
      setData(await r.json());
    } catch (e) {
      setData(null);
      setError(e instanceof Error ? e.message : "Failed to load route");
    } finally {
      setLoading(false);
    }
  }, [staffId, date]);

  useEffect(() => {
    void loadRoute();
  }, [loadRoute]);

  const optimize = useCallback(async () => {
    if (!staffId || !date) return;
    setOptimizing(true);
    setError(null);
    try {
      const r = await fetch("/api/routes/optimize", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ staffId, date }),
      });
      if (!r.ok) {
        const body = await r.json().catch(() => ({}));
        throw new Error(body.error || `Optimization failed (${r.status})`);
      }
      setData(await r.json());
    } catch (e) {
      setError(e instanceof Error ? e.message : "Optimization failed");
    } finally {
      setOptimizing(false);
    }
  }, [staffId, date]);

  const mapStops: RouteMapStop[] = useMemo(
    () =>
      (data?.stops ?? []).map((s) => ({
        id: s.id,
        stopOrder: s.stopOrder,
        latitude: s.latitude,
        longitude: s.longitude,
        clientName: s.clientName,
      })),
    [data]
  );

  const stops = data?.stops ?? [];
  const route = data?.route ?? null;

  return (
    <div style={{ padding: "1.25rem", maxWidth: 1280, margin: "0 auto" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 12, flexWrap: "wrap", marginBottom: "1rem" }}>
        <h1 style={{ fontSize: 22, fontWeight: 700, color: "#1a202c", margin: 0 }}>Route Planner</h1>
        {route && <StatusBadge status={route.status} />}
      </div>

      {/* Controls */}
      <div style={{ display: "flex", gap: 12, flexWrap: "wrap", alignItems: "flex-end", marginBottom: "1rem" }}>
        <label style={{ display: "flex", flexDirection: "column", gap: 4, fontSize: 12, color: "#4b5563", fontWeight: 600 }}>
          Date
          <input type="date" value={date} onChange={(e) => setDate(e.target.value)} style={inputStyle} />
        </label>

        {!isGroomer && (
          <label style={{ display: "flex", flexDirection: "column", gap: 4, fontSize: 12, color: "#4b5563", fontWeight: 600 }}>
            Groomer
            <select
              value={staffId}
              onChange={(e) => setStaffId(e.target.value)}
              style={{ ...inputStyle, minWidth: 180 }}
            >
              {groomers.length === 0 && <option value="">No groomers</option>}
              {groomers.map((g) => (
                <option key={g.id} value={g.id}>
                  {g.name}
                </option>
              ))}
            </select>
          </label>
        )}

        <button
          onClick={optimize}
          disabled={optimizing || !staffId}
          style={{
            padding: "0.5rem 1.1rem",
            borderRadius: 6,
            border: "none",
            background: primaryColor,
            color: "#fff",
            fontWeight: 600,
            fontSize: 14,
            cursor: optimizing || !staffId ? "wait" : "pointer",
            opacity: optimizing || !staffId ? 0.7 : 1,
          }}
        >
          {optimizing ? "Optimizing…" : "Optimize"}
        </button>
      </div>

      {error && (
        <div style={{ background: "#fef2f2", border: "1px solid #fecaca", borderRadius: 6, padding: "0.6rem 0.8rem", color: "#991b1b", fontSize: 13, marginBottom: "1rem" }}>
          {error}
        </div>
      )}

      {data?.warnings && data.warnings.length > 0 && (
        <div style={{ background: "#fffbeb", border: "1px solid #fde68a", borderRadius: 6, padding: "0.6rem 0.8rem", color: "#92400e", fontSize: 13, marginBottom: "1rem" }}>
          {data.warnings.map((w, i) => (
            <div key={i}>{w}</div>
          ))}
        </div>
      )}

      {/* Summary */}
      <div style={{ display: "flex", gap: 24, flexWrap: "wrap", marginBottom: "1rem", padding: "0.8rem 1rem", background: "#fff", borderRadius: 8, border: "1px solid #e2e8f0" }}>
        <Summary label="Stops" value={String(stops.length)} />
        <Summary label="Total travel time" value={fmtDuration(route?.totalTravelMins)} />
        <Summary label="Total distance" value={route?.totalDistanceKm != null ? `${route.totalDistanceKm} km` : "—"} />
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 1.5fr) minmax(280px, 1fr)", gap: 16, alignItems: "stretch" }}>
        {/* Map */}
        <div style={{ height: 540, background: "#e5e7eb", borderRadius: 8, overflow: "hidden", border: "1px solid #e2e8f0" }}>
          {mapStops.length > 0 ? (
            <Suspense fallback={<Centered>Loading map…</Centered>}>
              <RouteMap stops={mapStops} primaryColor={primaryColor} />
            </Suspense>
          ) : (
            <Centered>{loading ? "Loading route…" : "No stops to display. Click Optimize to build the route."}</Centered>
          )}
        </div>

        {/* Stop list panel */}
        <div style={{ display: "flex", flexDirection: "column", gap: 10, maxHeight: 540, overflowY: "auto" }}>
          {stops.length === 0 && !loading && (
            <div style={{ color: "#6b7280", fontSize: 14, padding: "1rem" }}>No stops for this day.</div>
          )}
          {stops.map((s) => (
            <div
              key={s.id}
              style={{
                background: "#fff",
                border: `1px solid ${s.conflict?.hasConflict ? "#fca5a5" : "#e2e8f0"}`,
                borderRadius: 8,
                padding: "0.7rem 0.85rem",
                display: "flex",
                gap: 10,
              }}
            >
              <div
                style={{
                  flexShrink: 0,
                  width: 26,
                  height: 26,
                  borderRadius: "50%",
                  background: primaryColor,
                  color: "#fff",
                  fontSize: 13,
                  fontWeight: 700,
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                }}
              >
                {s.stopOrder}
              </div>
              <div style={{ minWidth: 0, flex: 1 }}>
                <div style={{ display: "flex", justifyContent: "space-between", gap: 8 }}>
                  <strong style={{ fontSize: 14, color: "#1a202c" }}>{s.clientName}</strong>
                  <span style={{ fontSize: 13, color: "#4b5563", whiteSpace: "nowrap" }}>{fmtTime(s.appointmentStartTime)}</span>
                </div>
                <div style={{ fontSize: 12, color: "#6b7280", marginTop: 2 }}>{s.clientAddress || "No address on file"}</div>
                <div style={{ fontSize: 12, color: "#6b7280", marginTop: 4 }}>
                  {s.stopOrder === 1 || s.travelMinsFromPrev == null
                    ? "Start of route"
                    : `${fmtDuration(s.travelMinsFromPrev)} travel from previous`}
                </div>
                {s.conflict?.hasConflict && (
                  <div style={{ fontSize: 12, color: "#b91c1c", marginTop: 4, fontWeight: 600 }}>
                    ⚠ Tight schedule — travel + buffer may exceed the gap
                  </div>
                )}
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function Summary({ label, value }: { label: string; value: string }) {
  return (
    <div>
      <div style={{ fontSize: 12, color: "#6b7280", fontWeight: 600 }}>{label}</div>
      <div style={{ fontSize: 18, color: "#1a202c", fontWeight: 700 }}>{value}</div>
    </div>
  );
}

function Centered({ children }: { children: React.ReactNode }) {
  return (
    <div style={{ height: "100%", display: "flex", alignItems: "center", justifyContent: "center", color: "#6b7280", fontSize: 14, textAlign: "center", padding: "1rem" }}>
      {children}
    </div>
  );
}