"Server Actions والـ ID: بطل تستخدم Hidden Inputs"

// ❌ أول فكرة بتيجي في بالك
export default function EditForm({ user }: { user: User }) {
  return (
    <form action={updateUser}>
      <input type="hidden" name="id" value={user.id} />
      <input name="username" defaultValue={user.name} />
      <button type="submit">تحديث</button>
    </form>
  )
}

// ✅ أحسن
export default function EditForm({ user }: { user: User }) {
  const updateUserWithId = updateUser.bind(null, user.id)

  return (
    <form action={updateUserWithId}>
      <input name="username" defaultValue={user.name} />
      <button type="submit">تحديث</button>
    </form>
  )
}

// actions.ts
'use server'

export async function updateUser(id: string, formData: FormData) {
  //                              👆 جاية من .bind()
  //                                              👆 بيانات الفورم
  const username = formData.get('username') as string
  await db.users.update({ where: { id }, data: { username } })
}

// ✅ الطريقة الصح
'use client'
import { useActionState } from 'react'
import { updateUser } from './actions'

export default function EditForm({ user }: { user: User }) {
  const updateUserWithId = updateUser.bind(null, user.id)
  const [state, formAction, isPending] = useActionState(updateUserWithId, null)

  return (
    <form action={formAction}>
      <input name="username" defaultValue={user.name} />

      {state?.error && (
        <p style={{ color: 'red' }}>{state.error}</p>
      )}

      {state?.success && (
        <p style={{ color: 'green' }}>اتحدث بنجاح!</p>
      )}

      <button type="submit" disabled={isPending}>
        {isPending ? 'جاري الحفظ...' : 'حفظ التغييرات'}
      </button>
    </form>
  )
}

// actions.ts
'use server'

export async function updateUser(id: string, prevState: unknown, formData: FormData) {
  //                              👆 .bind()    👆 useActionState   👆 بيانات الفورم
  try {
    const username = formData.get('username') as string

    if (!username) {
      return { success: false, error: 'اسم المستخدم مطلوب' }
    }

    await db.users.update({ where: { id }, data: { username } })
    return { success: true, error: null }
  } catch {
    return { success: false, error: 'حصل حاجة غلط' }
  }
}

(boundArgs..., prevState, formData)

// مع .bind(null, user.id):
export async function updateUser(
  id: string,         // 1. من .bind()
  prevState: unknown, // 2. من useActionState — دايماً هنا
  formData: FormData  // 3. بيانات الفورم — دايماً الأخير
) {}

// app/products/[id]/edit/page.tsx
import { getProductById } from '@/lib/dal/products'
import EditProductForm from '@/app/components/edit-product-form'

export default async function EditProductPage({
  params
}: {
  params: Promise<{ id: string }>
}) {
  const { id } = await params
  const product = await getProductById(id)

  return (
    <div>
      <h1>تعديل المنتج</h1>
      <EditProductForm product={product} />
    </div>
  )
}

// app/components/edit-product-form.tsx
'use client'
import { useActionState } from 'react'
import { updateProduct } from '@/app/actions'
import type { ProductDTO } from '@/lib/dal/types'

export default function EditProductForm({ product }: { product: ProductDTO }) {
  const updateProductWithId = updateProduct.bind(null, product.id)
  const [state, formAction, isPending] = useActionState(updateProductWithId, null)

  return (
    <form action={formAction}>
      <div>
        <label htmlFor="name">اسم المنتج</label>
        <input
          id="name"
          name="name"
          defaultValue={product.name}
          required
        />
      </div>

      <div>
        <label htmlFor="price">السعر</label>
        <input
          id="price"
          name="price"
          type="number"
          defaultValue={product.price}
          required
        />
      </div>

      {state?.error && (
        <p role="alert" style={{ color: 'red' }}>{state.error}</p>
      )}

      {state?.success && (
        <p role="status" style={{ color: 'green' }}>تم تحديث المنتج!</p>
      )}

      <button type="submit" disabled={isPending}>
        {isPending ? 'جاري الحفظ...' : 'حفظ التغييرات'}
      </button>
    </form>
  )
}

// app/actions.ts
'use server'
import { revalidateTag } from 'next/cache'
import { updateProduct } from '@/lib/dal/products'

export async function updateProduct(
  id: string,
  prevState: unknown,
  formData: FormData
) {
  try {
    const name = formData.get('name') as string
    const price = Number(formData.get('price'))

    if (!name) return { success: false, error: 'الاسم مطلوب' }
    if (isNaN(price)) return { success: false, error: 'السعر مش صح' }

    await updateProduct(id, { name, price })

    revalidateTag('products', 'max')
    revalidateTag(`product-${id}`, 'max')

    return { success: true, error: null }
  } catch {
    return { success: false, error: 'فشل تحديث المنتج' }
  }
}