'use client';

import Image from 'next/image';
import * as React from 'react';
import { KpiCard } from '@/components/design-system';
import { formatPrice, formatPricePerM2 } from '@/lib/currency';
import type { ListingDetail } from '@/lib/listings-api';

interface ListingPreviewPanelProps {
  listing: ListingDetail | null;
}

/**
 * Right-side preview panel shown on row hover in the listings table.
 * Displays the first image + key KPIs for the hovered listing.
 */
export function ListingPreviewPanel({ listing }: ListingPreviewPanelProps) {
  if (!listing) {
    return (
      <div className="flex h-full items-center justify-center text-body-sm text-foreground-dim">
        Di chuột qua dòng để xem trước
      </div>
    );
  }

  const thumbnail =
    listing.property.thumbnail ??
    listing.property.media?.[0]?.url ??
    null;

  return (
    <div className="flex h-full flex-col gap-3 overflow-auto p-3">
      {/* Image */}
      {thumbnail ? (
        <div className="relative aspect-[16/10] w-full overflow-hidden rounded-md bg-background-surface">
          <Image
            src={thumbnail}
            alt={listing.property.title}
            fill
            sizes="320px"
            className="object-cover"
          />
        </div>
      ) : (
        <div className="flex aspect-[16/10] w-full items-center justify-center rounded-md bg-background-surface text-[12px] text-foreground-dim">
          Không có ảnh
        </div>
      )}

      {/* Title */}
      <h3 className="text-body-sm font-semibold text-foreground line-clamp-2">
        {listing.property.title}
      </h3>

      {/* Location */}
      <p className="text-[12px] text-foreground-muted">
        {listing.property.ward}, {listing.property.district}
      </p>

      {/* KPI grid */}
      <div className="grid grid-cols-2 gap-2">
        <KpiCard label="Giá" value={`${formatPrice(listing.priceVND)}`} className="p-2" />
        <KpiCard
          label="Giá/m²"
          value={listing.pricePerM2 ? formatPricePerM2(listing.pricePerM2) : '—'}
          className="p-2"
        />
        <KpiCard label="Diện tích" value={`${listing.property.areaM2} m²`} className="p-2" />
        <KpiCard
          label="Phòng ngủ"
          value={listing.property.bedrooms != null ? String(listing.property.bedrooms) : '—'}
          className="p-2"
        />
        <KpiCard label="Lượt xem" value={listing.viewCount.toLocaleString('vi-VN')} className="p-2" />
        <KpiCard
          label="Lượt lưu"
          value={listing.saveCount.toLocaleString('vi-VN')}
          className="p-2"
        />
      </div>

      {/* Agent */}
      {listing.agent && (
        <div className="mt-auto border-t border-border pt-2">
          <p className="text-[11px] text-foreground-dim">Môi giới</p>
          <p className="text-[12px] text-foreground">
            {listing.agent.agency ?? 'Cá nhân'}
          </p>
        </div>
      )}
    </div>
  );
}