import { useQuery } from '@tanstack/react-query';
import { Globe, Loader2, X, Eye } from 'lucide-react';
import { toast } from 'sonner';
import { useClient } from 'hooks/useClient';
import { useGlobal } from 'hooks/useGlobal';

type Target = {
  id: string;
  sessionId: string;
  type: string;
  title: string;
  url: string;
};

export const TabList = () => {
  const client = useClient();
  const [selectedId, setSelectedId] = useGlobal<string | null>('BROWSER_SELECTED_TAB', null);

  const { data: status } = useQuery({
    queryKey: ['browser-status'],
    queryFn: () => client.get<{ extensionConnected: boolean; targetCount: number }>('/browser/status'),
    refetchInterval: 5000,
  });

  const { data: targets, isLoading } = useQuery({
    queryKey: ['browser-targets'],
    queryFn: () => client.get<Target[]>('/browser/targets'),
    refetchInterval: 3000,
    enabled: !!status?.extensionConnected,
  });

  const targetList: Target[] = targets ?? [];

  const handleClose = async (targetId: string) => {
    try {
      await client.post(`/browser/targets/${targetId}/close`);
    } catch {
      toast.error('Failed to close tab');
    }
  };

  const handleActivate = async (targetId: string) => {
    try {
      await client.post(`/browser/targets/${targetId}/activate`);
    } catch {
      toast.error('Failed to activate tab');
    }
  };

  const isConnected = status?.extensionConnected ?? false;

  return (
    <div className="flex h-full flex-col overflow-y-auto">
      <div className="flex items-center gap-2 border-b px-3 py-2">
        <Globe className="h-4 w-4 opacity-60" />
        <span className="text-sm font-medium">Browser</span>
        <div
          className={`ml-auto h-2 w-2 rounded-full ${isConnected ? 'bg-green-500' : 'bg-red-500'}`}
          title={isConnected ? 'Extension connected' : 'Extension not connected'}
        />
      </div>

      {!isConnected && (
        <div className="flex flex-col items-center justify-center gap-3 p-4 text-sm flex-1">
          <Globe className="h-8 w-8 opacity-30" />
          <p className="opacity-60 text-center">Extension not connected</p>
          <a
            href="/settings/integrations"
            className="text-xs text-duck-teal underline"
          >
            Set up in Integrations
          </a>
        </div>
      )}

      {isConnected && isLoading && (
        <div className="flex h-32 items-center justify-center">
          <Loader2 className="h-5 w-5 animate-spin opacity-50" />
        </div>
      )}

      {isConnected && !isLoading && targetList.length === 0 && (
        <div className="flex h-32 flex-col items-center justify-center gap-2 text-sm opacity-50">
          <Globe className="h-6 w-6" />
          <span>No tabs attached</span>
          <span className="text-xs">Click the extension icon on a tab</span>
        </div>
      )}

      {isConnected && targetList.length > 0 && (
        <div className="flex flex-1 flex-col divide-y divide-white/10">
          {targetList.map((target) => (
            <button
              key={target.id}
              onClick={() => setSelectedId(target.id)}
              className={`group flex flex-col gap-0.5 px-3 py-2.5 text-left transition-colors cursor-pointer ${
                selectedId === target.id ? 'bg-accent' : 'hover:bg-accent/50'
              }`}
            >
              <div className="flex items-center gap-2">
                <span className="truncate text-sm font-medium">{target.title || 'Untitled'}</span>
                <div className="ml-auto flex shrink-0 items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100">
                  <button
                    onClick={(ev) => {
                      ev.stopPropagation();
                      handleActivate(target.id);
                    }}
                    className="rounded p-0.5 hover:bg-black/10"
                    title="Focus tab"
                  >
                    <Eye className="h-3.5 w-3.5" />
                  </button>
                  <button
                    onClick={(ev) => {
                      ev.stopPropagation();
                      handleClose(target.id);
                    }}
                    className="rounded p-0.5 hover:bg-black/10"
                    title="Close tab"
                  >
                    <X className="h-3.5 w-3.5" />
                  </button>
                </div>
              </div>
              <span className="truncate text-xs opacity-50">{target.url}</span>
            </button>
          ))}
        </div>
      )}
    </div>
  );
};
