goodgo-platform/apps/web/components/listings/ai-advice-cards.tsx

'use client';

import { useMutation } from '@tanstack/react-query';
import { AlertTriangle, Check, RefreshCw, Sparkles } from 'lucide-react';
import Link from 'next/link';
import * as React from 'react';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { ApiError } from '@/lib/api-client';
import { analyticsApi } from '@/lib/analytics-api';
import type { AiConfidence, ListingAiAdvice } from '@/lib/analytics-api';
import { useAuthStore } from '@/lib/auth-store';
import { formatPrice } from '@/lib/currency';

interface AiAdviceCardsProps {
  listingId: string;
  /** suitableFor labels already shown by the PersonaFitCard — used to de-dupe. */
  existingPersonas?: string[];
}

const CONFIDENCE_STYLE: Record<AiConfidence, { label: string; variant: 'success' | 'warning' | 'destructive' }> = {
  high: { label: 'Độ tin cậy cao', variant: 'success' },
  medium: { label: 'Độ tin cậy trung bình', variant: 'warning' },
  low: { label: 'Độ tin cậy thấp', variant: 'destructive' },
};

export function AiAdviceCards({ listingId, existingPersonas = [] }: AiAdviceCardsProps) {
  const user = useAuthStore((s) => s.user);
  const isAdmin = user?.role === 'ADMIN';

  const mutation = useMutation<ListingAiAdvice, unknown, void>({
    mutationFn: () => analyticsApi.getListingAiAdvice(listingId),
  });

  const { data, error, isPending, isSuccess } = mutation;

  // Not loaded yet — show trigger button.
  if (!isSuccess && !isPending && !error) {
    return (
      <Card className="border-primary/30 bg-primary/5">
        <CardContent className="py-4">
          <Button
            type="button"
            variant="outline"
            className="w-full gap-2"
            onClick={() => mutation.mutate()}
          >
            <Sparkles className="h-4 w-4" />
            Xem phân tích AI
          </Button>
        </CardContent>
      </Card>
    );
  }

  // Loading — skeleton.
  if (isPending) {
    return (
      <Card className="border-primary/30 bg-primary/5">
        <CardHeader className="pb-2">
          <CardTitle className="flex items-center gap-2 text-base">
            <Sparkles className="h-4 w-4 animate-pulse text-primary" />
            AI đang phân tích…
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-3">
          <div className="h-6 w-3/4 animate-pulse rounded bg-muted" />
          <div className="h-4 w-1/2 animate-pulse rounded bg-muted" />
          <div className="h-3 w-full animate-pulse rounded bg-muted" />
          <div className="h-3 w-5/6 animate-pulse rounded bg-muted" />
        </CardContent>
      </Card>
    );
  }

  // Error state.
  if (error) {
    const apiErr = error instanceof ApiError ? error : null;
    const status = apiErr?.status ?? 0;
    const notConfigured = status === 503;

    if (notConfigured) {
      return (
        <Card className="border-amber-200 bg-amber-50 dark:border-amber-900 dark:bg-amber-950/40">
          <CardContent className="space-y-2 py-4">
            <p className="flex items-start gap-2 text-sm">
              <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0 text-amber-600" />
              <span>AI chưa được cấu hình. Liên hệ quản trị viên.</span>
            </p>
            {isAdmin && (
              <Link
                href="/admin/settings/ai"
                className="inline-flex items-center gap-1 text-xs font-medium text-primary underline"
              >
                Cấu hình Claude API →
              </Link>
            )}
          </CardContent>
        </Card>
      );
    }

    return (
      <Card className="border-destructive/40 bg-destructive/5">
        <CardContent className="space-y-2 py-4">
          <p className="flex items-start gap-2 text-sm text-destructive">
            <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0" />
            <span>
              Không lấy được phân tích AI. {apiErr?.message ?? 'Vui lòng thử lại.'}
            </span>
          </p>
          <Button
            type="button"
            variant="outline"
            size="sm"
            className="gap-2"
            onClick={() => mutation.mutate()}
          >
            <RefreshCw className="h-3.5 w-3.5" />
            Thử lại
          </Button>
        </CardContent>
      </Card>
    );
  }

  // Success — render the two cards.
  if (!data) return null;

  const { valuation, advice } = data;
  const confStyle = CONFIDENCE_STYLE[valuation.confidence] ?? CONFIDENCE_STYLE.medium;
  const extraPersonas = advice.suitableFor.filter(
    (p) => !existingPersonas.includes(p),
  );

  return (
    <div className="space-y-6">
      {/* Card 1 — AI định giá */}
      <Card className="border-primary/30 bg-primary/5">
        <CardHeader className="pb-2">
          <CardTitle className="flex items-center gap-2 text-base">
            <Sparkles className="h-4 w-4 text-primary" />
            AI định giá
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-3">
          <div className="text-center">
            <p className="text-2xl font-bold text-primary md:text-3xl">
              {formatPrice(valuation.estimateVND)} VND
            </p>
            <p className="mt-1 text-xs text-muted-foreground">
              Khoảng {formatPrice(valuation.lowVND)} – {formatPrice(valuation.highVND)} VND
            </p>
            <div className="mt-2 flex justify-center">
              <Badge variant={confStyle.variant}>{confStyle.label}</Badge>
            </div>
          </div>
          {valuation.rationale && (
            <p
              className="text-xs leading-relaxed text-muted-foreground"
              style={{
                display: '-webkit-box',
                WebkitLineClamp: 3,
                WebkitBoxOrient: 'vertical',
                overflow: 'hidden',
              }}
            >
              {valuation.rationale}
            </p>
          )}
        </CardContent>
      </Card>

      {/* Card 2 — AI nhận định */}
      <Card className="border-primary/30 bg-primary/5">
        <CardHeader className="pb-2">
          <CardTitle className="flex items-center gap-2 text-base">
            <Sparkles className="h-4 w-4 text-primary" />
            AI nhận định
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          {advice.summary && (
            <p className="text-sm leading-relaxed">{advice.summary}</p>
          )}

          <div className="grid gap-4 sm:grid-cols-2">
            {advice.pros.length > 0 && (
              <div>
                <p className="mb-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                  Điểm mạnh
                </p>
                <ul className="space-y-1.5">
                  {advice.pros.map((p, i) => (
                    <li key={`pro-${i}`} className="flex items-start gap-1.5 text-sm">
                      <Check className="mt-0.5 h-4 w-4 shrink-0 text-green-600" />
                      <span>{p}</span>
                    </li>
                  ))}
                </ul>
              </div>
            )}

            {advice.cons.length > 0 && (
              <div>
                <p className="mb-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                  Cần cân nhắc
                </p>
                <ul className="space-y-1.5">
                  {advice.cons.map((c, i) => (
                    <li key={`con-${i}`} className="flex items-start gap-1.5 text-sm">
                      <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0 text-amber-600" />
                      <span>{c}</span>
                    </li>
                  ))}
                </ul>
              </div>
            )}
          </div>

          {extraPersonas.length > 0 && (
            <div>
              <p className="mb-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                Phù hợp với
              </p>
              <div className="flex flex-wrap gap-2">
                {extraPersonas.map((p) => (
                  <div
                    key={`ai-persona-${p}`}
                    className="inline-flex items-center gap-1.5 rounded-full border border-primary/40 bg-primary/10 px-3 py-1 text-xs"
                  >
                    <span className="font-medium">{p}</span>
                    <span className="rounded bg-primary/20 px-1 py-0.5 text-[9px] uppercase tracking-wide text-primary">
                      AI gợi ý
                    </span>
                  </div>
                ))}
              </div>
            </div>
          )}

          <div className="border-t pt-2 text-right">
            <button
              type="button"
              className="inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground"
              onClick={() => mutation.mutate()}
            >
              <RefreshCw className="h-3 w-3" />
              Làm mới
            </button>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}