'use client';

import { useState, useEffect, useCallback } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import {
  Shield,
  ShieldCheck,
  ShieldAlert,
  ShieldX,
  Search,
  Phone,
  Wallet,
  Facebook,
  Mail,
  AlertTriangle,
  TrendingUp,
  Users,
  Eye,
  MapPin,
  Clock,
  ArrowRight,
  CheckCircle2,
  XCircle,
  ChevronRight,
  ThumbsUp,
  MessageSquare,
  Gamepad2,
  Globe,
} from 'lucide-react';
import { Card, CardContent, CardHeader, CardTitle, CardDescription, CardFooter } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { useAppStore } from '@/store/app-store';
import type { ScamReportType } from '@/types';

// ─── Types ────────────────────────────────────────────────────────────────────

interface RiskAssessment {
  level: 'safe' | 'low' | 'medium' | 'high' | 'critical';
  score: number;
  description: string;
}

interface InputType {
  type: string;
  label: string;
  icon: string;
}

interface MatchedEntity {
  entityType: string;
  entityValue: string;
  reportCount: number;
  reports: ScamReportType[];
}

interface CheckResult {
  query: string;
  inputType: InputType;
  riskAssessment: RiskAssessment;
  stats: {
    totalReports: number;
    totalAmountLost: number;
    uniqueEntities: number;
  };
  riskScore: {
    id: string;
    entityType: string;
    entityValue: string;
    riskLevel: string;
    score: number;
    reportCount: number;
    evidenceCount: number;
    lastReported: string | null;
  } | null;
  matchedEntities: MatchedEntity[];
  recentReports: ScamReportType[];
  recommendations: string[];
}

// ─── Config ───────────────────────────────────────────────────────────────────

const riskConfig: Record<string, { color: string; bgColor: string; borderColor: string; icon: React.ElementType; label: string }> = {
  safe: { color: 'text-emerald-500', bgColor: 'bg-emerald-500/10', borderColor: 'border-emerald-500/30', icon: ShieldCheck, label: 'Safe' },
  low: { color: 'text-emerald-500', bgColor: 'bg-emerald-500/10', borderColor: 'border-emerald-500/30', icon: Shield, label: 'Low Risk' },
  medium: { color: 'text-yellow-500', bgColor: 'bg-yellow-500/10', borderColor: 'border-yellow-500/30', icon: ShieldAlert, label: 'Medium Risk' },
  high: { color: 'text-orange-500', bgColor: 'bg-orange-500/10', borderColor: 'border-orange-500/30', icon: ShieldAlert, label: 'High Risk' },
  critical: { color: 'text-red-500', bgColor: 'bg-red-500/10', borderColor: 'border-red-500/30', icon: ShieldX, label: 'Critical' },
};

const entityTypeConfig: Record<string, { icon: React.ElementType; color: string; label: string }> = {
  phone: { icon: Phone, color: 'text-blue-500', label: 'Phone' },
  bkash: { icon: Wallet, color: 'text-pink-500', label: 'bKash' },
  nagad: { icon: Wallet, color: 'text-orange-500', label: 'Nagad' },
  facebook: { icon: Facebook, color: 'text-blue-600', label: 'Facebook' },
  seller: { icon: Users, color: 'text-purple-500', label: 'Seller' },
  email: { icon: Mail, color: 'text-emerald-500', label: 'Email' },
  general: { icon: Search, color: 'text-gray-500', label: 'General' },
};

function formatBDT(amount: number): string {
  if (amount >= 10000000) return `৳${(amount / 10000000).toFixed(1)}Cr`;
  if (amount >= 100000) return `৳${(amount / 100000).toFixed(1)}L`;
  if (amount >= 1000) return `৳${(amount / 1000).toFixed(1)}K`;
  return `৳${amount}`;
}

function formatDate(dateStr: string): string {
  return new Date(dateStr).toLocaleDateString('en-BD', { month: 'short', day: 'numeric', year: 'numeric' });
}

// ─── Animated Gauge Component ─────────────────────────────────────────────────

function RiskGauge({ score, level }: { score: number; level: string }) {
  const config = riskConfig[level] || riskConfig.safe;
  const radius = 70;
  const circumference = 2 * Math.PI * radius;
  const strokeDashoffset = circumference - (score / 100) * circumference;

  const gaugeColor = {
    safe: '#10b981',
    low: '#10b981',
    medium: '#eab308',
    high: '#f97316',
    critical: '#ef4444',
  }[level] || '#10b981';

  return (
    <div className="relative w-44 h-44 mx-auto">
      <svg className="w-full h-full -rotate-90" viewBox="0 0 160 160">
        <circle cx="80" cy="80" r={radius} fill="none" stroke="currentColor" strokeWidth="10" className="text-muted/30" />
        <motion.circle
          cx="80" cy="80" r={radius} fill="none" stroke={gaugeColor} strokeWidth="10"
          strokeLinecap="round"
          strokeDasharray={circumference}
          initial={{ strokeDashoffset: circumference }}
          animate={{ strokeDashoffset }}
          transition={{ duration: 1.2, ease: 'easeOut' }}
        />
      </svg>
      <div className="absolute inset-0 flex flex-col items-center justify-center">
        <motion.span
          className="text-3xl font-bold"
          initial={{ opacity: 0, scale: 0.5 }}
          animate={{ opacity: 1, scale: 1 }}
          transition={{ delay: 0.5, duration: 0.4 }}
        >
          {score}
        </motion.span>
        <span className="text-xs text-muted-foreground">/ 100</span>
      </div>
    </div>
  );
}

// ─── Main Component ───────────────────────────────────────────────────────────

export function CheckNumberPage() {
  const navigate = useAppStore((s) => s.navigate);
  const searchQuery = useAppStore((s) => s.searchQuery);
  const setSelectedReportId = useAppStore((s) => s.setSelectedReportId);

  const [inputValue, setInputValue] = useState(searchQuery || '');
  const [result, setResult] = useState<CheckResult | null>(null);
  const [isLoading, setIsLoading] = useState(false);
  const [hasSearched, setHasSearched] = useState(false);

  const performCheck = useCallback(async (query?: string) => {
    const q = (query || inputValue).trim();
    if (!q) return;

    setIsLoading(true);
    setHasSearched(true);
    setResult(null);

    try {
      const res = await fetch(`/api/check-number?q=${encodeURIComponent(q)}`);
      const data = await res.json();
      if (data.success) {
        setResult(data.data);
      }
    } catch {
      // Silently handle
    } finally {
      setIsLoading(false);
    }
  }, [inputValue]);

  // Pre-fill from store
  useEffect(() => {
    if (searchQuery) {
      setInputValue(searchQuery);
      performCheck(searchQuery);
    }
  }, [searchQuery, performCheck]);

  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter') performCheck();
  };

  const handleReportClick = (reportId: string) => {
    setSelectedReportId(reportId);
    navigate('report-detail');
  };

  const riskConfig_current = result ? (riskConfig[result.riskAssessment.level] || riskConfig.safe) : null;

  return (
    <div className="min-h-screen bg-background">
      {/* Hero Header */}
      <div className="relative overflow-hidden">
        <div className="absolute inset-0 bg-gradient-to-br from-emerald-950/50 via-background to-teal-950/40 dark:from-emerald-950/70 dark:via-background dark:to-teal-950/60" />
        <motion.div
          className="absolute top-20 right-1/4 w-64 h-64 rounded-full bg-emerald-500/5 blur-3xl"
          animate={{ scale: [1, 1.2, 1], opacity: [0.3, 0.5, 0.3] }}
          transition={{ duration: 6, repeat: Infinity }}
        />
        <motion.div
          className="absolute bottom-10 left-1/4 w-48 h-48 rounded-full bg-teal-500/5 blur-3xl"
          animate={{ scale: [1.2, 1, 1.2], opacity: [0.3, 0.5, 0.3] }}
          transition={{ duration: 5, repeat: Infinity }}
        />

        <div className="relative max-w-3xl mx-auto px-4 sm:px-6 pt-20 pb-12 text-center">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
          >
            <div className="inline-flex items-center gap-2 mb-4 px-4 py-1.5 rounded-full bg-emerald-500/10 border border-emerald-500/20">
              <Shield className="h-4 w-4 text-emerald-500" />
              <span className="text-sm font-medium text-emerald-500">Verify Before You Pay</span>
            </div>
            <h1 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-3">
              Check a <span className="text-emerald-500">Number</span>
            </h1>
            <p className="text-muted-foreground text-base sm:text-lg max-w-xl mx-auto">
              Enter a phone number, bKash number, Facebook page, or any identifier to check if it&apos;s been reported as a scam
            </p>
          </motion.div>

          {/* Search Bar */}
          <motion.div
            className="mt-8"
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.2, duration: 0.5 }}
          >
            <div className="relative rounded-2xl overflow-hidden bg-background/60 backdrop-blur-xl border border-emerald-500/20 shadow-xl shadow-emerald-500/5">
              <div className="absolute inset-0 bg-gradient-to-r from-emerald-500/5 via-transparent to-teal-500/5 pointer-events-none" />
              <div className="flex items-center">
                <Search className="ml-4 h-5 w-5 text-muted-foreground flex-shrink-0" />
                <Input
                  type="text"
                  placeholder="Enter phone number, bKash number, Facebook page..."
                  value={inputValue}
                  onChange={(e) => setInputValue(e.target.value)}
                  onKeyDown={handleKeyDown}
                  className="h-14 pl-3 pr-4 text-base rounded-2xl border-0 focus-visible:ring-0 bg-transparent focus-visible:ring-offset-0"
                />
                <Button
                  onClick={() => performCheck()}
                  disabled={isLoading || !inputValue.trim()}
                  className="mr-2 h-10 px-6 rounded-xl bg-emerald-600 hover:bg-emerald-700 dark:bg-emerald-500 dark:hover:bg-emerald-600 disabled:opacity-50"
                >
                  {isLoading ? (
                    <motion.div
                      className="h-4 w-4 border-2 border-white/30 border-t-white rounded-full"
                      animate={{ rotate: 360 }}
                      transition={{ duration: 1, repeat: Infinity, ease: 'linear' }}
                    />
                  ) : (
                    <>
                      <Shield className="h-4 w-4" />
                      <span className="ml-1.5 hidden sm:inline">Check Now</span>
                    </>
                  )}
                </Button>
              </div>
            </div>
          </motion.div>

          {/* Quick examples */}
          <div className="mt-4 flex flex-wrap items-center justify-center gap-2">
            <span className="text-xs text-muted-foreground">Try:</span>
            {['01712345678', 'bKash seller', 'Facebook page'].map((example) => (
              <button
                key={example}
                onClick={() => { setInputValue(example); performCheck(example); }}
                className="text-xs px-2.5 py-1 rounded-full bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 hover:bg-emerald-500/20 transition-colors"
              >
                {example}
              </button>
            ))}
          </div>
        </div>
      </div>

      {/* Results Section */}
      <div className="max-w-4xl mx-auto px-4 sm:px-6 pb-20">
        <AnimatePresence mode="wait">
          {isLoading && (
            <motion.div
              key="loading"
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              className="text-center py-20"
            >
              <motion.div
                className="w-16 h-16 mx-auto mb-4 rounded-full border-4 border-emerald-500/20 border-t-emerald-500"
                animate={{ rotate: 360 }}
                transition={{ duration: 1, repeat: Infinity, ease: 'linear' }}
              />
              <p className="text-muted-foreground">Checking database for <span className="font-medium text-foreground">{inputValue}</span>...</p>
            </motion.div>
          )}

          {!isLoading && result && (
            <motion.div
              key="results"
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: -20 }}
              transition={{ duration: 0.5 }}
              className="space-y-6"
            >
              {/* ─── Main Risk Card ─── */}
              <Card className={`border-2 ${riskConfig_current?.borderColor} overflow-hidden`}>
                <div className={`h-2 ${
                  result.riskAssessment.level === 'critical' ? 'bg-red-500' :
                  result.riskAssessment.level === 'high' ? 'bg-orange-500' :
                  result.riskAssessment.level === 'medium' ? 'bg-yellow-500' :
                  result.riskAssessment.level === 'low' ? 'bg-emerald-500' :
                  'bg-emerald-400'
                }`} />
                <CardContent className="pt-8 pb-6">
                  <div className="grid md:grid-cols-2 gap-8 items-center">
                    {/* Gauge */}
                    <div className="text-center">
                      <RiskGauge score={result.riskAssessment.score} level={result.riskAssessment.level} />
                      <div className="mt-4">
                        <Badge className={`${riskConfig_current?.bgColor} ${riskConfig_current?.color} border ${riskConfig_current?.borderColor} text-sm px-4 py-1`}>
                          {riskConfig_current?.label}
                        </Badge>
                      </div>
                      <div className="mt-2 flex items-center justify-center gap-1.5 text-sm text-muted-foreground">
                        {(() => {
                          const IconComp = entityTypeConfig[result.inputType.type]?.icon || Search;
                          return <IconComp className="h-3.5 w-3.5" />;
                        })()}
                        <span>{result.inputType.label}</span>
                      </div>
                    </div>

                    {/* Info */}
                    <div className="space-y-4">
                      <div>
                        <h2 className="text-xl font-bold mb-1">
                          Result for &quot;{result.query}&quot;
                        </h2>
                        <p className="text-sm text-muted-foreground leading-relaxed">
                          {result.riskAssessment.description}
                        </p>
                      </div>

                      {/* Stats row */}
                      <div className="grid grid-cols-3 gap-3">
                        <div className="text-center p-3 rounded-xl bg-muted/30">
                          <div className="text-2xl font-bold text-emerald-500">{result.stats.totalReports}</div>
                          <div className="text-xs text-muted-foreground">Reports</div>
                        </div>
                        <div className="text-center p-3 rounded-xl bg-muted/30">
                          <div className="text-2xl font-bold text-orange-500">{formatBDT(result.stats.totalAmountLost)}</div>
                          <div className="text-xs text-muted-foreground">Lost</div>
                        </div>
                        <div className="text-center p-3 rounded-xl bg-muted/30">
                          <div className="text-2xl font-bold text-blue-500">{result.stats.uniqueEntities}</div>
                          <div className="text-xs text-muted-foreground">Entities</div>
                        </div>
                      </div>

                      {/* Actions */}
                      <div className="flex gap-2">
                        <Button
                          onClick={() => navigate('report')}
                          className="flex-1 bg-emerald-600 hover:bg-emerald-700 dark:bg-emerald-500 dark:hover:bg-emerald-600"
                        >
                          <AlertTriangle className="h-4 w-4" />
                          Report This
                        </Button>
                        <Button
                          variant="outline"
                          onClick={() => navigate('search')}
                          className="flex-1"
                        >
                          <Search className="h-4 w-4" />
                          Search Database
                        </Button>
                      </div>
                    </div>
                  </div>
                </CardContent>
              </Card>

              {/* ─── Risk Score Details (if available) ─── */}
              {result.riskScore && (
                <Card>
                  <CardHeader>
                    <CardTitle className="text-lg flex items-center gap-2">
                      <TrendingUp className="h-5 w-5 text-emerald-500" />
                      Risk Score Details
                    </CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
                      <div className="p-3 rounded-xl bg-muted/30 text-center">
                        <div className="text-xl font-bold">{result.riskScore.score}</div>
                        <div className="text-xs text-muted-foreground">Risk Score</div>
                      </div>
                      <div className="p-3 rounded-xl bg-muted/30 text-center">
                        <div className="text-xl font-bold">{result.riskScore.reportCount}</div>
                        <div className="text-xs text-muted-foreground">Reports</div>
                      </div>
                      <div className="p-3 rounded-xl bg-muted/30 text-center">
                        <div className="text-xl font-bold">{result.riskScore.evidenceCount}</div>
                        <div className="text-xs text-muted-foreground">Evidence</div>
                      </div>
                      <div className="p-3 rounded-xl bg-muted/30 text-center">
                        <div className="text-xl font-bold">
                          {result.riskScore.lastReported ? formatDate(result.riskScore.lastReported) : 'N/A'}
                        </div>
                        <div className="text-xs text-muted-foreground">Last Reported</div>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              )}

              {/* ─── Matched Entities ─── */}
              {result.matchedEntities.length > 0 && (
                <Card>
                  <CardHeader>
                    <CardTitle className="text-lg flex items-center gap-2">
                      <Users className="h-5 w-5 text-emerald-500" />
                      Matched Entities ({result.matchedEntities.length})
                    </CardTitle>
                    <CardDescription>Entities linked to scam reports matching your query</CardDescription>
                  </CardHeader>
                  <CardContent className="space-y-3">
                    {result.matchedEntities.map((entity, idx) => {
                      const entityConf = entityTypeConfig[entity.entityType] || entityTypeConfig.general;
                      const EntityIcon = entityConf.icon;
                      return (
                        <motion.div
                          key={`${entity.entityType}-${entity.entityValue}`}
                          initial={{ opacity: 0, x: -20 }}
                          animate={{ opacity: 1, x: 0 }}
                          transition={{ delay: idx * 0.08 }}
                          className="flex items-center gap-3 p-3 rounded-xl border border-border/50 hover:border-emerald-500/30 hover:bg-emerald-500/5 transition-colors"
                        >
                          <div className={`p-2 rounded-lg ${entityConf.color === 'text-blue-500' ? 'bg-blue-500/10' : entityConf.color === 'text-pink-500' ? 'bg-pink-500/10' : entityConf.color === 'text-orange-500' ? 'bg-orange-500/10' : 'bg-emerald-500/10'}`}>
                            <EntityIcon className={`h-4 w-4 ${entityConf.color}`} />
                          </div>
                          <div className="flex-1 min-w-0">
                            <div className="font-medium text-sm truncate">{entity.entityValue}</div>
                            <div className="text-xs text-muted-foreground">{entityConf.label} • {entity.reportCount} report(s)</div>
                          </div>
                          <Badge variant="outline" className="text-xs">{entity.entityType}</Badge>
                        </motion.div>
                      );
                    })}
                  </CardContent>
                </Card>
              )}

              {/* ─── Recent Reports ─── */}
              {result.recentReports.length > 0 && (
                <Card>
                  <CardHeader>
                    <CardTitle className="text-lg flex items-center gap-2">
                      <AlertTriangle className="h-5 w-5 text-emerald-500" />
                      Recent Scam Reports ({result.recentReports.length})
                    </CardTitle>
                    <CardDescription>Latest reports matching this query</CardDescription>
                  </CardHeader>
                  <CardContent className="space-y-3">
                    {result.recentReports.map((report, idx) => {
                      const reportRiskConfig: Record<string, { color: string; bgColor: string }> = {
                        low: { color: 'text-emerald-500', bgColor: 'bg-emerald-500/10' },
                        medium: { color: 'text-yellow-500', bgColor: 'bg-yellow-500/10' },
                        high: { color: 'text-orange-500', bgColor: 'bg-orange-500/10' },
                        critical: { color: 'text-red-500', bgColor: 'bg-red-500/10' },
                      };
                      const rc = reportRiskConfig[report.riskLevel] || reportRiskConfig.low;
                      return (
                        <motion.div
                          key={report.id}
                          initial={{ opacity: 0, y: 10 }}
                          animate={{ opacity: 1, y: 0 }}
                          transition={{ delay: idx * 0.06 }}
                          className="group cursor-pointer p-4 rounded-xl border border-border/50 hover:border-emerald-500/30 hover:bg-emerald-500/5 transition-all"
                          onClick={() => handleReportClick(report.id)}
                        >
                          <div className="flex items-start justify-between gap-3">
                            <div className="flex-1 min-w-0">
                              <h4 className="font-medium text-sm group-hover:text-emerald-500 transition-colors truncate">
                                {report.title}
                              </h4>
                              <div className="flex flex-wrap items-center gap-2 mt-1.5">
                                <Badge className={`${rc.bgColor} ${rc.color} border-0 text-xs`}>
                                  {report.riskLevel}
                                </Badge>
                                {report.status === 'verified' && (
                                  <Badge className="bg-emerald-500/10 text-emerald-500 border-0 text-xs">
                                    <CheckCircle2 className="h-3 w-3 mr-0.5" />
                                    Verified
                                  </Badge>
                                )}
                                {report.district && (
                                  <span className="text-xs text-muted-foreground flex items-center gap-0.5">
                                    <MapPin className="h-3 w-3" />
                                    {report.district}
                                  </span>
                                )}
                                <span className="text-xs text-muted-foreground flex items-center gap-0.5">
                                  <Clock className="h-3 w-3" />
                                  {formatDate(report.createdAt)}
                                </span>
                              </div>
                            </div>
                            <div className="flex items-center gap-3 text-xs text-muted-foreground flex-shrink-0">
                              {report.amountLost > 0 && (
                                <span className="font-medium text-orange-500">{formatBDT(report.amountLost)}</span>
                              )}
                              <ChevronRight className="h-4 w-4 group-hover:text-emerald-500 transition-colors" />
                            </div>
                          </div>
                        </motion.div>
                      );
                    })}
                  </CardContent>
                </Card>
              )}

              {/* ─── Recommendations ─── */}
              <Card>
                <CardHeader>
                  <CardTitle className="text-lg flex items-center gap-2">
                    <ShieldCheck className="h-5 w-5 text-emerald-500" />
                    Safety Recommendations
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-2.5">
                    {result.recommendations.map((rec, idx) => (
                      <motion.div
                        key={idx}
                        initial={{ opacity: 0, x: -10 }}
                        animate={{ opacity: 1, x: 0 }}
                        transition={{ delay: idx * 0.05 }}
                        className="flex items-start gap-3 p-3 rounded-lg bg-muted/30"
                      >
                        <span className="text-sm leading-relaxed">{rec}</span>
                      </motion.div>
                    ))}
                  </div>
                </CardContent>
                <CardFooter className="border-t pt-4">
                  <p className="text-xs text-muted-foreground">
                    ⚠️ Disclaimer: This check is based on community-reported data. A &quot;safe&quot; result does not guarantee legitimacy. Always exercise caution when dealing with unknown contacts.
                  </p>
                </CardFooter>
              </Card>
            </motion.div>
          )}

          {/* ─── Empty State (no search yet) ─── */}
          {!isLoading && !result && !hasSearched && (
            <motion.div
              key="empty"
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              className="text-center py-16"
            >
              <motion.div
                animate={{ y: [0, -8, 0] }}
                transition={{ duration: 2, repeat: Infinity, ease: 'easeInOut' }}
              >
                <Shield className="h-16 w-16 text-emerald-500/30 mx-auto" />
              </motion.div>
              <h3 className="mt-6 text-lg font-semibold">Enter a Number to Check</h3>
              <p className="mt-2 text-sm text-muted-foreground max-w-md mx-auto">
                Type a phone number, bKash/Nagad number, Facebook page URL, or seller name to see if it&apos;s been reported as a scam
              </p>

              {/* Info cards */}
              <div className="mt-8 grid grid-cols-1 sm:grid-cols-3 gap-4 max-w-2xl mx-auto">
                {[
                  { icon: Phone, title: 'Phone Numbers', desc: 'Check mobile numbers for scam reports' },
                  { icon: Wallet, title: 'bKash / Nagad', desc: 'Verify payment numbers before sending' },
                  { icon: Facebook, title: 'Facebook Pages', desc: 'Check sellers and business pages' },
                ].map((item, idx) => (
                  <motion.div
                    key={item.title}
                    initial={{ opacity: 0, y: 10 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ delay: 0.3 + idx * 0.1 }}
                    className="p-4 rounded-xl border border-border/50 bg-muted/20"
                  >
                    <item.icon className="h-8 w-8 text-emerald-500 mx-auto mb-2" />
                    <h4 className="text-sm font-medium">{item.title}</h4>
                    <p className="text-xs text-muted-foreground mt-1">{item.desc}</p>
                  </motion.div>
                ))}
              </div>
            </motion.div>
          )}

          {/* ─── No Results State ─── */}
          {!isLoading && hasSearched && result && result.stats.totalReports === 0 && (
            <motion.div
              key="no-results"
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              className="text-center mt-6"
            >
              <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-emerald-500/10 border border-emerald-500/20">
                <CheckCircle2 className="h-5 w-5 text-emerald-500" />
                <span className="text-sm font-medium text-emerald-600 dark:text-emerald-400">
                  No scam reports found — but stay cautious!
                </span>
              </div>
            </motion.div>
          )}
        </AnimatePresence>
      </div>
    </div>
  );
}
