import React, { useState, useEffect } from 'react';
import { Users, FileText, Award, TrendingUp, Calendar, Filter, Download, ChevronDown } from 'lucide-react';
import { useLanguage } from '../../contexts/LanguageContext';
import { useAuth } from '../../src/contexts/AuthContext';
import { assessmentStatsService, AssessmentStats, StatsQueryParams } from '../../src/services/assessmentStatsService';
import { templateService } from '../../services/templateService';
import { knowledgeGroupService } from '../../services/knowledgeGroupService';
import { AssessmentTemplate } from '../../types';
import { KnowledgeGroup } from '../../types';
import { cn } from '../../src/utils/cn';

interface StatCardProps {
  title: string;
  value: string | number;
  subtitle?: string;
  icon: React.ElementType;
  color: string;
}

const StatCard: React.FC<StatCardProps> = ({ title, value, subtitle, icon: Icon, color }) => (
  <div className="bg-white rounded-2xl p-6 border border-slate-100 shadow-sm">
    <div className="flex items-center justify-between">
      <div>
        <p className="text-sm font-medium text-slate-500">{title}</p>
        <p className="text-3xl font-bold mt-1" style={{ color }}>{value}</p>
        {subtitle && <p className="text-xs text-slate-400 mt-1">{subtitle}</p>}
      </div>
      <div className={cn("w-12 h-12 rounded-xl flex items-center justify-center", `bg-${color}/10`)}>
        <Icon className={cn("w-6 h-6", `text-${color}`)} style={{ color }} />
      </div>
    </div>
  </div>
);

export const AssessmentStatsView: React.FC = () => {
  const { language, t } = useLanguage();
  const { user } = useAuth();
  const [stats, setStats] = useState<AssessmentStats | null>(null);
  const [loading, setLoading] = useState(true);
  const [filters, setFilters] = useState<StatsQueryParams>({});
  const [templates, setTemplates] = useState<AssessmentTemplate[]>([]);
  const [groups, setGroups] = useState<KnowledgeGroup[]>([]);
  const [showFilters, setShowFilters] = useState(false);

  const isAdmin = user?.role === 'SUPER_ADMIN';

  useEffect(() => {
    const fetchData = async () => {
      try {
        const [templatesData, groupsData] = await Promise.all([
          templateService.getAll(),
          knowledgeGroupService.getGroups(),
        ]);
        setTemplates(templatesData);
        setGroups(groupsData);
      } catch (err) {
        console.error('Failed to fetch options:', err);
      }
    };
    fetchData();
  }, []);

  useEffect(() => {
    const fetchStats = async () => {
      setLoading(true);
      try {
        const data = await assessmentStatsService.getStats(filters);
        setStats(data);
      } catch (err) {
        console.error('Failed to fetch stats:', err);
      } finally {
        setLoading(false);
      }
    };
    fetchStats();
  }, [filters]);

  const handleFilterChange = (key: keyof StatsQueryParams, value: string) => {
    setFilters(prev => ({ ...prev, [key]: value || undefined }));
  };

  const handleExport = () => {
    if (!stats?.recentRecords) return;
    const csv = [
      ['ID', 'Knowledge Base/Group', 'Template', 'Score', 'Status', 'Created At'].join(','),
      ...stats.recentRecords.map(r => [
        r.id,
        r.knowledgeBase,
        r.template,
        r.score ?? '',
        r.status,
        r.createdAt,
      ].join(',')),
    ].join('\n');

    const blob = new Blob([csv], { type: 'text/csv' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `assessment-stats-${new Date().toISOString().split('T')[0]}.csv`;
    a.click();
    URL.revokeObjectURL(url);
  };

  const formatDate = (dateStr: string) => {
    const date = new Date(dateStr);
    return date.toLocaleDateString(language === 'zh' ? 'zh-CN' : language === 'ja' ? 'ja-JP' : 'en-US', {
      year: 'numeric',
      month: 'short',
      day: 'numeric',
      hour: '2-digit',
      minute: '2-digit',
    });
  };

  const isZh = language === 'zh';

  if (!isAdmin) {
    return (
      <div className="flex items-center justify-center h-full">
        <div className="text-center p-8">
          <p className="text-slate-500">{isZh ? '仅管理员可查看统计' : 'Statistics only available for admins'}</p>
        </div>
      </div>
    );
  }

  return (
    <div className="flex flex-col h-full p-6 space-y-6 overflow-hidden">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-slate-900">
            {isZh ? '评估统计' : 'Assessment Statistics'}
          </h1>
          <p className="text-sm text-slate-500 mt-1">
            {isZh ? '查看所有用户评估数据' : 'View assessment data for all users'}
          </p>
        </div>
        <div className="flex items-center gap-2">
          <button
            onClick={() => setShowFilters(!showFilters)}
            className={cn(
              "flex items-center gap-2 px-4 py-2 rounded-xl border transition-colors",
              showFilters ? "bg-blue-50 border-blue-200 text-blue-700" : "bg-white border-slate-200 text-slate-600 hover:bg-slate-50"
            )}
          >
            <Filter size={16} />
            {isZh ? '筛选' : 'Filters'}
          </button>
          {stats && (
            <button
              onClick={handleExport}
              className="flex items-center gap-2 px-4 py-2 rounded-xl bg-blue-600 text-white hover:bg-blue-700 transition-colors"
            >
              <Download size={16} />
              {isZh ? '导出' : 'Export'}
            </button>
          )}
        </div>
      </div>

      {showFilters && (
        <div className="bg-white rounded-2xl p-4 border border-slate-100 shadow-sm">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            <div>
              <label className="block text-xs font-medium text-slate-500 mb-1">
                {isZh ? '开始日期' : 'Start Date'}
              </label>
              <input
                type="date"
                value={filters.startDate || ''}
                onChange={(e) => handleFilterChange('startDate', e.target.value)}
                className="w-full px-3 py-2 rounded-xl border border-slate-200 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
              />
            </div>
            <div>
              <label className="block text-xs font-medium text-slate-500 mb-1">
                {isZh ? '结束日期' : 'End Date'}
              </label>
              <input
                type="date"
                value={filters.endDate || ''}
                onChange={(e) => handleFilterChange('endDate', e.target.value)}
                className="w-full px-3 py-2 rounded-xl border border-slate-200 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
              />
            </div>
            <div>
              <label className="block text-xs font-medium text-slate-500 mb-1">
                {isZh ? '模板' : 'Template'}
              </label>
              <select
                value={filters.templateId || ''}
                onChange={(e) => handleFilterChange('templateId', e.target.value)}
                className="w-full px-3 py-2 rounded-xl border border-slate-200 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
              >
                <option value="">{isZh ? '全部' : 'All'}</option>
                {templates.map(t => (
                  <option key={t.id} value={t.id}>{t.name}</option>
                ))}
              </select>
            </div>
            <div>
              <label className="block text-xs font-medium text-slate-500 mb-1">
                {isZh ? '知识库' : 'Knowledge Group'}
              </label>
              <select
                value={filters.knowledgeGroupId || ''}
                onChange={(e) => handleFilterChange('knowledgeGroupId', e.target.value)}
                className="w-full px-3 py-2 rounded-xl border border-slate-200 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
              >
                <option value="">{isZh ? '全部' : 'All'}</option>
                {groups.map(g => (
                  <option key={g.id} value={g.id}>{g.name}</option>
                ))}
              </select>
            </div>
          </div>
        </div>
      )}

      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
        <StatCard
          title={isZh ? '总评估次数' : 'Total Attempts'}
          value={stats?.totalAttempts ?? 0}
          icon={FileText}
          color="#6366f1"
        />
        <StatCard
          title={isZh ? '最高分' : 'Highest Score'}
          value={stats?.highestScore ?? 0}
          subtitle={isZh ? '分' : 'points'}
          icon={Award}
          color="#f59e0b"
        />
        <StatCard
          title={isZh ? '平均分' : 'Average Score'}
          value={stats?.averageScore ?? 0}
          subtitle={isZh ? '分' : 'points'}
          icon={TrendingUp}
          color="#10b981"
        />
        <StatCard
          title={isZh ? '完成率' : 'Completion Rate'}
          value={`${stats?.completionRate ?? 0}%`}
          icon={Users}
          color="#8b5cf6"
        />
      </div>

      <div className="flex-1 bg-white rounded-2xl border border-slate-100 shadow-sm overflow-hidden flex flex-col">
        <div className="p-4 border-b border-slate-100">
          <h2 className="font-semibold text-slate-900">
            {isZh ? '历史记录' : 'Recent Records'}
          </h2>
        </div>
        <div className="flex-1 overflow-auto">
          {loading ? (
            <div className="flex items-center justify-center h-full">
              <div className="w-6 h-6 border-2 border-blue-600 border-t-transparent rounded-full animate-spin" />
            </div>
          ) : stats?.recentRecords?.length === 0 ? (
            <div className="flex items-center justify-center h-full text-slate-400">
              {isZh ? '暂无记录' : 'No records found'}
            </div>
          ) : (
            <table className="w-full">
              <thead className="bg-slate-50 sticky top-0">
                <tr>
                  <th className="text-left text-xs font-medium text-slate-500 px-4 py-3">
                    {isZh ? '知识库' : 'Knowledge Base'}
                  </th>
                  <th className="text-left text-xs font-medium text-slate-500 px-4 py-3">
                    {isZh ? '模板' : 'Template'}
                  </th>
                  <th className="text-left text-xs font-medium text-slate-500 px-4 py-3">
                    {isZh ? '分数' : 'Score'}
                  </th>
                  <th className="text-left text-xs font-medium text-slate-500 px-4 py-3">
                    {isZh ? '状态' : 'Status'}
                  </th>
                  <th className="text-left text-xs font-medium text-slate-500 px-4 py-3">
                    {isZh ? '时间' : 'Created At'}
                  </th>
                </tr>
              </thead>
              <tbody className="divide-y divide-slate-100">
                {stats?.recentRecords?.map((record) => (
                  <tr key={record.id} className="hover:bg-slate-50">
                    <td className="px-4 py-3 text-sm text-slate-900">
                      {record.knowledgeBase}
                    </td>
                    <td className="px-4 py-3 text-sm text-slate-600">
                      {record.template}
                    </td>
                    <td className="px-4 py-3 text-sm font-medium">
                      {record.score !== null ? (
                        <span className={record.score >= 90 ? 'text-green-600' : record.score >= 60 ? 'text-yellow-600' : 'text-red-600'}>
                          {record.score}
                        </span>
                      ) : (
                        <span className="text-slate-400">-</span>
                      )}
                    </td>
                    <td className="px-4 py-3">
                      <span className={cn(
                        "inline-flex px-2 py-0.5 text-xs font-medium rounded-full",
                        record.status === 'COMPLETED'
                          ? "bg-green-50 text-green-700"
                          : "bg-yellow-50 text-yellow-700"
                      )}>
                        {record.status === 'COMPLETED' ? (isZh ? '已完成' : 'Completed') : (isZh ? '进行中' : 'In Progress')}
                      </span>
                    </td>
                    <td className="px-4 py-3 text-sm text-slate-500">
                      {formatDate(record.createdAt)}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          )}
        </div>
      </div>
    </div>
  );
};

export default AssessmentStatsView;