wrongmove/frontend/src/components/ListingDetail.tsx

import { ExternalLink, Heart, X, Bed, Maximize2, PoundSterling, Building, Clock, MapPin, Footprints, Bike, Train } from 'lucide-react';
import { Button } from './ui/button';
import { Tabs, TabsList, TabsTrigger, TabsContent } from './ui/tabs';
import { PhotoCarousel } from './PhotoCarousel';
import type { ListingDetailData, DecisionType, POIDistanceInfo } from '@/types';
import { formatDate, formatDuration } from '@/utils/format';

interface ListingDetailProps {
  detail: ListingDetailData;
  onDecide: (decision: DecisionType) => void;
  onClearDecision: () => void;
}

function TravelModeLabel({ mode }: { mode: string }) {
  switch (mode) {
    case 'WALK': return 'Walk';
    case 'BICYCLE': return 'Cycle';
    case 'TRANSIT': return 'Transit';
    default: return mode;
  }
}

export function ListingDetail({ detail, onDecide, onClearDecision }: ListingDetailProps) {
  const allPhotos = [
    ...detail.photos,
    ...detail.floorplans.map(fp => ({ url: fp.url, caption: fp.caption || 'Floorplan', type: 'FLOORPLAN' as string | null })),
  ];

  const pricePerSqm = detail.square_meters ? Math.round(detail.price / detail.square_meters) : null;

  // Group POI distances by POI name for the travel table
  const poiGroups = new Map<string, Map<string, POIDistanceInfo>>();
  for (const d of detail.poi_distances) {
    if (!poiGroups.has(d.poi_name)) {
      poiGroups.set(d.poi_name, new Map());
    }
    poiGroups.get(d.poi_name)!.set(d.travel_mode, d);
  }

  // Check which tabs have content
  const hasOverview = detail.key_features.length > 0 || !!detail.description;
  const hasTravel = detail.poi_distances.length > 0;
  const hasPriceHistory = detail.price_history.length > 1;
  const hasDetails = !!(detail.property_sub_type || detail.furnish_type || detail.council_tax_band || detail.available_from || detail.service_charge != null || detail.lease_left != null);

  return (
    <div className="pb-8">
      {/* Photo carousel - always visible above tabs */}
      <PhotoCarousel photos={allPhotos} />

      <div className="px-4 pt-4 space-y-4">
        {/* Price header */}
        <div>
          <div className="flex items-start justify-between">
            <div>
              <div className="text-2xl font-bold tracking-tight">
                £{detail.price.toLocaleString()}
                {detail.listing_type !== 'BUY' && (
                  <span className="text-muted-foreground font-normal text-base">/mo</span>
                )}
              </div>
              {/* Key metrics */}
              <div className="flex items-center gap-1.5 text-sm text-muted-foreground mt-1">
                <span className="flex items-center gap-1">
                  <Bed className="h-3.5 w-3.5" />
                  {detail.number_of_bedrooms} bed
                </span>
                <span>·</span>
                <span className="flex items-center gap-1">
                  <Maximize2 className="h-3.5 w-3.5" />
                  {detail.square_meters ?? '\u2014'} m²
                </span>
                {pricePerSqm && (
                  <>
                    <span>·</span>
                    <span className="flex items-center gap-1">
                      <PoundSterling className="h-3.5 w-3.5" />
                      £{pricePerSqm}/m²
                    </span>
                  </>
                )}
              </div>
              {detail.display_address && (
                <div className="flex items-center gap-1 text-sm text-muted-foreground mt-1">
                  <MapPin className="h-3.5 w-3.5" />
                  {detail.display_address}
                </div>
              )}
            </div>
          </div>
        </div>

        {/* Action buttons */}
        <div className="flex gap-2">
          <Button
            variant={detail.decision === 'disliked' ? 'destructive' : 'outline'}
            className="flex-1"
            onClick={() => detail.decision === 'disliked' ? onClearDecision() : onDecide('disliked')}
          >
            <X className="h-4 w-4 mr-2" />
            {detail.decision === 'disliked' ? 'Disliked' : 'Dislike'}
          </Button>
          <Button
            variant={detail.decision === 'liked' ? 'default' : 'outline'}
            className={`flex-1 ${detail.decision === 'liked' ? 'bg-green-600 hover:bg-green-700' : ''}`}
            onClick={() => detail.decision === 'liked' ? onClearDecision() : onDecide('liked')}
          >
            <Heart className={`h-4 w-4 mr-2 ${detail.decision === 'liked' ? 'fill-current' : ''}`} />
            {detail.decision === 'liked' ? 'Liked' : 'Like'}
          </Button>
          <Button asChild variant="outline" size="icon" className="shrink-0">
            <a href={detail.url} target="_blank" rel="noopener noreferrer" title="View on Rightmove">
              <ExternalLink className="h-4 w-4" />
            </a>
          </Button>
        </div>

        {/* Tabbed sections */}
        <Tabs defaultValue="overview">
          <TabsList>
            <TabsTrigger value="overview">Overview</TabsTrigger>
            {hasTravel && <TabsTrigger value="travel">Travel</TabsTrigger>}
            {hasPriceHistory && <TabsTrigger value="price-history">Price</TabsTrigger>}
            {hasDetails && <TabsTrigger value="details">Details</TabsTrigger>}
          </TabsList>

          {/* Overview tab */}
          <TabsContent value="overview" className="space-y-4">
            {detail.key_features.length > 0 && (
              <div>
                <h3 className="text-sm font-semibold mb-2">Key Features</h3>
                <ul className="list-disc list-inside text-sm text-muted-foreground space-y-1">
                  {detail.key_features.map((f, i) => (
                    <li key={i}>{f}</li>
                  ))}
                </ul>
              </div>
            )}

            {detail.description && (
              <div>
                <h3 className="text-sm font-semibold mb-2">Description</h3>
                <p className="text-sm text-muted-foreground whitespace-pre-line">{detail.description}</p>
              </div>
            )}

            {/* Floorplans */}
            {detail.floorplans.length > 0 && (
              <div>
                <h3 className="text-sm font-semibold mb-2">Floorplans</h3>
                <div className="space-y-2">
                  {detail.floorplans.map((fp, i) => (
                    <img key={i} src={fp.url} alt={fp.caption || 'Floorplan'} className="w-full rounded-md border" />
                  ))}
                </div>
              </div>
            )}

            {/* Agency — wrapped in a labelled block so the Overview tab doesn't
                collapse to just "Foxtons" when description/key_features/floorplans are empty. */}
            {detail.agency && (
              <div>
                <h3 className="text-sm font-semibold mb-2">Listed by</h3>
                <div className="flex items-center gap-2 text-sm text-muted-foreground">
                  <Building className="h-4 w-4" />
                  <span>{detail.agency}</span>
                </div>
              </div>
            )}

            {!hasOverview && !detail.floorplans.length && !detail.agency && (
              <p className="text-sm text-muted-foreground">No overview information available.</p>
            )}
          </TabsContent>

          {/* Travel tab */}
          {hasTravel && (
            <TabsContent value="travel">
              <div className="overflow-x-auto">
                <table className="w-full text-sm">
                  <thead>
                    <tr className="border-b">
                      <th className="text-left py-2 pr-4 font-medium text-muted-foreground">Destination</th>
                      <th className="text-center py-2 px-2 font-medium text-muted-foreground">
                        <span className="inline-flex items-center gap-1"><Footprints className="h-3 w-3" /> <TravelModeLabel mode="WALK" /></span>
                      </th>
                      <th className="text-center py-2 px-2 font-medium text-muted-foreground">
                        <span className="inline-flex items-center gap-1"><Bike className="h-3 w-3" /> <TravelModeLabel mode="BICYCLE" /></span>
                      </th>
                      <th className="text-center py-2 px-2 font-medium text-muted-foreground">
                        <span className="inline-flex items-center gap-1"><Train className="h-3 w-3" /> <TravelModeLabel mode="TRANSIT" /></span>
                      </th>
                    </tr>
                  </thead>
                  <tbody>
                    {Array.from(poiGroups.entries()).map(([poiName, modes]) => (
                      <tr key={poiName} className="border-b last:border-0">
                        <td className="py-2 pr-4 font-medium">{poiName}</td>
                        {(['WALK', 'BICYCLE', 'TRANSIT'] as const).map(mode => {
                          const d = modes.get(mode);
                          return (
                            <td key={mode} className="py-2 px-2 text-center text-muted-foreground">
                              {d ? formatDuration(d.duration_seconds) : '\u2014'}
                            </td>
                          );
                        })}
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </TabsContent>
          )}

          {/* Price History tab */}
          {hasPriceHistory && (
            <TabsContent value="price-history">
              <div className="space-y-2">
                {detail.price_history.map((entry) => (
                  <div key={entry.id} className="flex justify-between items-center text-sm py-1.5 border-b last:border-0">
                    <span className="text-muted-foreground">
                      {typeof entry.last_seen === 'string' ? entry.last_seen.split('T')[0] : '—'}
                    </span>
                    <span className="font-medium">
                      £{typeof entry.price === 'number' && Number.isFinite(entry.price) ? entry.price.toLocaleString() : '—'}
                    </span>
                  </div>
                ))}
              </div>
            </TabsContent>
          )}

          {/* Details tab */}
          {hasDetails && (
            <TabsContent value="details">
              <div className="grid grid-cols-2 gap-3 text-sm">
                {detail.property_sub_type && (
                  <div className="space-y-0.5">
                    <div className="text-xs text-muted-foreground">Property Type</div>
                    <div className="font-medium flex items-center gap-1.5">
                      <Building className="h-3.5 w-3.5 text-muted-foreground" />
                      {detail.property_sub_type}
                    </div>
                  </div>
                )}
                {detail.furnish_type && (
                  <div className="space-y-0.5">
                    <div className="text-xs text-muted-foreground">Furnishing</div>
                    <div className="font-medium">{detail.furnish_type}</div>
                  </div>
                )}
                {detail.council_tax_band && (
                  <div className="space-y-0.5">
                    <div className="text-xs text-muted-foreground">Council Tax</div>
                    <div className="font-medium">Band {detail.council_tax_band}</div>
                  </div>
                )}
                {detail.lease_left != null && (
                  <div className="space-y-0.5">
                    <div className="text-xs text-muted-foreground">Lease Remaining</div>
                    <div className="font-medium">{detail.lease_left} years</div>
                  </div>
                )}
                {detail.service_charge != null && (
                  <div className="space-y-0.5">
                    <div className="text-xs text-muted-foreground">Service Charge</div>
                    <div className="font-medium">£{detail.service_charge.toLocaleString()}</div>
                  </div>
                )}
                {detail.available_from && (
                  <div className="space-y-0.5">
                    <div className="text-xs text-muted-foreground">Available From</div>
                    <div className="font-medium flex items-center gap-1.5">
                      <Clock className="h-3.5 w-3.5 text-muted-foreground" />
                      {formatDate(detail.available_from)}
                    </div>
                  </div>
                )}
              </div>
            </TabsContent>
          )}
        </Tabs>
      </div>
    </div>
  );
}