"use client";

import { useState } from "react";
import { vibrate } from "@/lib/haptics";

interface TipButtonProps {
  receiverId: number;
  receiverName: string;
}

const TIP_AMOUNTS = [5, 10, 25, 50];

export default function TipButton({ receiverId, receiverName }: TipButtonProps) {
  const [open, setOpen] = useState(false);
  const [selectedAmount, setSelectedAmount] = useState<number | null>(null);
  const [confirming, setConfirming] = useState(false);
  const [sending, setSending] = useState(false);
  const [result, setResult] = useState<{ success: boolean; message: string } | null>(null);

  async function handleSend() {
    if (!selectedAmount) return;
    setSending(true);
    setResult(null);

    try {
      const res = await fetch("/api/tips", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ receiver_id: receiverId, amount: selectedAmount }),
      });

      const data = await res.json();

      if (!res.ok) {
        setResult({ success: false, message: data.error || "Failed to send tip" });
      } else {
        vibrate([10, 50, 10]);
        setResult({ success: true, message: `Sent ${selectedAmount} credits to ${receiverName}!` });
        setTimeout(() => {
          setOpen(false);
          setSelectedAmount(null);
          setConfirming(false);
          setResult(null);
        }, 2000);
      }
    } catch {
      setResult({ success: false, message: "Failed to send tip. Please try again." });
    } finally {
      setSending(false);
    }
  }

  if (!open) {
    return (
      <button
        onClick={() => setOpen(true)}
        className="inline-flex items-center gap-2 bg-gold/20 hover:bg-gold/30 text-gold border border-gold/30 font-semibold px-5 py-2.5 rounded-lg transition-all duration-200 text-sm"
      >
        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
        Send Tip
      </button>
    );
  }

  return (
    <div className="bg-surface-light border border-gold/20 rounded-lg p-4 space-y-3">
      <div className="flex items-center justify-between">
        <h3 className="text-sm font-semibold text-gold">Send a Tip</h3>
        <button
          onClick={() => { setOpen(false); setConfirming(false); setSelectedAmount(null); setResult(null); }}
          className="text-text-muted hover:text-text text-sm"
        >
          Cancel
        </button>
      </div>

      {!confirming ? (
        <>
          <p className="text-text-muted text-xs">Select an amount to send to {receiverName}:</p>
          <div className="flex gap-2">
            {TIP_AMOUNTS.map((amount) => (
              <button
                key={amount}
                onClick={() => { setSelectedAmount(amount); setConfirming(true); }}
                className="flex-1 bg-gold/10 hover:bg-gold/20 text-gold border border-gold/20 rounded-lg py-2 text-sm font-semibold transition-colors"
              >
                {amount}
              </button>
            ))}
          </div>
        </>
      ) : (
        <div className="space-y-3">
          <p className="text-text text-sm">
            Send <span className="text-gold font-bold">{selectedAmount} credits</span> to{" "}
            <span className="font-semibold">{receiverName}</span>?
          </p>

          {result && (
            <p className={`text-sm ${result.success ? "text-green-400" : "text-red-400"}`}>
              {result.message}
            </p>
          )}

          <div className="flex gap-2">
            <button
              onClick={handleSend}
              disabled={sending}
              className="flex-1 bg-gold hover:bg-gold-light text-black font-semibold py-2 rounded-lg transition-all duration-200 disabled:opacity-50 text-sm"
            >
              {sending ? "Sending..." : "Confirm"}
            </button>
            <button
              onClick={() => { setConfirming(false); setSelectedAmount(null); setResult(null); }}
              disabled={sending}
              className="px-4 py-2 bg-surface hover:bg-surface-light text-text-muted rounded-lg transition-colors text-sm"
            >
              Back
            </button>
          </div>
        </div>
      )}
    </div>
  );
}