"use client";

/**
 * /broadcasts — compose and publish an announcement.
 *
 * Publishing is one-way and immediate: it pushes to every subscribed device,
 * nudges everyone currently connected, and each user is shown the modal once.
 * There is no recall, which is why publishing is behind a confirmation and
 * why drafts exist.
 *
 * The only delivery signal is the dismissal count, since nothing is stored on
 * the user's side.
 */

import { useEffect, useState } from "react";
import { toast } from "sonner";
import { broadcasts, type Broadcast } from "@/lib/api";

export default function BroadcastsPage() {
  const [items, setItems] = useState<Broadcast[]>([]);
  const [loading, setLoading] = useState(true);

  const refresh = () =>
    broadcasts
      .list()
      .then((r) => setItems(r.items))
      .catch(() => toast.error("Could not load announcements"))
      .finally(() => setLoading(false));

  useEffect(() => {
    void refresh();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <div className="space-y-6">
      <header>
        <h1 className="text-xl font-semibold text-foreground">Announcements</h1>
        <p className="mt-1 text-sm text-muted-foreground">
          Pushed to every user and shown once, in a modal. Nothing is saved to
          their notification history.
        </p>
      </header>

      <Composer onDone={refresh} />

      <section className="space-y-2">
        <h2 className="text-sm font-medium text-foreground">Recent</h2>
        {loading ? (
          <p className="text-sm text-muted-foreground">Loading…</p>
        ) : items.length === 0 ? (
          <p className="text-sm text-muted-foreground">Nothing sent yet.</p>
        ) : (
          <ul className="divide-y divide-border rounded-lg border border-border">
            {items.map((b) => (
              <BroadcastRow key={b.id} item={b} onChanged={refresh} />
            ))}
          </ul>
        )}
      </section>
    </div>
  );
}

function Composer({ onDone }: { onDone: () => void }) {
  const [title, setTitle] = useState("");
  const [body, setBody] = useState("");
  const [ctaLabel, setCtaLabel] = useState("");
  const [ctaUrl, setCtaUrl] = useState("");
  const [expiresAt, setExpiresAt] = useState("");
  const [bannerKey, setBannerKey] = useState<string | null>(null);
  const [uploading, setUploading] = useState(false);
  const [busy, setBusy] = useState(false);

  const uploadBanner = async (file: File) => {
    setUploading(true);
    try {
      const { upload_url, key } = await broadcasts.presignBanner(file.type);
      const res = await fetch(upload_url, {
        method: "PUT",
        headers: { "Content-Type": file.type },
        body: file,
      });
      if (!res.ok) throw new Error(String(res.status));
      setBannerKey(key);
      toast.success("Banner uploaded");
    } catch {
      toast.error("Banner upload failed");
    } finally {
      setUploading(false);
    }
  };

  const submit = async (publish: boolean) => {
    if (!title.trim() || !body.trim()) return;
    if (
      publish &&
      !window.confirm(
        "Publish now? This pushes to every user immediately and cannot be recalled.",
      )
    ) {
      return;
    }
    setBusy(true);
    try {
      await broadcasts.create({
        title: title.trim(),
        body: body.trim(),
        banner_key: bannerKey,
        cta_label: ctaLabel.trim() || null,
        cta_url: ctaUrl.trim() || null,
        expires_at: expiresAt ? new Date(expiresAt).toISOString() : null,
        publish,
      });
      toast.success(publish ? "Published" : "Draft saved");
      setTitle("");
      setBody("");
      setCtaLabel("");
      setCtaUrl("");
      setExpiresAt("");
      setBannerKey(null);
      onDone();
    } catch (err) {
      toast.error(err instanceof Error ? err.message : "Could not save");
    } finally {
      setBusy(false);
    }
  };

  const field =
    "w-full rounded-md border border-border bg-background px-3 py-2 text-sm outline-none focus:ring-1 focus:ring-primary/40";

  return (
    <section className="space-y-3 rounded-lg border border-border p-4">
      <input
        value={title}
        onChange={(e) => setTitle(e.target.value)}
        maxLength={120}
        placeholder="Title"
        className={field}
      />
      <textarea
        value={body}
        onChange={(e) => setBody(e.target.value)}
        rows={4}
        maxLength={2000}
        placeholder="Description — *bold*, ~strike~ and `code` work, same as chat."
        className={`${field} resize-y`}
      />

      <div className="grid gap-3 sm:grid-cols-2">
        <input
          value={ctaLabel}
          onChange={(e) => setCtaLabel(e.target.value)}
          maxLength={40}
          placeholder="Button label (optional)"
          className={field}
        />
        <input
          value={ctaUrl}
          onChange={(e) => setCtaUrl(e.target.value)}
          placeholder="Button URL — /chats or https://…"
          className={field}
        />
      </div>

      <div className="grid gap-3 sm:grid-cols-2">
        <label className="text-sm text-muted-foreground">
          Stop showing after
          <input
            type="datetime-local"
            value={expiresAt}
            onChange={(e) => setExpiresAt(e.target.value)}
            className={`${field} mt-1`}
          />
        </label>
        <label className="text-sm text-muted-foreground">
          Banner image
          <input
            type="file"
            accept="image/png,image/jpeg,image/webp"
            disabled={uploading}
            onChange={(e) => {
              const f = e.target.files?.[0];
              if (f) void uploadBanner(f);
            }}
            className={`${field} mt-1`}
          />
          {bannerKey && (
            <span className="mt-1 block text-xs text-primary">
              Uploaded — it will appear above the text.
            </span>
          )}
        </label>
      </div>

      <div className="flex justify-end gap-2 pt-1">
        <button
          type="button"
          disabled={busy || !title.trim() || !body.trim()}
          onClick={() => submit(false)}
          className="rounded-md border border-border px-4 py-2 text-sm hover:bg-muted disabled:opacity-50"
        >
          Save draft
        </button>
        <button
          type="button"
          disabled={busy || !title.trim() || !body.trim()}
          onClick={() => submit(true)}
          className="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
        >
          Publish now
        </button>
      </div>
    </section>
  );
}

function BroadcastRow({
  item,
  onChanged,
}: {
  item: Broadcast;
  onChanged: () => void;
}) {
  const [busy, setBusy] = useState(false);
  const live = !!item.published_at;

  const act = async (fn: () => Promise<unknown>, ok: string) => {
    setBusy(true);
    try {
      await fn();
      toast.success(ok);
      onChanged();
    } catch (err) {
      toast.error(err instanceof Error ? err.message : "Failed");
    } finally {
      setBusy(false);
    }
  };

  return (
    <li className="flex items-start gap-3 p-3">
      <div className="min-w-0 flex-1">
        <p className="truncate text-sm font-medium text-foreground">
          {item.title}
        </p>
        <p className="mt-0.5 line-clamp-2 text-xs text-muted-foreground">
          {item.body}
        </p>
        <p className="mt-1 text-xs text-muted-foreground">
          {live
            ? `Published · dismissed by ${item.seen_count}`
            : "Draft — not sent"}
          {item.expires_at
            ? ` · stops ${new Date(item.expires_at).toLocaleDateString()}`
            : ""}
        </p>
      </div>

      <div className="flex shrink-0 gap-2">
        {!live && (
          <button
            type="button"
            disabled={busy}
            onClick={() =>
              window.confirm("Publish now? This cannot be recalled.") &&
              act(() => broadcasts.publish(item.id), "Published")
            }
            className="rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
          >
            Publish
          </button>
        )}
        <button
          type="button"
          disabled={busy}
          onClick={() =>
            window.confirm(
              live
                ? "Delete this? Anyone who hasn't seen it never will."
                : "Delete this draft?",
            ) && act(() => broadcasts.remove(item.id), "Deleted")
          }
          className="rounded-md border border-border px-3 py-1.5 text-xs text-muted-foreground hover:bg-muted disabled:opacity-50"
        >
          Delete
        </button>
      </div>
    </li>
  );
}