"use client";

import { useState } from "react";
import useSWR from "swr";

const fetcher = (url: string) => fetch(url).then((r) => r.json());

function rangeFor(preset: string): { from: string; to: string } {
  const now = new Date();
  const to = now.toISOString();
  if (preset === "today") {
    const start = new Date(now);
    start.setHours(0, 0, 0, 0);
    return { from: start.toISOString(), to };
  }
  if (preset === "yesterday") {
    const start = new Date(now);
    start.setDate(start.getDate() - 1);
    start.setHours(0, 0, 0, 0);
    const end = new Date(start);
    end.setHours(23, 59, 59, 999);
    return { from: start.toISOString(), to: end.toISOString() };
  }
  if (preset === "week") {
    const start = new Date(now);
    start.setDate(start.getDate() - 7);
    return { from: start.toISOString(), to };
  }
  return { from: new Date(now.getTime() - 24 * 60 * 60 * 1000).toISOString(), to };
}

export default function LocationHistoryPanel({ employeeId }: { employeeId: string }) {
  const [preset, setPreset] = useState("today");
  const { from, to } = rangeFor(preset);

  const { data, isLoading } = useSWR(
    `/api/location/history?employeeId=${employeeId}&from=${from}&to=${to}`,
    fetcher
  );

  return (
    <div className="rounded-xl border border-slate-800 bg-slate-900 p-5">
      <div className="flex items-center justify-between mb-4">
        <h2 className="text-lg font-medium">Location history</h2>
        <div className="flex gap-1">
          {[
            ["today", "Today"],
            ["yesterday", "Yesterday"],
            ["week", "This week"],
          ].map(([key, label]) => (
            <button
              key={key}
              onClick={() => setPreset(key)}
              className={`px-3 py-1 rounded-md text-xs ${
                preset === key ? "bg-indigo-600 text-white" : "bg-slate-800 text-slate-300"
              }`}
            >
              {label}
            </button>
          ))}
        </div>
      </div>

      {isLoading && <p className="text-sm text-slate-500">Loading…</p>}
      {data && (
        <div className="grid grid-cols-4 gap-4 text-sm mb-4">
          <div>
            <div className="text-slate-500 text-xs">Points</div>
            <div>{data.summary.count}</div>
          </div>
          <div>
            <div className="text-slate-500 text-xs">Distance</div>
            <div>{data.summary.distanceKm} km</div>
          </div>
          <div>
            <div className="text-slate-500 text-xs">Start</div>
            <div>{data.summary.startedAt ? new Date(data.summary.startedAt).toLocaleTimeString() : "—"}</div>
          </div>
          <div>
            <div className="text-slate-500 text-xs">End</div>
            <div>{data.summary.endedAt ? new Date(data.summary.endedAt).toLocaleTimeString() : "—"}</div>
          </div>
        </div>
      )}
      {data && data.points.length === 0 && (
        <p className="text-sm text-slate-500">No location points in this range.</p>
      )}
    </div>
  );
}