'use client';

import { useState } from 'react';
import { useQuery } from '@tanstack/react-query';
import { 
  Calendar, 
  BookOpen, 
  Search,
  CheckCircle,
  Clock,
  AlertTriangle
} from 'lucide-react';

// Mock data - replace with actual API
async function fetchBorrowHistory() {
  return {
    success: true,
    data: [
      {
        borrowId: 1,
        book: {
          title: '深入理解计算机系统',
          authors: ['Randal E. Bryant'],
          isbn: '9787111544937'
        },
        borrowDate: '2024-12-01',
        dueDate: '2024-12-31',
        returnDate: '2024-12-28',
        renewTimes: 1,
        status: 'returned',
        fineAmount: '0'
      },
      {
        borrowId: 2,
        book: {
          title: 'Python编程实战',
          authors: ['Mark Lutz'],
          isbn: '9787111627295'
        },
        borrowDate: '2025-01-05',
        dueDate: '2025-02-04',
        returnDate: null,
        renewTimes: 1,
        status: 'borrowed',
        fineAmount: '0'
      },
      {
        borrowId: 3,
        book: {
          title: '数据结构与算法',
          authors: ['Thomas H. Cormen'],
          isbn: '9787111407010'
        },
        borrowDate: '2024-11-15',
        dueDate: '2024-12-15',
        returnDate: '2024-12-20',
        renewTimes: 0,
        status: 'returned',
        fineAmount: '5.00'
      }
    ]
  };
}

export default function StudentHistoryPage() {
  const [statusFilter, setStatusFilter] = useState('');
  const [searchTerm, setSearchTerm] = useState('');

  const { data, isLoading, error } = useQuery({
    queryKey: ['student-history', statusFilter, searchTerm],
    queryFn: fetchBorrowHistory,
  });

  const getStatusBadge = (status: string, dueDate: string, returnDate: string | null) => {
    if (status === 'returned') {
      const wasOverdue = returnDate && new Date(returnDate) > new Date(dueDate);
      return (
        <span className={`inline-flex items-center px-2 py-1 text-xs font-semibold rounded-full ${
          wasOverdue ? 'bg-yellow-100 text-yellow-800' : 'bg-green-100 text-green-800'
        }`}>
          <CheckCircle className="h-3 w-3 mr-1" />
          {wasOverdue ? '逾期归还' : '正常归还'}
        </span>
      );
    }
    
    const isOverdue = new Date(dueDate) < new Date();
    return (
      <span className={`inline-flex items-center px-2 py-1 text-xs font-semibold rounded-full ${
        isOverdue ? 'bg-red-100 text-red-800' : 'bg-blue-100 text-blue-800'
      }`}>
        {isOverdue ? <AlertTriangle className="h-3 w-3 mr-1" /> : <Clock className="h-3 w-3 mr-1" />}
        {isOverdue ? '逾期' : '借阅中'}
      </span>
    );
  };

  const filteredData = data?.data?.filter((record: any) => {
    const matchesStatus = !statusFilter || record.status === statusFilter;
    const matchesSearch = !searchTerm || 
      record.book.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
      record.book.authors.some((author: string) => 
        author.toLowerCase().includes(searchTerm.toLowerCase())
      );
    return matchesStatus && matchesSearch;
  });

  return (
    <div className="min-h-screen bg-gray-50">
      <div className="container mx-auto px-4 py-8">
        {/* Header */}
        <div className="mb-8">
          <h1 className="text-3xl font-bold text-gray-800 mb-2">借阅历史</h1>
          <p className="text-gray-600">查看您的借阅记录和归还历史</p>
        </div>

        {/* Statistics */}
        <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
          <div className="bg-white rounded-lg shadow-md p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-gray-600">总借阅次数</p>
                <p className="text-2xl font-bold text-gray-900">
                  {data?.data?.length || 0}
                </p>
              </div>
              <BookOpen className="h-8 w-8 text-blue-600" />
            </div>
          </div>

          <div className="bg-white rounded-lg shadow-md p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-gray-600">当前借阅</p>
                <p className="text-2xl font-bold text-blue-600">
                  {data?.data?.filter((r: any) => r.status === 'borrowed').length || 0}
                </p>
              </div>
              <Clock className="h-8 w-8 text-blue-600" />
            </div>
          </div>

          <div className="bg-white rounded-lg shadow-md p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-gray-600">已归还</p>
                <p className="text-2xl font-bold text-green-600">
                  {data?.data?.filter((r: any) => r.status === 'returned').length || 0}
                </p>
              </div>
              <CheckCircle className="h-8 w-8 text-green-600" />
            </div>
          </div>

          <div className="bg-white rounded-lg shadow-md p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-gray-600">逾期次数</p>
                <p className="text-2xl font-bold text-red-600">
                  {data?.data?.filter((r: any) => 
                    (r.status === 'returned' && r.returnDate && new Date(r.returnDate) > new Date(r.dueDate)) ||
                    (r.status === 'borrowed' && new Date(r.dueDate) < new Date())
                  ).length || 0}
                </p>
              </div>
              <AlertTriangle className="h-8 w-8 text-red-600" />
            </div>
          </div>
        </div>

        {/* Search and Filters */}
        <div className="bg-white rounded-lg shadow-md p-6 mb-8">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                搜索图书
              </label>
              <div className="relative">
                <Search className="absolute left-3 top-3 h-4 w-4 text-gray-400" />
                <input
                  type="text"
                  className="w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                  placeholder="输入书名或作者"
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                />
              </div>
            </div>
            
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                借阅状态
              </label>
              <select
                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                value={statusFilter}
                onChange={(e) => setStatusFilter(e.target.value)}
              >
                <option value="">全部状态</option>
                <option value="borrowed">借阅中</option>
                <option value="returned">已归还</option>
              </select>
            </div>
          </div>
        </div>

        {/* Results */}
        {isLoading ? (
          <div className="text-center py-12">
            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto"></div>
            <p className="mt-4 text-gray-600">加载中...</p>
          </div>
        ) : error ? (
          <div className="text-center py-12">
            <p className="text-red-600">加载失败，请重试</p>
          </div>
        ) : (
          <>
            {/* History List */}
            <div className="space-y-4">
              {filteredData?.map((record: any) => (
                <div key={record.borrowId} className="bg-white rounded-lg shadow-md p-6">
                  <div className="flex flex-col md:flex-row md:items-center md:justify-between">
                    <div className="flex-1">
                      <div className="flex items-start justify-between mb-2">
                        <h3 className="text-lg font-semibold text-gray-900">
                          {record.book.title}
                        </h3>
                        {getStatusBadge(record.status, record.dueDate, record.returnDate)}
                      </div>
                      
                      <p className="text-gray-600 mb-2">
                        作者: {record.book.authors.join(', ')}
                      </p>
                      
                      <p className="text-gray-500 text-sm mb-2">
                        ISBN: {record.book.isbn}
                      </p>
                      
                      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
                        <div>
                          <span className="font-medium text-gray-700">借阅日期:</span>
                          <span className="ml-2 text-gray-600">
                            {new Date(record.borrowDate).toLocaleDateString('zh-CN')}
                          </span>
                        </div>
                        
                        <div>
                          <span className="font-medium text-gray-700">应还日期:</span>
                          <span className="ml-2 text-gray-600">
                            {new Date(record.dueDate).toLocaleDateString('zh-CN')}
                          </span>
                        </div>
                        
                        {record.returnDate && (
                          <div>
                            <span className="font-medium text-gray-700">归还日期:</span>
                            <span className="ml-2 text-gray-600">
                              {new Date(record.returnDate).toLocaleDateString('zh-CN')}
                            </span>
                          </div>
                        )}
                      </div>
                      
                      <div className="flex items-center justify-between mt-4 text-sm">
                        <div>
                          <span className="font-medium text-gray-700">续借次数:</span>
                          <span className="ml-2 text-gray-600">{record.renewTimes}/2</span>
                        </div>
                        
                        {record.fineAmount && parseFloat(record.fineAmount) > 0 && (
                          <div className="text-red-600">
                            <span className="font-medium">罚款:</span>
                            <span className="ml-2">¥{parseFloat(record.fineAmount).toFixed(2)}</span>
                          </div>
                        )}
                      </div>
                    </div>
                  </div>
                </div>
              ))}
            </div>

            {/* No results */}
            {filteredData?.length === 0 && (
              <div className="text-center py-12">
                <Calendar className="h-12 w-12 text-gray-400 mx-auto mb-4" />
                <p className="text-gray-500">
                  {data?.data?.length === 0 ? '暂无借阅记录' : '没有找到符合条件的记录'}
                </p>
              </div>
            )}
          </>
        )}
      </div>
    </div>
  );
}