import { useState, useMemo } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import SearchAndFilter from './SearchAndFilter';
import EnhancedServerCard from './EnhancedServerCard';
import { cn } from '../utils/cn';

const DatabaseListView = ({
  hanaServers,
  claudeServers,
  activeEnvironments,
  onEditServer,
  onAddToClaudeServer,
  onDeleteServer,
  onAddDatabase
}) => {
  const [searchQuery, setSearchQuery] = useState('');
  const [selectedDatabase, setSelectedDatabase] = useState(null);
  const [filters, setFilters] = useState({
    status: 'all',
    sortBy: 'name',
    sortOrder: 'asc'
  });

  // Selection handlers
  const handleDatabaseSelect = (databaseName) => {
    setSelectedDatabase(databaseName);
  };

  const handleEditSelected = () => {
    if (selectedDatabase && hanaServers[selectedDatabase]) {
      onEditServer(hanaServers[selectedDatabase]);
    }
  };

  const handleAddToClaudeSelected = () => {
    if (selectedDatabase) {
      onAddToClaudeServer(selectedDatabase);
    }
  };

  const handleDeleteSelected = () => {
    if (selectedDatabase) {
      onDeleteServer(selectedDatabase);
      setSelectedDatabase(null);
    }
  };

  // Calculate filter counts
  const filterCounts = useMemo(() => {
    const servers = Object.entries(hanaServers);
    const activeInClaude = Object.keys(activeEnvironments).length;
    return {
      total: servers.length,
      active: servers.filter(([name]) => claudeServers.some(cs => cs.name === name)).length,
      activeInClaude: activeInClaude,
      production: servers.filter(([, server]) => server.environments?.Production).length,
      development: servers.filter(([, server]) => server.environments?.Development).length,
      staging: servers.filter(([, server]) => server.environments?.Staging).length,
      activeFilter: filters.status
    };
  }, [hanaServers, claudeServers, filters.status, activeEnvironments]);

  // Filter and sort servers
  const filteredServers = useMemo(() => {
    let filtered = Object.entries(hanaServers);

    // Apply search filter
    if (searchQuery) {
      filtered = filtered.filter(([name, server]) =>
        name.toLowerCase().includes(searchQuery.toLowerCase()) ||
        server.description?.toLowerCase().includes(searchQuery.toLowerCase())
      );
    }

    // Apply status filter
    if (filters.status !== 'all') {
      switch (filters.status) {
        case 'active':
          filtered = filtered.filter(([name]) =>
            claudeServers.some(cs => cs.name === name)
          );
          break;
        case 'production':
        case 'development':
        case 'staging':
          filtered = filtered.filter(([, server]) =>
            server.environments?.[filters.status.charAt(0).toUpperCase() + filters.status.slice(1)]
          );
          break;
      }
    }

    // Apply sorting
    filtered.sort(([nameA, serverA], [nameB, serverB]) => {
      let valueA, valueB;

      switch (filters.sortBy) {
        case 'name':
          valueA = nameA.toLowerCase();
          valueB = nameB.toLowerCase();
          break;
        case 'created':
          valueA = new Date(serverA.created || 0);
          valueB = new Date(serverB.created || 0);
          break;
        case 'modified':
          valueA = new Date(serverA.modified || 0);
          valueB = new Date(serverB.modified || 0);
          break;
        case 'environments':
          valueA = Object.keys(serverA.environments || {}).length;
          valueB = Object.keys(serverB.environments || {}).length;
          break;
        default:
          valueA = nameA.toLowerCase();
          valueB = nameB.toLowerCase();
      }

      if (filters.sortOrder === 'desc') {
        [valueA, valueB] = [valueB, valueA];
      }

      if (valueA < valueB) return -1;
      if (valueA > valueB) return 1;
      return 0;
    });

    return filtered;
  }, [hanaServers, claudeServers, searchQuery, filters]);



  const handleFilterChange = (newFilters) => {
    setFilters(prev => ({ ...prev, ...newFilters }));
  };

  const handleClearFilters = () => {
    setFilters({
      status: 'all',
      sortBy: 'name',
      sortOrder: 'asc'
    });
    setSearchQuery('');
  };

  return (
    <div className="p-6 space-y-6 bg-gray-100 rounded-2xl sm:rounded-3xl overflow-y-auto max-h-full database-list-scrollbar">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-gray-900 mb-2">My Local Databases</h1>
          <p className="text-gray-600">
            Manage your HANA database configurations
          </p>
          {filterCounts.activeInClaude > 0 && (
            <div className="flex items-center space-x-2 mt-2">
              <div className="flex items-center space-x-1 text-green-600 bg-green-50 px-3 py-1 rounded-full">
                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                <span className="text-sm font-medium">
                  {filterCounts.activeInClaude} environment{filterCounts.activeInClaude !== 1 ? 's' : ''} connected to Claude
                </span>
              </div>
            </div>
          )}
        </div>
        <button
          onClick={onAddDatabase}
          className="flex items-center px-4 py-2 bg-[#86a0ff] text-white text-sm font-medium rounded-lg hover:bg-[#7990e6] transition-colors shadow-sm hover:shadow-md"
        >
          <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
          </svg>
          Add Database
        </button>
      </div>

      {/* Search and Filter Bar */}
      <div className="bg-white rounded-xl border border-gray-100 p-6">
        <SearchAndFilter
          searchQuery={searchQuery}
          onSearchChange={setSearchQuery}
          filters={filters}
          onFiltersChange={setFilters}
          filterCounts={filterCounts}
        />
      </div>

      {/* Top Bar with Actions */}
      <div className="bg-white rounded-xl border border-gray-200 p-6">
        <div className="flex items-center justify-between">
          <div className="flex items-center space-x-4">
            <span className="text-sm font-medium text-gray-700">
              {filteredServers.length} of {Object.keys(hanaServers).length} databases
            </span>
          </div>
          
          <div className="flex items-center space-x-3">
            <button
              onClick={handleEditSelected}
              disabled={!selectedDatabase}
              className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
            >
              Edit
            </button>
            
            <button
              onClick={handleAddToClaudeSelected}
              disabled={!selectedDatabase}
              className="px-4 py-2 text-sm font-medium text-white bg-[#86a0ff] border border-[#86a0ff] rounded-lg hover:bg-[#7990e6] transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
            >
              Add to Claude
            </button>
            
            <button
              onClick={handleDeleteSelected}
              disabled={!selectedDatabase}
              className="px-4 py-2 text-sm font-medium text-red-600 bg-red-50 border border-red-200 rounded-lg hover:bg-red-100 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
            >
              Delete
            </button>
          </div>
        </div>
      </div>

      {/* Database Table */}
      <div className="bg-white rounded-xl border border-gray-200 overflow-hidden">
        {filteredServers.length === 0 ? (
          <div className="text-center py-12">
            <svg className="w-16 h-16 mx-auto text-gray-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
            </svg>
            <h3 className="text-lg font-medium text-gray-900 mb-2">No databases found</h3>
            <p className="text-gray-600 mb-4">
              {searchQuery ? `No databases match "${searchQuery}"` : 'Get started by adding your first database'}
            </p>
            <button
              onClick={onAddDatabase}
              className="inline-flex items-center px-6 py-3 bg-[#86a0ff] text-white font-medium rounded-lg hover:bg-[#7990e6] transition-colors shadow-sm hover:shadow-md"
            >
              <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
              </svg>
              Add Your First Database
            </button>
          </div>
        ) : (
          <>
            {/* Table Header */}
            <div className="bg-gray-50 px-6 py-3 border-b border-gray-200">
              <div className="grid grid-cols-12 gap-4 items-center">
                <div className="col-span-1">
                  {/* Empty header for radio button column */}
                </div>
                <div className="col-span-4">
                  <h3 className="text-sm font-semibold text-gray-700 uppercase tracking-wide">Database</h3>
                </div>
                <div className="col-span-2">
                  <h3 className="text-sm font-semibold text-gray-700 uppercase tracking-wide">Active Environment</h3>
                </div>
                <div className="col-span-2">
                  <h3 className="text-sm font-semibold text-gray-700 uppercase tracking-wide">Environments</h3>
                </div>
                <div className="col-span-3">
                  <h3 className="text-sm font-semibold text-gray-700 uppercase tracking-wide">Description</h3>
                </div>
              </div>
            </div>

            {/* Database List */}
            <div className="divide-y divide-gray-200">
              <AnimatePresence>
                {filteredServers.map(([name, server], index) => (
                  <motion.div
                    key={name}
                    initial={{ opacity: 0, x: -10 }}
                    animate={{ opacity: 1, x: 0 }}
                    exit={{ opacity: 0, x: -10 }}
                    transition={{ duration: 0.2, delay: index * 0.02 }}
                  >
                    <EnhancedServerCard
                      name={name}
                      server={server}
                      index={index}
                      isSelected={selectedDatabase === name}
                      activeEnvironment={activeEnvironments[name]}
                      onSelect={handleDatabaseSelect}
                      onEdit={() => onEditServer(server)}
                      onAddToClaude={() => onAddToClaudeServer(name)}
                      onDelete={() => onDeleteServer(name)}
                    />
                  </motion.div>
                ))}
              </AnimatePresence>
            </div>
          </>
        )}
      </div>
    </div>
  );
};

export default DatabaseListView;