'use client';

import { useState } from 'react';

interface Group {
  id: string;
  name: string;
  platform: string;
}

interface Route {
  id: string;
  sourceGroupId: string;
  targetGroupId: string;
  sourceGroup: { name: string };
  targetGroup: { name: string };
}

export function RouteManager({
  groups,
  initialRoutes,
}: {
  groups: Group[];
  initialRoutes: Route[];
}) {
  const [routes, setRoutes] = useState<Route[]>(initialRoutes);
  const [sourceId, setSourceId] = useState('');
  const [targetId, setTargetId] = useState('');
  const [busy, setBusy] = useState(false);

  async function addRoute() {
    if (!sourceId || !targetId) return;
    setBusy(true);
    try {
      const res = await fetch('/api/routes', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ sourceGroupId: sourceId, targetGroupId: targetId }),
      });
      if (!res.ok) return;
      const created: Route = await res.json();
      setRoutes((prev) => [created, ...prev]);
      setSourceId('');
      setTargetId('');
    } finally {
      setBusy(false);
    }
  }

  async function deleteRoute(id: string) {
    const res = await fetch(`/api/routes/${id}`, { method: 'DELETE' });
    if (res.ok) setRoutes((prev) => prev.filter((r) => r.id !== id));
  }

  return (
    <div className="flex flex-col gap-6">
      <section>
        <h2 className="text-base font-semibold mb-3">Active sync routes</h2>
        {routes.length === 0 ? (
          <p className="text-sm text-gray-400">No routes configured.</p>
        ) : (
          <ul className="flex flex-col gap-2">
            {routes.map((route) => (
              <li
                key={route.id}
                className="flex items-center justify-between rounded-lg border border-gray-200 bg-white px-4 py-3"
              >
                <span className="text-sm">
                  <span className="font-medium">{route.sourceGroup.name}</span>
                  <span className="mx-2 text-gray-400">→</span>
                  <span className="font-medium">{route.targetGroup.name}</span>
                </span>
                <button
                  onClick={() => deleteRoute(route.id)}
                  className="text-xs text-red-500 hover:underline"
                  aria-label="Delete route"
                >
                  Delete
                </button>
              </li>
            ))}
          </ul>
        )}
      </section>

      <section>
        <h2 className="text-base font-semibold mb-3">Add route</h2>
        <div className="flex gap-2 items-center flex-wrap">
          <select
            value={sourceId}
            onChange={(e) => setSourceId(e.target.value)}
            className="rounded-lg border border-gray-200 px-3 py-2 text-sm"
            aria-label="Source group"
          >
            <option value="">Source group…</option>
            {groups.map((g) => (
              <option key={g.id} value={g.id}>{g.name}</option>
            ))}
          </select>
          <span className="text-gray-400">→</span>
          <select
            value={targetId}
            onChange={(e) => setTargetId(e.target.value)}
            className="rounded-lg border border-gray-200 px-3 py-2 text-sm"
            aria-label="Target group"
          >
            <option value="">Target group…</option>
            {groups.map((g) => (
              <option key={g.id} value={g.id}>{g.name}</option>
            ))}
          </select>
          <button
            onClick={addRoute}
            disabled={!sourceId || !targetId || busy}
            className="rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 disabled:opacity-50"
          >
            Add route
          </button>
        </div>
      </section>
    </div>
  );
}