goodgo-platform/apps/web/components/listings/inquiry-modal.tsx

'use client';

import * as React from 'react';
import { Button } from '@/components/ui/button';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
import { ApiError } from '@/lib/api-client';
import { useAuthStore } from '@/lib/auth-store';
import { useCreateInquiry } from '@/lib/hooks/use-inquiries';

interface InquiryModalProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  listingId: string;
  listingTitle: string;
  sellerName: string;
}

export function InquiryModal({
  open,
  onOpenChange,
  listingId,
  listingTitle,
  sellerName,
}: InquiryModalProps) {
  const { user, isAuthenticated } = useAuthStore();
  const createInquiry = useCreateInquiry();

  const [message, setMessage] = React.useState('');
  const [phone, setPhone] = React.useState('');
  const [error, setError] = React.useState<string | null>(null);
  const [success, setSuccess] = React.useState(false);

  // Pre-fill phone from auth store when modal opens
  React.useEffect(() => {
    if (open && user?.phone) {
      setPhone(user.phone);
    }
    if (open) {
      setError(null);
      setSuccess(false);
      setMessage('');
    }
  }, [open, user?.phone]);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    if (!isAuthenticated) {
      window.location.href = '/login';
      onOpenChange(false);
      return;
    }

    const trimmedMessage = message.trim();
    const trimmedPhone = phone.trim();

    if (!trimmedMessage) {
      setError('Vui long nhap noi dung tin nhan');
      return;
    }
    if (!trimmedPhone || trimmedPhone.length < 9) {
      setError('Vui long nhap so dien thoai hop le');
      return;
    }

    setError(null);

    try {
      await createInquiry.mutateAsync({
        listingId,
        message: trimmedMessage,
        phone: trimmedPhone,
      });
      setSuccess(true);
    } catch (err) {
      if (err instanceof ApiError && err.status === 401) {
        window.location.href = '/login';
        onOpenChange(false);
        return;
      }
      setError(
        err instanceof ApiError
          ? err.message
          : 'Gui tin nhan that bai. Vui long thu lai.',
      );
    }
  };

  if (success) {
    return (
      <Dialog open={open} onOpenChange={onOpenChange}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Da gui thanh cong!</DialogTitle>
            <DialogDescription>
              Tin nhan cua ban da duoc gui den {sellerName}. Ho se lien he voi ban som nhat co the.
            </DialogDescription>
          </DialogHeader>
          <div className="flex justify-center py-4">
            <svg
              className="h-16 w-16 text-green-500"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
              />
            </svg>
          </div>
          <DialogFooter>
            <Button onClick={() => onOpenChange(false)}>Dong</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    );
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Nhan tin cho nguoi ban</DialogTitle>
          <DialogDescription>
            Gui tin nhan ve tin dang &ldquo;{listingTitle}&rdquo;
          </DialogDescription>
        </DialogHeader>

        <form onSubmit={handleSubmit} className="space-y-4">
          {error && (
            <div className="rounded-md bg-destructive/10 px-3 py-2 text-sm text-destructive">
              {error}
            </div>
          )}

          <div className="space-y-2">
            <Label htmlFor="inquiry-message">Noi dung tin nhan</Label>
            <Textarea
              id="inquiry-message"
              placeholder="Toi quan tam den bat dong san nay. Vui long lien he voi toi..."
              value={message}
              onChange={(e) => setMessage(e.target.value)}
              rows={4}
              required
              disabled={createInquiry.isPending}
            />
          </div>

          <div className="space-y-2">
            <Label htmlFor="inquiry-phone">So dien thoai</Label>
            <Input
              id="inquiry-phone"
              type="tel"
              placeholder="0912345678"
              value={phone}
              onChange={(e) => setPhone(e.target.value)}
              required
              disabled={createInquiry.isPending}
            />
          </div>

          <DialogFooter>
            <Button
              type="button"
              variant="outline"
              onClick={() => onOpenChange(false)}
              disabled={createInquiry.isPending}
            >
              Huy
            </Button>
            <Button type="submit" disabled={createInquiry.isPending}>
              {createInquiry.isPending ? (
                <span className="flex items-center gap-2">
                  <svg
                    className="h-4 w-4 animate-spin"
                    fill="none"
                    viewBox="0 0 24 24"
                  >
                    <circle
                      className="opacity-25"
                      cx="12"
                      cy="12"
                      r="10"
                      stroke="currentColor"
                      strokeWidth="4"
                    />
                    <path
                      className="opacity-75"
                      fill="currentColor"
                      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
                    />
                  </svg>
                  Dang gui...
                </span>
              ) : (
                'Gui tin nhan'
              )}
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
}