import React, { useState, useMemo } from 'react';
import { Phone, CheckCircle, Clock, UserCheck, Activity, Filter } 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="space-y-6 animate-in fade-in">
      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
        <h1 className="text-2xl font-bold tracking-tight text-foreground">首页概览</h1>
        
        {/* Filters */}
        <div className="flex flex-col sm:flex-row items-center gap-3 bg-card/40 backdrop-blur-md p-2 rounded-lg border border-border/50">
          <div className="flex items-center px-2">
             <Filter className="h-4 w-4 text-primary mr-2" />
             <select 
                className="bg-transparent text-sm font-medium focus:outline-none text-foreground [&>option]:bg-background"
                value={selectedAssistantId}
                onChange={(e) => setSelectedAssistantId(e.target.value)}
             >
                <option value="all">所有小助手</option>
                {mockAssistants.map(a => (
                    <option key={a.id} value={a.id}>{a.name}</option>
                ))}
             </select>
          </div>
          <div className="h-4 w-px bg-border/50 hidden sm:block"></div>
          <div className="flex bg-muted/50 rounded-md p-1">
             {(['week', 'month', 'year'] as const).map((r) => (
                 <button
                    key={r}
                    onClick={() => setTimeRange(r)}
                    className={`px-3 py-1 text-xs font-medium rounded-sm transition-all ${timeRange === r ? 'bg-primary text-primary-foreground shadow-[0_0_10px_rgba(6,182,212,0.3)]' : 'text-muted-foreground hover:text-foreground hover:bg-white/5'}`}
                 >
                    {r === 'week' ? '近一周' : r === 'month' ? '近一个月' : '近一年'}
                 </button>
             ))}
          </div>
        </div>
      </div>

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

      {/* Charts Section */}
      <div className="grid gap-4 md:grid-cols-1">
        <Card className="p-6 border-primary/20 bg-card/30">
            <div className="flex items-center justify-between mb-6">
                <div className="space-y-1">
                    <h3 className="text-lg font-medium leading-none flex items-center">
                        <Activity className="h-5 w-5 text-primary mr-2" />
                        通话趋势图
                    </h3>
                    <p className="text-sm text-muted-foreground">展示选定时间范围内的通话量变化</p>
                </div>
            </div>
            <div className="h-[300px] w-full">
                <SimpleAreaChart data={stats.trend} />
            </div>
        </Card>
      </div>
    </div>
  );
};

// --- Sub Components ---

const StatCard: React.FC<{ title: string; value: string; icon: React.ReactNode; trend?: string }> = ({ title, value, icon, trend }) => (
  <Card className="p-6 border-border/40 hover:border-primary/50 transition-colors">
    <div className="flex flex-row items-center justify-between space-y-0 pb-2">
      <h3 className="text-sm font-medium text-muted-foreground">{title}</h3>
      {icon}
    </div>
    <div className="content-end">
      <div className="text-2xl font-bold tracking-tight text-foreground">{value}</div>
      {trend && <p className="text-xs text-muted-foreground mt-1">{trend}</p>}
    </div>
  </Card>
);

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

    const height = 250;
    const width = 1000;
    const padding = 20;
    
    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">
                {/* Tech Grid Lines */}
                <line x1={padding} y1={height - padding} x2={width - padding} y2={height - padding} stroke="hsl(var(--border))" strokeWidth="1" />
                <line x1={padding} y1={padding} x2={width - padding} y2={padding} stroke="hsl(var(--border))" strokeWidth="1" strokeDasharray="4 4" opacity="0.3" />
                
                {/* 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>
                    {/* Glow Filter */}
                    <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
                        <feGaussianBlur stdDeviation="3" result="coloredBlur" />
                        <feMerge>
                            <feMergeNode in="coloredBlur" />
                            <feMergeNode in="SourceGraphic" />
                        </feMerge>
                    </filter>
                </defs>
                
                {/* Fill Area */}
                <polygon points={fillPath} fill="url(#chartGradient)" />

                {/* Main Line with Glow */}
                <polyline 
                    points={points} 
                    fill="none" 
                    stroke="hsl(var(--primary))" 
                    strokeWidth="3" 
                    strokeLinecap="round" 
                    strokeLinejoin="round" 
                    filter="url(#glow)"
                    className="drop-shadow-sm"
                />

                {/* Data Points */}
                {data.length < 20 && 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 (
                         <circle key={i} cx={x} cy={y} r="4" fill="hsl(var(--background))" stroke="hsl(var(--primary))" strokeWidth="2" />
                     );
                })}
            </svg>
            
            {/* X-Axis Labels */}
            <div className="absolute bottom-0 left-0 right-0 flex justify-between px-[2%] text-xs text-muted-foreground pointer-events-none font-mono">
                 {data.filter((_, i) => i % Math.ceil(data.length / 6) === 0).map((d, i) => (
                     <span key={i}>{d.label}</span>
                 ))}
            </div>
        </div>
    );
};