"use client"

import { useState, useTransition } from "react"
import { Button } from "@/components/ui/button"
import type { AdSettings, AdPlacement } from "@/lib/ads/settings"

// Admin form for managing the single Adsterra configuration row. The
// actual write goes through a Next.js server action passed via the
// `action` prop (colocated with /admin/ads/page.tsx) — this keeps the
// form purely presentational and lets us use `useTransition` for
// optimistic disable/spinner states without pulling in a state lib.
export function AdSettingsForm({
  action,
  initial,
}: {
  action: (fd: FormData) => Promise<void>
  initial: AdSettings
}) {
  const [pending, startTransition] = useTransition()
  const [saved, setSaved] = useState(false)
  // Track enabled/placement locally so the preview + helper copy update
  // as the admin toggles them, even before they click Save.
  const [enabled, setEnabled] = useState(initial.enabled)
  const [placement, setPlacement] = useState<AdPlacement>(initial.placement)
  const [frequency, setFrequency] = useState(initial.frequency)
  const [script, setScript] = useState(initial.script ?? "")
  const [label, setLabel] = useState(initial.label ?? "")

  function onSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault()
    const fd = new FormData(e.currentTarget)
    startTransition(async () => {
      await action(fd)
      setSaved(true)
      setTimeout(() => setSaved(false), 2500)
    })
  }

  return (
    <form
      onSubmit={onSubmit}
      className="grid gap-6 rounded-xl border border-border bg-background p-5 shadow-sm md:p-6"
    >
      {/* Enabled toggle ----------------------------------------------- */}
      <div className="flex items-start justify-between gap-4 rounded-lg border border-border bg-muted/30 p-4">
        <div>
          <div className="text-sm font-medium">Show ads</div>
          <p className="text-xs text-muted-foreground">
            Master switch. When off, no Adsterra script is loaded anywhere in the app.
          </p>
        </div>
        <label className="relative inline-flex cursor-pointer items-center">
          <input
            type="checkbox"
            name="enabled"
            checked={enabled}
            onChange={(e) => setEnabled(e.target.checked)}
            className="peer sr-only"
          />
          <span className="h-6 w-11 rounded-full bg-muted transition-colors peer-checked:bg-primary" />
          <span className="absolute left-0.5 top-0.5 h-5 w-5 rounded-full bg-white shadow transition-transform peer-checked:translate-x-5" />
        </label>
      </div>

      {/* Frequency + placement ---------------------------------------- */}
      <div className="grid gap-4 md:grid-cols-2">
        <label className="grid gap-1.5 text-sm">
          <span className="font-medium">Show after every</span>
          <div className="flex items-center gap-2">
            <input
              type="number"
              name="frequency"
              min={1}
              max={50}
              value={frequency}
              onChange={(e) => setFrequency(Number(e.target.value) || 1)}
              className="h-10 w-24 rounded-md border border-input bg-background px-3 text-sm"
            />
            <span className="text-sm text-muted-foreground">completed chats</span>
          </div>
          <span className="text-xs text-muted-foreground">
            Set to 1 to show an ad after every chat. Counter persists in each user&apos;s browser.
          </span>
        </label>

        <label className="grid gap-1.5 text-sm">
          <span className="font-medium">Placement</span>
          <select
            name="placement"
            value={placement}
            onChange={(e) => setPlacement(e.target.value as AdPlacement)}
            className="h-10 rounded-md border border-input bg-background px-3 text-sm"
          >
            <option value="interstitial">Interstitial (full-screen modal)</option>
            <option value="banner_top">Banner — top of header</option>
            <option value="banner_bottom">Banner — above controls</option>
            <option value="popunder">Pop-under (fires on next skip)</option>
            <option value="native">Native (in-feed)</option>
          </select>
          <span className="text-xs text-muted-foreground">
            The script runs inside the chosen container. For pop-unders, Adsterra triggers its own window.
          </span>
        </label>
      </div>

      {/* Label -------------------------------------------------------- */}
      <label className="grid gap-1.5 text-sm">
        <span className="font-medium">
          Internal label <span className="font-normal text-muted-foreground">(optional)</span>
        </span>
        <input
          type="text"
          name="label"
          placeholder="e.g. 300x250 interstitial — Aug campaign"
          value={label}
          onChange={(e) => setLabel(e.target.value)}
          className="h-10 rounded-md border border-input bg-background px-3 text-sm"
        />
      </label>

      {/* Script ------------------------------------------------------- */}
      <label className="grid gap-1.5 text-sm">
        <span className="font-medium">Adsterra script</span>
        <textarea
          name="script"
          rows={10}
          spellCheck={false}
          placeholder={`<script type="text/javascript">\n  atOptions = { ... };\n</script>\n<script src="//www.topcreativeformat.com/..."></script>`}
          value={script}
          onChange={(e) => setScript(e.target.value)}
          className="min-h-[180px] rounded-md border border-input bg-background px-3 py-2 font-mono text-xs leading-relaxed"
        />
        <span className="text-xs text-muted-foreground">
          Paste the full HTML from your Adsterra dashboard. Both inline and external
          &lt;script&gt; tags are supported. Leaving this empty disables ads (same as turning the switch off).
        </span>
      </label>

      {/* Actions ------------------------------------------------------ */}
      <div className="flex items-center gap-3">
        <Button type="submit" disabled={pending} className="min-w-[120px]">
          {pending ? "Saving…" : "Save settings"}
        </Button>
        {saved && <span className="text-sm text-emerald-600">Saved.</span>}
        {initial.updated_at && (
          <span className="ml-auto text-xs text-muted-foreground">
            Last updated {new Date(initial.updated_at).toLocaleString()}
          </span>
        )}
      </div>
    </form>
  )
}