goodgo-platform/apps/web/components/inquiries/inquiry-detail-dialog.tsx

'use client';

import { MessageCircle, Phone } from 'lucide-react';
import { InquiryStatusBadge } from '@/components/inquiries/inquiry-row';
import { Button } from '@/components/ui/button';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import { useMarkInquiryRead } from '@/lib/hooks/use-inquiries';
import type { InquiryReadDto } from '@/lib/inquiries-api';
import { formatPhone, zaloHref } from '@/lib/phone';

interface InquiryDetailDialogProps {
  inquiry: InquiryReadDto | null;
  open: boolean;
  onOpenChange: (open: boolean) => void;
}

export function InquiryDetailDialog({ inquiry, open, onOpenChange }: InquiryDetailDialogProps) {
  const markAsRead = useMarkInquiryRead();

  if (!inquiry) return null;

  const handleMarkRead = () => {
    markAsRead.mutate(inquiry.id, {
      onSuccess: () => {
        onOpenChange(false);
      },
    });
  };

  const formattedDate = new Date(inquiry.createdAt).toLocaleDateString('vi-VN', {
    weekday: 'long',
    day: '2-digit',
    month: '2-digit',
    year: 'numeric',
    hour: '2-digit',
    minute: '2-digit',
  });

  const phone = inquiry.phone ?? inquiry.userPhone;

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-md sm:max-w-lg">
        <DialogHeader>
          <DialogTitle>Chi tiết liên hệ</DialogTitle>
          <DialogDescription>
            {inquiry.listingTitle}
          </DialogDescription>
        </DialogHeader>

        <div className="space-y-4 py-2">
          {/* Contact info */}
          <div className="rounded-lg border p-4 space-y-2">
            <div className="flex items-center justify-between">
              <span className="text-sm font-medium">{inquiry.userName}</span>
              <InquiryStatusBadge isRead={inquiry.isRead} />
            </div>
            <div className="space-y-1 text-sm text-muted-foreground">
              <p>SĐT: {formatPhone(phone)}</p>
              <p>Ngày gửi: {formattedDate}</p>
            </div>
          </div>

          {/* Message */}
          <div className="space-y-1.5">
            <h4 className="text-sm font-medium">Nội dung</h4>
            <div className="rounded-lg bg-muted p-3 text-sm leading-relaxed">
              {inquiry.message}
            </div>
          </div>

          {/* Quick actions */}
          <div className="space-y-1.5">
            <h4 className="text-sm font-medium">Liên hệ nhanh</h4>
            <div className="flex flex-wrap gap-2">
              <a
                href={`tel:${phone}`}
                className="inline-flex items-center gap-1.5 rounded-md border px-3 py-1.5 text-sm transition-colors hover:bg-accent"
              >
                <Phone className="h-4 w-4" aria-hidden="true" /> Gọi điện
              </a>
              <a
                href={zaloHref(phone)}
                target="_blank"
                rel="noopener noreferrer"
                className="inline-flex items-center gap-1.5 rounded-md border px-3 py-1.5 text-sm transition-colors hover:bg-accent"
              >
                <MessageCircle className="h-4 w-4" aria-hidden="true" /> Zalo
              </a>
            </div>
          </div>
        </div>

        <DialogFooter>
          <Button variant="outline" onClick={() => onOpenChange(false)}>
            Đóng
          </Button>
          {!inquiry.isRead && (
            <Button onClick={handleMarkRead} disabled={markAsRead.isPending}>
              {markAsRead.isPending ? 'Đang xử lý...' : 'Đánh dấu đã đọc'}
            </Button>
          )}
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}