"use client";

import { useActionState } from "react";

import {
  savePublicProfile,
  type PublicProfileActionState,
} from "@/app/(public)/[locale]/nalog/javni-profil/actions";

const initial: PublicProfileActionState = { ok: false, message: "" };

export function PublicProfileForm({
  defaults,
}: {
  defaults: {
    displayName: string;
    bio: string;
    avatarUrl: string;
    cityId: string;
    handle: string;
    publicProfileEnabled: boolean;
  };
}) {
  const [state, formAction, pending] = useActionState(
    savePublicProfile,
    initial,
  );

  return (
    <form action={formAction} className="space-y-5">
      <div>
        <label className="block text-sm font-semibold text-[#0c1828]">
          Prikazno ime
        </label>
        <input
          name="displayName"
          defaultValue={defaults.displayName}
          maxLength={80}
          className="mt-1 w-full rounded-xl border border-black/15 px-3 py-2 text-sm"
          placeholder="npr. Marko Marković"
        />
      </div>

      <div>
        <label className="block text-sm font-semibold text-[#0c1828]">
          Handle (adresa profila)
        </label>
        <div className="mt-1 flex items-center gap-2">
          <span className="text-sm text-[#6b7280]">/recenzent/</span>
          <input
            name="handle"
            defaultValue={defaults.handle}
            maxLength={48}
            className="w-full rounded-xl border border-black/15 px-3 py-2 text-sm"
            placeholder="marko-markovic"
          />
        </div>
        <p className="mt-1 text-xs text-[#6b7280]">
          Ako ostavite prazno, generišemo ga iz prikaznog imena.
        </p>
      </div>

      <div>
        <label className="block text-sm font-semibold text-[#0c1828]">
          Biografija
        </label>
        <textarea
          name="bio"
          defaultValue={defaults.bio}
          maxLength={600}
          rows={4}
          className="mt-1 w-full rounded-xl border border-black/15 px-3 py-2 text-sm"
          placeholder="Nekoliko reči o vama kao recenzentu…"
        />
      </div>

      <div>
        <label className="block text-sm font-semibold text-[#0c1828]">
          Avatar URL
        </label>
        <input
          name="avatarUrl"
          type="url"
          defaultValue={defaults.avatarUrl}
          className="mt-1 w-full rounded-xl border border-black/15 px-3 py-2 text-sm"
          placeholder="https://…"
        />
      </div>

      <div>
        <label className="block text-sm font-semibold text-[#0c1828]">
          Grad
        </label>
        <input
          name="cityId"
          defaultValue={defaults.cityId}
          maxLength={80}
          className="mt-1 w-full rounded-xl border border-black/15 px-3 py-2 text-sm"
          placeholder="npr. Beograd"
        />
      </div>

      <label className="flex items-center gap-2 text-sm text-[#0c1828]">
        <input
          type="checkbox"
          name="publicProfileEnabled"
          defaultChecked={defaults.publicProfileEnabled}
          className="h-4 w-4"
        />
        Javni profil je vidljiv svima
      </label>

      {state.message ? (
        <p
          className={`text-sm ${
            state.ok ? "text-green-600" : "text-red-600"
          }`}
        >
          {state.message}
        </p>
      ) : null}

      <button
        type="submit"
        disabled={pending}
        className="rounded-xl bg-[#c2410c] px-5 py-2.5 text-sm font-semibold text-white disabled:opacity-60"
      >
        {pending ? "Čuvanje…" : "Sačuvaj profil"}
      </button>
    </form>
  );
}