"use client"

import { useCallback, useEffect, useState } from "react"
import { Button } from "@/components/ui/button"
import { Power } from "lucide-react"
import {
  defaultOfflineUntilIso,
  formatOfflineUntil,
  type SiteStatus,
} from "@/lib/site-status"

function toDatetimeLocalValue(iso: string | null): string {
  if (!iso) {
    const d = new Date(defaultOfflineUntilIso())
    const pad = (n: number) => String(n).padStart(2, "0")
    return `${d.getUTCFullYear()}-${pad(d.getUTCMonth() + 1)}-${pad(d.getUTCDate())}T${pad(d.getUTCHours())}:${pad(d.getUTCMinutes())}`
  }
  const d = new Date(iso)
  const pad = (n: number) => String(n).padStart(2, "0")
  return `${d.getUTCFullYear()}-${pad(d.getUTCMonth() + 1)}-${pad(d.getUTCDate())}T${pad(d.getUTCHours())}:${pad(d.getUTCMinutes())}`
}

function fromDatetimeLocalUtc(local: string): string {
  const [date, time] = local.split("T")
  const [y, m, d] = date.split("-").map(Number)
  const [hh, mm] = time.split(":").map(Number)
  return new Date(Date.UTC(y, m - 1, d, hh, mm, 0)).toISOString()
}

export function AdminOfflineControls() {
  const [status, setStatus] = useState<SiteStatus | null>(null)
  const [untilLocal, setUntilLocal] = useState(toDatetimeLocalValue(null))
  const [message, setMessage] = useState("")
  const [saving, setSaving] = useState(false)

  const refresh = useCallback(async () => {
    try {
      const res = await fetch("/api/site-status", { cache: "no-store" })
      const data = (await res.json()) as SiteStatus
      setStatus(data)
      setUntilLocal(toDatetimeLocalValue(data.offlineUntil))
      setMessage(data.offlineMessage || "")
    } catch {
      /* ignore */
    }
  }, [])

  useEffect(() => {
    void refresh()
    const id = window.setInterval(refresh, 10_000)
    return () => window.clearInterval(id)
  }, [refresh])

  const save = async (offline: boolean) => {
    setSaving(true)
    try {
      const res = await fetch("/api/site-status", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          offline,
          offlineUntil: offline ? fromDatetimeLocalUtc(untilLocal) : null,
          offlineMessage: message.trim() || null,
        }),
      })
      const data = await res.json()
      if (data.status) setStatus(data.status)
      else await refresh()
    } finally {
      setSaving(false)
    }
  }

  const offline = Boolean(status?.offline)

  return (
    <div className="rounded-xl border border-stone-200 bg-white p-4 shadow-sm">
      <div className="flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between">
        <div className="min-w-0 flex-1 space-y-3">
          <div>
            <p className="text-[11px] font-medium uppercase tracking-[0.12em] text-stone-400">
              Calendar availability
            </p>
            <p className="mt-1 text-xs text-stone-500">
              {offline
                ? `Calendar is offline. Visitors see a countdown${
                    status?.offlineUntil
                      ? ` until ${formatOfflineUntil(status.offlineUntil)}.`
                      : '.'
                  }`
                : 'Calendar is online. Visitors can schedule normally.'}
            </p>
          </div>

          <div className="flex flex-col gap-2 sm:flex-row sm:items-center">
            <label className="block text-[11px] font-medium text-stone-500">
              Resume at (UTC)
              <input
                type="datetime-local"
                value={untilLocal}
                onChange={(e) => setUntilLocal(e.target.value)}
                disabled={offline && saving}
                className="mt-1 block h-10 w-full min-w-[200px] rounded-lg border border-stone-300 bg-white px-3 text-sm text-stone-800 sm:w-auto"
              />
            </label>
            <label className="block min-w-0 flex-1 text-[11px] font-medium text-stone-500">
              Message (optional)
              <input
                type="text"
                value={message}
                onChange={(e) => setMessage(e.target.value)}
                placeholder="Calendar maintenance — please check back soon…"
                className="mt-1 block h-10 w-full rounded-lg border border-stone-300 bg-white px-3 text-sm text-stone-800 placeholder:text-stone-400"
              />
            </label>
          </div>
        </div>

        <Button
          type="button"
          size="sm"
          disabled={saving}
          onClick={() => void save(!offline)}
          className={
            offline
              ? "h-10 shrink-0 bg-emerald-600 px-4 text-xs font-medium text-white hover:bg-emerald-700"
              : "h-10 shrink-0 bg-stone-800 px-4 text-xs font-medium text-white hover:bg-stone-700"
          }
        >
          <Power className="mr-1.5 h-3.5 w-3.5" />
          {saving ? "Saving…" : offline ? "Resume calendar" : "Pause calendar"}
        </Button>
      </div>
    </div>
  )
}