import React from 'react'
import { Head, useForm } from '@inertiajs/react'
import SeoHead from '../../components/seo/SeoHead'
import NovaSelect from '../../components/ui/NovaSelect'

export default function AcademyChallengeSubmit({ seo, challenge, artworks, submitUrl }) {
  const form = useForm({
    artwork_id: artworks[0]?.id || '',
    prompt_used: '',
    workflow_notes: '',
    ai_tool_used: '',
    is_ai_generated: false,
    is_ai_assisted: true,
  })

  const artworkOptions = artworks.map((artwork) => ({ value: artwork.id, label: artwork.title }))

  return (
    <main className="min-h-screen bg-[radial-gradient(circle_at_top_left,_rgba(56,189,248,0.15),_transparent_24%),radial-gradient(circle_at_bottom_right,_rgba(251,191,36,0.16),_transparent_24%),linear-gradient(180deg,_#0f172a_0%,_#111827_100%)] px-4 py-8 sm:px-6 lg:px-8">
      <Head title={`Submit to ${challenge.title}`} />
      <SeoHead seo={seo || {}} title={`Submit to ${challenge.title}`} description={challenge.excerpt || challenge.description} />

      <div className="mx-auto max-w-[960px] space-y-6">
        <section className="rounded-[38px] border border-white/10 bg-black/20 p-8 md:p-10">
          <p className="text-[11px] font-semibold uppercase tracking-[0.24em] text-sky-200/80">Academy challenge</p>
          <h1 className="mt-3 text-4xl font-semibold tracking-[-0.05em] text-white md:text-5xl">Submit to {challenge.title}</h1>
          <p className="mt-4 text-base leading-8 text-slate-300">Attach one of your public artworks and optionally include the prompt or workflow notes used to create it.</p>
        </section>

        <form onSubmit={(event) => { event.preventDefault(); form.post(submitUrl) }} className="space-y-5 rounded-[30px] border border-white/10 bg-white/[0.04] p-6">
          <div>
            <label className="text-sm font-semibold text-white">Artwork</label>
            <NovaSelect
              value={form.data.artwork_id}
              onChange={(nextValue) => form.setData('artwork_id', nextValue || '')}
              options={artworkOptions}
              placeholder="Select artwork"
              className="mt-2 rounded-2xl bg-black/20"
            />
            {form.errors.artwork_id ? <p className="mt-2 text-sm text-rose-300">{form.errors.artwork_id}</p> : null}
          </div>

          <div>
            <label className="text-sm font-semibold text-white">Prompt used</label>
            <textarea value={form.data.prompt_used} onChange={(event) => form.setData('prompt_used', event.target.value)} rows={5} className="mt-2 w-full rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-sm text-white outline-none" />
          </div>

          <div>
            <label className="text-sm font-semibold text-white">Workflow notes</label>
            <textarea value={form.data.workflow_notes} onChange={(event) => form.setData('workflow_notes', event.target.value)} rows={4} className="mt-2 w-full rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-sm text-white outline-none" />
          </div>

          <div>
            <label className="text-sm font-semibold text-white">AI tool used</label>
            <input value={form.data.ai_tool_used} onChange={(event) => form.setData('ai_tool_used', 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" />
          </div>

          <div className="grid gap-4 md:grid-cols-2">
            <label className="flex items-center gap-3 rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-sm text-slate-200"><input type="checkbox" checked={form.data.is_ai_generated} onChange={(event) => form.setData('is_ai_generated', event.target.checked)} /> AI-generated</label>
            <label className="flex items-center gap-3 rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-sm text-slate-200"><input type="checkbox" checked={form.data.is_ai_assisted} onChange={(event) => form.setData('is_ai_assisted', event.target.checked)} /> AI-assisted</label>
          </div>

          <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 ? 'Submitting...' : 'Submit artwork'}</button>
        </form>
      </div>
    </main>
  )
}