import React from 'react'
import { Head, Link, useForm, usePage } from '@inertiajs/react'
import EnhanceStubWarning from '../../components/enhance/EnhanceStubWarning'

export default function EnhanceCreate() {
  const { props } = usePage()
  const form = useForm({ image: null, scale: props.options?.scales?.[0]?.value || 2, mode: props.options?.modes?.[0]?.value || 'standard' })
  const [previewUrl, setPreviewUrl] = React.useState(null)
  const [sourceType, setSourceType] = React.useState(props.selectedArtwork ? 'artwork' : 'upload')

  React.useEffect(() => () => {
    if (previewUrl) {
      URL.revokeObjectURL(previewUrl)
    }
  }, [previewUrl])

  function handleFileChange(event) {
    const file = event.target.files?.[0] || null
    form.setData('image', file)

    if (previewUrl) {
      URL.revokeObjectURL(previewUrl)
    }

    setPreviewUrl(file ? URL.createObjectURL(file) : null)
  }

  function submit(event) {
    event.preventDefault()

    const action = sourceType === 'artwork' && props.selectedArtwork?.store_url
      ? props.selectedArtwork.store_url
      : props.storeUrl

    form.post(action, {
      forceFormData: sourceType !== 'artwork',
      preserveScroll: true,
    })
  }

  return (
    <div className="w-full pb-16 pt-8">
      <Head title="Skinbase Enhance" />

      <section className="rounded-[32px] border border-white/10 bg-[radial-gradient(circle_at_top_left,rgba(14,165,233,0.18),transparent_36%),linear-gradient(180deg,rgba(15,23,42,0.96),rgba(2,6,23,0.92))] p-6 shadow-[0_24px_70px_rgba(2,6,23,0.32)]">
        <div className="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
          <div>
            <p className="text-[11px] font-semibold uppercase tracking-[0.28em] text-sky-200/80">Skinbase Enhance</p>
            <h1 className="mt-3 text-3xl font-semibold tracking-[-0.04em] text-white">Create an upscaled image</h1>
            <p className="mt-2 max-w-3xl text-sm leading-relaxed text-slate-300">Large images may take longer to process. The original image will stay unchanged.</p>
          </div>

          <Link href={props.indexUrl} className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.05] px-5 py-3 text-xs font-semibold uppercase tracking-[0.14em] text-white transition hover:bg-white/[0.09]">
            <i className="fa-solid fa-arrow-left text-[10px]" />
            Back to jobs
          </Link>
        </div>
      </section>

      <EnhanceStubWarning config={props.enhanceConfig} className="mt-6" />

      <form onSubmit={submit} className="mt-8 grid gap-6 xl:grid-cols-[minmax(0,1.05fr)_380px]">
        <section className="rounded-[30px] border border-white/10 bg-[#08111d] p-6 shadow-[0_18px_48px_rgba(2,6,23,0.2)]">
          <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
            <div className="text-[11px] font-semibold uppercase tracking-[0.22em] text-slate-400">Enhance source</div>
            {props.selectedArtwork ? (
              <div className="inline-flex rounded-full border border-white/10 bg-white/[0.04] p-1 text-xs font-semibold text-slate-300">
                <button
                  type="button"
                  onClick={() => setSourceType('artwork')}
                  className={`rounded-full px-4 py-2 transition ${sourceType === 'artwork' ? 'bg-sky-400/15 text-sky-50' : 'hover:bg-white/[0.06]'}`}
                >
                  Existing artwork
                </button>
                <button
                  type="button"
                  onClick={() => setSourceType('upload')}
                  className={`rounded-full px-4 py-2 transition ${sourceType === 'upload' ? 'bg-sky-400/15 text-sky-50' : 'hover:bg-white/[0.06]'}`}
                >
                  Upload image
                </button>
              </div>
            ) : null}
          </div>

          {sourceType === 'artwork' && props.selectedArtwork ? (
            <div className="mt-4 rounded-[28px] border border-sky-300/20 bg-[linear-gradient(180deg,rgba(14,165,233,0.1),rgba(8,17,29,0.9))] p-6 text-left">
              <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-sky-200/80">Existing artwork source</div>
              <h2 className="mt-3 text-2xl font-semibold tracking-[-0.03em] text-white">{props.selectedArtwork.title}</h2>
              <p className="mt-3 max-w-2xl text-sm leading-6 text-slate-300">Use the current artwork source without re-uploading a file. The original artwork remains untouched and the enhanced result will be stored as a separate job output.</p>
              <div className="mt-5 flex flex-wrap gap-3">
                <a href={props.selectedArtwork.show_url} className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.05] px-4 py-2 text-xs font-semibold uppercase tracking-[0.14em] text-white transition hover:bg-white/[0.08]">
                  <i className="fa-solid fa-image text-[10px]" />
                  View artwork
                </a>
                <span className="inline-flex items-center gap-2 rounded-full border border-emerald-300/20 bg-emerald-400/10 px-4 py-2 text-xs font-semibold uppercase tracking-[0.14em] text-emerald-100">
                  <i className="fa-solid fa-lock text-[10px]" />
                  Original stays unchanged
                </span>
              </div>
              {form.errors.source ? <div className="mt-4 rounded-2xl border border-rose-300/20 bg-rose-400/10 px-4 py-3 text-sm text-rose-100">{form.errors.source}</div> : null}
            </div>
          ) : (
            <>
              <label className="mt-4 flex min-h-[420px] cursor-pointer flex-col items-center justify-center rounded-[28px] border border-dashed border-white/15 bg-black/20 px-6 py-8 text-center transition hover:border-sky-300/30 hover:bg-sky-400/[0.03]">
                {previewUrl ? <img src={previewUrl} alt="Selected for enhance" className="max-h-[420px] w-full rounded-[20px] object-contain" /> : <>
                  <div className="flex h-16 w-16 items-center justify-center rounded-full border border-white/10 bg-white/[0.05] text-white/70"><i className="fa-solid fa-cloud-arrow-up text-2xl" /></div>
                  <div className="mt-4 text-lg font-semibold text-white">Choose a JPEG, PNG, or WebP image</div>
                  <div className="mt-2 max-w-md text-sm text-slate-400">Upload an image up to {props.maxUploadMb} MB. SVG, GIF, and unsupported file types are rejected.</div>
                </>}

                <input type="file" accept="image/jpeg,image/png,image/webp" onChange={handleFileChange} className="hidden" />
              </label>
              {form.errors.image ? <div className="mt-3 text-sm text-rose-300">{form.errors.image}</div> : null}
            </>
          )}
        </section>

        <section className="rounded-[30px] border border-white/10 bg-[#08111d] p-6 shadow-[0_18px_48px_rgba(2,6,23,0.2)]">
          <div className="text-[11px] font-semibold uppercase tracking-[0.22em] text-slate-400">Enhance settings</div>

          <div className="mt-5 space-y-5">
            <div>
              <label className="text-sm font-semibold text-white">Scale</label>
              <div className="mt-3 grid grid-cols-2 gap-3">
                {(props.options?.scales || []).map((option) => (
                  <button
                    key={option.value}
                    type="button"
                    onClick={() => form.setData('scale', option.value)}
                    className={`rounded-2xl border px-4 py-4 text-left transition ${Number(form.data.scale) === Number(option.value) ? 'border-sky-300/30 bg-sky-400/12 text-sky-50' : 'border-white/10 bg-white/[0.04] text-slate-300 hover:bg-white/[0.08]'}`}
                  >
                    <div className="text-sm font-semibold">{option.label}</div>
                    <div className="mt-1 text-xs uppercase tracking-[0.16em] text-current/70">Upscale size</div>
                  </button>
                ))}
              </div>
              {form.errors.scale ? <div className="mt-2 text-sm text-rose-300">{form.errors.scale}</div> : null}
            </div>

            <div>
              <label className="text-sm font-semibold text-white">Mode</label>
              <div className="mt-3 space-y-3">
                {(props.options?.modes || []).map((option) => (
                  <button
                    key={option.value}
                    type="button"
                    onClick={() => form.setData('mode', option.value)}
                    className={`w-full rounded-2xl border px-4 py-4 text-left transition ${String(form.data.mode) === String(option.value) ? 'border-sky-300/30 bg-sky-400/12 text-sky-50' : 'border-white/10 bg-white/[0.04] text-slate-300 hover:bg-white/[0.08]'}`}
                  >
                    <div className="text-sm font-semibold">{option.label}</div>
                    <div className="mt-1 text-xs uppercase tracking-[0.16em] text-current/70">Optimized preset</div>
                  </button>
                ))}
              </div>
              {form.errors.mode ? <div className="mt-2 text-sm text-rose-300">{form.errors.mode}</div> : null}
            </div>
          </div>

          <div className="mt-6 rounded-2xl border border-amber-300/20 bg-amber-400/10 px-4 py-4 text-sm leading-6 text-amber-50">
            The original file is preserved separately. Completed outputs can be reviewed and downloaded before you decide how to use them.
          </div>

          <button type="submit" disabled={form.processing} className="mt-6 inline-flex w-full items-center justify-center gap-2 rounded-full border border-sky-300/20 bg-sky-400/12 px-5 py-3 text-sm font-semibold text-sky-50 transition hover:bg-sky-400/20 disabled:cursor-not-allowed disabled:opacity-60">
            <i className="fa-solid fa-wand-magic-sparkles text-xs" />
            {form.processing ? 'Starting enhance…' : sourceType === 'artwork' ? 'Enhance artwork image' : 'Start enhance'}
          </button>
        </section>
      </form>
    </div>
  )
}