"use client";

import { useActionState, useState } from "react";
import { NewExpenseForm } from "@/components/admin/NewExpenseForm";
import { createMileageTripAction } from "@/lib/actions/mileage";

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

function todayISO() {
  return new Date().toISOString().slice(0, 10);
}

export function MileageCalculator({ defaultRate, canLogExpense }: { defaultRate: number; canLogExpense: boolean }) {
  const [km, setKm] = useState("");
  const [rate, setRate] = useState(String(defaultRate));
  const [purpose, setPurpose] = useState("");
  const [tripState, tripFormAction, tripPending] = useActionState(createMileageTripAction, {});

  const kmNum = Number(km.replace(",", "."));
  const rateNum = Number(rate.replace(",", "."));
  const amount = Number.isFinite(kmNum) && Number.isFinite(rateNum) ? kmNum * rateNum : 0;

  const description = `Fahrtkosten: ${km || 0} km × ${rate || 0} €/km${purpose ? ` — ${purpose}` : ""}`;

  return (
    <div className="flex flex-col gap-8">
      <div className="bg-[var(--rk-surface)] border border-white/10 rounded-2xl p-6 flex flex-col gap-4">
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <label className="flex flex-col gap-1.5 text-sm">
            <span className="text-[var(--rk-ink-muted)]">Gefahrene Kilometer</span>
            <input
              type="number"
              min="0"
              step="0.1"
              value={km}
              onChange={(e) => setKm(e.target.value)}
              placeholder="z. B. 42"
              className="bg-transparent border border-white/15 rounded-lg px-3 py-2 focus:outline-none focus:border-white/50"
            />
          </label>
          <label className="flex flex-col gap-1.5 text-sm">
            <span className="text-[var(--rk-ink-muted)]">€ pro km</span>
            <input
              type="number"
              min="0"
              step="0.01"
              value={rate}
              onChange={(e) => setRate(e.target.value)}
              className="bg-transparent border border-white/15 rounded-lg px-3 py-2 focus:outline-none focus:border-white/50"
            />
          </label>
        </div>

        <label className="flex flex-col gap-1.5 text-sm">
          <span className="text-[var(--rk-ink-muted)]">Anlass (optional)</span>
          <input
            type="text"
            value={purpose}
            onChange={(e) => setPurpose(e.target.value)}
            placeholder="z. B. Cosplay-Shooting Bielefeld, Fahrt zum Kunden"
            className="bg-transparent border border-white/15 rounded-lg px-3 py-2 focus:outline-none focus:border-white/50"
          />
        </label>

        <div className="pt-2 border-t border-white/10">
          <p className="text-xs uppercase tracking-[0.1em] text-[var(--rk-ink-muted)] mb-1">Ergebnis</p>
          <p className="text-2xl text-[var(--rk-ink)]">{fmt(amount)}</p>
        </div>

        {canLogExpense && kmNum > 0 && (
          <form action={tripFormAction} className="pt-2 border-t border-white/10 flex flex-wrap items-center gap-3">
            <input type="hidden" name="date" value={todayISO()} />
            <input type="hidden" name="km" value={km} />
            <input type="hidden" name="ratePerKm" value={rate} />
            <input type="hidden" name="purpose" value={purpose} />
            <button
              type="submit"
              disabled={tripPending}
              className="border border-white/30 rounded-lg px-4 py-2 text-xs uppercase tracking-[0.15em] hover:border-white disabled:opacity-50"
            >
              Fahrt im Fahrtenbuch speichern
            </button>
            {tripState.error && <span className="text-xs text-red-400">{tripState.error}</span>}
          </form>
        )}
      </div>

      {canLogExpense && kmNum > 0 && (
        <div>
          <p className="text-xs uppercase tracking-[0.1em] text-[var(--rk-ink-muted)] mb-3">Als Ausgabe erfassen</p>
          <NewExpenseForm
            key={`${km}-${rate}-${purpose}`}
            defaultCategory="travel"
            defaultDescription={description}
            defaultAmount={Number(amount.toFixed(2))}
          />
        </div>
      )}
    </div>
  );
}