goodgo-platform/apps/web/components/leads/lead-detail-dialog.tsx

'use client';

import { Mail, MessageCircle, Phone } from 'lucide-react';
import * as React from 'react';
import { LeadStatusBadge } from '@/components/leads/lead-status-badge';
import { Button } from '@/components/ui/button';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import { Select } from '@/components/ui/select';
import { useDeleteLead, useUpdateLeadStatus } from '@/lib/hooks/use-leads';
import { LEAD_STATUSES, LEAD_SOURCES, type LeadReadDto, type LeadStatus } from '@/lib/leads-api';
import { formatPhone, zaloHref } from '@/lib/phone';

interface LeadDetailDialogProps {
  lead: LeadReadDto | null;
  open: boolean;
  onOpenChange: (open: boolean) => void;
}

const STATUS_OPTIONS = Object.entries(LEAD_STATUSES) as [LeadStatus, { label: string }][];

function getSourceLabel(source: string): string {
  const found = LEAD_SOURCES.find((s) => s.value === source);
  return found?.label ?? source;
}

export function LeadDetailDialog({ lead, open, onOpenChange }: LeadDetailDialogProps) {
  const updateStatus = useUpdateLeadStatus();
  const deleteLead = useDeleteLead();
  const [confirmDelete, setConfirmDelete] = React.useState(false);

  if (!lead) return null;

  const handleStatusChange = (newStatus: LeadStatus) => {
    updateStatus.mutate(
      { id: lead.id, status: newStatus },
      {
        onSuccess: () => {
          onOpenChange(false);
        },
      },
    );
  };

  const handleDelete = () => {
    if (!confirmDelete) {
      setConfirmDelete(true);
      return;
    }
    deleteLead.mutate(lead.id, {
      onSuccess: () => {
        setConfirmDelete(false);
        onOpenChange(false);
      },
    });
  };

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

  const updatedDate = new Date(lead.updatedAt).toLocaleDateString('vi-VN', {
    day: '2-digit',
    month: '2-digit',
    year: 'numeric',
    hour: '2-digit',
    minute: '2-digit',
  });

  const notes = lead.notes && typeof lead.notes === 'object' && 'text' in lead.notes
    ? String(lead.notes['text'])
    : null;

  return (
    <Dialog open={open} onOpenChange={(v) => { onOpenChange(v); setConfirmDelete(false); }}>
      <DialogContent className="max-w-md sm:max-w-lg">
        <DialogHeader>
          <DialogTitle>Chi tiết lead</DialogTitle>
          <DialogDescription>{lead.name}</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">{lead.name}</span>
              <LeadStatusBadge status={lead.status} />
            </div>
            <div className="space-y-1 text-sm text-muted-foreground">
              <p>SĐT: {formatPhone(lead.phone)}</p>
              {lead.email && <p>Email: {lead.email}</p>}
              <p>Nguồn: {getSourceLabel(lead.source)}</p>
              {lead.score !== null && <p>Điểm: {lead.score}/100</p>}
            </div>
          </div>

          {/* Timeline */}
          <div className="space-y-1.5">
            <h4 className="text-sm font-medium">Lịch sử</h4>
            <div className="space-y-2">
              <div className="flex items-center gap-2 text-sm">
                <div className="h-2 w-2 rounded-full bg-blue-500" />
                <span className="text-muted-foreground">Tạo lúc: {createdDate}</span>
              </div>
              {lead.createdAt !== lead.updatedAt && (
                <div className="flex items-center gap-2 text-sm">
                  <div className="h-2 w-2 rounded-full bg-green-500" />
                  <span className="text-muted-foreground">Cập nhật lúc: {updatedDate}</span>
                </div>
              )}
            </div>
          </div>

          {/* Notes */}
          {notes && (
            <div className="space-y-1.5">
              <h4 className="text-sm font-medium">Ghi chú</h4>
              <div className="rounded-lg bg-muted p-3 text-sm leading-relaxed">
                {notes}
              </div>
            </div>
          )}

          {/* Score bar */}
          {lead.score !== null && (
            <div className="space-y-1.5">
              <h4 className="text-sm font-medium">Điểm lead</h4>
              <div className="h-2 w-full rounded-full bg-muted">
                <div
                  className="h-2 rounded-full bg-primary transition-all"
                  style={{ width: `${lead.score}%` }}
                />
              </div>
              <p className="text-xs text-muted-foreground text-right">{lead.score}/100</p>
            </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:${lead.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>
              {lead.email && (
                <a
                  href={`mailto:${lead.email}`}
                  className="inline-flex items-center gap-1.5 rounded-md border px-3 py-1.5 text-sm transition-colors hover:bg-accent"
                >
                  <Mail className="h-4 w-4" aria-hidden="true" /> Email
                </a>
              )}
              <a
                href={zaloHref(lead.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>

          {/* Status change */}
          <div className="space-y-1.5">
            <h4 className="text-sm font-medium">Chuyển trạng thái</h4>
            <Select
              value={lead.status}
              onChange={(e) => handleStatusChange(e.target.value as LeadStatus)}
              disabled={updateStatus.isPending}
            >
              {STATUS_OPTIONS.map(([value, { label }]) => (
                <option key={value} value={value}>
                  {label}
                </option>
              ))}
            </Select>
          </div>
        </div>

        <DialogFooter>
          <Button
            variant="destructive"
            size="sm"
            onClick={handleDelete}
            disabled={deleteLead.isPending}
          >
            {confirmDelete
              ? deleteLead.isPending
                ? 'Đang xóa...'
                : 'Xác nhận xóa?'
              : 'Xóa lead'}
          </Button>
          <Button variant="outline" onClick={() => onOpenChange(false)}>
            Đóng
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}