import React, { useState, useMemo, useEffect } from 'react';
import { RefreshCw, Activity, ChevronDown, ChevronUp, Globe, Download, Filter, X } from 'lucide-react';
import { IAuditLog, IUser } from '../../../types';
import { dataService } from '../../../services/dataService';
import Button from '../../../components/common/Button';
import Input from '../../../components/common/Input';

interface AuditLogsProps {
  logs: IAuditLog[];
  loading: boolean;
  hasMore: boolean;
  onLoadMore: () => void;
  onReload: () => void;
}

const LogGroup: React.FC<{ date: string; logs: IAuditLog[]; userNamesMap: Record<string, string> }> = ({ date, logs, userNamesMap }) => {
  const [isExpanded, setIsExpanded] = useState(true);

  return (
    <div className="border border-slate-200 dark:border-slate-700 rounded-lg overflow-hidden">
      <button
        onClick={() => setIsExpanded(!isExpanded)}
        className="w-full flex items-center justify-between px-4 py-3 bg-slate-50 dark:bg-slate-700/50 hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors"
      >
        <div className="flex items-center gap-3">
          <Activity size={18} className="text-slate-400" />
          <span className="font-bold text-slate-700 dark:text-slate-200">{date}</span>
          <span className="text-xs bg-white dark:bg-slate-800 px-2 py-0.5 rounded-full border border-slate-200 dark:border-slate-600 text-slate-500">
            {logs.length} nhật ký
          </span>
        </div>
        {isExpanded ? <ChevronUp size={18} /> : <ChevronDown size={18} />}
      </button>

      {isExpanded && (
        <div className="overflow-x-auto">
          <table className="min-w-full divide-y divide-slate-200 dark:divide-slate-700 text-sm">
            <thead className="bg-slate-50/50 dark:bg-slate-800/50">
              <tr>
                <th className="px-6 py-3 text-left font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wider">
                  Thời gian
                </th>
                <th className="px-6 py-3 text-left font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wider">
                  Tên user
                </th>
                <th className="px-6 py-3 text-left font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wider">
                  IP Address
                </th>
                <th className="px-6 py-3 text-left font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wider">
                  Hành động
                </th>
                <th className="px-6 py-3 text-left font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wider">
                  Khu vực
                </th>
                <th className="px-6 py-3 text-left font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wider">
                  Chi tiết
                </th>
              </tr>
            </thead>
            <tbody className="divide-y divide-slate-200 dark:divide-slate-700 bg-white dark:bg-slate-800">
              {logs.map(log => (
                <tr key={log._id} className="hover:bg-slate-50 dark:hover:bg-slate-700/30 transition-colors">
                  <td className="px-6 py-4 whitespace-nowrap text-slate-500 dark:text-slate-400 font-mono text-xs">
                    {new Date(log.timestamp).toLocaleTimeString('vi-VN')}
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap text-slate-900 dark:text-white font-medium">
                    {userNamesMap[log.userId] || log.userId}
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap">
                    <div className="flex items-center gap-1.5 text-slate-500 dark:text-slate-400">
                      <Globe size={14} className="text-slate-400" />
                      <span className="font-mono text-xs">{(log as any).ipAddress || '127.0.0.1'}</span>
                    </div>
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap">
                    <span
                      className={`px-2 py-0.5 rounded text-[10px] font-bold border ${
                        log.action === 'DELETE'
                          ? 'bg-red-50 dark:bg-red-900/30 text-red-700 dark:text-red-300 border-red-200 dark:border-red-800'
                          : log.action === 'SYSTEM_CONFIG'
                          ? 'bg-purple-50 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 border-purple-200 dark:border-purple-800'
                          : log.action === 'UPDATE'
                          ? 'bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 border-blue-200 dark:border-blue-800'
                          : 'bg-green-50 dark:bg-green-900/30 text-green-700 dark:text-green-300 border-green-200 dark:border-green-800'
                      }`}
                    >
                      {log.action}
                    </span>
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap text-slate-500 dark:text-slate-400 uppercase text-[10px] font-semibold tracking-wider">
                    {log.targetCollection}
                  </td>
                  <td className="px-6 py-4 text-slate-600 dark:text-slate-300 max-w-xs truncate" title={log.details}>
                    {log.details}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
};

const AuditLogs: React.FC<AuditLogsProps> = ({ logs, loading, hasMore, onLoadMore, onReload }) => {
  const [searchQuery, setSearchQuery] = useState('');
  const [filterAction, setFilterAction] = useState<string>('');
  const [showFilters, setShowFilters] = useState(false);
  const [users, setUsers] = useState<IUser[]>([]);

  // Fetch users on mount
  useEffect(() => {
    const loadUsers = async () => {
      try {
        const fetchedUsers = await dataService.getUsers();
        setUsers(fetchedUsers);
      } catch (error) {
        console.error('Error loading users:', error);
      }
    };
    loadUsers();
  }, []);

  // Create userId to userName mapping
  const userNamesMap = useMemo(() => {
    const map: Record<string, string> = {};
    users.forEach(user => {
      map[user._id] = user.name || `${user.firstName || ''} ${user.lastName || ''}`.trim() || user.email;
    });
    return map;
  }, [users]);

  const actionTypes = useMemo(() => {
    const actions = new Set(logs.map(log => log.action));
    return Array.from(actions).sort();
  }, [logs]);

  const filteredLogs = useMemo(() => {
    let filtered = logs;

    if (searchQuery) {
      const query = searchQuery.toLowerCase();
      filtered = filtered.filter(
        log =>
          log.details.toLowerCase().includes(query) ||
          log.userId.toLowerCase().includes(query) ||
          (userNamesMap[log.userId] && userNamesMap[log.userId].toLowerCase().includes(query)) ||
          log.action.toLowerCase().includes(query) ||
          log.targetCollection.toLowerCase().includes(query)
      );
    }

    if (filterAction) {
      filtered = filtered.filter(log => log.action === filterAction);
    }

    return filtered;
  }, [logs, searchQuery, filterAction, userNamesMap]);

  const groupedLogs = useMemo(() => {
    return filteredLogs.reduce((groups: Record<string, IAuditLog[]>, log) => {
      const date = new Date(log.timestamp).toLocaleDateString('vi-VN');
      if (!groups[date]) groups[date] = [];
      groups[date].push(log);
      return groups;
    }, {});
  }, [filteredLogs]);

  const exportLogs = () => {
    const csv = [
      ['Thời gian', 'Tên user', 'IP Address', 'Hành động', 'Khu vực', 'Chi tiết'].join(','),
      ...filteredLogs.map(log =>
        [
          new Date(log.timestamp).toLocaleString('vi-VN'),
          userNamesMap[log.userId] || log.userId,
          (log as any).ipAddress || '127.0.0.1',
          log.action,
          log.targetCollection,
          `"${log.details.replace(/"/g, '""')}"`
        ].join(',')
      )
    ].join('\n');

    const blob = new Blob(['\uFEFF' + csv], { type: 'text/csv;charset=utf-8;' });
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = `audit-logs-${new Date().toISOString().split('T')[0]}.csv`;
    link.click();
  };

  return (
    <div className="space-y-4">
      <div className="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 overflow-hidden">
        <div className="p-6 border-b border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800/50">
          <div className="flex justify-between items-center mb-4">
            <div>
              <h2 className="text-lg font-bold text-slate-800 dark:text-white">Nhật ký toàn hệ thống</h2>
              <p className="text-sm text-slate-500 dark:text-slate-400">
                Ghi lại mọi thay đổi cấu hình và tác động dữ liệu quan trọng.
              </p>
            </div>
            <div className="flex gap-2">
              <Button variant="outline" onClick={() => setShowFilters(!showFilters)} icon={<Filter size={16} />}>
                Lọc
              </Button>
              <Button variant="outline" onClick={exportLogs} icon={<Download size={16} />}>
                Xuất CSV
              </Button>
              <Button variant="secondary" onClick={onReload} isLoading={loading} icon={<RefreshCw size={16} />}>
                Làm mới
              </Button>
            </div>
          </div>

          {/* Search and Filters */}
          <div className="space-y-3">
            <Input
              placeholder="Tìm kiếm trong nhật ký..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
            />
            {showFilters && (
              <div className="flex gap-2 items-center flex-wrap">
                <select
                  value={filterAction}
                  onChange={(e) => setFilterAction(e.target.value)}
                  className="border border-slate-300 dark:border-slate-600 rounded-md px-3 py-1.5 text-sm bg-white dark:bg-slate-700 text-slate-900 dark:text-white"
                >
                  <option value="">Tất cả hành động</option>
                  {actionTypes.map(action => (
                    <option key={action} value={action}>
                      {action}
                    </option>
                  ))}
                </select>
                {(searchQuery || filterAction) && (
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={() => {
                      setSearchQuery('');
                      setFilterAction('');
                    }}
                    icon={<X size={14} />}
                  >
                    Xóa bộ lọc
                  </Button>
                )}
              </div>
            )}
          </div>
        </div>

        <div className="p-4 space-y-4">
          {Object.keys(groupedLogs).length === 0 ? (
            <div className="text-center py-12">
              <Activity size={48} className="mx-auto text-slate-400 mb-4" />
              <p className="text-slate-500 dark:text-slate-400">
                {searchQuery || filterAction ? 'Không tìm thấy nhật ký nào' : 'Chưa có nhật ký nào'}
              </p>
            </div>
          ) : (
            Object.entries(groupedLogs).map(([date, dateLogs]) => (
              <LogGroup key={date} date={date} logs={dateLogs} userNamesMap={userNamesMap} />
            ))
          )}
        </div>

        {/* Pagination Status & Load More */}
        <div className="p-6 border-t border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800/30 flex flex-col items-center gap-4">
          <p className="text-sm text-slate-500">
            Hiển thị {filteredLogs.length} / {logs.length} nhật ký
          </p>
          {hasMore && (
            <Button onClick={onLoadMore} disabled={loading} isLoading={loading} icon={<RefreshCw size={16} />}>
              Xem thêm nhật ký
            </Button>
          )}
        </div>
      </div>
    </div>
  );
};

export default AuditLogs;
export { AuditLogs };