import { useDocuments } from '@/hooks/useDocuments';
import { useTodos } from '@/hooks/useTodos';
import { Card } from '@/components/Card';
import { FileText, CheckSquare, Clock, TrendingUp } from 'lucide-react';

export default function DashboardPage() {
  const { data: documents } = useDocuments();
  const { data: pendingTodos } = useTodos({ status: 'pending' });
  const { data: completedTodos } = useTodos({ status: 'completed' });

  const stats = [
    {
      name: '文档总数',
      value: documents?.length || 0,
      icon: FileText,
      color: 'text-blue-600',
      bgColor: 'bg-blue-50',
    },
    {
      name: '待办任务',
      value: pendingTodos?.length || 0,
      icon: Clock,
      color: 'text-yellow-600',
      bgColor: 'bg-yellow-50',
    },
    {
      name: '已完成',
      value: completedTodos?.length || 0,
      icon: CheckSquare,
      color: 'text-green-600',
      bgColor: 'bg-green-50',
    },
    {
      name: '完成率',
      value: completedTodos && pendingTodos
        ? `${Math.round((completedTodos.length / (completedTodos.length + pendingTodos.length)) * 100)}%`
        : '0%',
      icon: TrendingUp,
      color: 'text-purple-600',
      bgColor: 'bg-purple-50',
    },
  ];

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-bold text-gray-900">仪表盘</h1>
        <p className="mt-1 text-sm text-gray-600">欢迎使用图片分析系统</p>
      </div>

      {/* Stats */}
      <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
        {stats.map((stat) => {
          const Icon = stat.icon;
          return (
            <Card key={stat.name}>
              <div className="flex items-center">
                <div className={`${stat.bgColor} rounded-lg p-3`}>
                  <Icon className={`h-6 w-6 ${stat.color}`} />
                </div>
                <div className="ml-4">
                  <p className="text-sm font-medium text-gray-600">{stat.name}</p>
                  <p className="text-2xl font-bold text-gray-900">{stat.value}</p>
                </div>
              </div>
            </Card>
          );
        })}
      </div>

      {/* Recent Activity */}
      <div className="grid gap-6 lg:grid-cols-2">
        <Card title="最近文档">
          <div className="space-y-3">
            {documents && documents.length > 0 ? (
              documents.slice(0, 5).map((doc) => (
                <div
                  key={doc.id}
                  className="flex items-center justify-between rounded-lg border border-gray-200 p-3 hover:bg-gray-50"
                >
                  <div>
                    <p className="font-medium text-gray-900">{doc.title || '无标题'}</p>
                    <p className="text-sm text-gray-600">
                      {new Date(doc.created_at).toLocaleDateString()}
                    </p>
                  </div>
                </div>
              ))
            ) : (
              <p className="text-sm text-gray-500">暂无文档</p>
            )}
          </div>
        </Card>

        <Card title="待办任务">
          <div className="space-y-3">
            {pendingTodos && pendingTodos.length > 0 ? (
              pendingTodos.slice(0, 5).map((todo) => (
                <div
                  key={todo.id}
                  className="flex items-center justify-between rounded-lg border border-gray-200 p-3 hover:bg-gray-50"
                >
                  <div>
                    <p className="font-medium text-gray-900">{todo.title}</p>
                    <p className="text-sm text-gray-600">
                      优先级: {todo.priority}
                    </p>
                  </div>
                </div>
              ))
            ) : (
              <p className="text-sm text-gray-500">暂无待办任务</p>
            )}
          </div>
        </Card>
      </div>
    </div>
  );
}
