"use client";

import { useState, useEffect } from "react";

interface ReviewAiSummaryProps {
  userId: number;
  reviewCount: number;
}

interface SummaryData {
  summary: string;
  themes: string[];
  generated_at: string;
}

export default function ReviewAiSummary({ userId, reviewCount }: ReviewAiSummaryProps) {
  const [data, setData] = useState<SummaryData | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(false);

  useEffect(() => {
    if (reviewCount < 3) return; // Need at least 3 reviews for a meaningful summary

    setLoading(true);
    fetch(`/api/ai/review-summary?user_id=${userId}`)
      .then((res) => {
        if (!res.ok) throw new Error("Failed");
        return res.json();
      })
      .then((d) => {
        if (d.summary) setData(d);
      })
      .catch(() => setError(true))
      .finally(() => setLoading(false));
  }, [userId, reviewCount]);

  if (reviewCount < 3) return null;
  if (error) return null;

  if (loading) {
    return (
      <div className="bg-gradient-to-r from-primary/5 to-purple-500/5 border border-primary/10 rounded-lg p-4 mb-4 animate-pulse">
        <div className="flex items-center gap-2 mb-2">
          <div className="w-5 h-5 rounded bg-surface-light" />
          <div className="w-24 h-4 rounded bg-surface-light" />
        </div>
        <div className="space-y-2">
          <div className="w-full h-3 rounded bg-surface-light" />
          <div className="w-3/4 h-3 rounded bg-surface-light" />
        </div>
      </div>
    );
  }

  if (!data) return null;

  return (
    <div className="bg-gradient-to-r from-primary/5 to-purple-500/5 border border-primary/10 rounded-lg p-4 mb-4">
      <div className="flex items-center gap-2 mb-3">
        <svg className="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
        </svg>
        <h3 className="text-sm font-semibold text-primary">AI Review Summary</h3>
        <span className="text-[10px] text-text-muted bg-surface-light px-1.5 py-0.5 rounded-full ml-auto">
          Based on {reviewCount} reviews
        </span>
      </div>

      <p className="text-sm text-text-muted leading-relaxed mb-3">{data.summary}</p>

      {data.themes && data.themes.length > 0 && (
        <div className="flex flex-wrap gap-1.5">
          {data.themes.map((theme, idx) => (
            <span
              key={idx}
              className="inline-flex items-center gap-1 bg-surface-light px-2 py-0.5 rounded-full text-xs text-text-muted"
            >
              <span className="w-1.5 h-1.5 rounded-full bg-primary/50" />
              {theme}
            </span>
          ))}
        </div>
      )}
    </div>
  );
}