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 (
    <>
      {/* Desktop Table View - hidden on mobile */}
      <Card className="hidden md:block">
        <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>

      {/* Mobile Card View - visible on mobile only */}
      <div className="md:hidden space-y-4">
        {sortedConfigs.map((config) => (
          <Card key={`${config.group}:${config.name}`}>
            <CardContent className="space-y-3">
              <div className="flex items-start justify-between">
                <div>
                  <div className="font-medium text-lg">{config.name}</div>
                  <div className="text-sm text-muted-foreground">{config.group}</div>
                </div>
                <span
                  className={cn(
                    'inline-block w-3 h-3 rounded-full mt-1',
                    config.autostart ? 'bg-success' : 'bg-muted'
                  )}
                  title={config.autostart ? 'Autostart enabled' : 'Autostart disabled'}
                />
              </div>

              <div className="space-y-2 text-sm">
                <div>
                  <span className="text-muted-foreground">Command:</span>
                  <code className="block mt-1 text-xs bg-muted px-2 py-1 rounded break-all">
                    {config.command}
                  </code>
                </div>

                <div>
                  <span className="text-muted-foreground">Directory:</span>
                  <div className="mt-1 text-xs break-all">{config.directory}</div>
                </div>

                <div className="flex gap-4 pt-2">
                  <div>
                    <span className="text-muted-foreground">Priority:</span>
                    <span className="ml-2 font-mono">{config.priority}</span>
                  </div>
                  <div>
                    <span className="text-muted-foreground">Processes:</span>
                    <span className="ml-2 font-mono">{config.numprocs}</span>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
    </>
  );
}