import { BrandColorField } from "@/components/BrandColorField";
import { getBranding, getSiteContentMap } from "@/lib/session";
import {
  updateBrandingAction,
  updateSiteContentAction,
} from "@/server/actions/admin";

export default async function AdminBrandingPage({
  searchParams,
}: {
  searchParams: Promise<{ ok?: string; error?: string }>;
}) {
  const sp = await searchParams;
  const branding = await getBranding();
  const content = await getSiteContentMap();
  const keys = Object.keys(content).sort();

  return (
    <div>
      <h1 className="text-2xl font-semibold">Branding & Content</h1>
      {sp.ok && (
        <p className="mt-2 text-sm text-[var(--lime)]">Guardado.</p>
      )}
      {sp.error && (
        <p className="mt-2 text-sm text-red-300">{decodeURIComponent(sp.error)}</p>
      )}

      <form action={updateBrandingAction} className="card mt-4 space-y-4">
        <h2 className="font-semibold">Marca</h2>

        <div>
          <label className="label">Nombre</label>
          <input
            className="input"
            name="brandName"
            defaultValue={branding.brandName}
          />
        </div>
        <div>
          <label className="label">Marca (letra)</label>
          <input
            className="input"
            name="brandMark"
            defaultValue={branding.brandMark}
          />
        </div>

        <div>
          <h3 className="mb-2 text-sm font-medium text-white/70">Colores base</h3>
          <div className="grid gap-3 sm:grid-cols-3">
            <BrandColorField
              name="accent"
              label="Accent / CTA"
              value={branding.accent}
              hint="Botones primarios, links, marca"
            />
            <BrandColorField
              name="bg"
              label="Fondo"
              value={branding.bg}
              hint="Background principal"
            />
            <BrandColorField
              name="surface"
              label="Surface"
              value={branding.surface}
              hint="Cards, paneles, inputs"
            />
          </div>
        </div>

        <div>
          <h3 className="mb-2 text-sm font-medium text-white/70">
            Efectos, bordes y glow
          </h3>
          <div className="grid gap-3 sm:grid-cols-3">
            <BrandColorField
              name="effect"
              label="Efectos / glow"
              value={branding.effect}
              hint="Orbes, scan, cursor glow, pulses"
            />
            <BrandColorField
              name="border"
              label="Bordes"
              value={branding.border}
              hint="Borders, outlines, pills"
            />
            <BrandColorField
              name="orb"
              label="Orb secundario"
              value={branding.orb}
              hint="Glow oscuro / atmosphere"
            />
          </div>
          <div
            className="mt-4 overflow-hidden rounded-xl border p-4"
            style={{
              borderColor: `color-mix(in srgb, ${branding.border} 40%, transparent)`,
              background: `radial-gradient(ellipse 80% 60% at 50% 30%, color-mix(in srgb, ${branding.effect} 18%, transparent), transparent 60%), ${branding.surface}`,
            }}
          >
            <p className="text-xs uppercase tracking-wider text-white/50">
              Preview
            </p>
            <p
              className="mt-1 text-lg font-semibold"
              style={{ color: branding.accent }}
            >
              {branding.brandName}
            </p>
            <div className="mt-3 flex flex-wrap gap-2">
              <span
                className="rounded-full px-3 py-1 text-xs font-medium text-black"
                style={{ background: branding.accent }}
              >
                Accent
              </span>
              <span
                className="rounded-full border px-3 py-1 text-xs"
                style={{
                  borderColor: branding.border,
                  color: branding.effect,
                }}
              >
                Border / effect
              </span>
              <span
                className="rounded-full px-3 py-1 text-xs"
                style={{
                  background: `color-mix(in srgb, ${branding.orb} 80%, transparent)`,
                  color: "#fff",
                }}
              >
                Orb
              </span>
            </div>
          </div>
        </div>

        <div>
          <label className="label">Imagen hero</label>
          {branding.heroImage && (
            // eslint-disable-next-line @next/next/no-img-element
            <img
              src={branding.heroImage}
              alt="Hero preview"
              className="mb-3 h-36 w-full rounded-xl object-cover border border-white/10"
            />
          )}
          <input
            className="input"
            type="file"
            name="heroImageFile"
            accept="image/jpeg,image/png,image/webp,image/gif"
          />
          <p className="mt-1 text-xs text-white/40">
            Sube JPG/PNG/WEBP (max 5MB). O deja URL abajo.
          </p>
          <input
            className="input mt-2"
            name="heroImage"
            defaultValue={branding.heroImage}
            placeholder="URL alternativa (opcional)"
          />
        </div>

        <div>
          <label className="label">Logo</label>
          {branding.logoUrl && (
            // eslint-disable-next-line @next/next/no-img-element
            <img
              src={branding.logoUrl}
              alt="Logo preview"
              className="mb-3 h-16 w-16 rounded-xl object-cover border border-white/10"
            />
          )}
          <input
            className="input"
            type="file"
            name="logoFile"
            accept="image/jpeg,image/png,image/webp,image/gif"
          />
          <input
            className="input mt-2"
            name="logoUrl"
            defaultValue={branding.logoUrl}
            placeholder="URL alternativa (opcional)"
          />
        </div>

        <div>
          <label className="label">Titulo del documento</label>
          <input
            className="input"
            name="documentTitle"
            defaultValue={branding.documentTitle}
          />
        </div>

        <button className="btn-primary" type="submit">
          Guardar branding
        </button>
      </form>

      <form action={updateSiteContentAction} className="card mt-4 space-y-3">
        <h2 className="font-semibold">Site content</h2>
        {keys.map((k) => (
          <div key={k}>
            <label className="label">{k}</label>
            <textarea
              className="input min-h-16"
              name={`content_${k}`}
              defaultValue={content[k]}
            />
          </div>
        ))}
        <button className="btn-primary" type="submit">
          Guardar content
        </button>
      </form>
    </div>
  );
}