SkateSpots/src/components/OfferDialog.tsx

import { useState } from 'react';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import { Label } from '@/components/ui/label';
import { useOfferActions } from '@/hooks/useMarketplaceOffers';
import { useToast } from '@/hooks/useToast';
import { Handshake, Loader2 } from 'lucide-react';

/** Buyer: make a structured offer (amount + note) on a listing. */
export function OfferDialog({
  open,
  onOpenChange,
  listing,
  sellerName,
}: {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  listing: { pubkey: string; identifier: string };
  sellerName: string;
}) {
  const { createOffer } = useOfferActions();
  const { toast } = useToast();
  const [amount, setAmount] = useState('');
  const [note, setNote] = useState('');
  const [busy, setBusy] = useState(false);

  const submit = async () => {
    const parsed = amount.trim() ? Number(amount) : undefined;
    if (parsed !== undefined && (!Number.isFinite(parsed) || parsed <= 0)) {
      toast({ title: 'Enter a valid amount', variant: 'destructive' });
      return;
    }
    setBusy(true);
    try {
      await createOffer({ listing, amount: parsed, currency: 'SATS', note });
      toast({
        title: 'Offer sent',
        description: `${sellerName} can accept or decline it.`,
      });
      onOpenChange(false);
      setAmount('');
      setNote('');
    } catch (e) {
      toast({
        title: 'Could not send the offer',
        description: e instanceof Error ? e.message : 'Something went wrong.',
        variant: 'destructive',
      });
    } finally {
      setBusy(false);
    }
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="mx-4 max-w-[calc(100vw-2rem)] border-2 border-orange-500/40 bg-black sm:max-w-md">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2 text-white">
            <Handshake className="h-5 w-5 text-orange-400" /> Make an offer
          </DialogTitle>
          <DialogDescription className="text-sm text-gray-400">
            Offer an amount for this listing. {sellerName} can accept or decline;
            you arrange payment between yourselves.
          </DialogDescription>
        </DialogHeader>

        <div className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="offer-amount" className="text-xs uppercase tracking-wide text-gray-400">
              Amount (sats, optional)
            </Label>
            <Input
              id="offer-amount"
              value={amount}
              onChange={(e) => setAmount(e.target.value)}
              inputMode="numeric"
              placeholder="e.g. 45000"
              className="h-11 border-gray-700 bg-gray-900 text-white"
            />
          </div>
          <div className="space-y-2">
            <Label htmlFor="offer-note" className="text-xs uppercase tracking-wide text-gray-400">
              Message (optional)
            </Label>
            <Textarea
              id="offer-note"
              value={note}
              onChange={(e) => setNote(e.target.value)}
              rows={3}
              placeholder="Anything the seller should know…"
              className="border-gray-700 bg-gray-900 text-white"
            />
          </div>

          <div className="flex gap-2 pt-1">
            <Button variant="outline" onClick={() => onOpenChange(false)} className="flex-1 border-white/15">
              Cancel
            </Button>
            <Button
              onClick={submit}
              disabled={busy}
              className="flex-1 gap-2 bg-orange-500 font-bold text-black hover:bg-orange-500/90"
            >
              {busy ? <Loader2 className="h-4 w-4 animate-spin" /> : <Handshake className="h-4 w-4" />}
              Send offer
            </Button>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
}