"use client";
import React, { useState } from 'react';
import { useProfiles, Profile } from './ProfilesProvider';
import { FaSort, FaSortUp, FaSortDown, FaTrash, FaEdit, FaUser, FaEnvelope, FaClock, FaUserTag } from 'react-icons/fa';
import ProfilesFilters from './ProfilesFilters';
import ProfileDialog from './ProfileDialog';

const ProfileList: React.FC = () => {
  const { profiles, filters, setFilters, updateProfile, deleteProfile } = useProfiles();
  const [sortField, setSortField] = useState<keyof Profile>('first_name');
  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc');
  const [view, setView] = useState<'grid' | 'list'>('grid');
  const [isDialogOpen, setIsDialogOpen] = useState(false);
  const [selectedProfile, setSelectedProfile] = useState<Profile | undefined>();

  const handleSort = (field: keyof Profile) => {
    if (sortField === field) {
      setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc');
    } else {
      setSortField(field);
      setSortDirection('asc');
    }
  };

  const handleEdit = (profile: Profile) => {
    setSelectedProfile(profile);
    setIsDialogOpen(true);
  };

  const handleDelete = async (userId: string) => {
    if (window.confirm('Сигурни ли сте, че искате да изтриете този профил?')) {
      await deleteProfile(userId);
    }
  };

  const getSortIcon = (field: keyof Profile) => {
    if (sortField !== field) return <FaSort className="inline ml-1" />;
    return sortDirection === 'asc' ? (
      <FaSortUp className="inline ml-1" />
    ) : (
      <FaSortDown className="inline ml-1" />
    );
  };

  const resetFilters = () => {
    setFilters({ role: '', search: '' });
  };

  const sortedProfiles = [...profiles].sort((a, b) => {
    const aValue = String(a[sortField]).toLowerCase();
    const bValue = String(b[sortField]).toLowerCase();
    return sortDirection === 'asc'
      ? aValue.localeCompare(bValue)
      : bValue.localeCompare(aValue);
  });

  return (
    <>
      <ProfilesFilters
        filters={filters}
        view={view}
        onFilterChange={setFilters}
        onViewChange={setView}
        onResetFilters={resetFilters}
      />

      {view === 'grid' ? (
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-2">
          {sortedProfiles.map((profile) => (
            <div 
              key={profile.user_id} 
              className="bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow cursor-pointer relative"
              onClick={() => handleEdit(profile)}
            >
              <div className="p-3">
                <div className="flex items-start gap-3">
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center gap-2">
                      <h3 className="font-medium truncate">{profile.first_name} {profile.last_name}</h3>
                      {profile.role && (
                        <div className="flex items-center gap-1 text-xs font-medium text-orange-700 bg-orange-50 px-2 py-0.5 rounded-full">
                          <FaUserTag className="w-3 h-3" />
                          <span>{profile.role}</span>
                        </div>
                      )}
                    </div>
                    
                    <div className="flex items-center gap-2 mt-1">
                      <div className="flex items-center gap-1 text-sm text-gray-600">
                        <FaEnvelope className="w-3.5 h-3.5" />
                        <span className="truncate">{profile.email}</span>
                      </div>
                    </div>
                    
                    <div className="flex items-center gap-2 mt-1 text-sm text-gray-600">
                      <FaClock className="w-3.5 h-3.5" />
                      <span>{profile.created_at ? new Date(profile.created_at).toLocaleDateString('bg-BG') : '-'}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      ) : (
        <div className="overflow-x-auto w-full">
          <table className="table w-full">
            <thead>
              <tr className="bg-orange-200">
                <th
                  className="cursor-pointer"
                  onClick={() => handleSort('first_name')}
                >
                  Име {getSortIcon('first_name')}
                </th>
                <th
                  className="cursor-pointer"
                  onClick={() => handleSort('email')}
                >
                  Имейл {getSortIcon('email')}
                </th>
                <th
                  className="cursor-pointer"
                  onClick={() => handleSort('role')}
                >
                  Роля {getSortIcon('role')}
                </th>
                <th
                  className="cursor-pointer"
                  onClick={() => handleSort('created_at')}
                >
                  Създаден на {getSortIcon('created_at')}
                </th>
              </tr>
            </thead>
            <tbody>
              {sortedProfiles.map((profile) => (
                <tr 
                  key={profile.user_id} 
                  className="hover:bg-orange-50 cursor-pointer"
                  onClick={() => handleEdit(profile)}
                >
                  <td>
                    <span className="font-medium">{profile.first_name} {profile.last_name}</span>
                  </td>
                  <td>{profile.email}</td>
                  <td>
                    <span className="bg-orange-100 px-2 py-1 rounded-full">
                      {profile.role}
                    </span>
                  </td>
                  <td>
                    {profile.created_at ? new Date(profile.created_at).toLocaleDateString('bg-BG') : '-'}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      <ProfileDialog
        isOpen={isDialogOpen}
        onClose={() => {
          setIsDialogOpen(false);
          setSelectedProfile(undefined);
        }}
        onSave={(updatedProfile) => {
          if (selectedProfile?.user_id) {
            updateProfile(selectedProfile.user_id, updatedProfile);
          }
          setIsDialogOpen(false);
          setSelectedProfile(undefined);
        }}
        onDelete={deleteProfile}
        profile={selectedProfile}
      />
    </>
  );
};

export default ProfileList;