// =============================================================================
// HeadlineSift.com — Category Add/Edit Form
// =============================================================================
"use client";

import { useFormState, useFormStatus } from "react-dom";
import { createCategory, updateCategory } from "./actions";

// ============================================================================
// Types
// ============================================================================

interface EditCategoryInput {
  id: string;
  name: string;
  slug: string;
  level: string;
  description: string | null;
  aiSafetyLevel: string;
  maxPublicStories: number;
  status: string;
  displayOrder: number;
}

interface CategoryFormProps {
  editCategory?: EditCategoryInput | null;
  onCancel: () => void;
}

// ============================================================================
// Submit Button
// ============================================================================

function SubmitButton({ isEditing }: { isEditing: boolean }) {
  const { pending } = useFormStatus();

  return (
    <button type="submit" disabled={pending} className="btn-primary">
      {pending ? (
        <span className="flex items-center gap-2">
          <svg
            className="h-4 w-4 animate-spin"
            viewBox="0 0 24 24"
            fill="none"
          >
            <circle
              className="opacity-25"
              cx="12"
              cy="12"
              r="10"
              stroke="currentColor"
              strokeWidth="4"
            />
            <path
              className="opacity-75"
              fill="currentColor"
              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
            />
          </svg>
          {isEditing ? "Saving…" : "Creating…"}
        </span>
      ) : isEditing ? (
        "Save Changes"
      ) : (
        "Create Category"
      )}
    </button>
  );
}

// ============================================================================
// Form Component
// ============================================================================

export default function CategoryForm({ editCategory, onCancel }: CategoryFormProps) {
  const isEditing = !!editCategory;

  const action = editCategory
    ? updateCategory.bind(null, editCategory.id)
    : createCategory;

  const [state, formAction] = useFormState(action, {
    error: undefined,
    success: undefined,
  });

  return (
    <div className="card animate-slide-up">
      <div className="flex items-center justify-between mb-5">
        <h2 className="text-lg font-semibold text-heading">
          {isEditing ? "Edit Category" : "Add Category"}
        </h2>
        <button type="button" onClick={onCancel} className="btn-ghost text-xs">
          Cancel
        </button>
      </div>

      {/* Error Banner */}
      {state?.error && (
        <div
          className="mb-5 rounded-md bg-red-50 p-3 text-sm text-red-700 ring-1 ring-inset ring-red-200"
          role="alert"
        >
          {state.error}
        </div>
      )}

      <form action={formAction} className="space-y-5">
        {/* Row 1: Name + Slug */}
        <div className="grid gap-4 sm:grid-cols-2">
          <div>
            <label htmlFor="name" className="label">
              Name <span className="text-red-500">*</span>
            </label>
            <input
              id="name"
              name="name"
              type="text"
              required
              defaultValue={editCategory?.name ?? ""}
              placeholder="e.g., Technology"
              className="input mt-1.5"
            />
          </div>

          <div>
            <label htmlFor="slug" className="label">
              Slug <span className="text-red-500">*</span>
            </label>
            <input
              id="slug"
              name="slug"
              type="text"
              required
              defaultValue={editCategory?.slug ?? ""}
              placeholder="e.g., technology"
              className="input mt-1.5 font-mono text-sm"
            />
            <p className="mt-1 text-2xs text-body-muted">
              URL-safe: lowercase letters, numbers, hyphens
            </p>
          </div>
        </div>

        {/* Row 2: Level + AI Safety */}
        <div className="grid gap-4 sm:grid-cols-2">
          <div>
            <label htmlFor="level" className="label">
              Visibility Level
            </label>
            <select
              id="level"
              name="level"
              defaultValue={editCategory?.level ?? "BOTH"}
              className="input mt-1.5"
            >
              <option value="BOTH">Both — Global &amp; Country</option>
              <option value="GLOBAL">Global only</option>
              <option value="COUNTRY">Country only</option>
            </select>
            <p className="mt-1 text-2xs text-body-muted">
              Where this category appears in the site hierarchy
            </p>
          </div>

          <div>
            <label htmlFor="aiSafetyLevel" className="label">
              AI Safety Level
            </label>
            <select
              id="aiSafetyLevel"
              name="aiSafetyLevel"
              defaultValue={editCategory?.aiSafetyLevel ?? "MEDIUM"}
              className="input mt-1.5"
            >
              <option value="LOW">Low — auto-publish freely</option>
              <option value="MEDIUM">Medium — standard review</option>
              <option value="HIGH">High — always require human review</option>
            </select>
            <p className="mt-1 text-2xs text-body-muted">
              How safe it is to auto-generate AI summaries
            </p>
          </div>
        </div>

        {/* Row 3: Max Public Stories + Display Order */}
        <div className="grid gap-4 sm:grid-cols-2">
          <div>
            <label htmlFor="maxPublicStories" className="label">
              Max Public Stories
            </label>
            <input
              id="maxPublicStories"
              name="maxPublicStories"
              type="number"
              min={1}
              max={1000}
              defaultValue={editCategory?.maxPublicStories ?? 50}
              className="input mt-1.5"
              style={{ maxWidth: "6rem" }}
            />
            <p className="mt-1 text-2xs text-body-muted">
              Cap for stories shown on public pages (default: 50)
            </p>
          </div>

          <div>
            <label htmlFor="displayOrder" className="label">
              Display Order
            </label>
            <input
              id="displayOrder"
              name="displayOrder"
              type="number"
              min={0}
              defaultValue={editCategory?.displayOrder ?? 0}
              className="input mt-1.5"
              style={{ maxWidth: "6rem" }}
            />
          </div>
        </div>

        {/* Row 4: Description */}
        <div>
          <label htmlFor="description" className="label">
            Description
          </label>
          <textarea
            id="description"
            name="description"
            rows={3}
            maxLength={500}
            defaultValue={editCategory?.description ?? ""}
            placeholder="Brief description of this category's scope…"
            className="input mt-1.5 resize-y"
          />
          <p className="mt-1 text-2xs text-body-muted">
            Optional. Up to 500 characters.
          </p>
        </div>

        {/* Row 5: Status */}
        <div>
          <label htmlFor="status" className="label">
            Status
          </label>
          <select
            id="status"
            name="status"
            defaultValue={editCategory?.status ?? "ACTIVE"}
            className="input mt-1.5"
            style={{ maxWidth: "12rem" }}
          >
            <option value="ACTIVE">Active</option>
            <option value="INACTIVE">Inactive</option>
          </select>
        </div>

        {/* Actions */}
        <div className="flex items-center gap-3 pt-1">
          <SubmitButton isEditing={isEditing} />
          <button type="button" onClick={onCancel} className="btn-secondary">
            Cancel
          </button>
        </div>
      </form>
    </div>
  );
}