"use client";

import { useActionState, useState } from "react";
import {
  addBrandAlias,
  removeBrandAlias,
  updateBrandName,
} from "@/lib/actions/admin";

type Brand = {
  id: string;
  name: string;
  slug: string;
  aliases: { id: string; alias: string }[];
};

export function BrandRow({ brand }: { brand: Brand }) {
  const [editing, setEditing] = useState(false);
  const [nameState, nameFormAction] = useActionState(
    updateBrandName,
    undefined,
  );
  const [aliasState, aliasFormAction, aliasPending] = useActionState(
    addBrandAlias,
    undefined,
  );

  return (
    <li className="rounded-lg border border-charcoal/10 bg-warm-white p-4">
      <div className="flex items-center justify-between gap-4">
        {editing ? (
          <form
            action={async (formData) => {
              await nameFormAction(formData);
              setEditing(false);
            }}
            className="flex flex-1 items-center gap-2"
          >
            <input type="hidden" name="brandId" value={brand.id} />
            <input
              type="text"
              name="name"
              defaultValue={brand.name}
              className="flex-1 rounded border border-charcoal/20 bg-cream px-3 py-1 text-charcoal"
            />
            <button
              type="submit"
              className="text-sm font-medium text-terracotta hover:underline"
            >
              Save
            </button>
            <button
              type="button"
              onClick={() => setEditing(false)}
              className="text-sm text-charcoal/60 hover:underline"
            >
              Cancel
            </button>
          </form>
        ) : (
          <>
            <span className="font-heading text-lg font-semibold text-charcoal">
              {brand.name}
            </span>
            <button
              type="button"
              onClick={() => setEditing(true)}
              className="text-sm text-terracotta hover:underline"
            >
              Edit
            </button>
          </>
        )}
      </div>
      {nameState?.error && (
        <p className="mt-1 text-sm text-terracotta">{nameState.error}</p>
      )}

      <div className="mt-3 flex flex-wrap items-center gap-2">
        {brand.aliases.map((alias) => (
          <span
            key={alias.id}
            className="flex items-center gap-1 rounded-full bg-cream px-3 py-1 text-sm text-charcoal"
          >
            {alias.alias}
            <button
              type="button"
              onClick={() => removeBrandAlias(alias.id)}
              aria-label={`Remove alias ${alias.alias}`}
              className="text-charcoal/50 hover:text-terracotta"
            >
              &times;
            </button>
          </span>
        ))}

        <form action={aliasFormAction} className="flex items-center gap-1">
          <input type="hidden" name="brandId" value={brand.id} />
          <input
            type="text"
            name="alias"
            placeholder="Add alias"
            className="w-28 rounded border border-charcoal/20 bg-cream px-2 py-1 text-sm text-charcoal"
          />
          <button
            type="submit"
            disabled={aliasPending}
            className="text-sm text-terracotta hover:underline disabled:opacity-60"
          >
            Add
          </button>
        </form>
      </div>
      {aliasState?.error && (
        <p className="mt-1 text-sm text-terracotta">{aliasState.error}</p>
      )}
    </li>
  );
}