'use client';

import { useMemo, useState } from 'react';
import { useFormState, useFormStatus } from 'react-dom';
import type { ApiCategory, ApiSubCategory, ApiVendorProduct, ApiSiteSettings } from '@/lib/backend-api';
import { createProduct, updateProduct, type ProductFormState } from '@/app/vendor/products/actions';
import { DEFAULT_CURRENCY } from '@/lib/site-settings';

const initialState: ProductFormState = undefined;

function SubmitButton({ label, pendingLabel }: { label: string; pendingLabel: string }) {
  const { pending } = useFormStatus();
  return (
    <button type="submit" disabled={pending} className="btn-primary disabled:opacity-60">
      {pending ? pendingLabel : label}
    </button>
  );
}

export function ProductForm({
  categories,
  subcategories,
  product,
  currency = DEFAULT_CURRENCY,
}: {
  categories: ApiCategory[];
  subcategories: ApiSubCategory[];
  product?: ApiVendorProduct;
  currency?: ApiSiteSettings['currency'];
}) {
  const action = product ? updateProduct.bind(null, product.id) : createProduct;
  const [state, formAction] = useFormState(action, initialState);
  const errors = state?.errors ?? {};
  const [categoryId, setCategoryId] = useState<string>(product ? String(product.category_id) : '');

  const filteredSubcategories = useMemo(
    () => subcategories.filter((sc) => String(sc.category_id) === categoryId),
    [subcategories, categoryId]
  );

  return (
    <form action={formAction} className="space-y-5">
      {state?.success && (
        <div className="rounded-md border border-green-200 bg-green-50 px-4 py-3 text-sm text-green-700">
          Saved. Changes to core details go back to &quot;pending&quot; admin review if this product wasn&apos;t approved yet.
        </div>
      )}

      {Object.keys(errors).length > 0 && (
        <div className="rounded-md border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
          <ul className="list-inside list-disc">
            {Object.values(errors).flat().map((error) => (
              <li key={error}>{error}</li>
            ))}
          </ul>
        </div>
      )}

      <div>
        <label className="block text-sm font-semibold text-navy-800">Product Name</label>
        <input
          type="text"
          name="product_name"
          defaultValue={product?.product_name}
          required
          className="mt-1.5 w-full rounded-md border-navy-100 text-sm focus:border-gold-500 focus:ring-gold-500"
        />
      </div>

      <div className="grid gap-5 sm:grid-cols-2">
        <div>
          <label className="block text-sm font-semibold text-navy-800">Category</label>
          <select
            name="category_id"
            value={categoryId}
            onChange={(e) => setCategoryId(e.target.value)}
            required
            className="mt-1.5 w-full rounded-md border-navy-100 text-sm focus:border-gold-500 focus:ring-gold-500"
          >
            <option value="" disabled>
              Select a category
            </option>
            {categories.map((cat) => (
              <option key={cat.id} value={cat.id}>
                {cat.name}
              </option>
            ))}
          </select>
        </div>
        <div>
          <label className="block text-sm font-semibold text-navy-800">Sub-Category (optional)</label>
          <select
            name="sub_category_id"
            defaultValue={product?.sub_category_id ? String(product.sub_category_id) : ''}
            className="mt-1.5 w-full rounded-md border-navy-100 text-sm focus:border-gold-500 focus:ring-gold-500"
          >
            <option value="">None</option>
            {filteredSubcategories.map((sc) => (
              <option key={sc.id} value={sc.id}>
                {sc.name}
              </option>
            ))}
          </select>
        </div>
      </div>

      <div className="grid gap-5 sm:grid-cols-2">
        <div>
          <label className="block text-sm font-semibold text-navy-800">Price ({currency.symbol})</label>
          <input
            type="number"
            name="price"
            step="0.01"
            min="0"
            defaultValue={product?.price}
            required
            className="mt-1.5 w-full rounded-md border-navy-100 text-sm focus:border-gold-500 focus:ring-gold-500"
          />
        </div>
        <div>
          <label className="block text-sm font-semibold text-navy-800">Stock Quantity</label>
          <input
            type="number"
            name="stock_quantity"
            min="0"
            defaultValue={product?.stock_quantity}
            required
            className="mt-1.5 w-full rounded-md border-navy-100 text-sm focus:border-gold-500 focus:ring-gold-500"
          />
        </div>
      </div>

      <div>
        <label className="block text-sm font-semibold text-navy-800">Short Description</label>
        <input
          type="text"
          name="short_description"
          defaultValue={product?.short_description ?? ''}
          maxLength={160}
          className="mt-1.5 w-full rounded-md border-navy-100 text-sm focus:border-gold-500 focus:ring-gold-500"
        />
      </div>

      <div>
        <label className="block text-sm font-semibold text-navy-800">Full Description</label>
        <textarea
          name="description"
          rows={5}
          defaultValue={product?.description ?? ''}
          className="mt-1.5 w-full rounded-md border-navy-100 text-sm focus:border-gold-500 focus:ring-gold-500"
        />
      </div>

      <label className="flex items-center gap-2 text-sm text-navy-700">
        <input type="checkbox" name="bulk_enabled" defaultChecked={!!product?.bulk_enabled} className="rounded text-gold-500 focus:ring-gold-500" />
        Available for bulk orders
      </label>

      <div>
        <label className="block text-sm font-semibold text-navy-800">
          {product ? 'Replace Main Image (optional)' : 'Main Image'}
        </label>
        {product?.product_image && (
          // eslint-disable-next-line @next/next/no-img-element
          <img src={product.product_image} alt="" className="mt-2 h-20 w-20 rounded-md border border-navy-100 object-cover" />
        )}
        <input
          type="file"
          name="product_image"
          accept="image/jpeg,image/png,image/webp"
          required={!product}
          className="mt-1.5 w-full text-sm text-navy-600"
        />
      </div>

      <p className="text-xs text-navy-500">
        {product
          ? 'Saving changes here does not remove your listing while it is reviewed again.'
          : 'New products are hidden from the shop until an admin approves them.'}
      </p>

      <SubmitButton label={product ? 'Save Changes' : 'Submit Product'} pendingLabel={product ? 'Saving…' : 'Submitting…'} />
    </form>
  );
}