import React from 'react';
import { useMockStore } from '../data/mockStore';
import { useAuth } from '../context/AuthContext';
import { Calendar, User, Clock, MapPin, MoreHorizontal } from 'lucide-react';

const AdminSchedule = () => {
    const { meetings } = useMockStore();
    // In a real app we would have a function to update meetings here

    // Group meetings by agent for display
    const meetingsByAgent = meetings.reduce((acc, meeting) => {
        const agentId = meeting.agentId;
        if (!acc[agentId]) acc[agentId] = [];
        acc[agentId].push(meeting);
        return acc;
    }, {});

    return (
        <div className="p-8 max-w-7xl mx-auto">
            <header className="mb-8">
                <h1 className="text-3xl font-bold text-white mb-2">Team Schedule</h1>
                <p className="text-slate-400">Manage field agent appointments</p>
            </header>

            <div className="bg-slate-900 border border-slate-800 rounded-3xl shadow-xl overflow-hidden">
                <div className="p-6 border-b border-slate-800">
                    <h2 className="text-xl font-bold text-white flex items-center">
                        <Calendar size={20} className="text-blue-500 mr-2" />
                        All Active Appointments
                    </h2>
                </div>

                <div className="overflow-x-auto">
                    <table className="w-full text-left text-sm text-slate-400">
                        <thead className="bg-slate-950 text-slate-200 uppercase font-bold text-xs">
                            <tr>
                                <th className="px-6 py-4">Agent</th>
                                <th className="px-6 py-4">Customer</th>
                                <th className="px-6 py-4">Property</th>
                                <th className="px-6 py-4">Date & Time</th>
                                <th className="px-6 py-4">Status</th>
                                <th className="px-6 py-4 text-right">Actions</th>
                            </tr>
                        </thead>
                        <tbody className="divide-y divide-slate-800">
                            {meetings.map((meeting) => (
                                <tr key={meeting.id} className="hover:bg-slate-800/50 transition-colors">
                                    <td className="px-6 py-4">
                                        <div className="flex items-center space-x-3">
                                            <div className="w-8 h-8 rounded-full bg-slate-700 flex items-center justify-center text-slate-300 font-bold text-xs">
                                                {meeting.agentId}
                                            </div>
                                            <span className="font-medium text-slate-200">Agent {meeting.agentId}</span>
                                        </div>
                                    </td>
                                    <td className="px-6 py-4 text-slate-300">{meeting.customerName}</td>
                                    <td className="px-6 py-4">{meeting.propertyId}</td>
                                    <td className="px-6 py-4">
                                        <div className="flex flex-col">
                                            <span className="text-slate-200">{meeting.date}</span>
                                            <span className="text-xs">{meeting.time}</span>
                                        </div>
                                    </td>
                                    <td className="px-6 py-4">
                                        <span className={`px-2 py-1 text-xs font-semibold rounded ${meeting.status === 'Completed' ? 'bg-green-500/20 text-green-400' :
                                                meeting.status === 'Scheduled' ? 'bg-blue-500/20 text-blue-400' :
                                                    'bg-yellow-500/20 text-yellow-400'
                                            }`}>
                                            {meeting.status}
                                        </span>
                                    </td>
                                    <td className="px-6 py-4 text-right">
                                        <button className="text-blue-400 hover:text-blue-300 text-xs font-bold mr-3">Reschedule</button>
                                        <button className="text-slate-600 hover:text-slate-400">
                                            <MoreHorizontal size={16} />
                                        </button>
                                    </td>
                                </tr>
                            ))}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    );
};

export default AdminSchedule;
