supervisor-ui/components/config/ConfigTable.tsx

'use client';

import { useState } from 'react';
import { ConfigInfo } from '@/lib/supervisor/types';
import { Card, CardContent } from '@/components/ui/card';
import { ChevronUp, ChevronDown } from 'lucide-react';
import { cn } from '@/lib/utils/cn';

interface ConfigTableProps {
  configs: ConfigInfo[];
}

type SortField = 'group' | 'name' | 'command' | 'autostart' | 'directory';
type SortDirection = 'asc' | 'desc';

export function ConfigTable({ configs }: ConfigTableProps) {
  const [sortField, setSortField] = useState<SortField>('group');
  const [sortDirection, setSortDirection] = useState<SortDirection>('asc');

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

  const sortedConfigs = [...configs].sort((a, b) => {
    let aVal: any = a[sortField];
    let bVal: any = b[sortField];

    // Handle boolean values
    if (typeof aVal === 'boolean') {
      aVal = aVal ? 1 : 0;
      bVal = bVal ? 1 : 0;
    }

    // Handle string values
    if (typeof aVal === 'string') {
      aVal = aVal.toLowerCase();
      bVal = bVal.toLowerCase();
    }

    if (aVal < bVal) return sortDirection === 'asc' ? -1 : 1;
    if (aVal > bVal) return sortDirection === 'asc' ? 1 : -1;
    return 0;
  });

  const SortIcon = ({ field }: { field: SortField }) => {
    if (sortField !== field) return null;
    return sortDirection === 'asc' ? (
      <ChevronUp className="h-4 w-4 inline-block ml-1" />
    ) : (
      <ChevronDown className="h-4 w-4 inline-block ml-1" />
    );
  };

  return (
    <Card>
      <CardContent className="p-0">
        <div className="overflow-x-auto">
          <table className="w-full">
            <thead className="bg-muted/50 border-b">
              <tr>
                <th
                  className="text-left p-3 cursor-pointer hover:bg-muted transition-colors"
                  onClick={() => handleSort('group')}
                >
                  Group <SortIcon field="group" />
                </th>
                <th
                  className="text-left p-3 cursor-pointer hover:bg-muted transition-colors"
                  onClick={() => handleSort('name')}
                >
                  Name <SortIcon field="name" />
                </th>
                <th
                  className="text-left p-3 cursor-pointer hover:bg-muted transition-colors"
                  onClick={() => handleSort('command')}
                >
                  Command <SortIcon field="command" />
                </th>
                <th className="text-left p-3">Directory</th>
                <th
                  className="text-center p-3 cursor-pointer hover:bg-muted transition-colors"
                  onClick={() => handleSort('autostart')}
                >
                  Autostart <SortIcon field="autostart" />
                </th>
                <th className="text-center p-3">Priority</th>
                <th className="text-center p-3">Processes</th>
              </tr>
            </thead>
            <tbody>
              {sortedConfigs.map((config, index) => (
                <tr
                  key={`${config.group}:${config.name}`}
                  className={cn(
                    'border-b hover:bg-muted/20 transition-colors',
                    index % 2 === 0 && 'bg-muted/5'
                  )}
                >
                  <td className="p-3 font-medium">{config.group}</td>
                  <td className="p-3">{config.name}</td>
                  <td className="p-3">
                    <code className="text-xs bg-muted px-2 py-1 rounded">{config.command}</code>
                  </td>
                  <td className="p-3 text-sm text-muted-foreground">{config.directory}</td>
                  <td className="p-3 text-center">
                    <span
                      className={cn(
                        'inline-block w-3 h-3 rounded-full',
                        config.autostart ? 'bg-success' : 'bg-muted'
                      )}
                    />
                  </td>
                  <td className="p-3 text-center text-sm">{config.priority}</td>
                  <td className="p-3 text-center text-sm">{config.numprocs}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </CardContent>
    </Card>
  );
}