"use client";

import { useTransition } from "react";
import { deleteMileageTripAction } from "@/lib/actions/mileage";
import { formatDateDE } from "@/lib/orderConstants";

const fmt = (n: number) => new Intl.NumberFormat("de-DE", { style: "currency", currency: "EUR" }).format(n);

export type MileageTripRow = { id: string; date: string; km: number; ratePerKm: number; amount: number; purpose: string };

function DeleteTripButton({ tripId }: { tripId: string }) {
  const [pending, startTransition] = useTransition();
  return (
    <button
      disabled={pending}
      onClick={() => {
        if (confirm("Diese Fahrt wirklich löschen?")) startTransition(() => deleteMileageTripAction(tripId));
      }}
      className="text-xs text-red-400/80 hover:text-red-400 transition-colors disabled:opacity-50"
    >
      Löschen
    </button>
  );
}

export function MileageTripLog({ trips, yearTotalKm, yearTotalAmount }: { trips: MileageTripRow[]; yearTotalKm: number; yearTotalAmount: number }) {
  return (
    <div className="mt-8">
      <div className="flex items-center justify-between mb-3">
        <p className="text-xs uppercase tracking-[0.1em] text-[var(--rk-ink-muted)]">Fahrtenbuch</p>
        <p className="text-xs text-[var(--rk-ink-muted)]">
          Dieses Jahr: {yearTotalKm.toLocaleString("de-DE")} km · {fmt(yearTotalAmount)}
        </p>
      </div>
      <div className="flex flex-col gap-2">
        {trips.map((trip) => (
          <div
            key={trip.id}
            className="bg-[var(--rk-surface)] border border-white/10 rounded-xl px-4 py-3 flex items-center justify-between gap-3"
          >
            <div className="min-w-0">
              <p className="text-xs text-[var(--rk-ink-muted)]">{formatDateDE(new Date(trip.date))}</p>
              <p className="text-sm">
                {trip.km} km × {trip.ratePerKm.toFixed(2)} €/km{trip.purpose ? ` — ${trip.purpose}` : ""}
              </p>
            </div>
            <div className="text-right shrink-0 flex items-center gap-3">
              <p className="text-sm font-medium">{fmt(trip.amount)}</p>
              <DeleteTripButton tripId={trip.id} />
            </div>
          </div>
        ))}
        {trips.length === 0 && <p className="text-sm text-[var(--rk-ink-muted)]">Noch keine Fahrten im Fahrtenbuch erfasst.</p>}
      </div>
    </div>
  );
}