"use client";

import { useActionState } from "react";
import { createExpenseAction } from "@/lib/actions/expenses";
import { EXPENSE_CATEGORIES, EXPENSE_CATEGORY_LABELS } from "@/lib/expenseConstants";

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

export function NewExpenseForm({
  defaultCategory,
  defaultDescription,
  defaultAmount,
}: {
  defaultCategory?: (typeof EXPENSE_CATEGORIES)[number];
  defaultDescription?: string;
  defaultAmount?: number;
}) {
  const [state, formAction, pending] = useActionState(createExpenseAction, {});

  return (
    <form
      action={formAction}
      encType="multipart/form-data"
      className="bg-[var(--rk-surface)] border border-white/10 rounded-2xl p-6 flex flex-col gap-4 mb-8"
    >
      <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)]">Datum</span>
          <input
            type="date"
            name="date"
            defaultValue={todayISO()}
            required
            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)]">Kategorie</span>
          <select
            name="category"
            defaultValue={defaultCategory ?? "other"}
            className="bg-[var(--rk-bg)] border border-white/15 rounded-lg px-3 py-2 focus:outline-none focus:border-white/50"
          >
            {EXPENSE_CATEGORIES.map((c) => (
              <option key={c} value={c}>
                {EXPENSE_CATEGORY_LABELS[c]}
              </option>
            ))}
          </select>
        </label>
      </div>

      <label className="flex flex-col gap-1.5 text-sm">
        <span className="text-[var(--rk-ink-muted)]">Beschreibung</span>
        <input
          name="description"
          required
          defaultValue={defaultDescription}
          placeholder="z. B. Neues Objektiv"
          className="bg-transparent border border-white/15 rounded-lg px-3 py-2 focus:outline-none focus:border-white/50"
        />
      </label>

      <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)]">Betrag (brutto, €)</span>
          <input
            type="number"
            name="amount"
            step="0.01"
            min="0"
            required
            defaultValue={defaultAmount}
            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)]">Darin enthaltene USt. (€, optional)</span>
          <input
            type="number"
            name="vatAmount"
            step="0.01"
            min="0"
            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)]">Beleg (optional, PDF oder Bild)</span>
        <input name="receipt" type="file" accept="image/jpeg,image/png,image/webp,application/pdf" className="text-sm" />
      </label>

      <div className="flex items-center gap-3">
        <button
          type="submit"
          disabled={pending}
          className="self-start border border-white/30 rounded-lg px-4 py-2 text-xs uppercase tracking-[0.15em] hover:border-white disabled:opacity-50"
        >
          Ausgabe hinzufügen
        </button>
        {state.error && <span className="text-sm text-red-400">{state.error}</span>}
      </div>
    </form>
  );
}