'use client'

import { startTransition, useActionState, useMemo, useState } from 'react'
import { updateBranding } from '@/app/actions/panel'
import { brandVars, colorWarnings, isHex, PLATFORM_COLOR } from '@/lib/theme'
import { PoweredBy, PublicHeaderMark } from '@/components/OrgBrand'
import { copy } from '@/config/brand'

/** Achica el logo en el navegador (lado mayor 600 px, WebP con transparencia). */
async function shrinkLogo(file: File): Promise<Blob> {
  const bmp = await createImageBitmap(file)
  const scale = Math.min(1, 600 / Math.max(bmp.width, bmp.height))
  const c = document.createElement('canvas')
  c.width = Math.round(bmp.width * scale); c.height = Math.round(bmp.height * scale)
  c.getContext('2d')!.drawImage(bmp, 0, 0, c.width, c.height)
  for (const q of [0.9, 0.75, 0.6]) {
    const b = await new Promise<Blob | null>(r => c.toBlob(r, 'image/webp', q))
    if (b && b.size < 280 * 1024) return b
  }
  throw new Error('logo')
}

const SWATCHES = ['#ff5500', '#ffcc00', '#00c2a8', '#3b82f6', '#a855f7', '#ec4899', '#22c55e', '#f43f5e']

type Props = { orgName: string; brandName: string; color: string; logoUrl: string | null; whiteLabel: boolean }

export default function BrandForm(p: Props) {
  const [state, action, pending] = useActionState(updateBranding, undefined)
  const [name, setName] = useState(p.brandName)
  const [color, setColor] = useState(p.color)
  const [logo, setLogo] = useState<string | null>(p.logoUrl)
  const [removeLogo, setRemoveLogo] = useState(false)
  const [logoBlob, setLogoBlob] = useState<Blob | null>(null)
  const [logoError, setLogoError] = useState<string | null>(null)
  const submit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    const fd = new FormData(e.currentTarget)
    fd.delete('logo')
    if (logoBlob) fd.set('logo', logoBlob, 'logo.webp')
    startTransition(() => action(fd))
  }

  const valid = isHex(color)
  const vars = useMemo(() => brandVars(valid ? color : PLATFORM_COLOR) as React.CSSProperties, [color, valid])
  const warnings = valid ? colorWarnings(color) : []
  const preview = { name: name || p.orgName, logoUrl: removeLogo ? null : logo, whiteLabel: p.whiteLabel, custom: Boolean(name) }

  return (
    <div className="grid gap-6 lg:grid-cols-[1fr_320px]">
      <form onSubmit={submit} className="card space-y-5 p-6">
        <div>
          <label className="label" htmlFor="brandName">Nombre que ve el público</label>
          <input id="brandName" name="brandName" maxLength={40} value={name} onChange={e => setName(e.target.value)}
            placeholder={p.orgName} className="input" />
          <p className="mt-1 text-xs text-gray-400">Vacío = se usa el nombre de la organización.</p>
        </div>

        <div>
          <span className="label">Color principal</span>
          <div className="flex flex-wrap items-center gap-2">
            {SWATCHES.map(s => (
              <button key={s} type="button" onClick={() => setColor(s)} aria-label={s}
                className={`h-9 w-9 rounded-full ring-offset-2 transition ${color === s ? 'ring-2 ring-ink-950' : ''}`} style={{ background: s }} />
            ))}
            <input type="color" value={valid ? color : PLATFORM_COLOR} onChange={e => setColor(e.target.value)}
              className="h-9 w-12 cursor-pointer rounded border border-gray-200 bg-white" aria-label="Elegir otro color" />
            <input name="brandColor" value={color} onChange={e => setColor(e.target.value.trim())}
              className="input w-28 font-mono" maxLength={7} />
          </div>
          {!valid && <p className="mt-1 text-xs text-red-600">Formato #RRGGBB, por ejemplo #ff5500.</p>}
          {warnings.map(w => <p key={w} className="mt-1 text-xs text-amber-700">⚠ {w}</p>)}
        </div>

        <div>
          <label className="label" htmlFor="logo">Logo</label>
          <input id="logo" name="logo" type="file" accept="image/png,image/jpeg,image/webp"
            onChange={e => {
              const f = e.target.files?.[0]
              if (!f) return
              setLogoError(null)
              shrinkLogo(f)
                .then(b => { setLogoBlob(b); setLogo(URL.createObjectURL(b)); setRemoveLogo(false) })
                .catch(() => setLogoError('No pudimos leer esa imagen. Probá con un PNG o JPG.'))
            }}
            className="block w-full text-sm text-gray-600 file:mr-3 file:rounded-control file:border-0 file:bg-gray-100 file:px-4 file:py-2 file:text-sm file:font-medium" />
          {logoError && <p className="mt-1 text-xs text-red-600">{logoError}</p>}
          <p className="mt-1 text-xs text-gray-400">PNG con fondo transparente, versión clara (se muestra sobre fondo negro). Cualquier tamaño: lo achicamos solos.</p>
          {logo && (
            <label className="mt-2 flex items-center gap-2 text-sm text-gray-600">
              <input type="checkbox" name="removeLogo" checked={removeLogo} onChange={e => setRemoveLogo(e.target.checked)} /> Quitar el logo
            </label>
          )}
        </div>

        <section className="rounded-control bg-gray-50 p-4 text-sm">
          <p className="font-semibold">Marca blanca {p.whiteLabel ? <span className="chip ml-1 bg-green-100 text-green-700">Activa</span> : <span className="chip ml-1 bg-gray-200 text-gray-600">No incluida</span>}</p>
          <p className="mt-1 text-gray-500">
            {p.whiteLabel
              ? 'Tu público no ve ninguna mención a UghPass: solo tu marca.'
              : 'Con tu logo y tu color, el público ve tu marca. Abajo queda un pequeño «Funciona con UghPass». Para quitarlo, pedí la marca blanca.'}
          </p>
        </section>

        {state?.error && <p className="rounded-control bg-red-50 px-4 py-3 text-sm text-red-700">{state.error}</p>}
        {state?.ok && <p className="rounded-control bg-green-50 px-4 py-3 text-sm text-green-800">{state.ok}</p>}
        <button disabled={pending || !valid} className="btn-primary w-full sm:w-auto">{pending ? 'Guardando…' : 'Guardar marca'}</button>
      </form>

      {/* Vista previa del menú tal como lo ve el público */}
      <aside className="lg:sticky lg:top-6 lg:self-start">
        <p className="mb-2 text-xs font-medium uppercase tracking-widest text-gray-400">Así lo ve tu público</p>
        <div style={vars} className="overflow-hidden rounded-[2rem] border-8 border-ink-900 bg-ink-950 p-5 text-piedra shadow-card">
          <PublicHeaderMark brand={preview} hook={copy.hookShort} />
          <p className="mt-3 font-display text-2xl font-bold">Fiesta de Egresados</p>
          <div className="mt-4 space-y-2">
            {[['Gaseosa', '$2.500'], ['Licuado de frutilla', '$3.800']].map(([n, pr], i) => (
              <div key={n} className={`flex items-center justify-between rounded-card p-3 ${i === 0 ? 'bg-ink-700 ring-1 ring-brand-500/60' : 'bg-ink-900'}`}>
                <div><p className="text-sm font-semibold">{n}</p><p className="text-sm font-semibold text-brand-200">{pr}</p></div>
                <span className="flex h-8 w-8 items-center justify-center rounded-full bg-white text-ink-950">+</span>
              </div>
            ))}
          </div>
          <button type="button" className="btn-brand mt-4 w-full">Pagar $2.500</button>
          <div className="mt-4 flex justify-center"><PoweredBy brand={preview} /></div>
        </div>
      </aside>
    </div>
  )
}