import React, { useState } from 'react';
import { StudentRequest } from '../types';

interface FacultyRequestsViewProps {
  onShowToast: (msg: string) => void;
}

const FacultyRequestsView: React.FC<FacultyRequestsViewProps> = ({ onShowToast }) => {
  const [requests, setRequests] = useState<StudentRequest[]>([
    { id: 'R1', studentName: 'Aditya Varma', rollNo: '21IT001', branch: 'Information Technology', eventName: 'Next-Gen AI Forum', eventId: '1', timestamp: '2h ago', status: 'PENDING' },
    { id: 'R2', studentName: 'Priya Dharshini', rollNo: '21CS042', branch: 'Computer Science', eventName: 'Robo-Wars 2025', eventId: '6', timestamp: '4h ago', status: 'PENDING' },
    { id: 'R3', studentName: 'Manoj Kumar', rollNo: '22ME015', branch: 'Mechanical Engineering', eventName: 'Robo-Wars 2025', eventId: '6', timestamp: '5h ago', status: 'PENDING' },
    { id: 'R4', studentName: 'Sneha Reddy', rollNo: '21IT112', branch: 'Information Technology', eventName: 'Web Architecture 2025', eventId: '2', timestamp: '1d ago', status: 'PENDING' },
  ]);

  const handleAction = (id: string, action: 'APPROVED' | 'REJECTED') => {
    const req = requests.find(r => r.id === id);
    if (!req) return;

    setRequests(prev => prev.filter(r => r.id !== id));
    onShowToast(`Request from ${req.studentName} has been ${action.toLowerCase()}.`);
  };

  return (
    <div className="animate-in slide-in-from-bottom-10 duration-700">
      <div className="flex items-end justify-between mb-12">
        <div>
          <h3 className="text-4xl font-black tracking-tight uppercase mb-2">Registration <span className="text-blue-500">Requests</span></h3>
          <p className="text-[10px] font-black text-gray-500 uppercase tracking-[0.4em]">Review & Approve Student Access</p>
        </div>
        <div className="bg-white/5 px-6 py-3 rounded-2xl border border-white/10 flex items-center gap-4">
           <span className="text-[10px] font-black uppercase tracking-widest text-gray-400">Total Pending:</span>
           <span className="text-xl font-black text-blue-500 tabular-nums">{requests.length}</span>
        </div>
      </div>

      {requests.length > 0 ? (
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
          {requests.map((req) => (
            <div key={req.id} className="bg-white/5 border border-white/10 rounded-[2.5rem] p-8 transition-all hover:bg-white/[0.08] group relative overflow-hidden">
              <div className="absolute top-0 right-0 p-8 opacity-5 group-hover:opacity-10 transition-opacity">
                 <i className="fas fa-user-graduate text-8xl"></i>
              </div>

              <div className="flex items-start justify-between mb-8 relative z-10">
                <div className="flex items-center gap-4">
                  <div className="w-14 h-14 rounded-2xl bg-blue-500/10 flex items-center justify-center text-blue-500">
                    <i className="fas fa-user-edit"></i>
                  </div>
                  <div>
                    <h4 className="text-xl font-black uppercase tracking-tight">{req.studentName}</h4>
                    <span className="text-[10px] font-bold text-gray-500 uppercase tracking-widest">{req.rollNo} • {req.branch}</span>
                  </div>
                </div>
                <span className="text-[9px] font-black text-gray-600 uppercase tracking-widest">{req.timestamp}</span>
              </div>

              <div className="bg-black/40 rounded-2xl p-6 mb-8 border border-white/5 relative z-10">
                 <span className="block text-[9px] font-black text-blue-500 uppercase tracking-widest mb-2">Requested Event</span>
                 <p className="text-lg font-black uppercase tracking-tight">{req.eventName}</p>
              </div>

              <div className="flex gap-4 relative z-10">
                <button 
                  onClick={() => handleAction(req.id, 'APPROVED')}
                  className="flex-1 py-4 bg-emerald-600 text-white rounded-2xl font-black uppercase text-[10px] tracking-widest hover:bg-emerald-700 transition-all flex items-center justify-center gap-2"
                >
                  <i className="fas fa-check-circle"></i> Approve
                </button>
                <button 
                  onClick={() => handleAction(req.id, 'REJECTED')}
                  className="flex-1 py-4 bg-rose-600/10 border border-rose-600/20 text-rose-500 rounded-2xl font-black uppercase text-[10px] tracking-widest hover:bg-rose-600 hover:text-white transition-all flex items-center justify-center gap-2"
                >
                  <i className="fas fa-times-circle"></i> Reject
                </button>
              </div>
            </div>
          ))}
        </div>
      ) : (
        <div className="py-32 flex flex-col items-center justify-center bg-white/5 border-2 border-dashed border-white/10 rounded-[3rem]">
           <i className="fas fa-inbox text-6xl text-white/10 mb-6"></i>
           <p className="text-white/40 font-black uppercase tracking-widest">No pending requests found</p>
        </div>
      )}
    </div>
  );
};

export default FacultyRequestsView;