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

'use client';

import * as React from 'react';
import { toast } from 'sonner';
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);

  // Pre-fill phone from auth store when modal opens
  React.useEffect(() => {
    if (open && user?.phone) {
      setPhone(user.phone);
    }
    if (open) {
      setError(null);
      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 lòng nhập nội dung tin nhắn');
      return;
    }
    if (!trimmedPhone || trimmedPhone.length < 9) {
      setError('Vui lòng nhập số điện thoại hợp lệ');
      return;
    }

    setError(null);

    try {
      await createInquiry.mutateAsync({
        listingId,
        message: trimmedMessage,
        phone: trimmedPhone,
      });
      onOpenChange(false);
      toast.success('Đã gửi thành công!', {
        description: `Tin nhắn của bạn đã được gửi đến ${sellerName}. Họ sẽ liên hệ với bạn sớm nhất có thể.`,
      });
    } catch (err) {
      if (err instanceof ApiError && err.status === 401) {
        window.location.href = '/login';
        onOpenChange(false);
        return;
      }
      setError(
        err instanceof ApiError
          ? err.message
          : 'Gửi tin nhắn thất bại. Vui lòng thử lại.',
      );
    }
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Nhắn tin cho người bán</DialogTitle>
          <DialogDescription>
            Gửi tin nhắn về tin đăng &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">Nội dung tin nhắn</Label>
            <Textarea
              id="inquiry-message"
              placeholder="Tôi quan tâm đến bất động sản này. Vui lòng liên hệ với tôi..."
              value={message}
              onChange={(e) => setMessage(e.target.value)}
              rows={4}
              required
              disabled={createInquiry.isPending}
            />
          </div>

          <div className="space-y-2">
            <Label htmlFor="inquiry-phone">Số điện thoại</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}
            >
              Hủy
            </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>
                  Đang gửi...
                </span>
              ) : (
                'Gửi tin nhắn'
              )}
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
}