import { useState, useEffect } from 'react';
import { Clock, LogOut, LogIn, Download, Calendar, User } from 'lucide-react';

export default function AttendanceApp() {
  const [user, setUser] = useState(null);
  const [users, setUsers] = useState(() => {
    const savedUsers = localStorage.getItem('users');
    return savedUsers ? JSON.parse(savedUsers) : [
      { username: 'admin', password: 'admin123', role: 'admin' },
      { username: 'user1', password: 'user123', role: 'user' }
    ];
  });
  
  const [attendance, setAttendance] = useState(() => {
    const savedAttendance = localStorage.getItem('attendance');
    return savedAttendance ? JSON.parse(savedAttendance) : [];
  });

  const [view, setView] = useState('login');
  const [dateRange, setDateRange] = useState({
    start: '',
    end: ''
  });

  useEffect(() => {
    localStorage.setItem('attendance', JSON.stringify(attendance));
  }, [attendance]);

  useEffect(() => {
    localStorage.setItem('users', JSON.stringify(users));
  }, [users]);

  // Geolocation check
  const checkLocation = async () => {
    try {
      const position = await new Promise((resolve, reject) => {
        navigator.geolocation.getCurrentPosition(resolve, reject);
      });
      
      // Suva, Fiji coordinates (approximately)
      const SUVA_LAT = -18.1416;
      const SUVA_LNG = 178.4419;
      
      const distance = calculateDistance(
        position.coords.latitude,
        position.coords.longitude,
        SUVA_LAT,
        SUVA_LNG
      );
      
      // Allow within 5km radius
      return distance <= 5;
    } catch (error) {
      console.error('Error getting location:', error);
      return false;
    }
  };

  const calculateDistance = (lat1, lon1, lat2, lon2) => {
    const R = 6371; // Earth's radius in km
    const dLat = (lat2 - lat1) * Math.PI / 180;
    const dLon = (lon2 - lon1) * Math.PI / 180;
    const a = Math.sin(dLat/2) * Math.sin(dLat/2) +
              Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
              Math.sin(dLon/2) * Math.sin(dLon/2);
    const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
    return R * c;
  };

  const handleLogin = (e) => {
    e.preventDefault();
    const username = e.target.username.value;
    const password = e.target.password.value;
    
    const foundUser = users.find(u => u.username === username && u.password === password);
    if (foundUser) {
      setUser(foundUser);
      setView('dashboard');
    } else {
      alert('Invalid credentials');
    }
  };

  const handleSignInOut = async () => {
    const isInLocation = await checkLocation();
    if (!isInLocation) {
      alert('You must be in Suva, Fiji to sign in/out');
      return;
    }

    const lastRecord = attendance.find(a => 
      a.username === user.username && 
      a.date === new Date().toLocaleDateString() &&
      !a.timeOut
    );

    if (lastRecord) {
      // Sign out
      const updatedAttendance = attendance.map(a =>
        a === lastRecord
          ? { ...a, timeOut: new Date().toLocaleTimeString() }
          : a
      );
      setAttendance(updatedAttendance);
    } else {
      // Sign in
      setAttendance([
        ...attendance,
        {
          username: user.username,
          date: new Date().toLocaleDateString(),
          timeIn: new Date().toLocaleTimeString(),
          timeOut: null
        }
      ]);
    }
  };

  const downloadExcel = () => {
    const filteredData = attendance.filter(record => {
      const recordDate = new Date(record.date);
      return recordDate >= new Date(dateRange.start) && 
             recordDate <= new Date(dateRange.end);
    });

    const csv = [
      ['Name', 'Date', 'Time In', 'Time Out'],
      ...filteredData.map(record => [
        record.username,
        record.date,
        record.timeIn,
        record.timeOut || ''
      ])
    ].map(row => row.join(',')).join('\n');

    const blob = new Blob([csv], { type: 'text/csv' });
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'attendance.csv';
    a.click();
  };

  const LoginView = () => (
    <div className="min-h-screen flex items-center justify-center bg-gray-100">
      <div className="bg-white p-8 rounded-lg shadow-md w-96">
        <h2 className="text-2xl font-bold mb-6 text-center text-gray-800">Office Attendance</h2>
        <form onSubmit={handleLogin} className="space-y-4">
          <div>
            <label className="block text-sm font-medium text-gray-700">Username</label>
            <input
              name="username"
              type="text"
              required
              className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm"
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700">Password</label>
            <input
              name="password"
              type="password"
              required
              className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm"
            />
          </div>
          <button
            type="submit"
            className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700"
          >
            Login
          </button>
        </form>
      </div>
    </div>
  );

  const UserDashboard = () => {
    const currentMonth = new Date().getMonth();
    const userRecords = attendance.filter(
      record => 
        record.username === user.username &&
        new Date(record.date).getMonth() === currentMonth
    );

    return (
      <div className="p-6 max-w-4xl mx-auto">
        <div className="flex justify-between items-center mb-6">
          <h2 className="text-2xl font-bold text-gray-800">Welcome, {user.username}</h2>
          <div className="space-x-4">
            <button
              onClick={handleSignInOut}
              className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 flex items-center gap-2"
            >
              {attendance.find(a => 
                a.username === user.username && 
                a.date === new Date().toLocaleDateString() &&
                !a.timeOut
              ) ? (
                <>
                  <LogOut size={20} />
                  Sign Out
                </>
              ) : (
                <>
                  <LogIn size={20} />
                  Sign In
                </>
              )}
            </button>
            <button
              onClick={() => {
                setUser(null);
                setView('login');
              }}
              className="px-4 py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700"
            >
              Logout
            </button>
          </div>
        </div>

        <div className="bg-white rounded-lg shadow-md p-6">
          <h3 className="text-xl font-semibold mb-4">This Month's Attendance</h3>
          <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">Date</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Time In</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Time Out</th>
                </tr>
              </thead>
              <tbody className="bg-white divide-y divide-gray-200">
                {userRecords.map((record, index) => (
                  <tr key={index}>
                    <td className="px-6 py-4 whitespace-nowrap">{record.date}</td>
                    <td className="px-6 py-4 whitespace-nowrap">{record.timeIn}</td>
                    <td className="px-6 py-4 whitespace-nowrap">{record.timeOut || '-'}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    );
  };

  const AdminDashboard = () => (
    <div className="p-6 max-w-4xl mx-auto">
      <div className="flex justify-between items-center mb-6">
        <h2 className="text-2xl font-bold text-gray-800">Admin Dashboard</h2>
        <button
          onClick={() => {
            setUser(null);
            setView('login');
          }}
          className="px-4 py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700"
        >
          Logout
        </button>
      </div>

      <div className="bg-white rounded-lg shadow-md p-6 mb-6">
        <h3 className="text-xl font-semibold mb-4">Export Attendance</h3>
        <div className="grid grid-cols-2 gap-4 mb-4">
          <div>
            <label className="block text-sm font-medium text-gray-700">Start Date</label>
            <input
              type="date"
              value={dateRange.start}
              onChange={(e) => setDateRange(prev => ({ ...prev, start: e.target.value }))}
              className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm"
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700">End Date</label>
            <input
              type="date"
              value={dateRange.end}
              onChange={(e) => setDateRange(prev => ({ ...prev, end: e.target.value }))}
              className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm"
            />
          </div>
        </div>
        <button
          onClick={downloadExcel}
          className="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 flex items-center gap-2"
        >
          <Download size={20} />
          Download Report
        </button>
      </div>

      <div className="bg-white rounded-lg shadow-md p-6">
        <h3 className="text-xl font-semibold mb-4">All Attendance Records</h3>
        <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">Name</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 In</th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Time Out</th>
              </tr>
            </thead>
            <tbody className="bg-white divide-y divide-gray-200">
              {attendance.map((record, index) => (
                <tr key={index}>
                  <td className="px-6 py-4 whitespace-nowrap">{record.username}</td>
                  <td className="px-6 py-4 whitespace-nowrap">{record.date}</td>
                  <td className="px-6 py-4 whitespace-nowrap">{record.timeIn}</td>
                  <td className="px-6 py-4 whitespace-nowrap">{record.timeOut || '-'}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );

  return (
    <div className="min-h-screen bg-gray-100">
      {view === 'login' && <LoginView />}
      {view === 'dashboard' && user?.role === 'user' && <UserDashboard />}
      {view === 'dashboard' && user?.role === 'admin' && <AdminDashboard />}
    </div>
  );
}