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

'use client';

import {
  Building2,
  Calendar,
  Download,
  Expand,
  FileText,
  Grid3X3,
  Home,
  MapPin,
  Phone,
  Sparkles,
  X,
} from 'lucide-react';
import dynamic from 'next/dynamic';
import Image from 'next/image';
import * as React from 'react';
import { ImageGallery } from '@/components/listings/image-gallery';
import type { POICategory } 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 { formatPrice } from '@/lib/currency';
import {
  PROJECT_PROPERTY_TYPE_LABELS,
  PROJECT_STATUS_COLORS,
  PROJECT_STATUS_LABELS,
  duAnApi,
  type ProjectDetail,
} from '@/lib/du-an-api';
import { cn } from '@/lib/utils';

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');

  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 — "Phù hợp với ai" (CĐT chọn) + AI placeholder */}
      <ProjectPersonaFitCard project={project} />

      {/* "Vì sao nên chọn dự án này" narrative — admin authored */}
      <ProjectWhyLocationCard project={project} />

      <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} />}
              {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 }: { project: ProjectDetail }) {
  const mapPois = 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,
  }));

  const hasCoordinates = project.latitude != null && project.longitude != null;

  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"
        />
      )}

      {/* Neighborhood scores radar chart */}
      {project.neighborhoodScores.length > 0 && (
        <div>
          <h4 className="mb-2 text-sm font-medium">Đánh giá khu vực</h4>
          <NeighborhoodRadarChart
            categories={project.neighborhoodScores.map((s) => ({
              category: s.category,
              label: s.label,
              score: s.score,
            }))}
            height={300}
          />
        </div>
      )}

      {/* POI list fallback (when no map) */}
      {!hasCoordinates && project.pois.length > 0 && (
        <div>
          <h4 className="mb-2 text-sm font-medium">Tiện ích lân cận</h4>
          <div className="space-y-2">
            {project.pois.slice(0, 10).map((poi) => (
              <div key={poi.id} className="flex items-center justify-between text-sm">
                <span>{poi.name}</span>
                <span className="text-muted-foreground">
                  {poi.distance < 1000
                    ? `${poi.distance}m`
                    : `${(poi.distance / 1000).toFixed(1)}km`}
                </span>
              </div>
            ))}
          </div>
        </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 }: { project: ProjectDetail }) {
  const suitableFor = project.suitableFor ?? [];

  // Always render the card so the "AI nhận định" CTA is visible even without
  // admin-authored chips. If we eventually have nothing to show at all (no
  // chips and we drop the placeholder), bail out early.
  if (suitableFor.length === 0) {
    // Still render with the AI placeholder so users see the intent.
  }

  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 className="space-y-4">
        {suitableFor.length > 0 ? (
          <div className="flex flex-wrap gap-2">
            {suitableFor.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>
            ))}
          </div>
        ) : (
          <p className="text-sm text-muted-foreground">
            Chủ đầu tư chưa chỉ định nhóm khách phù hợp.
          </p>
        )}

        {/* TODO: replace with a real project-AI advisor endpoint (see the
            listings flow: apps/api/src/modules/analytics/application/queries/
            get-listing-ai-advice/). For now this is a disabled placeholder to
            signal intent without shipping a half-built integration. */}
        <div className="pt-1">
          <Button type="button" variant="outline" disabled className="gap-2">
            <Sparkles className="h-4 w-4" />
            AI nhận định dự án (sắp ra mắt)
          </Button>
        </div>
      </CardContent>
    </Card>
  );
}

function ProjectWhyLocationCard({ project }: { project: ProjectDetail }) {
  const narrative = project.whyThisLocation?.trim();
  if (!narrative) return null;

  return (
    <Card className="my-6">
      <CardHeader className="pb-3">
        <CardTitle className="text-lg">Vì sao nên chọn dự án này?</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>
  );
}