'use client';

import {
  BadgeCheck,
  Building2,
  Calendar,
  MapPin,
  Phone,
  Mail,
  Star,
  Home,
  MessageSquare,
  TrendingUp,

  Award,
  BarChart2,
} from 'lucide-react';
import Image from 'next/image';
import * as React from 'react';
import {
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
} from 'recharts';
import {
  KpiCard,
  DataTable,
  EmptyState,
  StatusChip,
  type DataTableColumn
} from '@/components/design-system';
import { InquiryModal } from '@/components/listings/inquiry-modal';
import { Badge as UiBadge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
import { Link } from '@/i18n/navigation';
import type { AgentPublicProfile, AgentReviewItem } from '@/lib/agents-api';
import { shimmerBlurDataURL } from '@/lib/image-blur';
import type { ListingDetail } from '@/lib/listings-api';

// ---------------------------------------------------------------------------
// Helpers
// ---------------------------------------------------------------------------

const VND = new Intl.NumberFormat('vi-VN');

function fmtVND(value: string | number | bigint): string {
  const n = typeof value === 'bigint' ? Number(value) : Number(value);
  if (n >= 1_000_000_000) return `${(n / 1_000_000_000).toFixed(1)} tỷ`;
  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(0)} tr`;
  return VND.format(n);
}

function qualityLabel(score: number): string {
  if (score >= 80) return 'Xuất sắc';
  if (score >= 60) return 'Tốt';
  if (score >= 40) return 'Trung bình';
  return 'Cần cải thiện';
}

function qualityColor(score: number): string {
  if (score >= 80) return 'text-signal-up';
  if (score >= 60) return 'text-primary';
  if (score >= 40) return 'text-signal-neutral';
  return 'text-signal-down';
}

// ---------------------------------------------------------------------------
// Types
// ---------------------------------------------------------------------------

interface AgentProfileClientProps {
  agent: AgentPublicProfile;
  reviews: AgentReviewItem[];
  /** Agent's managed listings — fetched server-side. */
  listings: ListingDetail[];
  /** Total listing count (may exceed `listings.length` if paginated). */
  listingsTotal: number;
}

// ---------------------------------------------------------------------------
// Listings table columns
// ---------------------------------------------------------------------------

const listingColumns: DataTableColumn<ListingDetail>[] = [
  {
    id: 'title',
    header: 'Bất động sản',
    cell: (row) => (
      <Link href={`/listings/${row.id}` as never} className="block min-w-0">
        <p className="truncate text-xs font-medium text-foreground hover:text-primary transition-colors">
          {row.property.title}
        </p>
        <p className="truncate text-xs text-foreground-muted">
          {row.property.district}, {row.property.city}
        </p>
      </Link>
    ),
    width: '30%',
  },
  {
    id: 'type',
    header: 'Loại',
    cell: (row) => (
      <span className="text-xs text-foreground-muted">
        {row.transactionType === 'SALE' ? 'Bán' : 'Cho thuê'}
      </span>
    ),
    width: '8%',
  },
  {
    id: 'status',
    header: 'Trạng thái',
    cell: (row) => {
      const s = row.status.toLowerCase() as Parameters<typeof StatusChip>[0]['status'];
      const safe = ['active', 'pending', 'sold', 'rented', 'rejected', 'draft'].includes(s)
        ? s
        : 'draft';
      return <StatusChip status={safe} />;
    },
    width: '10%',
  },
  {
    id: 'area',
    header: 'DT (m²)',
    numeric: true,
    align: 'right',
    sortable: true,
    sortValue: (row) => row.property.areaM2,
    cell: (row) => (
      <span className="text-xs tabular-nums text-foreground">{row.property.areaM2}</span>
    ),
    width: '8%',
  },
  {
    id: 'price',
    header: 'Giá',
    numeric: true,
    align: 'right',
    sortable: true,
    sortValue: (row) => Number(row.priceVND),
    cell: (row) => (
      <span className="text-xs font-semibold tabular-nums text-primary">
        {fmtVND(row.priceVND)}
      </span>
    ),
    width: '12%',
  },
  {
    id: 'pricePerM2',
    header: 'đ/m²',
    numeric: true,
    align: 'right',
    sortable: true,
    sortValue: (row) => row.pricePerM2 ?? 0,
    cell: (row) =>
      row.pricePerM2 != null ? (
        <span className="text-xs tabular-nums text-foreground-muted">
          {fmtVND(row.pricePerM2)}
        </span>
      ) : (
        <span className="text-xs text-foreground-dim">—</span>
      ),
    width: '12%',
  },
  {
    id: 'views',
    header: 'Lượt xem',
    numeric: true,
    align: 'right',
    sortable: true,
    sortValue: (row) => row.viewCount,
    cell: (row) => (
      <span className="text-xs tabular-nums text-foreground-muted">{VND.format(row.viewCount)}</span>
    ),
    width: '10%',
  },
  {
    id: 'inquiries',
    header: 'Liên hệ',
    numeric: true,
    align: 'right',
    sortable: true,
    sortValue: (row) => row.inquiryCount ?? 0,
    cell: (row) =>
      row.inquiryCount != null ? (
        <span className="text-xs tabular-nums text-foreground-muted">{row.inquiryCount}</span>
      ) : (
        <span className="text-xs text-foreground-dim">—</span>
      ),
    width: '10%',
  },
];

// ---------------------------------------------------------------------------
// Performance chart — derived from real listings data
// ---------------------------------------------------------------------------

interface MonthBucket {
  month: string;
  published: number;
  sold: number;
}

function buildPerformanceData(listings: ListingDetail[]): MonthBucket[] {
  const map = new Map<string, MonthBucket>();

  const now = new Date();
  for (let i = 11; i >= 0; i--) {
    const d = new Date(now.getFullYear(), now.getMonth() - i, 1);
    const key = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`;
    const label = d.toLocaleDateString('vi-VN', { month: 'short', year: '2-digit' });
    map.set(key, { month: label, published: 0, sold: 0 });
  }

  for (const l of listings) {
    const src = l.publishedAt ?? l.createdAt;
    const d = new Date(src);
    const key = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`;
    const bucket = map.get(key);
    if (!bucket) continue;
    bucket.published++;
    if (l.status === 'SOLD' || l.status === 'RENTED') bucket.sold++;
  }

  return Array.from(map.values());
}

// ---------------------------------------------------------------------------
// Main Component
// ---------------------------------------------------------------------------

export function AgentProfileClient({
  agent,
  reviews,
  listings,
  listingsTotal,
}: AgentProfileClientProps) {
  const [inquiryOpen, setInquiryOpen] = React.useState(false);
  const firstListing = agent.activeListings[0] ?? null;

  const handleMessageClick = React.useCallback(() => {
    if (firstListing) {
      setInquiryOpen(true);
    } else {
      window.location.href = `sms:${agent.phone}`;
    }
  }, [firstListing, agent.phone]);

  const perfData = React.useMemo(() => buildPerformanceData(listings), [listings]);

  // Derived KPIs from real data
  const activeCount = listings.filter((l) => l.status === 'ACTIVE').length;
  const avgPriceVND =
    listings.length > 0
      ? listings.reduce((acc, l) => acc + Number(l.priceVND), 0) / listings.length
      : null;

  const yearsExp = Math.floor(
    (Date.now() - new Date(agent.memberSince).getTime()) / (365.25 * 24 * 3600 * 1000),
  );

  return (
    <div className="mx-auto max-w-7xl px-4 py-6 space-y-6">
      {/* ── Breadcrumb ── */}
      <nav className="flex items-center gap-1.5 text-xs text-foreground-muted">
        <Link href="/" className="hover:text-foreground transition-colors">Trang chủ</Link>
        <span>/</span>
        <Link href="/agents" className="hover:text-foreground transition-colors">Môi giới</Link>
        <span>/</span>
        <span className="truncate text-foreground">{agent.fullName}</span>
      </nav>

      {/* ── Profile Header ── */}
      <div className="rounded-lg border border-border bg-background-elevated shadow-elevation-1 p-6">
        <div className="flex flex-col gap-6 sm:flex-row sm:items-start">
          {/* Avatar */}
          <div className="shrink-0">
            {agent.avatarUrl ? (
              <Image
                src={agent.avatarUrl}
                alt={agent.fullName}
                width={96}
                height={96}
                className="h-24 w-24 rounded-full border-2 border-primary/20 object-cover"
                placeholder="blur"
                blurDataURL={shimmerBlurDataURL()}
              />
            ) : (
              <div className="flex h-24 w-24 items-center justify-center rounded-full border-2 border-primary/20 bg-primary/10">
                <span className="text-3xl font-bold text-primary">
                  {agent.fullName.charAt(0).toUpperCase()}
                </span>
              </div>
            )}
          </div>

          {/* Info */}
          <div className="min-w-0 flex-1 space-y-2">
            {/* Name + badges */}
            <div className="flex flex-wrap items-center gap-2">
              <h1 className="text-xl font-bold text-foreground md:text-2xl">{agent.fullName}</h1>
              {agent.isVerified && (
                <UiBadge variant="success" className="gap-1 text-xs">
                  <BadgeCheck className="h-3 w-3" />
                  KYC xác minh
                </UiBadge>
              )}
              <span
                className={`text-sm font-semibold tabular-nums ${qualityColor(agent.qualityScore)}`}
                title="Điểm chất lượng"
              >
                ★ {agent.qualityScore}/100 · {qualityLabel(agent.qualityScore)}
              </span>
            </div>

            {/* Meta */}
            <div className="flex flex-wrap gap-x-4 gap-y-1 text-xs text-foreground-muted">
              {agent.agency && (
                <span className="flex items-center gap-1">
                  <Building2 className="h-3.5 w-3.5 shrink-0" />
                  {agent.agency}
                </span>
              )}
              {agent.licenseNumber && (
                <span>Giấy phép: {agent.licenseNumber}</span>
              )}
              <span className="flex items-center gap-1">
                <Calendar className="h-3.5 w-3.5 shrink-0" />
                {yearsExp > 0 ? `${yearsExp} năm kinh nghiệm` : 'Mới tham gia'} · từ{' '}
                {new Date(agent.memberSince).toLocaleDateString('vi-VN', {
                  month: 'long',
                  year: 'numeric',
                })}
              </span>
            </div>

            {/* Service areas */}
            {agent.serviceAreas.length > 0 && (
              <div className="flex flex-wrap gap-1.5 pt-1">
                {agent.serviceAreas.map((area) => (
                  <span
                    key={area}
                    className="inline-flex items-center gap-1 rounded-md bg-background-surface px-2 py-0.5 text-xs text-foreground-muted ring-1 ring-inset ring-border"
                  >
                    <MapPin className="h-3 w-3 shrink-0" />
                    {area}
                  </span>
                ))}
              </div>
            )}
          </div>

          {/* Desktop CTA */}
          <div className="hidden shrink-0 sm:block">
            <ContactCard agent={agent} onMessageClick={handleMessageClick} />
          </div>
        </div>
      </div>

      {/* ── KPI Strip ── */}
      <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-5">
        <KpiCard
          label="Tổng tin đăng"
          value={VND.format(listingsTotal)}
          icon={<Home className="h-4 w-4" />}
          footnote="Tất cả thời gian"
        />
        <KpiCard
          label="Đang hoạt động"
          value={VND.format(activeCount)}
          icon={<TrendingUp className="h-4 w-4" />}
          footnote="Đang rao bán"
        />
        <KpiCard
          label="Đã giao dịch"
          value={VND.format(agent.totalDeals)}
          icon={<Award className="h-4 w-4" />}
          footnote="Tổng deals thành công"
        />
        <KpiCard
          label="Giá TB"
          value={avgPriceVND != null ? fmtVND(avgPriceVND) : '—'}
          icon={<BarChart2 className="h-4 w-4" />}
          footnote="Danh mục hiện tại"
        />
        <KpiCard
          label="Đánh giá"
          value={
            agent.totalReviews > 0
              ? `${agent.avgReviewRating.toFixed(1)}/5`
              : '—'
          }
          icon={<Star className="h-4 w-4" />}
          footnote={
            agent.totalReviews > 0
              ? `${agent.totalReviews} lượt đánh giá`
              : 'Chưa có đánh giá'
          }
        />
      </div>

      {/* ── Main Grid ── */}
      <div className="grid gap-6 lg:grid-cols-3">
        {/* Left column — chart + table + reviews */}
        <div className="space-y-6 lg:col-span-2">
          {/* Performance Chart */}
          <Card className="border-border bg-background-elevated shadow-elevation-1">
            <CardHeader className="pb-2">
              <CardTitle className="text-sm font-semibold text-foreground">
                Hiệu suất 12 tháng — tin đăng & giao dịch
              </CardTitle>
              <CardDescription className="text-xs text-foreground-muted">
                Tổng hợp từ danh mục thực
              </CardDescription>
            </CardHeader>
            <CardContent>
              <ResponsiveContainer width="100%" height={220}>
                <LineChart data={perfData} margin={{ top: 4, right: 16, left: -16, bottom: 0 }}>
                  <CartesianGrid
                    strokeDasharray="3 3"
                    stroke="hsl(var(--border))"
                    strokeOpacity={0.5}
                  />
                  <XAxis
                    dataKey="month"
                    tick={{ fontSize: 10, fill: 'hsl(var(--foreground-muted))' }}
                    tickLine={false}
                    axisLine={false}
                  />
                  <YAxis
                    tick={{ fontSize: 10, fill: 'hsl(var(--foreground-muted))' }}
                    tickLine={false}
                    axisLine={false}
                    allowDecimals={false}
                  />
                  <Tooltip
                    contentStyle={{
                      backgroundColor: 'hsl(var(--background-elevated))',
                      border: '1px solid hsl(var(--border))',
                      borderRadius: '0.5rem',
                      fontSize: '0.75rem',
                    }}
                    formatter={(value, name) => [
                      value,
                      name === 'published' ? 'Tin đăng' : 'Giao dịch',
                    ]}
                  />
                  <Line
                    type="monotone"
                    dataKey="published"
                    stroke="hsl(var(--chart-1))"
                    strokeWidth={2}
                    dot={false}
                    name="published"
                  />
                  <Line
                    type="monotone"
                    dataKey="sold"
                    stroke="hsl(var(--signal-up))"
                    strokeWidth={2}
                    dot={false}
                    name="sold"
                  />
                </LineChart>
              </ResponsiveContainer>
              <div className="mt-2 flex items-center gap-4 text-xs text-foreground-muted">
                <span className="flex items-center gap-1.5">
                  <span className="inline-block h-2 w-4 rounded-sm" style={{ background: 'hsl(var(--chart-1))' }} />
                  Tin đăng
                </span>
                <span className="flex items-center gap-1.5">
                  <span className="inline-block h-2 w-4 rounded-sm" style={{ background: 'hsl(var(--signal-up))' }} />
                  Giao dịch thành công
                </span>
              </div>
            </CardContent>
          </Card>

          {/* Listings Table */}
          <Card className="border-border bg-background-elevated shadow-elevation-1">
            <CardHeader className="pb-2">
              <div className="flex items-center justify-between">
                <CardTitle className="text-sm font-semibold text-foreground">
                  Danh mục bất động sản{' '}
                  <span className="ml-1 text-foreground-muted tabular-nums font-normal">
                    ({VND.format(listingsTotal)})
                  </span>
                </CardTitle>
              </div>
              <CardDescription className="text-xs text-foreground-muted">
                Sắp xếp theo giá, diện tích, lượt xem
              </CardDescription>
            </CardHeader>
            <CardContent className="p-0">
              <DataTable
                columns={listingColumns}
                data={listings}
                getRowId={(row) => row.id}
                defaultSortId="price"
                defaultSortDir="desc"
                dense
                stickyHeader
                emptyText={
                  <EmptyState
                    icon={<Home className="h-6 w-6" />}
                    title="Chưa có tin đăng"
                    description="Môi giới này chưa có bất động sản nào"
                  />
                }
              />
            </CardContent>
          </Card>

          {/* Reviews */}
          <Card className="border-border bg-background-elevated shadow-elevation-1">
            <CardHeader className="pb-2">
              <CardTitle className="text-sm font-semibold text-foreground">
                Đánh giá{' '}
                <span className="ml-1 text-foreground-muted font-normal tabular-nums">
                  ({agent.totalReviews})
                </span>
              </CardTitle>
              {agent.totalReviews > 0 && (
                <CardDescription className="text-xs text-foreground-muted">
                  Trung bình{' '}
                  <span className="font-semibold text-foreground">
                    {agent.avgReviewRating.toFixed(1)}/5
                  </span>
                </CardDescription>
              )}
            </CardHeader>
            <CardContent>
              {reviews.length > 0 ? (
                <div className="space-y-3">
                  {reviews.map((review) => (
                    <ReviewRow key={review.id} review={review} />
                  ))}
                </div>
              ) : (
                <EmptyState
                  icon={<Star className="h-6 w-6" />}
                  title="Chưa có đánh giá"
                  description="Chưa có khách hàng nào để lại đánh giá cho môi giới này"
                />
              )}
            </CardContent>
          </Card>
        </div>

        {/* Right column — sticky contact + quality + bio */}
        <div className="space-y-4 lg:sticky lg:top-20 lg:self-start">
          {/* Mobile contact */}
          <div className="sm:hidden">
            <ContactCard agent={agent} onMessageClick={handleMessageClick} />
          </div>

          {/* Desktop contact (hidden on mobile, shown lg via sticky container) */}
          <div className="hidden sm:block">
            <ContactCard agent={agent} onMessageClick={handleMessageClick} />
          </div>

          {/* Quality Score */}
          <Card className="border-border bg-background-elevated shadow-elevation-1">
            <CardHeader className="pb-2">
              <CardTitle className="text-sm font-semibold text-foreground">Chất lượng môi giới</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="flex items-center gap-4">
                {/* Donut */}
                <div className="relative h-16 w-16 shrink-0">
                  <svg className="h-16 w-16 -rotate-90" viewBox="0 0 36 36">
                    <path
                      fill="none"
                      stroke="hsl(var(--border))"
                      strokeWidth="3"
                      d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                    />
                    <path
                      fill="none"
                      stroke="hsl(var(--primary))"
                      strokeWidth="3"
                      strokeDasharray={`${agent.qualityScore}, 100`}
                      strokeLinecap="round"
                      d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                    />
                  </svg>
                  <div className="absolute inset-0 flex items-center justify-center">
                    <span className="text-sm font-bold tabular-nums text-foreground">
                      {agent.qualityScore}
                    </span>
                  </div>
                </div>
                <div className="space-y-0.5">
                  <p className={`text-sm font-semibold ${qualityColor(agent.qualityScore)}`}>
                    {qualityLabel(agent.qualityScore)}
                  </p>
                  <p className="text-xs text-foreground-muted">
                    Dựa trên phản hồi, thời gian phản hồi và deals thành công
                  </p>
                </div>
              </div>
            </CardContent>
          </Card>

          {/* Bio */}
          {agent.bio && (
            <Card className="border-border bg-background-elevated shadow-elevation-1">
              <CardHeader className="pb-2">
                <CardTitle className="text-sm font-semibold text-foreground">Giới thiệu</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="whitespace-pre-wrap text-xs leading-relaxed text-foreground-muted">
                  {agent.bio}
                </p>
              </CardContent>
            </Card>
          )}
        </div>
      </div>

      {firstListing && (
        <InquiryModal
          open={inquiryOpen}
          onOpenChange={setInquiryOpen}
          listingId={firstListing.id}
          listingTitle={firstListing.property.title}
          sellerName={agent.fullName}
        />
      )}
    </div>
  );
}

// ---------------------------------------------------------------------------
// Sub-Components
// ---------------------------------------------------------------------------

function ContactCard({
  agent,
  onMessageClick,
}: {
  agent: AgentPublicProfile;
  onMessageClick: () => void;
}) {
  return (
    <Card className="border-border bg-background-elevated shadow-elevation-1">
      <CardHeader className="pb-2">
        <CardTitle className="text-sm font-semibold text-foreground">Liên hệ môi giới</CardTitle>
      </CardHeader>
      <CardContent className="space-y-2">
        <a href={`tel:${agent.phone}`} className="block">
          <Button className="w-full gap-2" size="sm">
            <Phone className="h-3.5 w-3.5" />
            Gọi ngay
          </Button>
        </a>
        <Button variant="outline" className="w-full gap-2" size="sm" onClick={onMessageClick}>
          <MessageSquare className="h-3.5 w-3.5" />
          Nhắn tin
        </Button>
        {agent.email && (
          <a href={`mailto:${agent.email}`} className="block">
            <Button variant="outline" className="w-full gap-2" size="sm">
              <Mail className="h-3.5 w-3.5" />
              Email
            </Button>
          </a>
        )}
        <div className="border-t border-border pt-2 space-y-1.5">
          <div>
            <p className="text-xs text-foreground-dim">Số điện thoại</p>
            <p className="text-xs font-medium text-foreground">{agent.phone}</p>
          </div>
          {agent.email && (
            <div>
              <p className="text-xs text-foreground-dim">Email</p>
              <p className="text-xs font-medium text-foreground">{agent.email}</p>
            </div>
          )}
        </div>
      </CardContent>
    </Card>
  );
}

function ReviewRow({ review }: { review: AgentReviewItem }) {
  return (
    <div className="rounded-lg border border-border bg-background-surface p-3">
      <div className="flex items-start justify-between gap-2">
        <div className="flex items-center gap-2 min-w-0">
          <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-primary/10 text-xs font-medium text-primary">
            {(review.userName ?? 'Ẩn').charAt(0).toUpperCase()}
          </div>
          <div className="min-w-0">
            <p className="text-xs font-medium text-foreground truncate">{review.userName ?? 'Ẩn danh'}</p>
            <p className="text-xs text-foreground-dim">
              {new Date(review.createdAt).toLocaleDateString('vi-VN')}
            </p>
          </div>
        </div>
        {/* Stars */}
        <div className="flex items-center gap-0.5 shrink-0">
          {Array.from({ length: 5 }).map((_, i) => (
            <Star
              key={i}
              className={`h-3 w-3 ${
                i < review.rating ? 'fill-yellow-400 text-yellow-400' : 'text-foreground-dim'
              }`}
            />
          ))}
        </div>
      </div>
      {review.comment && (
        <p className="mt-2 text-xs leading-relaxed text-foreground-muted">{review.comment}</p>
      )}
    </div>
  );
}