import React, { useState, useEffect } from 'react';
import { Calendar, Clock, Users, MessageSquare, Plus, Edit, Check, X, Bell, User, Settings, LogOut, BarChart3, TrendingUp, Download, RefreshCw, Smartphone, Wifi, WifiOff } from 'lucide-react';

const SchedulingApp = () => {
  const [currentUser, setCurrentUser] = useState({ id: 1, name: 'Sarah Manager', role: 'manager' });
  const [activeTab, setActiveTab] = useState('schedule');
  const [isOnline, setIsOnline] = useState(true);
  
  // PWA State
  const [deferredPrompt, setDeferredPrompt] = useState(null);
  const [showInstallPrompt, setShowInstallPrompt] = useState(false);

  // PWA Install Handler
  useEffect(() => {
    const handleBeforeInstallPrompt = (e) => {
      e.preventDefault();
      setDeferredPrompt(e);
      setShowInstallPrompt(true);
    };

    const handleOnline = () => setIsOnline(true);
    const handleOffline = () => setIsOnline(false);

    window.addEventListener('beforeinstallprompt', handleBeforeInstallPrompt);
    window.addEventListener('online', handleOnline);
    window.addEventListener('offline', handleOffline);

    return () => {
      window.removeEventListener('beforeinstallprompt', handleBeforeInstallPrompt);
      window.removeEventListener('online', handleOnline);
      window.removeEventListener('offline', handleOffline);
    };
  }, []);

  const handleInstallApp = async () => {
    if (deferredPrompt) {
      deferredPrompt.prompt();
      const { outcome } = await deferredPrompt.userChoice;
      if (outcome === 'accepted') {
        setShowInstallPrompt(false);
      }
      setDeferredPrompt(null);
    }
  };
  
  // Sample data
  const [employees] = useState([
    { id: 1, name: 'Sarah Manager', role: 'manager', email: 'sarah@company.com' },
    { id: 2, name: 'John Smith', role: 'employee', email: 'john@company.com' },
    { id: 3, name: 'Emma Davis', role: 'employee', email: 'emma@company.com' },
    { id: 4, name: 'Mike Johnson', role: 'employee', email: 'mike@company.com' },
    { id: 5, name: 'Lisa Chen', role: 'employee', email: 'lisa@company.com' }
  ]);

  const [schedule, setSchedule] = useState([
    { id: 1, employeeId: 2, date: '2025-08-13', startTime: '09:00', endTime: '17:00', position: 'Sales Floor' },
    { id: 2, employeeId: 3, date: '2025-08-13', startTime: '13:00', endTime: '21:00', position: 'Customer Service' },
    { id: 3, employeeId: 4, date: '2025-08-14', startTime: '08:00', endTime: '16:00', position: 'Stock Room' },
    { id: 4, employeeId: 5, date: '2025-08-14', startTime: '12:00', endTime: '20:00', position: 'Sales Floor' }
  ]);

  const [timeOffRequests, setTimeOffRequests] = useState([
    { id: 1, employeeId: 2, startDate: '2025-08-16', endDate: '2025-08-17', reason: 'Family vacation', status: 'pending' },
    { id: 2, employeeId: 3, startDate: '2025-08-20', endDate: '2025-08-20', reason: 'Doctor appointment', status: 'approved' }
  ]);

  const [shiftSwapRequests, setShiftSwapRequests] = useState([
    { 
      id: 1, 
      requesterId: 2, 
      targetId: 3, 
      shiftId: 1, 
      reason: 'Family emergency', 
      status: 'pending',
      requesterShift: { date: '2025-08-13', startTime: '09:00', endTime: '17:00', position: 'Sales Floor' },
      targetShift: { date: '2025-08-14', startTime: '13:00', endTime: '21:00', position: 'Customer Service' }
    },
    { 
      id: 2, 
      requesterId: 4, 
      targetId: 2, 
      shiftId: 3, 
      reason: 'Concert tickets', 
      status: 'approved',
      requesterShift: { date: '2025-08-15', startTime: '08:00', endTime: '16:00', position: 'Stock Room' },
      targetShift: { date: '2025-08-16', startTime: '12:00', endTime: '20:00', position: 'Sales Floor' }
    }
  ]);

  const [announcements, setAnnouncements] = useState([
    { id: 1, title: 'Store Hours Update', message: 'Starting next week, we will extend our hours until 10 PM on weekends.', date: '2025-08-10', priority: 'high' },
    { id: 2, title: 'Team Meeting', message: 'Monthly team meeting scheduled for Friday at 2 PM in the break room.', date: '2025-08-09', priority: 'medium' }
  ]);

  const [newShift, setNewShift] = useState({
    employeeId: '',
    date: '',
    startTime: '',
    endTime: '',
    position: ''
  });

  const [newTimeOff, setNewTimeOff] = useState({
    startDate: '',
    endDate: '',
    reason: ''
  });

  const [newShiftSwap, setNewShiftSwap] = useState({
    targetEmployeeId: '',
    myShiftId: '',
    theirShiftId: '',
    reason: ''
  });

  const [newAnnouncement, setNewAnnouncement] = useState({
    title: '',
    message: '',
    priority: 'medium'
  });

  const [reportData, setReportData] = useState({
    totalHours: 156,
    totalShifts: 24,
    pendingRequests: 3,
    approvalRate: 87,
    topPerformers: [
      { name: 'John Smith', hours: 40, shifts: 5 },
      { name: 'Emma Davis', hours: 38, shifts: 5 },
      { name: 'Mike Johnson', hours: 35, shifts: 4 }
    ],
    weeklyStats: [
      { week: 'Week 1', hours: 38, shifts: 6 },
      { week: 'Week 2', hours: 42, shifts: 7 },
      { week: 'Week 3', hours: 40, shifts: 6 },
      { week: 'Week 4', hours: 36, shifts: 5 }
    ]
  });

  const getEmployeeName = (id) => {
    const employee = employees.find(emp => emp.id === id);
    return employee ? employee.name : 'Unknown';
  };

  const formatDate = (dateString) => {
    return new Date(dateString).toLocaleDateString('en-US', {
      weekday: 'short',
      month: 'short',
      day: 'numeric'
    });
  };

  const handleAddShift = () => {
    if (newShift.employeeId && newShift.date && newShift.startTime && newShift.endTime && newShift.position) {
      const shift = {
        id: Date.now(),
        employeeId: parseInt(newShift.employeeId),
        date: newShift.date,
        startTime: newShift.startTime,
        endTime: newShift.endTime,
        position: newShift.position
      };
      setSchedule([...schedule, shift]);
      setNewShift({ employeeId: '', date: '', startTime: '', endTime: '', position: '' });
    }
  };

  const handleTimeOffRequest = () => {
    if (newTimeOff.startDate && newTimeOff.endDate && newTimeOff.reason) {
      const request = {
        id: Date.now(),
        employeeId: currentUser.id,
        startDate: newTimeOff.startDate,
        endDate: newTimeOff.endDate,
        reason: newTimeOff.reason,
        status: 'pending'
      };
      setTimeOffRequests([...timeOffRequests, request]);
      setNewTimeOff({ startDate: '', endDate: '', reason: '' });
    }
  };

  const handleShiftSwapRequest = () => {
    if (newShiftSwap.targetEmployeeId && newShiftSwap.myShiftId && newShiftSwap.theirShiftId && newShiftSwap.reason) {
      const myShift = schedule.find(s => s.id === parseInt(newShiftSwap.myShiftId));
      const theirShift = schedule.find(s => s.id === parseInt(newShiftSwap.theirShiftId));
      
      const request = {
        id: Date.now(),
        requesterId: currentUser.id,
        targetId: parseInt(newShiftSwap.targetEmployeeId),
        shiftId: parseInt(newShiftSwap.myShiftId),
        reason: newShiftSwap.reason,
        status: 'pending',
        requesterShift: {
          date: myShift?.date,
          startTime: myShift?.startTime,
          endTime: myShift?.endTime,
          position: myShift?.position
        },
        targetShift: {
          date: theirShift?.date,
          startTime: theirShift?.startTime,
          endTime: theirShift?.endTime,
          position: theirShift?.position
        }
      };
      setShiftSwapRequests([...shiftSwapRequests, request]);
      setNewShiftSwap({ targetEmployeeId: '', myShiftId: '', theirShiftId: '', reason: '' });
    }
  };

  const handleTimeOffResponse = (requestId, status) => {
    setTimeOffRequests(requests =>
      requests.map(req =>
        req.id === requestId ? { ...req, status } : req
      )
    );
  };

  const handleShiftSwapResponse = (requestId, status) => {
    setShiftSwapRequests(requests =>
      requests.map(req =>
        req.id === requestId ? { ...req, status } : req
      )
    );
  };

  const handleAddAnnouncement = () => {
    if (newAnnouncement.title && newAnnouncement.message) {
      const announcement = {
        id: Date.now(),
        title: newAnnouncement.title,
        message: newAnnouncement.message,
        date: new Date().toISOString().split('T')[0],
        priority: newAnnouncement.priority
      };
      setAnnouncements([announcement, ...announcements]);
      setNewAnnouncement({ title: '', message: '', priority: 'medium' });
    }
  };

  const exportReport = (format) => {
    const data = {
      generatedAt: new Date().toISOString(),
      summary: reportData,
      schedules: schedule,
      timeOffRequests,
      shiftSwapRequests
    };
    
    const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `schedule-report-${new Date().toISOString().split('T')[0]}.${format}`;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  };

  const roleSwitch = () => {
    const newRole = currentUser.role === 'manager' ? 'employee' : 'manager';
    const newUser = newRole === 'manager' 
      ? { id: 1, name: 'Sarah Manager', role: 'manager' }
      : { id: 2, name: 'John Smith', role: 'employee' };
    setCurrentUser(newUser);
  };

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <div className="bg-white shadow-sm border-b">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-16">
            <div className="flex items-center">
              <Clock className="h-8 w-8 text-blue-600 mr-3" />
              <h1 className="text-xl font-semibold text-gray-900">WorkScheduler</h1>
              {!isOnline && (
                <div className="ml-3 flex items-center text-orange-600">
                  <WifiOff className="h-4 w-4 mr-1" />
                  <span className="text-xs">Offline</span>
                </div>
              )}
            </div>
            
            <div className="flex items-center space-x-4">
              {showInstallPrompt && (
                <button
                  onClick={handleInstallApp}
                  className="flex items-center px-3 py-2 text-sm bg-blue-100 hover:bg-blue-200 text-blue-800 rounded-md transition-colors"
                >
                  <Smartphone className="h-4 w-4 mr-2" />
                  Install App
                </button>
              )}
              <button
                onClick={roleSwitch}
                className="px-3 py-2 text-sm bg-gray-100 hover:bg-gray-200 rounded-md transition-colors"
              >
                Switch to {currentUser.role === 'manager' ? 'Employee' : 'Manager'}
              </button>
              <div className="flex items-center space-x-2">
                <User className="h-5 w-5 text-gray-600" />
                <span className="text-sm text-gray-700">{currentUser.name}</span>
                <span className={`px-2 py-1 text-xs rounded-full ${
                  currentUser.role === 'manager' 
                    ? 'bg-blue-100 text-blue-800' 
                    : 'bg-green-100 text-green-800'
                }`}>
                  {currentUser.role}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Navigation */}
      <div className="bg-white border-b">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <nav className="flex space-x-8">
            <button
              onClick={() => setActiveTab('schedule')}
              className={`py-4 px-1 border-b-2 font-medium text-sm ${
                activeTab === 'schedule'
                  ? 'border-blue-500 text-blue-600'
                  : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
              }`}
            >
              <Calendar className="h-4 w-4 inline mr-2" />
              Schedule
            </button>
            <button
              onClick={() => setActiveTab('requests')}
              className={`py-4 px-1 border-b-2 font-medium text-sm ${
                activeTab === 'requests'
                  ? 'border-blue-500 text-blue-600'
                  : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
              }`}
            >
              <Clock className="h-4 w-4 inline mr-2" />
              Time Off & Swaps
            </button>
            <button
              onClick={() => setActiveTab('announcements')}
              className={`py-4 px-1 border-b-2 font-medium text-sm ${
                activeTab === 'announcements'
                  ? 'border-blue-500 text-blue-600'
                  : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
              }`}
            >
              <MessageSquare className="h-4 w-4 inline mr-2" />
              Announcements
            </button>
            {currentUser.role === 'manager' && (
              <button
                onClick={() => setActiveTab('reports')}
                className={`py-4 px-1 border-b-2 font-medium text-sm ${
                  activeTab === 'reports'
                    ? 'border-blue-500 text-blue-600'
                    : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
                }`}
              >
                <BarChart3 className="h-4 w-4 inline mr-2" />
                Reports
              </button>
            )}
          </nav>
        </div>
      </div>

      {/* Main Content */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {activeTab === 'schedule' && (
          <div className="space-y-6">
            <div className="flex justify-between items-center">
              <h2 className="text-2xl font-bold text-gray-900">Schedule Management</h2>
              {currentUser.role === 'manager' && (
                <div className="text-sm text-gray-600">
                  Manage shifts for all employees
                </div>
              )}
            </div>

            {/* Add New Shift (Manager Only) */}
            {currentUser.role === 'manager' && (
              <div className="bg-white rounded-lg shadow p-6">
                <h3 className="text-lg font-medium text-gray-900 mb-4">Add New Shift</h3>
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">Employee</label>
                    <select
                      value={newShift.employeeId}
                      onChange={(e) => setNewShift({...newShift, employeeId: e.target.value})}
                      className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                    >
                      <option value="">Select employee</option>
                      {employees.filter(emp => emp.role === 'employee').map(emp => (
                        <option key={emp.id} value={emp.id}>{emp.name}</option>
                      ))}
                    </select>
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">Date</label>
                    <input
                      type="date"
                      value={newShift.date}
                      onChange={(e) => setNewShift({...newShift, date: e.target.value})}
                      className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">Position</label>
                    <select
                      value={newShift.position}
                      onChange={(e) => setNewShift({...newShift, position: e.target.value})}
                      className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                    >
                      <option value="">Select position</option>
                      <option value="Sales Floor">Sales Floor</option>
                      <option value="Customer Service">Customer Service</option>
                      <option value="Stock Room">Stock Room</option>
                      <option value="Cashier">Cashier</option>
                    </select>
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">Start Time</label>
                    <input
                      type="time"
                      value={newShift.startTime}
                      onChange={(e) => setNewShift({...newShift, startTime: e.target.value})}
                      className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">End Time</label>
                    <input
                      type="time"
                      value={newShift.endTime}
                      onChange={(e) => setNewShift({...newShift, endTime: e.target.value})}
                      className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                    />
                  </div>
                  <div className="flex items-end">
                    <button
                      onClick={handleAddShift}
                      className="w-full px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
                    >
                      <Plus className="h-4 w-4 inline mr-2" />
                      Add Shift
                    </button>
                  </div>
                </div>
              </div>
            )}

            {/* Schedule View */}
            <div className="bg-white rounded-lg shadow overflow-hidden">
              <div className="px-6 py-4 border-b border-gray-200">
                <h3 className="text-lg font-medium text-gray-900">Current Schedule</h3>
              </div>
              <div className="overflow-x-auto">
                <table className="min-w-full divide-y divide-gray-200">
                  <thead className="bg-gray-50">
                    <tr>
                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Employee</th>
                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Time</th>
                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Position</th>
                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                    </tr>
                  </thead>
                  <tbody className="bg-white divide-y divide-gray-200">
                    {schedule
                      .filter(shift => currentUser.role === 'manager' || shift.employeeId === currentUser.id)
                      .map(shift => (
                      <tr key={shift.id} className="hover:bg-gray-50">
                        <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                          {getEmployeeName(shift.employeeId)}
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                          {formatDate(shift.date)}
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                          {shift.startTime} - {shift.endTime}
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                          {shift.position}
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap text-sm font-medium space-x-2">
                          {currentUser.role === 'employee' && shift.employeeId === currentUser.id && (
                            <button 
                              onClick={() => {
                                setNewShiftSwap({...newShiftSwap, myShiftId: shift.id.toString()});
                                setActiveTab('requests');
                              }}
                              className="text-blue-600 hover:text-blue-900"
                            >
                              Request Swap
                            </button>
                          )}
                          {currentUser.role === 'manager' && (
                            <>
                              <button className="text-blue-600 hover:text-blue-900 mr-3">
                                <Edit className="h-4 w-4 inline" />
                              </button>
                              <button className="text-red-600 hover:text-red-900">
                                <X className="h-4 w-4 inline" />
                              </button>
                            </>
                          )}
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        )}

        {activeTab === 'requests' && (
          <div className="space-y-6">
            <h2 className="text-2xl font-bold text-gray-900">Time Off & Shift Swaps</h2>

            {/* Shift Swap Request Form (Employee) */}
            {currentUser.role === 'employee' && (
              <div className="bg-white rounded-lg shadow p-6">
                <h3 className="text-lg font-medium text-gray-900 mb-4">Request Shift Swap</h3>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">My Shift</label>
                    <select
                      value={newShiftSwap.myShiftId}
                      onChange={(e) => setNewShiftSwap({...newShiftSwap, myShiftId: e.target.value})}
                      className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                    >
                      <option value="">Select your shift</option>
                      {schedule.filter(s => s.employeeId === currentUser.id).map(shift => (
                        <option key={shift.id} value={shift.id}>
                          {formatDate(shift.date)} - {shift.startTime}-{shift.endTime} ({shift.position})
                        </option>
                      ))}
                    </select>
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">Target Employee</label>
                    <select
                      value={newShiftSwap.targetEmployeeId}
                      onChange={(e) => setNewShiftSwap({...newShiftSwap, targetEmployeeId: e.target.value})}
                      className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                    >
                      <option value="">Select employee</option>
                      {employees.filter(emp => emp.role === 'employee' && emp.id !== currentUser.id).map(emp => (
                        <option key={emp.id} value={emp.id}>{emp.name}</option>
                      ))}
                    </select>
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">Their Shift</label>
                    <select
                      value={newShiftSwap.theirShiftId}
                      onChange={(e) => setNewShiftSwap({...newShiftSwap, theirShiftId: e.target.value})}
                      className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                      disabled={!newShiftSwap.targetEmployeeId}
                    >
                      <option value="">Select their shift</option>
                      {newShiftSwap.targetEmployeeId && schedule
                        .filter(s => s.employeeId === parseInt(newShiftSwap.targetEmployeeId))
                        .map(shift => (
                          <option key={shift.id} value={shift.id}>
                            {formatDate(shift.date)} - {shift.startTime}-{shift.endTime} ({shift.position})
                          </option>
                        ))}
                    </select>
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">Reason</label>
                    <input
                      type="text"
                      placeholder="Enter reason for swap"
                      value={newShiftSwap.reason}
                      onChange={(e) => setNewShiftSwap({...newShiftSwap, reason: e.target.value})}
                      className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                    />
                  </div>
                </div>
                <div className="mt-4">
                  <button
                    onClick={handleShiftSwapRequest}
                    className="px-4 py-2 bg-purple-600 text-white rounded-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500"
                  >
                    <RefreshCw className="h-4 w-4 inline mr-2" />
                    Request Swap
                  </button>
                </div>
              </div>
            )}

            {/* Time Off Request Form (Employee) */}
            {currentUser.role === 'employee' && (
              <div className="bg-white rounded-lg shadow p-6">
                <h3 className="text-lg font-medium text-gray-900 mb-4">Request Time Off</h3>
                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">Start Date</label>
                    <input
                      type="date"
                      /input>
                      // ... (code you provided)

                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">Start Date</label>
                    <input
                      type="date"
                      value={newTimeOff.startDate} // Assuming these were next
                      onChange={(e) => setNewTimeOff({...newTimeOff, startDate: e.target.value})}
                      className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                    />
                  </div>
                  {/* Other form fields would go here */}
                </div>
                {/* A submit button would likely go here */}
              </div>
            )}
            {/* Other request sections would go here */}
          </div>
        )}
      </div>
    </div>
  );
};

export default SchedulingApp; // Don't forget to export the component