"use client";

import { useActionState, useState } from "react";
import { createFinanceEntryAction } from "@/lib/actions/financeEntry";
import { EXPENSE_CATEGORIES, EXPENSE_CATEGORY_LABELS } from "@/lib/expenseConstants";

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

export function NewFinanceEntryForm() {
  const [state, formAction, pending] = useActionState(createFinanceEntryAction, {});
  const [type, setType] = useState<"income" | "expense">("expense");

  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)]">Typ</span>
          <select
            name="type"
            value={type}
            onChange={(e) => setType(e.target.value as "income" | "expense")}
            className="bg-[var(--rk-bg)] border border-white/15 rounded-lg px-3 py-2 focus:outline-none focus:border-white/50"
          >
            <option value="expense">Ausgabe</option>
            <option value="income">Einnahme</option>
          </select>
        </label>
        <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>
      </div>

      {type === "expense" && (
        <label className="flex flex-col gap-1.5 text-sm">
          <span className="text-[var(--rk-ink-muted)]">Kategorie</span>
          <select
            name="category"
            defaultValue="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>
      )}

      <label className="flex flex-col gap-1.5 text-sm">
        <span className="text-[var(--rk-ink-muted)]">Beschreibung</span>
        <input
          name="description"
          required
          placeholder={type === "income" ? "z. B. Workshop-Honorar, Print-Verkauf" : "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)]">{type === "expense" ? "Betrag (brutto, €)" : "Betrag (€)"}</span>
          <input
            type="number"
            name="amount"
            step="0.01"
            min="0"
            required
            className="bg-transparent border border-white/15 rounded-lg px-3 py-2 focus:outline-none focus:border-white/50"
          />
        </label>
        {type === "expense" && (
          <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>

      {type === "expense" && (
        <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"
        >
          {type === "income" ? "Einnahme hinzufügen" : "Ausgabe hinzufügen"}
        </button>
        {state.error && <span className="text-sm text-red-400">{state.error}</span>}
      </div>
    </form>
  );
}