"use client";

import { useState, useEffect } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { Video, Search, AlertCircle, CheckCircle2, Clock, MessageSquare, Play, BarChart2, TrendingUp, HelpCircle, ExternalLink, History, ThumbsUp, MessageCircle } from "lucide-react";
import { toolsApi } from "@/lib/api/api-service";
import { useToast } from "@/components/ui/toast";
import { PieChart, Pie, Cell, ResponsiveContainer, Tooltip as RechartsTooltip, Legend } from "recharts";

export default function YoutubeAnalyzerPage() {
  const [url, setUrl] = useState("");
  const [isAnalyzing, setIsAnalyzing] = useState(false);
  const [activeTab, setActiveTab] = useState("summary");
  const [result, setResult] = useState<any>(null);
  const [history, setHistory] = useState<any[]>([]);
  const [isHistoryOpen, setIsHistoryOpen] = useState(false);
  const [isLoadingHistory, setIsLoadingHistory] = useState(false);
  const toast = useToast();

  useEffect(() => {
    if (isHistoryOpen && history.length === 0) {
      loadHistory();
    }
  }, [isHistoryOpen]);

  const loadHistory = async () => {
    setIsLoadingHistory(true);
    try {
      const data = await toolsApi.getYoutubeAnalysisHistory();
      setHistory(data);
    } catch (e) {
      console.error(e);
    } finally {
      setIsLoadingHistory(false);
    }
  };

  const handleLoadAnalysis = async (id: string) => {
    setIsAnalyzing(true);
    setResult(null);
    setActiveTab("summary");
    try {
      const data = await toolsApi.getYoutubeAnalysisById(id);
      setResult(data.analysisData);
      setUrl(data.videoUrl);
      setIsHistoryOpen(false);
      window.scrollTo({ top: 0, behavior: 'smooth' });
    } catch (error: any) {
      toast.error("Geçmiş analiz yüklenirken hata oluştu.");
    } finally {
      setIsAnalyzing(false);
    }
  };
  
  const handleAnalyze = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!url.trim()) return;
    
    setIsAnalyzing(true);
    setResult(null);
    setActiveTab("summary");
    
    try {
      const data = await toolsApi.analyzeYoutubeVideo(url);
      setResult(data);
      toast.success("Analiz başarıyla tamamlandı!");
    } catch (error: any) {
      toast.error(error?.response?.data?.message || "Analiz sırasında bir hata oluştu.");
    } finally {
      setIsAnalyzing(false);
    }
  };

  const COLORS = ['#22c55e', '#ef4444', '#64748b'];

  const sentimentData = result?.commentsAnalysis?.sentiment ? [
    { name: 'Pozitif', value: result.commentsAnalysis.sentiment.positive },
    { name: 'Negatif', value: result.commentsAnalysis.sentiment.negative },
    { name: 'Nötr', value: result.commentsAnalysis.sentiment.neutral },
  ] : [];

  return (
    <div className="max-w-7xl mx-auto pb-20">
      {/* Header */}
      <div className="mb-10 text-center max-w-3xl mx-auto">
        <div className="inline-flex items-center justify-center p-3 rounded-2xl bg-red-500/10 text-red-500 mb-6">
          <Video size={32} />
        </div>
        <h1 className="text-4xl md:text-5xl font-[family-name:var(--font-display)] font-bold text-white mb-4">
          YouTube Analiz Aracı
        </h1>
        <p className="text-[var(--color-text-muted)] text-lg">
          Uzun videoların transkriptini çıkarın, binlerce yorumu yapay zekayla analiz edin ve kitlenizin nabzını tutun.
        </p>
      </div>

      {/* Input Section */}
      <div className="max-w-3xl mx-auto mb-4">
        <form onSubmit={handleAnalyze} className="relative group">
          <div className="absolute -inset-1 bg-gradient-to-r from-red-500 to-purple-500 rounded-2xl blur opacity-20 group-hover:opacity-40 transition duration-1000 group-hover:duration-200"></div>
          <div className="relative flex items-center bg-[var(--color-bg-deep)] border border-[var(--color-border-faint)] rounded-2xl p-2 shadow-2xl">
            <div className="pl-4 pr-2 text-[var(--color-text-ghost)]">
              <LinkIcon />
            </div>
            <input
              type="url"
              value={url}
              onChange={(e) => setUrl(e.target.value)}
              placeholder="YouTube video linkini yapıştırın..."
              className="w-full bg-transparent border-none text-white focus:ring-0 placeholder-[var(--color-text-ghost)] h-12 text-lg"
              required
              disabled={isAnalyzing}
            />
            <button
              type="submit"
              disabled={isAnalyzing || !url}
              className="ml-2 px-8 h-12 bg-white text-black rounded-xl font-bold flex items-center gap-2 hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed transition-all"
            >
              {isAnalyzing ? (
                <>
                  <div className="w-5 h-5 border-2 border-black border-t-transparent rounded-full animate-spin" />
                  <span>Analiz Ediliyor...</span>
                </>
              ) : (
                <>
                  <Search size={18} />
                  <span>Analiz Et</span>
                </>
              )}
            </button>
          </div>
        </form>
      </div>

      <div className="max-w-3xl mx-auto flex justify-end mb-8">
        <button 
          onClick={() => setIsHistoryOpen(!isHistoryOpen)}
          className="flex items-center gap-2 text-[var(--color-text-muted)] hover:text-white transition-colors text-sm font-medium bg-[var(--color-bg-elevated)] px-4 py-2 rounded-xl border border-[var(--color-border-faint)]"
        >
          <History size={16} />
          <span>{isHistoryOpen ? 'Geçmişi Gizle' : 'Geçmiş Analizlerim'}</span>
        </button>
      </div>

      <div className="max-w-3xl mx-auto mb-12">
        {/* History Section */}
        <AnimatePresence>
          {isHistoryOpen && (
            <motion.div
              initial={{ opacity: 0, height: 0 }}
              animate={{ opacity: 1, height: 'auto' }}
              exit={{ opacity: 0, height: 0 }}
              className="mb-8 overflow-hidden"
            >
              <div className="glass rounded-2xl p-6 border border-[var(--color-border-faint)]">
                <h3 className="text-lg font-bold text-white mb-4 flex items-center gap-2">
                  <History size={20} /> Geçmiş Analizler
                </h3>
                
                {isLoadingHistory ? (
                  <div className="flex justify-center p-8">
                    <div className="w-8 h-8 border-2 border-red-500 border-t-transparent rounded-full animate-spin"></div>
                  </div>
                ) : history.length === 0 ? (
                  <p className="text-center text-[var(--color-text-muted)] py-8">Henüz analiz edilmiş bir video bulunmuyor.</p>
                ) : (
                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    {history.map((item) => (
                      <button
                        key={item.id}
                        onClick={() => handleLoadAnalysis(item.id)}
                        className="text-left bg-[var(--color-bg-deep)] border border-[var(--color-border-faint)] rounded-xl p-4 hover:border-red-500/50 hover:bg-white/5 transition-all group flex gap-4"
                      >
                        <img 
                          src={item.thumbnail} 
                          alt="" 
                          className="w-24 h-16 object-cover rounded-lg shrink-0"
                        />
                        <div className="overflow-hidden">
                          <h4 className="font-bold text-white text-sm line-clamp-2 mb-1 group-hover:text-red-400 transition-colors">
                            {item.title}
                          </h4>
                          <div className="flex items-center gap-3 text-xs text-[var(--color-text-ghost)]">
                            <span className="flex items-center gap-1"><MessageSquare size={12} /> {item.commentCount}</span>
                            <span>{new Date(item.createdAt).toLocaleDateString('tr-TR')}</span>
                          </div>
                        </div>
                      </button>
                    ))}
                  </div>
                )}
              </div>
            </motion.div>
          )}
        </AnimatePresence>

        {/* Loading Steps */}
        <AnimatePresence>
          {isAnalyzing && (
            <motion.div
              initial={{ opacity: 0, y: 10 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, height: 0 }}
              className="mt-8 glass rounded-2xl p-6 border border-[var(--color-border-faint)]"
            >
              <div className="space-y-4">
                <LoadingStep icon={<Play size={18} />} text="YouTube videosu bulunuyor..." delay={0} />
                <LoadingStep icon={<FileTextIcon />} text="Transkript çekiliyor ve özetleniyor..." delay={2} />
                <LoadingStep icon={<MessageSquare size={18} />} text="Yorumlar toplanıyor ve kümeleniyor..." delay={4} />
                <LoadingStep icon={<ActivityIcon />} text="Yapay zeka çapraz analizi gerçekleştiriyor..." delay={6} />
              </div>
            </motion.div>
          )}
        </AnimatePresence>
      </div>

      {/* Results Section */}
      <AnimatePresence>
        {result && (
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            className="space-y-8"
          >
            {/* Video Info Card */}
            {result.commentsAnalysis?.videoDetails && (
              <div className="glass rounded-3xl p-6 border border-[var(--color-border-faint)] flex flex-col md:flex-row gap-6 items-center md:items-start bg-gradient-to-br from-[var(--color-bg-deep)] to-transparent">
                <img 
                  src={result.commentsAnalysis.videoDetails.thumbnail} 
                  alt={result.commentsAnalysis.videoDetails.title} 
                  className="w-full md:w-72 rounded-xl object-cover aspect-video shadow-2xl border border-[var(--color-border-faint)]"
                />
                <div className="flex-1 space-y-4 w-full">
                  <h2 className="text-2xl md:text-3xl font-bold text-white leading-tight line-clamp-2 font-[family-name:var(--font-display)]">
                    {result.commentsAnalysis.videoDetails.title}
                  </h2>
                  <div className="flex flex-wrap gap-3 text-sm font-medium">
                    <div className="flex items-center gap-1.5 text-[var(--color-text-muted)] bg-[var(--color-bg-elevated)] px-4 py-2 rounded-xl border border-[var(--color-border-faint)] shadow-sm">
                      <Play size={16} className="text-red-500" /> 
                      <span>{new Intl.NumberFormat('tr-TR').format(result.commentsAnalysis.videoDetails.viewCount || 0)} İzlenme</span>
                    </div>
                    <div className="flex items-center gap-1.5 text-[var(--color-text-muted)] bg-[var(--color-bg-elevated)] px-4 py-2 rounded-xl border border-[var(--color-border-faint)] shadow-sm">
                      <TrendingUp size={16} className="text-blue-500" />
                      <span>{new Intl.NumberFormat('tr-TR').format(result.commentsAnalysis.videoDetails.likeCount || 0)} Beğeni</span>
                    </div>
                    <a href={result.url} target="_blank" rel="noreferrer" className="flex items-center gap-1.5 text-white bg-red-600 hover:bg-red-700 px-4 py-2 rounded-xl transition-colors shadow-lg shadow-red-500/20">
                      <ExternalLink size={16} />
                      <span>YouTube'da Aç</span>
                    </a>
                  </div>
                </div>
              </div>
            )}

            {/* Stats Row */}
            <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
              <StatCard icon={<Clock />} title="Video Uzunluğu" value={result.transcriptAnalysis?.chapters?.length ? `${result.transcriptAnalysis.chapters.length} Bölüm` : 'Bilinmiyor'} />
              <StatCard icon={<MessageSquare />} title="İncelenen Yorum" value={result.commentsAnalysis?.commentCount || 0} />
              <StatCard icon={<TrendingUp />} title="Genel Duygu" value={result.commentsAnalysis?.sentiment?.positive > 50 ? 'Pozitif 🟢' : 'Karışık 🟡'} />
              <StatCard icon={<CheckCircle2 />} title="Durum" value="Başarılı" />
            </div>

            {/* Tabs */}
            <div className="flex overflow-x-auto hide-scrollbar gap-2 p-1 bg-[var(--color-bg-elevated)] rounded-xl border border-[var(--color-border-faint)] w-fit mx-auto">
              <TabButton active={activeTab === 'summary'} onClick={() => setActiveTab('summary')} icon={<BarChart2 size={16} />} label="Genel Özet" />
              <TabButton active={activeTab === 'chapters'} onClick={() => setActiveTab('chapters')} icon={<Play size={16} />} label="Bölümler" />
              <TabButton active={activeTab === 'comments'} onClick={() => setActiveTab('comments')} icon={<MessageSquare size={16} />} label="Yorum Analizi" />
              <TabButton active={activeTab === 'cross'} onClick={() => setActiveTab('cross')} icon={<ActivityIcon />} label="Çapraz Analiz" />
              <TabButton active={activeTab === 'ideas'} onClick={() => setActiveTab('ideas')} icon={<HelpCircle size={16} />} label="Yeni Fikirler" />
            </div>

            {/* Tab Content */}
            <div className="glass rounded-3xl p-6 md:p-10 border border-[var(--color-border-faint)] min-h-[400px]">
              
              {/* Summary Tab */}
              {activeTab === 'summary' && (
                <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="space-y-8">
                  <div>
                    <h3 className="text-xl font-bold text-white mb-4 flex items-center gap-2">
                      <FileTextIcon /> Transkript Özeti
                    </h3>
                    <div className="prose prose-invert max-w-none text-[var(--color-text-muted)] leading-relaxed bg-[var(--color-bg-deep)] p-6 rounded-2xl border border-[var(--color-border-faint)]">
                      {result.transcriptAnalysis?.overallSummary ? (
                        result.transcriptAnalysis.overallSummary.split('\n').map((p: string, i: number) => (
                          <p key={i}>{p}</p>
                        ))
                      ) : (
                         <p>Transkript özeti bulunamadı.</p>
                      )}
                    </div>
                  </div>
                  <div>
                    <h3 className="text-xl font-bold text-white mb-4 flex items-center gap-2">
                      <MessageSquare size={20} /> Genel Yankı (Yorumlar)
                    </h3>
                    <div className="bg-[var(--color-bg-deep)] p-6 rounded-2xl border border-[var(--color-border-faint)]">
                      <p className="text-[var(--color-text-muted)] leading-relaxed">
                        {result.commentsAnalysis?.generalResonance || "Yorum verisi bulunamadı."}
                      </p>
                    </div>
                  </div>
                </motion.div>
              )}

              {/* Chapters Tab */}
              {activeTab === 'chapters' && (
                <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="space-y-6">
                  <h3 className="text-xl font-bold text-white mb-6">Bölüm Bazlı Analiz</h3>
                  <div className="grid gap-4">
                    {result.transcriptAnalysis?.chapters?.map((chapter: any, i: number) => (
                      <div key={i} className="bg-[var(--color-bg-deep)] p-5 rounded-2xl border border-[var(--color-border-faint)]">
                        <h4 className="font-bold text-lg text-white mb-2">{chapter.title}</h4>
                        <p className="text-[var(--color-text-muted)] mb-4 text-sm">{chapter.summary}</p>
                        {chapter.points && chapter.points.length > 0 && (
                          <ul className="space-y-1">
                            {chapter.points.map((pt: string, j: number) => (
                              <li key={j} className="text-sm text-[var(--color-text-ghost)] flex items-start gap-2">
                                <span className="text-blue-500 mt-1">•</span>
                                <span>{pt}</span>
                              </li>
                            ))}
                          </ul>
                        )}
                      </div>
                    ))}
                  </div>
                </motion.div>
              )}

              {/* Comments Tab */}
              {activeTab === 'comments' && (
                <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="space-y-8">
                  <h3 className="text-xl font-bold text-white mb-6">Yorum & Duygu Analizi</h3>
                  
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
                    <div className="h-64 bg-[var(--color-bg-deep)] p-4 rounded-2xl border border-[var(--color-border-faint)] flex items-center justify-center">
                      {sentimentData.length > 0 ? (
                        <ResponsiveContainer width="100%" height="100%">
                          <PieChart>
                            <Pie
                              data={sentimentData}
                              cx="50%"
                              cy="50%"
                              innerRadius={60}
                              outerRadius={80}
                              paddingAngle={5}
                              dataKey="value"
                            >
                              {sentimentData.map((entry, index) => (
                                <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                              ))}
                            </Pie>
                            <RechartsTooltip 
                              contentStyle={{ backgroundColor: '#111', border: '1px solid #333', borderRadius: '8px' }}
                              itemStyle={{ color: '#fff' }}
                            />
                            <Legend />
                          </PieChart>
                        </ResponsiveContainer>
                      ) : (
                        <span className="text-[var(--color-text-ghost)]">Grafik verisi yok</span>
                      )}
                    </div>
                    
                    <div className="space-y-4">
                      <div className="bg-[var(--color-bg-deep)] p-5 rounded-2xl border border-green-500/20">
                        <h4 className="font-bold text-green-500 mb-1">Pozitif Etkileşim (%{result.commentsAnalysis?.sentiment?.positive || 0})</h4>
                        <p className="text-sm text-[var(--color-text-muted)]">Kitle genel olarak videonun değerinden ve anlatımından memnun.</p>
                      </div>
                      <div className="bg-[var(--color-bg-deep)] p-5 rounded-2xl border border-red-500/20">
                        <h4 className="font-bold text-red-500 mb-1">Negatif Etkileşim (%{result.commentsAnalysis?.sentiment?.negative || 0})</h4>
                        <p className="text-sm text-[var(--color-text-muted)]">Eleştiriler veya videodaki eksik bulunan noktalar.</p>
                      </div>
                    </div>
                  </div>

                  <div className="mt-8">
                    <h4 className="font-bold text-lg text-white mb-4 flex items-center gap-2">
                      <HelpCircle size={18} /> Sık Sorulan Sorular (FAQ)
                    </h4>
                    <div className="grid gap-4">
                      {result.commentsAnalysis?.faq?.map((f: any, i: number) => (
                        <div key={i} className="bg-[var(--color-bg-deep)] p-5 md:p-6 rounded-2xl border border-[var(--color-border-faint)] hover:border-[var(--color-border-hover)] transition-colors">
                          <p className="font-bold text-white text-base md:text-lg mb-2 leading-relaxed">
                            <span className="text-blue-400 mr-2">Soru:</span>
                            {f.question}
                          </p>
                          <p className="text-sm md:text-base text-[var(--color-text-muted)] leading-relaxed">
                            <span className="text-[var(--color-text-ghost)] mr-2 font-medium">Bağlam:</span>
                            {f.context}
                          </p>
                        </div>
                      ))}
                    </div>
                  </div>

                  {result.commentsAnalysis?.topComments && result.commentsAnalysis.topComments.length > 0 && (
                    <div className="mt-8">
                      <h4 className="font-bold text-lg text-white mb-4 flex items-center gap-2">
                        <MessageSquare size={18} /> En Yüksek Etkileşim Alan 10 Yorum
                      </h4>
                      <div className="grid gap-4">
                        {result.commentsAnalysis.topComments.map((c: any, i: number) => (
                          <div key={i} className="bg-[var(--color-bg-deep)] p-5 md:p-6 rounded-2xl border border-[var(--color-border-faint)] hover:border-[var(--color-border-hover)] transition-colors flex flex-col gap-3">
                            <div className="flex items-center justify-between">
                              <span className="font-bold text-blue-400">{c.author}</span>
                              <div className="flex items-center gap-4 text-xs font-medium text-[var(--color-text-muted)]">
                                <span className="flex items-center gap-1"><ThumbsUp size={14} className="text-green-500" /> {c.likes}</span>
                                <span className="flex items-center gap-1"><MessageCircle size={14} className="text-blue-500" /> {c.replies}</span>
                              </div>
                            </div>
                            <p className="text-sm md:text-base text-white leading-relaxed whitespace-pre-wrap">
                              {c.text}
                            </p>
                          </div>
                        ))}
                      </div>
                    </div>
                  )}
                </motion.div>
              )}

              {/* Cross Analysis Tab */}
              {activeTab === 'cross' && (
                <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="space-y-6">
                  <h3 className="text-xl font-bold text-white mb-6">İçerik - Yorum Çapraz Analizi</h3>
                  
                  {result.crossAnalysis && !result.crossAnalysis.error ? (
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                      <div className="bg-[var(--color-bg-deep)] p-6 rounded-2xl border border-[var(--color-border-faint)] md:col-span-2">
                        <h4 className="font-bold text-white mb-2">Örtüşme (Alignment)</h4>
                        <p className="text-[var(--color-text-muted)] text-sm">{result.crossAnalysis.alignment}</p>
                      </div>
                      
                      <div className="bg-red-500/5 p-6 rounded-2xl border border-red-500/20">
                        <h4 className="font-bold text-red-400 mb-4">Yanlış Anlaşılan / Atlanan Noktalar</h4>
                        <ul className="space-y-2">
                          {result.crossAnalysis.misunderstoodPoints?.map((pt: string, i: number) => (
                            <li key={i} className="text-sm text-[var(--color-text-muted)] flex items-start gap-2">
                              <span className="text-red-500 mt-0.5">•</span>
                              <span>{pt}</span>
                            </li>
                          ))}
                        </ul>
                      </div>

                      <div className="bg-green-500/5 p-6 rounded-2xl border border-green-500/20">
                        <h4 className="font-bold text-green-400 mb-4">Öne Çıkan Güçlü Yönler</h4>
                        <ul className="space-y-2">
                          {result.crossAnalysis.highlightedStrengths?.map((pt: string, i: number) => (
                            <li key={i} className="text-sm text-[var(--color-text-muted)] flex items-start gap-2">
                              <span className="text-green-500 mt-0.5">•</span>
                              <span>{pt}</span>
                            </li>
                          ))}
                        </ul>
                      </div>

                      <div className="bg-blue-500/5 p-6 rounded-2xl border border-blue-500/20 md:col-span-2">
                        <h4 className="font-bold text-blue-400 mb-4">İçerik Boşlukları (Content Gaps)</h4>
                        <ul className="space-y-2">
                          {result.crossAnalysis.contentGaps?.map((pt: string, i: number) => (
                            <li key={i} className="text-sm text-[var(--color-text-muted)] flex items-start gap-2">
                              <span className="text-blue-500 mt-0.5">•</span>
                              <span>{pt}</span>
                            </li>
                          ))}
                        </ul>
                      </div>
                    </div>
                  ) : (
                    <div className="p-6 text-center text-[var(--color-text-ghost)]">Çapraz analiz verisi bulunamadı.</div>
                  )}
                </motion.div>
              )}

              {/* Ideas Tab */}
              {activeTab === 'ideas' && (
                <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="space-y-6">
                  <h3 className="text-xl font-bold text-white mb-6">Gelecek İçerik Fikirleri</h3>
                  <p className="text-[var(--color-text-ghost)] text-sm mb-6">
                    Kitle tepkilerine ve eksik bırakılan noktalara dayalı video fikirleri:
                  </p>
                  <div className="grid gap-4">
                    {result.commentsAnalysis?.suggestions?.map((idea: string, i: number) => (
                      <div key={i} className="bg-[var(--color-bg-deep)] p-5 rounded-2xl border border-[var(--color-border-faint)] flex items-start gap-4">
                        <div className="w-8 h-8 rounded-full bg-blue-500/20 text-blue-500 flex items-center justify-center font-bold shrink-0">
                          {i + 1}
                        </div>
                        <p className="text-[var(--color-text-muted)] mt-1">{idea}</p>
                      </div>
                    ))}
                  </div>
                </motion.div>
              )}

            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}

function TabButton({ active, onClick, icon, label }: { active: boolean; onClick: () => void; icon: React.ReactNode; label: string }) {
  return (
    <button
      onClick={onClick}
      className={`flex items-center gap-2 px-4 py-2.5 rounded-lg text-sm font-semibold transition-all whitespace-nowrap ${
        active 
          ? 'bg-white text-black shadow-md' 
          : 'text-[var(--color-text-ghost)] hover:text-white hover:bg-white/5'
      }`}
    >
      {icon}
      <span>{label}</span>
    </button>
  );
}

function StatCard({ icon, title, value }: { icon: React.ReactNode; title: string; value: string | number }) {
  return (
    <div className="glass p-5 rounded-2xl border border-[var(--color-border-faint)] flex items-center gap-4">
      <div className="w-12 h-12 rounded-xl bg-white/5 flex items-center justify-center text-[var(--color-text-muted)]">
        {icon}
      </div>
      <div>
        <p className="text-xs text-[var(--color-text-ghost)] uppercase tracking-wider font-semibold mb-1">{title}</p>
        <p className="text-xl font-bold text-white font-[family-name:var(--font-display)]">{value}</p>
      </div>
    </div>
  );
}

function LoadingStep({ icon, text, delay }: { icon: React.ReactNode; text: string; delay: number }) {
  return (
    <motion.div 
      initial={{ opacity: 0, x: -10 }}
      animate={{ opacity: 1, x: 0 }}
      transition={{ delay: delay * 0.5, duration: 0.5 }}
      className="flex items-center gap-3 text-[var(--color-text-muted)]"
    >
      <div className="w-8 h-8 rounded-full bg-[var(--color-bg-elevated)] flex items-center justify-center">
        {icon}
      </div>
      <span className="text-sm font-medium">{text}</span>
    </motion.div>
  );
}

const LinkIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>;
const FileTextIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><line x1="10" y1="9" x2="8" y2="9"></line></svg>;
const ActivityIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline></svg>;
