"use client";

import {useState, useTransition} from "react";
import {useRouter} from "next/navigation";
import {Button} from "@/components/ui/button";
import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card";
import {ShieldAlert, ShieldCheck, MessageSquarePlus} from "lucide-react";
import {blacklistCustomer, unblacklistCustomer, addCustomerNote} from "@/features/customers/server/actions";

type CustomerActionsProps = {
  customerId: string;
  tenantSlug: string;
  isBlacklisted: boolean;
};

export function CustomerActions({customerId, tenantSlug, isBlacklisted}: CustomerActionsProps) {
  const router = useRouter();
  const [isPending, startTransition] = useTransition();
  const [error, setError] = useState<string | null>(null);
  const [success, setSuccess] = useState<string | null>(null);

  async function handleBlacklist() {
    if (!window.confirm(isBlacklisted ? "Remove blacklist from this customer?" : "Blacklist this customer? They will be unable to make new bookings.")) return;
    setError(null);
    setSuccess(null);
    const result = isBlacklisted
      ? await unblacklistCustomer(customerId, tenantSlug)
      : await blacklistCustomer(customerId, tenantSlug);
    if (result.success) {
      setSuccess(isBlacklisted ? "Customer removed from blacklist." : "Customer blacklisted.");
      startTransition(() => router.refresh());
    } else {
      setError(result.error ?? "Failed");
    }
  }

  async function handleAddNote() {
    const note = window.prompt("Add a note for this customer:");
    if (!note) return;
    setError(null);
    setSuccess(null);
    const result = await addCustomerNote(customerId, tenantSlug, note);
    if (result.success) {
      setSuccess("Note added.");
      startTransition(() => router.refresh());
    } else {
      setError(result.error ?? "Failed to add note");
    }
  }

  return (
    <Card>
      <CardHeader><CardTitle>Customer Actions</CardTitle></CardHeader>
      <CardContent>
        <div className="flex flex-wrap gap-3">
          <Button
            onClick={handleBlacklist}
            disabled={isPending}
            variant="outline"
            className={isBlacklisted
              ? "border-green-300 text-green-700 hover:bg-green-50"
              : "border-red-300 text-red-600 hover:bg-red-50"
            }
          >
            {isBlacklisted ? (
              <><ShieldCheck className="mr-2 h-4 w-4" />Remove Blacklist</>
            ) : (
              <><ShieldAlert className="mr-2 h-4 w-4" />Blacklist Customer</>
            )}
          </Button>
          <Button onClick={handleAddNote} disabled={isPending} variant="outline">
            <MessageSquarePlus className="mr-2 h-4 w-4" />
            Add Note
          </Button>
        </div>
        {success && <p className="mt-3 rounded-lg bg-green-50 border border-green-200 px-3 py-2 text-sm text-green-700">{success}</p>}
        {error && <p className="mt-3 rounded-lg bg-red-50 border border-red-200 px-3 py-2 text-sm text-red-600">{error}</p>}
      </CardContent>
    </Card>
  );
}