"use client";

import { useRouter } from "next/navigation";
import { useState } from "react";
import { useConfirm } from "@/components/shared/use-confirm";

export function IpBanActions({ banId }: { banId: number }) {
  const router = useRouter();
  const [loading, setLoading] = useState(false);
  const { confirm: askConfirm, dialog: confirmDialog } = useConfirm();

  async function removeBan() {
    if (!(await askConfirm({ title: "Remove IP ban", message: "Are you sure you want to remove this IP ban?" }))) return;
    setLoading(true);
    try {
      const res = await fetch(`/api/admin/ip-bans?id=${banId}`, {
        method: "DELETE",
      });
      if (!res.ok) {
        const data = await res.json().catch(() => ({}));
        alert(data.error || "Failed to remove ban");
      } else {
        router.refresh();
      }
    } catch {
      alert("Failed to remove ban");
    } finally {
      setLoading(false);
    }
  }

  return (
    <>
      {confirmDialog}
      <button
        disabled={loading}
        onClick={removeBan}
        className="bg-red-600 hover:bg-red-700 text-white px-3 py-1 rounded text-xs disabled:opacity-50"
      >
        {loading ? "..." : "Remove"}
      </button>
    </>
  );
}

export function IpBanForm() {
  const router = useRouter();
  const [loading, setLoading] = useState(false);
  const [ipAddress, setIpAddress] = useState("");
  const [reason, setReason] = useState("");
  const [expiresAt, setExpiresAt] = useState("");

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    if (!ipAddress.trim()) return;
    setLoading(true);
    try {
      const res = await fetch("/api/admin/ip-bans", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          ip_address: ipAddress.trim(),
          reason: reason.trim() || null,
          expires_at: expiresAt || null,
        }),
      });
      if (!res.ok) {
        const data = await res.json().catch(() => ({}));
        alert(data.error || "Failed to add ban");
      } else {
        setIpAddress("");
        setReason("");
        setExpiresAt("");
        router.refresh();
      }
    } catch {
      alert("Failed to add ban");
    } finally {
      setLoading(false);
    }
  }

  return (
    <form onSubmit={handleSubmit} className="flex flex-wrap gap-3 items-end">
      <div>
        <label className="block text-text-muted text-sm mb-1">IP Address</label>
        <input
          type="text"
          value={ipAddress}
          onChange={(e) => setIpAddress(e.target.value)}
          placeholder="e.g. 192.168.1.1"
          className="bg-surface-light border border-surface-light rounded-lg px-4 py-2 text-text focus:outline-none focus:ring-1 focus:ring-primary w-48"
          required
        />
      </div>
      <div>
        <label className="block text-text-muted text-sm mb-1">Reason</label>
        <input
          type="text"
          value={reason}
          onChange={(e) => setReason(e.target.value)}
          placeholder="Optional reason"
          className="bg-surface-light border border-surface-light rounded-lg px-4 py-2 text-text focus:outline-none focus:ring-1 focus:ring-primary w-64"
        />
      </div>
      <div>
        <label className="block text-text-muted text-sm mb-1">
          Expires (optional)
        </label>
        <input
          type="datetime-local"
          value={expiresAt}
          onChange={(e) => setExpiresAt(e.target.value)}
          className="bg-surface-light border border-surface-light rounded-lg px-4 py-2 text-text focus:outline-none focus:ring-1 focus:ring-primary"
        />
      </div>
      <button
        type="submit"
        disabled={loading}
        className="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg transition-colors text-sm disabled:opacity-50"
      >
        {loading ? "Adding..." : "Add Ban"}
      </button>
    </form>
  );
}