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

'use client';

import {
  Building2,
  Calendar,
  Download,
  FileText,
  Grid3X3,
  Home,
  MapPin,
  Phone,
} from 'lucide-react';
import Image from 'next/image';
import * as React from 'react';
import { ImageGallery } from '@/components/listings/image-gallery';
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';

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>

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

          {/* 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>
  );
}

function LocationTab({ project }: { project: ProjectDetail }) {
  return (
    <div className="space-y-4">
      <p className="text-sm">
        {project.address}, {project.district}, {project.city}
      </p>

      {/* Neighborhood scores */}
      {project.neighborhoodScores.length > 0 && (
        <div>
          <h4 className="mb-2 text-sm font-medium">Đánh giá khu vực</h4>
          <div className="grid grid-cols-2 gap-3 sm:grid-cols-3">
            {project.neighborhoodScores.map((score) => (
              <div key={score.category} className="rounded-lg border p-3 text-center">
                <p className="text-2xl font-bold text-primary">{score.score}</p>
                <p className="text-xs text-muted-foreground">{score.label}</p>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Nearby POIs */}
      {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 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 */}
      {project.priceHistory.length > 0 && (
        <div>
          <h4 className="mb-2 text-sm font-medium">Lịch sử giá</h4>
          <div className="space-y-1">
            {project.priceHistory.map((ph) => (
              <div
                key={ph.period}
                className="flex items-center justify-between rounded px-3 py-1.5 text-sm odd:bg-muted/50"
              >
                <span>{ph.period}</span>
                <div className="flex items-center gap-4">
                  <span>
                    {(ph.avgPricePerM2 / 1_000_000).toFixed(1)} tr/m²
                  </span>
                  <span className="text-xs text-muted-foreground">
                    {ph.transactionCount} giao dịch
                  </span>
                </div>
              </div>
            ))}
          </div>
        </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>
          <Button variant="outline" className="mt-3" asChild>
            <a href={`/search?projectName=${encodeURIComponent(project.name)}`}>
              Xem tất cả tin đăng
            </a>
          </Button>
        </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 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>
  );
}