import React, { useState, useMemo } from 'react';
import { Phone, CheckCircle, Clock, UserCheck, Activity, Filter, ChevronDown, BarChart3, HelpCircle, Mail, Sparkles, Terminal, Box, Zap, ShieldCheck } from 'lucide-react';
import { Card, Button } from '../components/UI';
import { mockAssistants, getDashboardStats } from '../services/mockData';

export const DashboardPage: React.FC = () => {
  const [timeRange, setTimeRange] = useState<'week' | 'month' | 'year'>('week');
  const [selectedAssistantId, setSelectedAssistantId] = useState<string>('all');

  const stats = useMemo(() => {
    return getDashboardStats(timeRange, selectedAssistantId);
  }, [timeRange, selectedAssistantId]);

  return (
    <div className="min-h-full flex flex-col animate-in fade-in py-1">
      <div className="w-full max-w-[1600px] mx-auto space-y-4 px-2 lg:px-6">
        
        {/* 1. Utility Row (Top Navigation Actions) */}
        <div className="flex justify-end items-center gap-2 border-b border-white/[0.03] pb-2">
          <Button variant="ghost" size="sm" className="h-7 px-2.5 text-[10px] font-bold border border-white/5 hover:bg-primary/10 hover:text-primary transition-all text-white/70">
            <HelpCircle className="w-3 h-3 mr-1.5 opacity-70" /> 文档
          </Button>
          <Button variant="ghost" size="sm" className="h-7 px-2.5 text-[10px] font-bold border border-white/5 hover:bg-primary/10 hover:text-primary transition-all text-white/70">
            <Mail className="w-3 h-3 mr-1.5 opacity-70" /> 联系方式
          </Button>
        </div>

        {/* 2. Welcome Header */}
        <div className="flex flex-col space-y-4 text-center md:text-left pt-1">
          <div className="space-y-0.5">
            <h1 className="text-2xl font-bold tracking-tight text-white">
              欢迎, <span className="text-primary">Admin User</span>
            </h1>
            <p className="text-muted-foreground flex items-center justify-center md:justify-start text-[11px]">
              系统当前运行环境：
              <span className="flex items-center ml-2 text-green-400 text-[10px] font-mono bg-green-400/10 px-1.5 py-0.5 rounded-full border border-green-400/20">
                <span className="w-1 h-1 rounded-full bg-green-400 animate-pulse mr-1"></span> 
                HEALTHY
              </span>
            </p>
          </div>
        </div>

        {/* 3. Section Header: Title + Filters */}
        <div className="flex flex-col md:flex-row items-center justify-between border-b border-white/5 pb-3 pt-2 gap-3">
          <div className="flex items-center space-x-2.5">
              <div className="p-1 bg-primary/10 rounded-lg">
                  <BarChart3 className="h-3.5 w-3.5 text-primary" />
              </div>
              <div className="flex flex-col">
                  <h2 className="text-sm font-bold text-white tracking-wide leading-none">用量标准</h2>
                  <span className="text-[8px] font-mono text-muted-foreground uppercase tracking-[0.2em] opacity-40 mt-1">Metrics Overview</span>
              </div>
          </div>

          <div className="flex items-center gap-1.5 bg-black/20 p-0.5 rounded-lg border border-white/5 shadow-inner scale-95 origin-right">
              <div className="relative group min-w-[130px]">
                  <div className="absolute left-2.5 top-1/2 -translate-y-1/2 pointer-events-none text-muted-foreground group-focus-within:text-primary transition-colors">
                      <Filter className="h-2.5 w-2.5" />
                  </div>
                  <select 
                      className="w-full bg-transparent border-0 rounded-lg pl-7 pr-6 py-1 text-[10px] font-bold focus:outline-none appearance-none cursor-pointer transition-all text-white/80"
                      value={selectedAssistantId}
                      onChange={(e) => setSelectedAssistantId(e.target.value)}
                  >
                      <option value="all" className="bg-background">所有小助手</option>
                      {mockAssistants.map(a => (
                          <option key={a.id} value={a.id} className="bg-background">{a.name}</option>
                      ))}
                  </select>
                  <ChevronDown className="absolute right-1.5 top-1/2 -translate-y-1/2 h-2.5 w-2.5 text-muted-foreground pointer-events-none" />
              </div>

              <div className="h-3 w-px bg-white/10 mx-0.5"></div>

              <div className="flex gap-0.5">
                  {(['week', 'month', 'year'] as const).map((r) => (
                      <button
                          key={r}
                          onClick={() => setTimeRange(r)}
                          className={`px-2.5 py-0.5 text-[9px] font-black uppercase tracking-tight rounded transition-all ${timeRange === r ? 'bg-primary text-primary-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground hover:bg-white/5'}`}
                      >
                          {r === 'week' ? '周' : r === 'month' ? '月' : '年'}
                      </button>
                  ))}
              </div>
          </div>
        </div>

        {/* 4. Metrics Grid (Cards) */}
        <div className="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-4">
          <StatCard 
              title="通话数量" 
              value={stats.totalCalls.toString()} 
              icon={<Phone className="h-3.5 w-3.5 text-primary" />}
              trend="+12.5% UP"
          />
          <StatCard 
              title="接通率" 
              value={`${stats.answerRate}%`} 
              icon={<CheckCircle className="h-3.5 w-3.5 text-green-400" />}
              trend="+2.1% UP"
          />
          <StatCard 
              title="平均时长" 
              value={stats.avgDuration} 
              icon={<Clock className="h-3.5 w-3.5 text-blue-400" />}
              trend="-0.5% LOW"
          />
          <StatCard 
              title="转人工数" 
              value={stats.humanTransferCount.toString()} 
              icon={<UserCheck className="h-3.5 w-3.5 text-purple-400" />}
              trend="+5% STABLE"
          />
        </div>

        {/* 5. Charts Section */}
        <div className="pt-1">
          <Card className="p-5 border-white/5 bg-card/20 backdrop-blur-sm overflow-hidden shadow-xl">
              <div className="flex flex-col md:flex-row items-center justify-between mb-6 gap-3">
                  <div className="space-y-0.5 text-center md:text-left">
                      <h3 className="text-base font-bold leading-none flex items-center justify-center md:justify-start text-white">
                          <Activity className="h-4 w-4 text-primary mr-2" />
                          通话趋势 (Performance Insight)
                      </h3>
                      <p className="text-[10px] text-muted-foreground font-mono opacity-40">REAL-TIME DATA PROCESSING PIPELINE ENABLED</p>
                  </div>
                  <div className="flex items-center space-x-2">
                    <div className="h-6 w-6 rounded-full border border-primary/20 flex items-center justify-center animate-spin-slow">
                       <div className="h-1 w-1 rounded-full bg-primary shadow-[0_0_8px_rgba(6,182,212,0.8)]"></div>
                    </div>
                    <span className="text-[9px] font-mono text-primary animate-pulse tracking-widest uppercase">Streaming</span>
                  </div>
              </div>
              <div className="h-[300px] w-full">
                  <SimpleAreaChart data={stats.trend} />
              </div>
          </Card>
        </div>

        {/* 6. Platform Feature Intro - Updated Background */}
        <div className="w-full bg-card/30 backdrop-blur-sm border border-white/5 rounded-2xl p-6 animate-in slide-in-from-bottom-4 duration-700 shadow-2xl relative overflow-hidden group pb-10 mb-10">
          <div className="absolute top-0 right-0 w-64 h-64 bg-primary/5 blur-[100px] -mr-32 -mt-32 rounded-full pointer-events-none group-hover:bg-primary/10 transition-colors"></div>
          
          <div className="relative z-10">
            <div className="flex items-center gap-2 mb-4">
              <div className="p-1.5 bg-primary/20 rounded-lg">
                  <Sparkles className="w-4 h-4 text-primary" />
              </div>
              <h3 className="text-sm font-bold text-white tracking-wide">关于平台</h3>
            </div>

            <div className="mb-6">
              <p className="text-sm text-white/80 leading-relaxed font-medium">
                AI视频助手是一个领先的多模态智能体管理平台，致力于通过先进的 AI 技术为企业和个人提供高效、低延迟、拟人化的音视频通话解决方案。🚀
              </p>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
              <div className="space-y-2 group/item">
                <div className="flex items-center gap-2">
                  <span className="text-lg">🤖</span>
                  <h4 className="text-xs font-bold text-primary uppercase tracking-wider">多模态智能体</h4>
                </div>
                <p className="text-[11px] text-muted-foreground leading-relaxed group-hover:text-white/70 transition-colors">
                  支持构建具备文本对话、高保真语音输出以及双向实时视频通话能力的智能助手，覆盖 7x24h 智能客服场景。
                </p>
              </div>

              <div className="space-y-2 group/item">
                <div className="flex items-center gap-2">
                  <span className="text-lg">📚</span>
                  <h4 className="text-xs font-bold text-primary uppercase tracking-wider">动态知识检索</h4>
                </div>
                <p className="text-[11px] text-muted-foreground leading-relaxed group-hover:text-white/70 transition-colors">
                  深度集成 RAG 技术，允许上传私有 PDF/DOCX 文档，让智能体在通话中基于企业私域知识库提供精准、权威的回复。
                </p>
              </div>

              <div className="space-y-2 group/item">
                <div className="flex items-center gap-2">
                  <span className="text-lg">🎙️</span>
                  <h4 className="text-xs font-bold text-primary uppercase tracking-wider">音色库与克隆</h4>
                </div>
                <p className="text-[11px] text-muted-foreground leading-relaxed group-hover:text-white/70 transition-colors">
                  集成多家主流 TTS 引擎，支持极致的声音克隆与微调，为您的品牌定制专属的、富有情感表现力的真人音色。
                </p>
              </div>

              <div className="space-y-2 group/item">
                <div className="flex items-center gap-2">
                  <span className="text-lg">🛡️</span>
                  <h4 className="text-xs font-bold text-primary uppercase tracking-wider">端到端测试</h4>
                </div>
                <p className="text-[11px] text-muted-foreground leading-relaxed group-hover:text-white/70 transition-colors">
                  内置自动化测试助手，可通过固定流程或 AI 智能模拟用户进行压力测试与逻辑验证，确保发布前的服务稳定性。
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

// --- Sub Components ---

const StatCard: React.FC<{ title: string; value: string; icon: React.ReactNode; trend?: string }> = ({ title, value, icon, trend }) => (
  <Card className="p-4 border-white/5 bg-card/30 hover:border-primary/40 hover:bg-card/50 transition-all duration-300 group flex flex-col justify-between min-h-[110px] shadow-lg">
    <div className="flex flex-row items-center justify-between space-y-0">
      <h3 className="text-[9px] font-mono font-bold text-muted-foreground uppercase tracking-[0.15em]">{title}</h3>
      <div className="p-1.5 bg-white/5 rounded-lg group-hover:bg-primary/20 transition-all group-hover:scale-110">
        {icon}
      </div>
    </div>
    <div className="mt-2">
      <div className="text-2xl font-black tracking-tight text-white group-hover:text-primary transition-colors">{value}</div>
      {trend && (
        <p className={`text-[8px] font-bold font-mono mt-1 flex items-center ${trend.includes('+') ? 'text-green-400' : 'text-red-400'}`}>
          <span className="bg-white/5 px-1 rounded-sm mr-1 opacity-70">{trend}</span>
        </p>
      )}
    </div>
  </Card>
);

const SimpleAreaChart: React.FC<{ data: { label: string, value: number }[] }> = ({ data }) => {
    if (!data || data.length === 0) return null;

    const height = 300;
    const width = 1400;
    const padding = 30;
    
    const maxValue = Math.max(...data.map(d => d.value)) * 1.2;
    const points = data.map((d, i) => {
        const x = (i / (data.length - 1)) * (width - padding * 2) + padding;
        const y = height - (d.value / maxValue) * (height - padding * 2) - padding;
        return `${x},${y}`;
    }).join(' ');

    const firstPoint = points.split(' ')[0];
    const lastPoint = points.split(' ')[points.split(' ').length - 1];
    const fillPath = `${points} ${lastPoint.split(',')[0]},${height} ${firstPoint.split(',')[0]},${height}`;

    return (
        <div className="w-full h-full relative">
            <svg viewBox={`0 0 ${width} ${height}`} className="w-full h-full overflow-visible" preserveAspectRatio="none">
                {/* Grid Lines */}
                <line x1={padding} y1={height - padding} x2={width - padding} y2={height - padding} stroke="rgba(255,255,255,0.03)" strokeWidth="1" />
                {[0.25, 0.5, 0.75].map(v => (
                  <line 
                    key={v}
                    x1={padding} y1={height - padding - ((height - padding * 2) * v)} 
                    x2={width - padding} y2={height - padding - ((height - padding * 2) * v)} 
                    stroke="rgba(255,255,255,0.02)" strokeWidth="1" strokeDasharray="8 6" 
                  />
                ))}
                
                {/* Area Fill Gradient */}
                <defs>
                    <linearGradient id="chartGradient" x1="0" y1="0" x2="0" y2="1">
                        <stop offset="0%" stopColor="hsl(var(--primary))" stopOpacity="0.3" />
                        <stop offset="100%" stopColor="hsl(var(--primary))" stopOpacity="0" />
                    </linearGradient>
                    <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
                        <feGaussianBlur stdDeviation="5" result="coloredBlur" />
                        <feMerge>
                            <feMergeNode in="coloredBlur" />
                            <feMergeNode in="SourceGraphic" />
                        </feMerge>
                    </filter>
                </defs>
                
                <polygon points={fillPath} fill="url(#chartGradient)" />

                <polyline 
                    points={points} 
                    fill="none" 
                    stroke="hsl(var(--primary))" 
                    strokeWidth="3" 
                    strokeLinecap="round" 
                    strokeLinejoin="round" 
                    filter="url(#glow)"
                />

                {data.length < 32 && data.map((d, i) => {
                     const x = (i / (data.length - 1)) * (width - padding * 2) + padding;
                     const y = height - (d.value / maxValue) * (height - padding * 2) - padding;
                     return (
                         <g key={i} className="group/dot">
                            <circle cx={x} cy={y} r="3.5" fill="hsl(var(--background))" stroke="hsl(var(--primary))" strokeWidth="2" className="transition-all duration-300 group-hover/dot:r-5 group-hover/dot:stroke-white" />
                            <circle cx={x} cy={y} r="10" fill="hsl(var(--primary))" fillOpacity="0" className="cursor-pointer" />
                         </g>
                     );
                })}
            </svg>
            
            {/* X-Axis Labels */}
            <div className="absolute bottom-0 left-0 right-0 flex justify-between px-[3%] text-[8px] text-muted-foreground pointer-events-none font-mono opacity-30 mt-2">
                 {data.filter((_, i) => i % Math.ceil(data.length / 7) === 0).map((d, i) => (
                     <span key={i}>{d.label}</span>
                 ))}
            </div>
        </div>
    );
};