"use client";

import { useActionState } from "react";
import { updateServiceAction } from "@/lib/actions/services";
import { SHOOTING_TYPES } from "@/lib/orderConstants";
import type { ServiceDoc } from "@/models/Service";

export function EditServiceForm({
  service,
}: {
  service: Pick<ServiceDoc, "_id" | "title" | "titleEn" | "description" | "descriptionEn" | "shootingType">;
}) {
  const [state, formAction, pending] = useActionState(updateServiceAction, {});

  return (
    <form
      action={formAction}
      className="bg-[var(--rk-surface)] border border-white/10 rounded-2xl p-6 flex flex-col gap-4 max-w-xl"
    >
      <input type="hidden" name="id" value={service._id} />
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
        <Input name="title" label="Titel (DE)" defaultValue={service.title} required />
        <Input name="titleEn" label="Titel (EN)" defaultValue={service.titleEn} />
      </div>
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
        <TextArea name="description" label="Beschreibung (DE)" defaultValue={service.description} />
        <TextArea name="descriptionEn" label="Beschreibung (EN)" defaultValue={service.descriptionEn} />
      </div>
      <label className="flex flex-col gap-1 text-sm max-w-xs">
        <span className="text-xs uppercase tracking-[0.08em] text-[var(--rk-ink-muted)]">Auftragsart-Vorbelegung</span>
        <select name="shootingType" defaultValue={service.shootingType} className="bg-[var(--rk-bg)] border border-white/15 rounded-lg px-3 py-2">
          {SHOOTING_TYPES.map((t) => (
            <option key={t} value={t}>{t}</option>
          ))}
        </select>
      </label>
      {state.error && <p className="text-sm text-red-400">{state.error}</p>}
      <button
        type="submit"
        disabled={pending}
        className="self-start border border-white/30 rounded-lg px-5 py-2 text-xs uppercase tracking-[0.15em] hover:border-white disabled:opacity-50"
      >
        Speichern
      </button>
    </form>
  );
}

export function Input({ name, label, defaultValue, required }: { name: string; label: string; defaultValue?: string; required?: boolean }) {
  return (
    <label className="flex flex-col gap-1 text-sm">
      <span className="text-xs uppercase tracking-[0.08em] text-[var(--rk-ink-muted)]">{label}</span>
      <input name={name} defaultValue={defaultValue} required={required} className="bg-transparent border border-white/15 rounded-lg px-3 py-2 focus:outline-none focus:border-white/50" />
    </label>
  );
}

export function TextArea({ name, label, defaultValue }: { name: string; label: string; defaultValue?: string }) {
  return (
    <label className="flex flex-col gap-1 text-sm">
      <span className="text-xs uppercase tracking-[0.08em] text-[var(--rk-ink-muted)]">{label}</span>
      <textarea name={name} defaultValue={defaultValue} rows={3} className="bg-transparent border border-white/15 rounded-lg px-3 py-2 focus:outline-none focus:border-white/50" />
    </label>
  );
}