import { useState, useEffect } from 'react';
import { FolderOpen, Users, HardDrive } from 'lucide-react';
import { fileAPI } from '../services/api';

function Files() {
  const [users, setUsers] = useState([]);
  const [status, setStatus] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    fetchFilesData();
  }, []);

  const fetchFilesData = async () => {
    try {
      const [usersResponse, statusResponse] = await Promise.all([
        fileAPI.getUsers(),
        fileAPI.getStatus()
      ]);
      
      setUsers(usersResponse.data);
      setStatus(statusResponse.data);
    } catch (error) {
      console.error('Failed to fetch files data:', error);
    } finally {
      setIsLoading(false);
    }
  };

  if (isLoading) {
    return (
      <div className="flex items-center justify-center h-64">
        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-600"></div>
      </div>
    );
  }

  return (
    <div>
      <div className="mb-8">
        <h1 className="text-2xl font-bold text-gray-900">File Storage</h1>
        <p className="mt-2 text-gray-600">
          Manage WebDAV file storage services
        </p>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* Status */}
        <div className="card">
          <div className="flex items-center mb-4">
            <HardDrive className="h-6 w-6 text-primary-500 mr-2" />
            <h3 className="text-lg font-medium text-gray-900">Service Status</h3>
          </div>
          {status ? (
            <div className="space-y-2">
              <div className="flex justify-between">
                <span className="text-sm text-gray-500">WebDAV:</span>
                <span className="text-sm font-medium text-success-600">Running</span>
              </div>
              <div className="flex justify-between">
                <span className="text-sm text-gray-500">Storage:</span>
                <span className="text-sm font-medium text-success-600">Available</span>
              </div>
            </div>
          ) : (
            <p className="text-gray-500 text-sm">Status unavailable</p>
          )}
        </div>

        {/* Users */}
        <div className="card">
          <div className="flex items-center mb-4">
            <Users className="h-6 w-6 text-primary-500 mr-2" />
            <h3 className="text-lg font-medium text-gray-900">Storage Users</h3>
          </div>
          <div className="space-y-2">
            {users.length > 0 ? (
              users.map((user, index) => (
                <div key={index} className="flex justify-between items-center p-2 bg-gray-50 rounded">
                  <span className="text-sm font-medium">{user.username}</span>
                  <span className="text-sm text-gray-500">{user.storage_used || '0'} MB</span>
                </div>
              ))
            ) : (
              <p className="text-gray-500 text-sm">No storage users configured</p>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

export default Files;