"use client";

import { useActionState } from "react";
import { updateInvoiceSettingsAction } from "@/lib/actions/admin";
import type { SettingsDoc } from "@/models/Settings";

function Field({
  label,
  name,
  defaultValue,
  type = "text",
  hint,
}: {
  label: string;
  name: string;
  defaultValue?: string | number;
  type?: string;
  hint?: string;
}) {
  return (
    <label className="flex flex-col gap-1.5 text-sm">
      <span className="text-[var(--rk-ink-muted)]">{label}</span>
      <input
        name={name}
        type={type}
        defaultValue={defaultValue}
        className="bg-transparent border border-white/15 rounded-lg px-3 py-2 focus:outline-none focus:border-white/50"
      />
      {hint && <span className="text-xs text-[var(--rk-ink-muted)]">{hint}</span>}
    </label>
  );
}

export function InvoiceSettingsForm({ invoiceSettings }: { invoiceSettings: SettingsDoc["invoiceSettings"] }) {
  const [state, formAction, pending] = useActionState(updateInvoiceSettingsAction, {});

  return (
    <form
      action={formAction}
      className="bg-[var(--rk-surface)] border border-white/10 rounded-2xl p-6 flex flex-col gap-5 max-w-2xl"
    >
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <Field label="Geschäftsname" name="businessName" defaultValue={invoiceSettings.businessName} />
        <Field label="E-Mail" name="email" defaultValue={invoiceSettings.email} />
      </div>
      <Field
        label="Bürgerlicher Name (Inhaber)"
        name="legalName"
        defaultValue={invoiceSettings.legalName}
        hint="Pflichtangabe nach § 14 UStG bei Einzelunternehmen mit Markennamen — erscheint zusätzlich zum Geschäftsnamen im Rechnungskopf."
      />
      <Field label="Straße & Hausnummer" name="street" defaultValue={invoiceSettings.street} />
      <div className="grid grid-cols-[8rem_1fr_6rem] gap-4">
        <Field label="PLZ" name="postCode" defaultValue={invoiceSettings.postCode} />
        <Field label="Ort" name="city" defaultValue={invoiceSettings.city} />
        <Field label="Land" name="countryCode" defaultValue={invoiceSettings.countryCode || "DE"} />
      </div>
      <Field label="Steuernummer" name="taxId" defaultValue={invoiceSettings.taxId} />

      <label className="flex items-center gap-2 text-sm">
        <input
          type="checkbox"
          name="kleinunternehmer"
          defaultChecked={invoiceSettings.kleinunternehmer}
          className="h-4 w-4"
        />
        Kleinunternehmer nach § 19 UStG (keine Umsatzsteuer ausweisen)
      </label>

      <Field
        label="USt.-Satz (%, nur relevant ohne Kleinunternehmerregelung)"
        name="vatRate"
        type="number"
        defaultValue={invoiceSettings.vatRate}
      />

      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <Field label="IBAN" name="iban" defaultValue={invoiceSettings.iban} />
        <Field label="BIC" name="bic" defaultValue={invoiceSettings.bic} />
      </div>
      <Field label="Bank" name="bankName" defaultValue={invoiceSettings.bankName} />
      <Field
        label="Kontoinhaber"
        name="accountHolderName"
        defaultValue={invoiceSettings.accountHolderName}
        hint="Name, auf den das Konto tatsächlich läuft (falls abweichend vom Geschäftsnamen) — wird als Empfänger für die Überweisung angezeigt."
      />

      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <Field label="Rechnungsnummern-Präfix" name="invoiceNumberPrefix" defaultValue={invoiceSettings.invoiceNumberPrefix} />
        <Field
          label="Nächste Rechnungsnummer"
          name="nextInvoiceNumber"
          type="number"
          defaultValue={invoiceSettings.nextInvoiceNumber}
          hint="Wird nach jeder erstellten Rechnung automatisch hochgezählt."
        />
      </div>

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