goodgo-platform/apps/web/components/du-an/du-an-detail-client.tsx

'use client';

import {
  Building2,
  Calendar,
  Download,
  Expand,
  FileText,
  Grid3X3,
  Home,
  MapPin,
  Phone,
  X,
} from 'lucide-react';
import dynamic from 'next/dynamic';
import Image from 'next/image';
import * as React from 'react';
import { ProjectAiAdviceCard } from '@/components/du-an/project-ai-advice-card';
import { ImageGallery } from '@/components/listings/image-gallery';
import type { POICategory, POIItem } from '@/components/neighborhood';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
import { analyticsApi, type NearbyPOI } from '@/lib/analytics-api';
import { formatPrice } from '@/lib/currency';
import {
  PROJECT_PROPERTY_TYPE_LABELS,
  PROJECT_STATUS_COLORS,
  PROJECT_STATUS_LABELS,
  duAnApi,
  type ProjectDetail,
} from '@/lib/du-an-api';
import { listingsApi, type NeighborhoodScoreResult } from '@/lib/listings-api';
import {
  composeWhyThisProject,
  deriveProjectPersonas,
  type ProjectPersona,
} from '@/lib/project-personas';
import { cn } from '@/lib/utils';

function mapScoreToCategories(result: NeighborhoodScoreResult) {
  return [
    { category: 'education', label: 'Giáo dục', score: result.educationScore },
    { category: 'healthcare', label: 'Y tế', score: result.healthcareScore },
    { category: 'transport', label: 'Giao thông', score: result.transportScore },
    { category: 'shopping', label: 'Mua sắm', score: result.shoppingScore },
    { category: 'environment', label: 'Môi trường', score: result.greeneryScore },
    { category: 'safety', label: 'An ninh', score: result.safetyScore },
  ];
}

const PriceTrendChart = dynamic(
  () => import('@/components/charts/price-trend-chart').then((m) => m.PriceTrendChart),
  { ssr: false },
);
const NeighborhoodRadarChart = dynamic(
  () => import('@/components/neighborhood').then((m) => m.NeighborhoodRadarChart),
  { ssr: false },
);
const NeighborhoodPOIMap = dynamic(
  () => import('@/components/neighborhood').then((m) => m.NeighborhoodPOIMap),
  { ssr: false },
);

type Tab = 'amenities' | 'location' | 'price' | 'listings' | 'documents';

const TABS: { key: Tab; label: string }[] = [
  { key: 'amenities', label: 'Tiện ích' },
  { key: 'location', label: 'Vị trí' },
  { key: 'price', label: 'Giá' },
  { key: 'listings', label: 'Tin đăng' },
  { key: 'documents', label: 'Tài liệu' },
];

interface DuAnDetailClientProps {
  project: ProjectDetail;
}

export function DuAnDetailClient({ project }: DuAnDetailClientProps) {
  const [activeTab, setActiveTab] = React.useState<Tab>('amenities');
  const [inquiryForm, setInquiryForm] = React.useState({
    name: '',
    phone: '',
    message: '',
  });
  const [inquiryState, setInquiryState] = React.useState<
    'idle' | 'loading' | 'success' | 'error'
  >('idle');

  // Live enrichments — fetched from analytics endpoints. Both degrade
  // gracefully: if either endpoint fails, we fall back to the
  // admin-entered `project.pois` / `project.neighborhoodScores` payload.
  const [liveScore, setLiveScore] = React.useState<NeighborhoodScoreResult | null>(null);
  const [livePois, setLivePois] = React.useState<POIItem[] | null>(null);

  React.useEffect(() => {
    if (!project.district || !project.city) return;
    listingsApi
      .getNeighborhoodScore(project.district, project.city)
      .then(setLiveScore)
      .catch(() => {/* silent — LocationTab falls back to admin payload */});
  }, [project.district, project.city]);

  React.useEffect(() => {
    const { latitude, longitude } = project;
    if (latitude == null || longitude == null) return;
    analyticsApi
      .getNearbyPOIs(latitude, longitude)
      .then((res) => {
        const mapped: POIItem[] = res.pois.map((p: NearbyPOI) => ({
          id: p.id,
          name: p.name,
          category: p.category,
          lat: p.lat,
          lng: p.lng,
          distance: p.distance,
        }));
        setLivePois(mapped);
      })
      .catch(() => {/* silent — map still renders without POIs */});
  }, [project.latitude, project.longitude]);

  const statusLabel = PROJECT_STATUS_LABELS[project.status];
  const statusColor = PROJECT_STATUS_COLORS[project.status];

  const handleInquirySubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!inquiryForm.name.trim() || !inquiryForm.phone.trim()) return;

    setInquiryState('loading');
    try {
      await duAnApi.submitInquiry(project.id, {
        name: inquiryForm.name.trim(),
        phone: inquiryForm.phone.trim(),
        message: inquiryForm.message.trim(),
      });
      setInquiryState('success');
    } catch {
      setInquiryState('error');
    }
  };

  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">
            {statusLabel}
          </Badge>
          {project.propertyTypes.map((t) => (
            <Badge key={t} variant="outline" className="text-xs">
              {PROJECT_PROPERTY_TYPE_LABELS[t]}
            </Badge>
          ))}
        </div>
        <h1 className="text-2xl font-bold md:text-3xl">{project.name}</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" />
            {project.address}, {project.district}, {project.city}
          </span>
          <span className="flex items-center gap-1">
            <Building2 className="h-4 w-4" />
            {project.developer.name}
          </span>
          {project.completionDate && (
            <span className="flex items-center gap-1">
              <Calendar className="h-4 w-4" />
              Bàn giao: {new Date(project.completionDate).toLocaleDateString('vi-VN')}
            </span>
          )}
        </div>
      </div>

      {/* Gallery */}
      <ImageGallery
        media={project.media
          .filter((m) => m.type === 'image')
          .map((m) => ({ id: m.id, type: 'image' as const, url: m.url, order: m.order, caption: m.caption }))}
      />

      {/* Quick stats */}
      <div className="my-6 grid grid-cols-2 gap-4 rounded-lg border bg-card p-4 sm:grid-cols-4">
        <QuickStat
          icon={<Grid3X3 className="h-5 w-5" />}
          label="Tổng diện tích"
          value={`${project.totalArea.toLocaleString('vi-VN')} m²`}
        />
        <QuickStat
          icon={<Home className="h-5 w-5" />}
          label="Số căn"
          value={`${project.totalUnits}`}
        />
        <QuickStat
          icon={<Building2 className="h-5 w-5" />}
          label="Số block"
          value={`${project.blocks.length}`}
        />
        <QuickStat
          label="Giá từ"
          value={project.minPrice ? formatPrice(project.minPrice) : 'Liên hệ'}
        />
      </div>

      {/* Persona fit — admin chips (CĐT chọn) merged with derived personas */}
      <ProjectPersonaFitCard project={project} score={liveScore} pois={livePois ?? []} />

      {/* AI advisor card — on-demand Claude call for summary + pros/cons + personas */}
      <div className="my-6">
        <ProjectAiAdviceCard
          projectId={project.id}
          existingPersonas={[
            ...(project.suitableFor ?? []),
            ...deriveProjectPersonas(
              project,
              liveScore,
              (livePois ?? []).map((p) => ({ category: p.category })),
            ).map((d) => d.label),
          ]}
        />
      </div>

      {/* "Vì sao nên chọn dự án này" — admin narrative (preferred) or derived */}
      <ProjectWhyLocationCard project={project} score={liveScore} pois={livePois ?? []} />

      <div className="grid gap-6 lg:grid-cols-3">
        {/* Main content */}
        <div className="space-y-6 lg:col-span-2">
          {/* Description */}
          <Card>
            <CardHeader>
              <CardTitle>Tổng quan dự án</CardTitle>
            </CardHeader>
            <CardContent>
              <p className="whitespace-pre-wrap text-sm leading-relaxed">
                {project.description}
              </p>
            </CardContent>
          </Card>

          {/* Blocks */}
          {project.blocks.length > 0 && (
            <Card>
              <CardHeader>
                <CardTitle>Phân khu / Block</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="grid gap-3 sm:grid-cols-2">
                  {project.blocks.map((block) => (
                    <div
                      key={block.id}
                      className="rounded-lg border p-3"
                    >
                      <p className="font-medium">{block.name}</p>
                      <div className="mt-1 flex gap-4 text-xs text-muted-foreground">
                        <span>{block.totalUnits} căn</span>
                        <span>{block.availableUnits} còn trống</span>
                        <span>{block.floors} tầng</span>
                      </div>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          )}

          {/* Master plan */}
          <MasterPlanViewer project={project} />

          {/* Tabs */}
          <div>
            <div className="flex gap-1 overflow-x-auto border-b" role="tablist">
              {TABS.map((tab) => (
                <button
                  key={tab.key}
                  role="tab"
                  aria-selected={activeTab === tab.key}
                  className={cn(
                    'shrink-0 border-b-2 px-4 py-2 text-sm font-medium transition-colors',
                    activeTab === tab.key
                      ? 'border-primary text-primary'
                      : 'border-transparent text-muted-foreground hover:text-foreground',
                  )}
                  onClick={() => setActiveTab(tab.key)}
                >
                  {tab.label}
                </button>
              ))}
            </div>

            <div className="mt-4">
              {activeTab === 'amenities' && <AmenitiesTab project={project} />}
              {activeTab === 'location' && (
                <LocationTab project={project} liveScore={liveScore} livePois={livePois} />
              )}
              {activeTab === 'price' && <PriceTab project={project} />}
              {activeTab === 'listings' && <ListingsTab project={project} />}
              {activeTab === 'documents' && <DocumentsTab project={project} />}
            </div>
          </div>
        </div>

        {/* Sidebar */}
        <div className="space-y-6">
          {/* Developer card */}
          <Card>
            <CardHeader>
              <CardTitle className="text-base">Chủ đầu tư</CardTitle>
            </CardHeader>
            <CardContent className="flex items-center gap-3">
              {project.developer.logoUrl ? (
                <Image
                  src={project.developer.logoUrl}
                  alt={project.developer.name}
                  width={48}
                  height={48}
                  className="rounded-lg object-contain"
                />
              ) : (
                <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
                  <Building2 className="h-6 w-6 text-primary" />
                </div>
              )}
              <div>
                <p className="font-medium">{project.developer.name}</p>
                <p className="text-xs text-muted-foreground">
                  {project.developer.totalProjects} dự án
                </p>
              </div>
            </CardContent>
          </Card>

          {/* Inquiry form */}
          <Card className="lg:sticky lg:top-20">
            <CardHeader>
              <CardTitle className="text-base">Nhận tư vấn</CardTitle>
            </CardHeader>
            <CardContent>
              {inquiryState === 'success' ? (
                <div className="py-4 text-center">
                  <div className="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
                    <Phone className="h-6 w-6 text-green-600" />
                  </div>
                  <p className="font-medium">Đã gửi thành công!</p>
                  <p className="mt-1 text-sm text-muted-foreground">
                    Chúng tôi sẽ liên hệ bạn sớm nhất.
                  </p>
                </div>
              ) : (
                <form onSubmit={handleInquirySubmit} className="space-y-3">
                  {inquiryState === 'error' && (
                    <p className="rounded-md bg-destructive/10 px-3 py-2 text-sm text-destructive">
                      Gửi thất bại. Vui lòng thử lại.
                    </p>
                  )}
                  <div>
                    <Label htmlFor="inquiry-name">Họ tên</Label>
                    <Input
                      id="inquiry-name"
                      placeholder="Nguyễn Văn A"
                      value={inquiryForm.name}
                      onChange={(e) =>
                        setInquiryForm((f) => ({ ...f, name: e.target.value }))
                      }
                      required
                      disabled={inquiryState === 'loading'}
                    />
                  </div>
                  <div>
                    <Label htmlFor="inquiry-phone">Số điện thoại</Label>
                    <Input
                      id="inquiry-phone"
                      type="tel"
                      placeholder="0912345678"
                      value={inquiryForm.phone}
                      onChange={(e) =>
                        setInquiryForm((f) => ({ ...f, phone: e.target.value }))
                      }
                      required
                      disabled={inquiryState === 'loading'}
                    />
                  </div>
                  <div>
                    <Label htmlFor="inquiry-message">Tin nhắn</Label>
                    <Textarea
                      id="inquiry-message"
                      placeholder="Tôi muốn tìm hiểu thêm về dự án này..."
                      value={inquiryForm.message}
                      onChange={(e) =>
                        setInquiryForm((f) => ({ ...f, message: e.target.value }))
                      }
                      rows={3}
                      disabled={inquiryState === 'loading'}
                    />
                  </div>
                  <Button
                    type="submit"
                    className="w-full"
                    disabled={inquiryState === 'loading'}
                  >
                    {inquiryState === 'loading' ? 'Đang gửi...' : 'Nhận tư vấn'}
                  </Button>
                </form>
              )}
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  );
}

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

function QuickStat({
  icon,
  label,
  value,
}: {
  icon?: React.ReactNode;
  label: string;
  value: 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="text-sm font-semibold">{value}</p>
      </div>
    </div>
  );
}

function AmenitiesTab({ project }: { project: ProjectDetail }) {
  if (project.amenities.length === 0) {
    return <p className="text-sm text-muted-foreground">Chưa cập nhật tiện ích.</p>;
  }

  const grouped = project.amenities.reduce(
    (acc, a) => {
      const cat = a.category || 'Khác';
      if (!acc[cat]) acc[cat] = [];
      acc[cat].push(a);
      return acc;
    },
    {} as Record<string, typeof project.amenities>,
  );

  return (
    <div className="space-y-4">
      {Object.entries(grouped).map(([category, items]) => (
        <div key={category}>
          <h4 className="mb-2 text-sm font-medium">{category}</h4>
          <div className="flex flex-wrap gap-2">
            {items.map((a) => (
              <Badge key={a.id} variant="secondary" className="gap-1">
                {a.name}
              </Badge>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
}

const POI_TYPE_MAP: Record<string, POICategory> = {
  school: 'school',
  hospital: 'hospital',
  transit: 'transit',
  shopping: 'shopping',
  restaurant: 'restaurant',
  park: 'park',
};

function LocationTab({
  project,
  liveScore,
  livePois,
}: {
  project: ProjectDetail;
  liveScore: NeighborhoodScoreResult | null;
  livePois: POIItem[] | null;
}) {
  const hasCoordinates = project.latitude != null && project.longitude != null;

  // Prefer live POIs from the analytics endpoint; fall back to the admin-entered
  // `project.pois` payload (useful before POIs are seeded for the district).
  const mapPois: POIItem[] =
    livePois && livePois.length > 0
      ? livePois
      : project.pois.map((poi) => ({
          id: poi.id,
          name: poi.name,
          category: (POI_TYPE_MAP[poi.type] || 'shopping') as POICategory,
          lat: poi.latitude,
          lng: poi.longitude,
          distance: poi.distance,
        }));

  // Prefer live neighborhood score from the analytics endpoint; fall back to
  // whatever the detail payload embedded (category-level scores only).
  const scoreCategories = liveScore
    ? mapScoreToCategories(liveScore)
    : project.neighborhoodScores.map((s) => ({
        category: s.category,
        label: s.label,
        score: s.score,
      }));

  return (
    <div className="space-y-6">
      <p className="text-sm">
        {project.address}, {project.district}, {project.city}
      </p>

      {/* Map */}
      {hasCoordinates ? (
        <>
          <NeighborhoodPOIMap
            center={{ lat: project.latitude!, lng: project.longitude! }}
            pois={mapPois}
            height="400px"
          />
          <p className="text-sm text-muted-foreground">
            {livePois
              ? `Tìm thấy ${mapPois.length} điểm quan tâm trong bán kính 2 km`
              : `Hiển thị ${mapPois.length} điểm đã được cập nhật thủ công`}
          </p>
        </>
      ) : (
        <div className="flex h-[300px] items-center justify-center rounded-lg bg-muted">
          <p className="text-sm text-muted-foreground">Chưa có tọa độ cho dự án này</p>
        </div>
      )}

      {/* Neighborhood score */}
      {scoreCategories.length > 0 && (
        <div>
          <div className="mb-3 flex items-center gap-2">
            <h4 className="text-sm font-medium">Đánh giá khu vực</h4>
            {liveScore && (
              <Badge
                variant={
                  liveScore.totalScore > 7
                    ? 'success'
                    : liveScore.totalScore >= 5
                      ? 'warning'
                      : 'destructive'
                }
                className="px-2.5 py-0.5 text-sm font-bold"
              >
                {liveScore.totalScore.toFixed(1)}/10
              </Badge>
            )}
          </div>
          <NeighborhoodRadarChart categories={scoreCategories} height={300} />
        </div>
      )}
    </div>
  );
}

function MasterPlanViewer({ project }: { project: ProjectDetail }) {
  const [expanded, setExpanded] = React.useState(false);
  const masterPlans = project.media.filter((m) => m.type === 'master_plan');

  if (masterPlans.length === 0) return null;

  return (
    <Card>
      <CardHeader>
        <CardTitle>Mặt bằng tổng thể</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="grid gap-4 sm:grid-cols-2">
          {masterPlans.map((mp) => (
            <div key={mp.id} className="group relative overflow-hidden rounded-lg border">
              <Image
                src={mp.url}
                alt={mp.caption || 'Mặt bằng tổng thể'}
                width={600}
                height={400}
                className="h-auto w-full object-contain"
              />
              <button
                type="button"
                className="absolute right-2 top-2 rounded-full bg-black/50 p-1.5 text-white opacity-0 transition-opacity group-hover:opacity-100"
                onClick={() => setExpanded(true)}
              >
                <Expand className="h-4 w-4" />
              </button>
              {mp.caption && (
                <p className="px-2 py-1.5 text-center text-xs text-muted-foreground">
                  {mp.caption}
                </p>
              )}
            </div>
          ))}
        </div>

        {/* Fullscreen overlay */}
        {expanded && (
          <div
            className="fixed inset-0 z-50 flex items-center justify-center bg-black/90 p-4"
            onClick={() => setExpanded(false)}
          >
            <button
              type="button"
              className="absolute right-4 top-4 rounded-full bg-white/10 p-2 text-white hover:bg-white/20"
              onClick={() => setExpanded(false)}
            >
              <X className="h-6 w-6" />
            </button>
            <Image
              src={masterPlans[0]!.url}
              alt="Mặt bằng tổng thể"
              width={1200}
              height={800}
              className="max-h-[90vh] max-w-[90vw] object-contain"
              onClick={(e) => e.stopPropagation()}
            />
          </div>
        )}
      </CardContent>
    </Card>
  );
}

function PriceTab({ project }: { project: ProjectDetail }) {
  return (
    <div className="space-y-4">
      {/* Price ranges by type */}
      {project.priceRanges.length > 0 && (
        <div>
          <h4 className="mb-2 text-sm font-medium">Bảng giá theo loại hình</h4>
          <div className="overflow-x-auto">
            <table className="w-full text-sm">
              <thead>
                <tr className="border-b">
                  <th className="px-3 py-2 text-left font-medium">Loại</th>
                  <th className="px-3 py-2 text-right font-medium">Giá thấp nhất</th>
                  <th className="px-3 py-2 text-right font-medium">Giá cao nhất</th>
                  <th className="px-3 py-2 text-right font-medium">Giá/m²</th>
                </tr>
              </thead>
              <tbody>
                {project.priceRanges.map((pr) => (
                  <tr key={pr.propertyType} className="border-b">
                    <td className="px-3 py-2">
                      {PROJECT_PROPERTY_TYPE_LABELS[pr.propertyType]}
                    </td>
                    <td className="px-3 py-2 text-right">{formatPrice(pr.minPrice)}</td>
                    <td className="px-3 py-2 text-right">{formatPrice(pr.maxPrice)}</td>
                    <td className="px-3 py-2 text-right text-muted-foreground">
                      {pr.pricePerM2Min != null
                        ? `${(pr.pricePerM2Min / 1_000_000).toFixed(1)} - ${(pr.pricePerM2Max! / 1_000_000).toFixed(1)} tr/m²`
                        : '—'}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      )}

      {/* Price history chart */}
      {project.priceHistory.length > 0 && (
        <div>
          <h4 className="mb-2 text-sm font-medium">Lịch sử giá</h4>
          <PriceTrendChart
            data={project.priceHistory.map((ph) => ({
              period: ph.period,
              'Gia/m2': ph.avgPricePerM2 / 1_000_000,
              'Tin đăng': ph.transactionCount,
            }))}
            height={300}
          />
        </div>
      )}

      {project.priceRanges.length === 0 && project.priceHistory.length === 0 && (
        <p className="text-sm text-muted-foreground">Chưa cập nhật thông tin giá.</p>
      )}
    </div>
  );
}

function ListingsTab({ project }: { project: ProjectDetail }) {
  return (
    <div>
      {project.linkedListingCount > 0 ? (
        <div className="text-center">
          <p className="text-sm text-muted-foreground">
            {project.linkedListingCount} tin đăng liên quan đến dự án này
          </p>
          <a
            href={`/search?projectName=${encodeURIComponent(project.name)}`}
            className="mt-3 inline-flex items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium ring-offset-background transition-colors hover:bg-accent hover:text-accent-foreground"
          >
            Xem tất cả tin đăng
          </a>
        </div>
      ) : (
        <p className="text-sm text-muted-foreground">
          Chưa có tin đăng nào liên quan đến dự án này.
        </p>
      )}
    </div>
  );
}

function ProjectPersonaFitCard({
  project,
  score,
  pois,
}: {
  project: ProjectDetail;
  score: NeighborhoodScoreResult | null;
  pois: POIItem[];
}) {
  const adminLabels = project.suitableFor ?? [];
  const derived: ProjectPersona[] = React.useMemo(
    () =>
      deriveProjectPersonas(
        project,
        score,
        pois.map((p) => ({ category: p.category })),
      ),
    [project, score, pois],
  );

  // Deduplicate: if an admin chip matches a derived persona label, keep the
  // admin chip (it wins; CĐT knows their target audience best).
  const adminSet = new Set(adminLabels.map((l) => l.toLowerCase()));
  const derivedFiltered = derived.filter((p) => !adminSet.has(p.label.toLowerCase()));

  if (adminLabels.length === 0 && derivedFiltered.length === 0) return null;

  return (
    <Card className="my-6 border-primary/30 bg-primary/5">
      <CardHeader className="pb-3">
        <CardTitle className="text-lg">Phù hợp với ai?</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="flex flex-wrap gap-2">
          {/* Admin-authored chips first, marked with badge. */}
          {adminLabels.map((label) => (
            <div
              key={`admin-${label}`}
              className="inline-flex items-center gap-1.5 rounded-full border border-primary/50 bg-primary/10 px-3 py-1.5 text-sm shadow-sm"
            >
              <span className="font-medium">{label}</span>
              <span className="rounded bg-primary/20 px-1.5 py-0.5 text-[10px] uppercase tracking-wide text-primary">
                Chủ đầu tư chọn
              </span>
            </div>
          ))}
          {/* Derived personas — include short reason on hover via title. */}
          {derivedFiltered.map((p) => {
            const Icon = p.icon;
            return (
              <div
                key={`derived-${p.key}`}
                title={p.reason}
                className="inline-flex items-center gap-1.5 rounded-full border bg-card px-3 py-1.5 text-sm shadow-sm"
              >
                <Icon className="h-3.5 w-3.5 text-primary" aria-hidden="true" />
                <span className="font-medium">{p.label}</span>
              </div>
            );
          })}
        </div>

        {/* Per-persona reasons — expanded list so users see the "vì sao". */}
        {derivedFiltered.length > 0 && (
          <ul className="mt-4 space-y-1.5 text-sm text-muted-foreground">
            {derivedFiltered.map((p) => (
              <li key={`reason-${p.key}`} className="flex items-start gap-2">
                <span className="mt-2 h-1 w-1 shrink-0 rounded-full bg-primary" aria-hidden="true" />
                <span>
                  <span className="font-medium text-foreground">{p.label}:</span> {p.reason}
                </span>
              </li>
            ))}
          </ul>
        )}
      </CardContent>
    </Card>
  );
}

function ProjectWhyLocationCard({
  project,
  score,
  pois,
}: {
  project: ProjectDetail;
  score: NeighborhoodScoreResult | null;
  pois: POIItem[];
}) {
  const adminNarrative = project.whyThisLocation?.trim();
  const derivedNarrative = React.useMemo(
    () =>
      composeWhyThisProject(
        project,
        score,
        pois.map((p) => ({ category: p.category })),
      ),
    [project, score, pois],
  );

  // Prefer admin-authored narrative; fall back to derived. Bail out if neither.
  const narrative = adminNarrative || derivedNarrative;
  if (!narrative) return null;

  return (
    <Card className="my-6">
      <CardHeader className="pb-3">
        <CardTitle className="flex items-center gap-2 text-lg">
          Vì sao nên chọn dự án này?
          {!adminNarrative && (
            <Badge variant="outline" className="text-[10px] uppercase tracking-wide">
              Tự động tổng hợp
            </Badge>
          )}
        </CardTitle>
      </CardHeader>
      <CardContent>
        <p className="whitespace-pre-wrap text-sm leading-relaxed">{narrative}</p>
      </CardContent>
    </Card>
  );
}

function DocumentsTab({ project }: { project: ProjectDetail }) {
  if (project.documents.length === 0) {
    return <p className="text-sm text-muted-foreground">Chưa có tài liệu nào.</p>;
  }

  return (
    <div className="space-y-2">
      {project.documents.map((doc) => (
        <a
          key={doc.id}
          href={doc.url}
          target="_blank"
          rel="noopener noreferrer"
          className="flex items-center gap-3 rounded-lg border p-3 transition-colors hover:bg-accent"
        >
          <FileText className="h-5 w-5 shrink-0 text-primary" />
          <div className="min-w-0 flex-1">
            <p className="truncate text-sm font-medium">{doc.name}</p>
            <p className="text-xs text-muted-foreground">
              {doc.type} · {(doc.sizeBytes / 1024 / 1024).toFixed(1)} MB
            </p>
          </div>
          <Download className="h-4 w-4 text-muted-foreground" />
        </a>
      ))}
    </div>
  );
}