goodgo-platform/apps/web/components/chuyen-nhuong/chuyen-nhuong-detail-client.tsx

'use client';

import {
  Eye,
  Heart,
  MapPin,
  MessageCircle,
  Phone,
  User,
} from 'lucide-react';
import * as React from 'react';
import { TransferItemTable } from '@/components/chuyen-nhuong/transfer-item-table';
import { Badge } from '@/components/ui/badge';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import {
  type TransferListingDetail,
  CATEGORY_ICONS,
  CATEGORY_LABELS,
  STATUS_LABELS,
} from '@/lib/chuyen-nhuong-api';
import { cn } from '@/lib/utils';

interface ChuyenNhuongDetailClientProps {
  listing: TransferListingDetail;
}

function formatVND(value: string): string {
  return new Intl.NumberFormat('vi-VN').format(Number(value)) + ' \u20ab';
}

export function ChuyenNhuongDetailClient({ listing }: ChuyenNhuongDetailClientProps) {
  const statusColor =
    listing.status === 'ACTIVE' ? 'bg-green-100 text-green-800' :
    listing.status === 'RESERVED' ? 'bg-amber-100 text-amber-800' :
    listing.status === 'SOLD' ? 'bg-red-100 text-red-800' :
    'bg-gray-100 text-gray-800';

  return (
    <div className="mx-auto max-w-7xl px-4 py-6">
      {/* Header */}
      <div className="mb-6">
        <div className="mb-2 flex flex-wrap items-center gap-2">
          <Badge className={cn('text-xs', statusColor)} variant="secondary">
            {STATUS_LABELS[listing.status]}
          </Badge>
          <Badge variant="outline" className="inline-flex items-center gap-1 text-xs">
            {(() => {
              const Icon = CATEGORY_ICONS[listing.category];
              return <Icon className="h-3.5 w-3.5" aria-hidden="true" />;
            })()}
            {CATEGORY_LABELS[listing.category]}
          </Badge>
          {listing.isNegotiable && (
            <Badge className="bg-blue-100 text-blue-800 text-xs" variant="secondary">
              Thương lượng
            </Badge>
          )}
        </div>
        <h1 className="text-2xl font-bold md:text-3xl">{listing.title}</h1>
        <div className="mt-2 flex flex-wrap items-center gap-4 text-sm text-muted-foreground">
          <span className="flex items-center gap-1">
            <MapPin className="h-4 w-4" />
            {listing.address}, {listing.ward ? `${listing.ward}, ` : ''}{listing.district}, {listing.city}
          </span>
        </div>
      </div>

      {/* Quick stats */}
      <div className="my-6 grid grid-cols-2 gap-4 rounded-lg border bg-card p-4 sm:grid-cols-4 lg:grid-cols-6">
        <QuickStat
          label="Giá yêu cầu"
          value={formatVND(listing.askingPriceVND)}
          valueClassName="text-primary"
        />
        {listing.aiEstimatePriceVND && (
          <QuickStat
            label="Giá AI ước tính"
            value={formatVND(listing.aiEstimatePriceVND)}
          />
        )}
        {listing.areaM2 && (
          <QuickStat
            label="Diện tích"
            value={`${listing.areaM2} m\u00b2`}
          />
        )}
        <QuickStat
          icon={<Eye className="h-5 w-5" />}
          label="Lượt xem"
          value={`${listing.viewCount}`}
        />
        <QuickStat
          icon={<Heart className="h-5 w-5" />}
          label="Lượt lưu"
          value={`${listing.saveCount}`}
        />
        <QuickStat
          icon={<MessageCircle className="h-5 w-5" />}
          label="Liên hệ"
          value={`${listing.inquiryCount}`}
        />
      </div>

      <div className="grid gap-6 lg:grid-cols-3">
        {/* Main content */}
        <div className="space-y-6 lg:col-span-2">
          {/* Description */}
          {listing.description && (
            <Card>
              <CardHeader>
                <CardTitle>Mô tả</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="whitespace-pre-wrap text-sm leading-relaxed">
                  {listing.description}
                </p>
              </CardContent>
            </Card>
          )}

          {/* Items table */}
          <Card>
            <CardHeader>
              <CardTitle>Danh sách vật phẩm ({listing.items.length})</CardTitle>
            </CardHeader>
            <CardContent>
              <TransferItemTable items={listing.items} />
            </CardContent>
          </Card>

          {/* Business info */}
          {(listing.businessType || listing.monthlyRentVND || listing.remainingLeaseMo) && (
            <Card>
              <CardHeader>
                <CardTitle>Thông tin kinh doanh</CardTitle>
              </CardHeader>
              <CardContent className="space-y-3">
                {listing.businessType && (
                  <div className="flex items-center justify-between">
                    <span className="text-sm text-muted-foreground">Loại hình kinh doanh</span>
                    <span className="font-medium">{listing.businessType}</span>
                  </div>
                )}
                {listing.monthlyRentVND && (
                  <div className="flex items-center justify-between">
                    <span className="text-sm text-muted-foreground">Tiền thuê hàng tháng</span>
                    <span className="font-medium">{formatVND(listing.monthlyRentVND)}</span>
                  </div>
                )}
                {listing.depositMonths != null && (
                  <div className="flex items-center justify-between">
                    <span className="text-sm text-muted-foreground">Cọc</span>
                    <span className="font-medium">{listing.depositMonths} tháng</span>
                  </div>
                )}
                {listing.remainingLeaseMo != null && (
                  <div className="flex items-center justify-between">
                    <span className="text-sm text-muted-foreground">Hợp đồng còn lại</span>
                    <span className="font-medium">{listing.remainingLeaseMo} tháng</span>
                  </div>
                )}
                {listing.footTraffic && (
                  <div className="flex items-center justify-between">
                    <span className="text-sm text-muted-foreground">Lưu lượng khách</span>
                    <span className="font-medium">{listing.footTraffic}</span>
                  </div>
                )}
              </CardContent>
            </Card>
          )}
        </div>

        {/* Sidebar */}
        <div className="space-y-6">
          {/* Price card */}
          <Card>
            <CardHeader>
              <CardTitle className="text-base">Giá chuyển nhượng</CardTitle>
            </CardHeader>
            <CardContent className="space-y-3">
              <div className="flex items-center justify-between">
                <span className="text-sm text-muted-foreground">Giá yêu cầu</span>
                <span className="text-lg font-bold text-primary">
                  {formatVND(listing.askingPriceVND)}
                </span>
              </div>
              {listing.aiEstimatePriceVND && (
                <div className="flex items-center justify-between">
                  <span className="text-sm text-muted-foreground">Giá AI ước tính</span>
                  <span className="font-semibold">
                    {formatVND(listing.aiEstimatePriceVND)}
                  </span>
                </div>
              )}
              {listing.aiConfidence != null && (
                <div className="flex items-center justify-between border-t pt-3">
                  <span className="text-sm text-muted-foreground">Độ tin cậy AI</span>
                  <span className="font-semibold">{Math.round(listing.aiConfidence * 100)}%</span>
                </div>
              )}
              {listing.isNegotiable && (
                <p className="text-xs text-muted-foreground">Giá có thể thương lượng</p>
              )}
            </CardContent>
          </Card>

          {/* Contact card */}
          <Card className="lg:sticky lg:top-20">
            <CardHeader>
              <CardTitle className="text-base">Thông tin liên hệ</CardTitle>
            </CardHeader>
            <CardContent className="space-y-3">
              {listing.contactName ? (
                <div className="flex items-center gap-2">
                  <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary/10">
                    <User className="h-4 w-4 text-primary" />
                  </div>
                  <p className="text-sm font-medium">{listing.contactName}</p>
                </div>
              ) : null}
              {listing.contactPhone ? (
                <div className="flex items-center gap-2">
                  <Phone className="h-4 w-4 text-muted-foreground" />
                  <p className="text-sm font-medium">{listing.contactPhone}</p>
                </div>
              ) : null}
              {!listing.contactName && !listing.contactPhone && (
                <p className="text-sm text-muted-foreground">Liên hệ qua hệ thống</p>
              )}
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  );
}

// ─── Sub-components ────────────────────────────────────────

function QuickStat({
  icon,
  label,
  value,
  valueClassName,
}: {
  icon?: React.ReactNode;
  label: string;
  value: string;
  valueClassName?: string;
}) {
  return (
    <div className="flex items-center gap-2">
      {icon && <div className="text-muted-foreground">{icon}</div>}
      <div>
        <p className="text-xs text-muted-foreground">{label}</p>
        <p className={cn('text-sm font-semibold', valueClassName)}>{value}</p>
      </div>
    </div>
  );
}