fedi-feed-router/frontend/src/pages/Routes.tsx

import React, { useState } from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { Plus, Edit2, Trash2, ToggleLeft, ToggleRight, ExternalLink, CheckCircle, XCircle, Tag } from 'lucide-react';
import { apiClient, type Route, type RouteRequest, type Feed, type PlatformChannel, type Keyword } from '../lib/api';
import KeywordManager from '../components/KeywordManager';

const Routes: React.FC = () => {
  const [showCreateModal, setShowCreateModal] = useState(false);
  const [editingRoute, setEditingRoute] = useState<Route | null>(null);
  const queryClient = useQueryClient();

  const { data: routes, isLoading, error } = useQuery({
    queryKey: ['routes'],
    queryFn: () => apiClient.getRoutes(),
  });

  const { data: feeds } = useQuery({
    queryKey: ['feeds'],
    queryFn: () => apiClient.getFeeds(),
  });

  const { data: onboardingOptions } = useQuery({
    queryKey: ['onboarding-options'],
    queryFn: () => apiClient.getOnboardingOptions(),
  });

  const toggleMutation = useMutation({
    mutationFn: ({ feedId, channelId }: { feedId: number; channelId: number }) =>
      apiClient.toggleRoute(feedId, channelId),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['routes'] });
    },
  });

  const deleteMutation = useMutation({
    mutationFn: ({ feedId, channelId }: { feedId: number; channelId: number }) =>
      apiClient.deleteRoute(feedId, channelId),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['routes'] });
    },
  });

  const createMutation = useMutation({
    mutationFn: (data: RouteRequest) => apiClient.createRoute(data),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['routes'] });
      setShowCreateModal(false);
    },
  });

  const updateMutation = useMutation({
    mutationFn: ({ feedId, channelId, data }: { feedId: number; channelId: number; data: Partial<RouteRequest> }) =>
      apiClient.updateRoute(feedId, channelId, data),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['routes'] });
      setEditingRoute(null);
    },
  });

  const handleToggle = (route: Route) => {
    toggleMutation.mutate({ feedId: route.feed_id, channelId: route.platform_channel_id });
  };

  const handleDelete = (route: Route) => {
    if (confirm('Are you sure you want to delete this route?')) {
      deleteMutation.mutate({ feedId: route.feed_id, channelId: route.platform_channel_id });
    }
  };

  if (isLoading) {
    return (
      <div className="p-6">
        <div className="animate-pulse">
          <div className="h-8 bg-gray-200 rounded w-1/4 mb-6"></div>
          <div className="space-y-4">
            {[...Array(3)].map((_, i) => (
              <div key={i} className="bg-white p-6 rounded-lg shadow">
                <div className="h-4 bg-gray-200 rounded w-3/4 mb-2"></div>
                <div className="h-3 bg-gray-200 rounded w-1/2"></div>
              </div>
            ))}
          </div>
        </div>
      </div>
    );
  }

  if (error) {
    return (
      <div className="p-6">
        <div className="bg-red-50 border border-red-200 rounded-md p-4">
          <p className="text-red-600">Failed to load routes</p>
        </div>
      </div>
    );
  }

  return (
    <div className="p-6">
      <div className="mb-8 flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-gray-900">Routes</h1>
          <p className="mt-1 text-sm text-gray-500">
            Manage connections between your feeds and channels
          </p>
        </div>
        <button
          onClick={() => setShowCreateModal(true)}
          className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
        >
          <Plus className="h-4 w-4 mr-2" />
          Create Route
        </button>
      </div>

      <div className="space-y-6">
        {routes && routes.length > 0 ? (
          routes.map((route: Route) => (
            <div key={`${route.feed_id}-${route.platform_channel_id}`} className="bg-white rounded-lg shadow p-6">
              <div className="flex items-start justify-between">
                <div className="flex-1 min-w-0">
                  <div className="flex items-center space-x-3 mb-2">
                    <h3 className="text-lg font-medium text-gray-900">
                      {route.feed?.name} → {route.platform_channel?.display_name || route.platform_channel?.name}
                    </h3>
                    {route.is_active ? (
                      <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                        <CheckCircle className="h-3 w-3 mr-1" />
                        Active
                      </span>
                    ) : (
                      <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
                        <XCircle className="h-3 w-3 mr-1" />
                        Inactive
                      </span>
                    )}
                  </div>
                  <div className="flex items-center space-x-4 text-sm text-gray-600">
                    <span>Priority: {route.priority}</span>
                    <span>•</span>
                    <span>Feed: {route.feed?.name}</span>
                    <span>•</span>
                    <span>Channel: {route.platform_channel?.display_name || route.platform_channel?.name}</span>
                    <span>•</span>
                    <span>Created: {new Date(route.created_at).toLocaleDateString()}</span>
                  </div>
                  {route.platform_channel?.description && (
                    <p className="mt-2 text-sm text-gray-500">
                      {route.platform_channel.description}
                    </p>
                  )}
                  {route.keywords && route.keywords.length > 0 && (
                    <div className="mt-3">
                      <div className="flex items-center space-x-2 mb-2">
                        <Tag className="h-4 w-4 text-gray-500" />
                        <span className="text-sm font-medium text-gray-700">Keywords</span>
                      </div>
                      <div className="flex flex-wrap gap-2">
                        {route.keywords.map((keyword) => (
                          <span
                            key={keyword.id}
                            className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
                              keyword.is_active
                                ? 'bg-blue-100 text-blue-800'
                                : 'bg-gray-100 text-gray-500'
                            }`}
                          >
                            {keyword.keyword}
                          </span>
                        ))}
                      </div>
                    </div>
                  )}
                  {(!route.keywords || route.keywords.length === 0) && (
                    <div className="mt-3 text-sm text-gray-400 italic">
                      No keyword filters - matches all articles
                    </div>
                  )}
                </div>
                <div className="flex items-center space-x-2 ml-4">
                  <button
                    onClick={() => setEditingRoute(route)}
                    className="p-2 text-gray-400 hover:text-gray-600 rounded-md"
                    title="Edit route"
                  >
                    <Edit2 className="h-4 w-4" />
                  </button>
                  <button
                    onClick={() => handleToggle(route)}
                    disabled={toggleMutation.isPending}
                    className="p-2 text-gray-400 hover:text-gray-600 rounded-md"
                    title={route.is_active ? 'Deactivate route' : 'Activate route'}
                  >
                    {route.is_active ? (
                      <ToggleRight className="h-4 w-4 text-green-600" />
                    ) : (
                      <ToggleLeft className="h-4 w-4" />
                    )}
                  </button>
                  <button
                    onClick={() => handleDelete(route)}
                    disabled={deleteMutation.isPending}
                    className="p-2 text-gray-400 hover:text-red-600 rounded-md"
                    title="Delete route"
                  >
                    <Trash2 className="h-4 w-4" />
                  </button>
                </div>
              </div>
            </div>
          ))
        ) : (
          <div className="text-center py-12">
            <div className="mx-auto h-12 w-12 text-gray-400">
              <ExternalLink className="h-12 w-12" />
            </div>
            <h3 className="mt-2 text-sm font-medium text-gray-900">No routes</h3>
            <p className="mt-1 text-sm text-gray-500">
              Get started by creating a new route to connect feeds with channels.
            </p>
            <div className="mt-6">
              <button
                onClick={() => setShowCreateModal(true)}
                className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
              >
                <Plus className="h-4 w-4 mr-2" />
                Create Route
              </button>
            </div>
          </div>
        )}
      </div>

      {/* Create Route Modal */}
      {showCreateModal && (
        <CreateRouteModal
          feeds={feeds || []}
          channels={onboardingOptions?.platform_channels || []}
          onClose={() => setShowCreateModal(false)}
          onSubmit={(data) => createMutation.mutate(data)}
          isLoading={createMutation.isPending}
        />
      )}

      {/* Edit Route Modal */}
      {editingRoute && (
        <EditRouteModal
          route={editingRoute}
          onClose={() => setEditingRoute(null)}
          onSubmit={(data) => updateMutation.mutate({
            feedId: editingRoute.feed_id,
            channelId: editingRoute.platform_channel_id,
            data
          })}
          isLoading={updateMutation.isPending}
        />
      )}
    </div>
  );
};

interface CreateRouteModalProps {
  feeds: Feed[];
  channels: PlatformChannel[];
  onClose: () => void;
  onSubmit: (data: RouteRequest) => void;
  isLoading: boolean;
}

const CreateRouteModal: React.FC<CreateRouteModalProps> = ({ feeds, channels, onClose, onSubmit, isLoading }) => {
  const [formData, setFormData] = useState<RouteRequest>({
    feed_id: 0,
    platform_channel_id: 0,
    priority: 50,
  });

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    onSubmit(formData);
  };

  return (
    <div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
      <div className="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
        <div className="mt-3">
          <h3 className="text-lg font-medium text-gray-900 mb-4">Create New Route</h3>
          <form onSubmit={handleSubmit} className="space-y-4">
            <div>
              <label htmlFor="feed_id" className="block text-sm font-medium text-gray-700 mb-1">
                Feed
              </label>
              <select
                id="feed_id"
                value={formData.feed_id || ''}
                onChange={(e) => setFormData(prev => ({ ...prev, feed_id: parseInt(e.target.value) }))}
                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                required
              >
                <option value="">Select a feed</option>
                {feeds.map((feed) => (
                  <option key={feed.id} value={feed.id}>
                    {feed.name}
                  </option>
                ))}
              </select>
            </div>

            <div>
              <label htmlFor="platform_channel_id" className="block text-sm font-medium text-gray-700 mb-1">
                Channel
              </label>
              <select
                id="platform_channel_id"
                value={formData.platform_channel_id || ''}
                onChange={(e) => setFormData(prev => ({ ...prev, platform_channel_id: parseInt(e.target.value) }))}
                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                required
              >
                <option value="">Select a channel</option>
                {channels.map((channel) => (
                  <option key={channel.id} value={channel.id}>
                    {channel.display_name || channel.name}
                  </option>
                ))}
              </select>
            </div>

            <div>
              <label htmlFor="priority" className="block text-sm font-medium text-gray-700 mb-1">
                Priority
              </label>
              <input
                type="number"
                id="priority"
                min="0"
                value={formData.priority || 50}
                onChange={(e) => setFormData(prev => ({ ...prev, priority: parseInt(e.target.value) }))}
                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
              />
              <p className="text-sm text-gray-500 mt-1">Higher priority routes are processed first</p>
            </div>

            <div className="flex justify-end space-x-3 pt-4">
              <button
                type="button"
                onClick={onClose}
                className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
              >
                Cancel
              </button>
              <button
                type="submit"
                disabled={isLoading}
                className="px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50"
              >
                {isLoading ? 'Creating...' : 'Create Route'}
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  );
};

interface EditRouteModalProps {
  route: Route;
  onClose: () => void;
  onSubmit: (data: Partial<RouteRequest>) => void;
  isLoading: boolean;
}

const EditRouteModal: React.FC<EditRouteModalProps> = ({ route, onClose, onSubmit, isLoading }) => {
  const [priority, setPriority] = useState(route.priority || 50);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    onSubmit({ priority });
  };

  return (
    <div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
      <div className="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white max-h-[80vh] overflow-y-auto">
        <div className="mt-3">
          <h3 className="text-lg font-medium text-gray-900 mb-4">Edit Route</h3>
          <div className="mb-4 p-3 bg-gray-50 rounded-md">
            <p className="text-sm text-gray-600">
              <strong>Feed:</strong> {route.feed?.name}
            </p>
            <p className="text-sm text-gray-600">
              <strong>Channel:</strong> {route.platform_channel?.display_name || route.platform_channel?.name}
            </p>
          </div>
          <form onSubmit={handleSubmit} className="space-y-4">
            <div>
              <label htmlFor="priority" className="block text-sm font-medium text-gray-700 mb-1">
                Priority
              </label>
              <input
                type="number"
                id="priority"
                min="0"
                value={priority}
                onChange={(e) => setPriority(parseInt(e.target.value))}
                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
              />
              <p className="text-sm text-gray-500 mt-1">Higher priority routes are processed first</p>
            </div>

            <div className="border-t pt-4">
              <KeywordManager
                feedId={route.feed_id}
                channelId={route.platform_channel_id}
                keywords={route.keywords || []}
                onKeywordChange={() => {
                  // Keywords will be refreshed via React Query invalidation
                }}
              />
            </div>

            <div className="flex justify-end space-x-3 pt-4 border-t">
              <button
                type="button"
                onClick={onClose}
                className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
              >
                Cancel
              </button>
              <button
                type="submit"
                disabled={isLoading}
                className="px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50"
              >
                {isLoading ? 'Updating...' : 'Update Route'}
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  );
};

export default Routes;