import React from 'react' import { Head, Link, router, useForm } from '@inertiajs/react' import AdminLayout from '../../../Layouts/AdminLayout' import NovaSelect from '../../../components/ui/NovaSelect' function normalizePayload(fields, data) { const payload = { ...data } fields.forEach((field) => { if (field.type === 'csv') { payload[field.name] = String(payload[field.name] || '').split(',').map((item) => item.trim()).filter(Boolean) } if (field.type === 'json') { try { payload[field.name] = payload[field.name] ? JSON.parse(payload[field.name]) : {} } catch { payload[field.name] = {} } } }) return payload } function Field({ field, form }) { const value = form.data[field.name] if (field.type === 'checkbox') { return ( form.setData(field.name, event.target.checked)} /> {field.label} ) } if (field.type === 'textarea') { return

form.setData(field.name, event.target.value)} rows={6} className="mt-2 w-full rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-sm text-white outline-none" />
  }

if (field.type === 'select') {
    return (
      <NovaSelect
        value={value ?? ''}
        onChange={(nextValue) => form.setData(field.name, nextValue ?? '')}
        options={field.options || []}
        searchable={false}
        className="mt-2 rounded-2xl bg-black/20"
      />
    )
  }

if (field.type === 'multiselect') {
    return (
      <NovaSelect
        multi
        value={value || []}
        onChange={(nextValue) => form.setData(field.name, Array.isArray(nextValue) ? nextValue : [])}
        options={field.options || []}
        className="mt-2 rounded-2xl bg-black/20"
      />
    )
  }

return <input type={field.type || 'text'} value={value ?? ''} onChange={(event) => form.setData(field.name, event.target.value)} className="mt-2 w-full rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-sm text-white outline-none" />
}

export default function AcademyCrudForm({ title, subtitle, fields, record, submitUrl, indexUrl, destroyUrl, method }) {
  const form = useForm(record)

const submit = (event) => {
    event.preventDefault()
    const payload = normalizePayload(fields, form.data)

if (method === 'patch') {
      form.transform(() => payload).patch(submitUrl)
      return
    }

form.transform(() => payload).post(submitUrl)
  }

return (
    <AdminLayout title={title} subtitle={subtitle}>
      <Head title={`Admin · ${title}`} />

<form onSubmit={submit} className="space-y-5 rounded-[30px] border border-white/[0.08] bg-white/[0.03] p-6">
        {fields.map((field) => (
          <div key={field.name}>
            {field.type !== 'checkbox' ? <label className="text-sm font-semibold text-white">{field.label}</label> : null}
            <Field field={field} form={form} />
            {form.errors[field.name] ? <p className="mt-2 text-sm text-rose-300">{form.errors[field.name]}</p> : null}
          </div>
        ))}

<div className="flex flex-wrap gap-3">
          <button type="submit" disabled={form.processing} className="rounded-full border border-sky-300/25 bg-sky-300/12 px-5 py-3 text-sm font-semibold text-sky-100">{form.processing ? 'Saving...' : 'Save'}</button>
          <Link href={indexUrl} className="rounded-full border border-white/10 bg-white/[0.04] px-5 py-3 text-sm font-semibold text-white">Back</Link>
          {destroyUrl ? <button type="button" onClick={() => { if (!window.confirm('Delete this record?')) return; router.delete(destroyUrl) }} className="rounded-full border border-rose-300/20 bg-rose-300/10 px-5 py-3 text-sm font-semibold text-rose-100">Delete</button> : null}
        </div>
      </form>
    </AdminLayout>
  )
}