goodgo-platform/apps/web/components/du-an/project-ai-advice-card.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 { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { analyticsApi, type ProjectAiAdvice } from '@/lib/analytics-api';
import { ApiError } from '@/lib/api-client';
import { useAuthStore } from '@/lib/auth-store';

interface ProjectAiAdviceCardProps {
  projectId: string;
  /**
   * Persona labels already rendered by ProjectPersonaFitCard. We de-dupe
   * before showing AI-suggested ones so users don't see the same chip twice.
   */
  existingPersonas?: string[];
}

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

  const mutation = useMutation<ProjectAiAdvice, unknown, void>({
    mutationFn: () => analyticsApi.getProjectAiAdvice(projectId),
  });

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

  // Initial state — 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 về dự án
          </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 dự án…
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-3">
          <div className="h-4 w-3/4 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" />
          <div className="h-3 w-2/3 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>
    );
  }

  if (!data) return null;

  const { advice } = data;
  const extraPersonas = advice.suitableFor.filter(
    (p) => !existingPersonas.includes(p),
  );

  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 text-primary" />
          AI nhận định dự án
        </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>
  );
}