"use client";

import Link from "next/link";
import { useActionState, useState } from "react";
import { renameFolder, deleteFolder } from "@/lib/actions/folders";

export function FolderRow({
  username,
  folder,
  isOwner,
  isActive,
}: {
  username: string;
  folder: { id: string; name: string; labelCount: number };
  isOwner: boolean;
  isActive: boolean;
}) {
  const [renaming, setRenaming] = useState(false);
  const [state, formAction, isPending] = useActionState(renameFolder, undefined);

  if (renaming) {
    return (
      <form
        action={async (formData) => {
          await formAction(formData);
          setRenaming(false);
        }}
        className="flex items-center gap-2 rounded-lg border border-charcoal/10 bg-warm-white px-4 py-3"
      >
        <input type="hidden" name="folderId" value={folder.id} />
        <input
          type="text"
          name="name"
          defaultValue={folder.name}
          required
          className="min-w-0 flex-1 rounded border border-charcoal/20 bg-cream px-2 py-1 text-sm text-charcoal"
        />
        <button
          type="submit"
          disabled={isPending}
          className="text-sm font-medium text-terracotta hover:underline"
        >
          Save
        </button>
        <button
          type="button"
          onClick={() => setRenaming(false)}
          className="text-sm text-charcoal/60 hover:underline"
        >
          Cancel
        </button>
        {state?.error && <span className="text-xs text-terracotta">{state.error}</span>}
      </form>
    );
  }

  return (
    <div
      className={`flex items-center justify-between rounded-lg border px-4 py-3 ${
        isActive ? "border-terracotta" : "border-charcoal/10 bg-warm-white"
      }`}
    >
      <Link
        href={`/profile/${username}?tab=folders&folder=${folder.id}`}
        className="text-charcoal hover:text-terracotta"
      >
        {folder.name}{" "}
        <span className="text-charcoal/50">
          ({folder.labelCount} label{folder.labelCount === 1 ? "" : "s"})
        </span>
      </Link>
      {isOwner && (
        <div className="flex gap-3">
          <button
            type="button"
            onClick={() => setRenaming(true)}
            className="text-sm text-charcoal/60 hover:text-terracotta hover:underline"
          >
            Rename
          </button>
          <button
            type="button"
            onClick={() => {
              if (confirm(`Delete "${folder.name}"? This can't be undone.`)) {
                deleteFolder(folder.id);
              }
            }}
            className="text-sm text-charcoal/60 hover:text-terracotta hover:underline"
          >
            Delete
          </button>
        </div>
      )}
    </div>
  );
}