"use client"

import React, { useState } from "react";
import { GoogleDrivePicker } from "@/components/google-drive-picker"
import { useTask } from "@/contexts/task-context"

interface GoogleDriveFile {
  id: string;
  name: string;
  mimeType: string;
  webViewLink?: string;
  iconLink?: string;
}

export default function ConnectorsPage() {
  const { addTask } = useTask()
  const [selectedFiles, setSelectedFiles] = useState<GoogleDriveFile[]>([]);
  const [isSyncing, setIsSyncing] = useState<boolean>(false);
  const [syncResult, setSyncResult] = useState<{
    processed?: number;
    total?: number;
    status?: string;
    error?: string;
    added?: number;
    errors?: number;
  } | null>(null);

  const handleFileSelection = (files: GoogleDriveFile[]) => {
    setSelectedFiles(files);
  };

  const handleSync = async (connector: { connectionId: string, type: string }) => {
    if (!connector.connectionId || selectedFiles.length === 0) return
    
    setIsSyncing(true)
    setSyncResult(null)
    
    try {
      const syncBody: {
        connection_id: string;
        max_files?: number;
        selected_files?: string[];
      } = {
        connection_id: connector.connectionId,
        selected_files: selectedFiles.map(file => file.id)
      }
      
      const response = await fetch(`/api/connectors/${connector.type}/sync`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(syncBody),
      })
      
      const result = await response.json()
      
      if (response.status === 201) {
        const taskId = result.task_id
        if (taskId) {
          addTask(taskId)
          setSyncResult({ 
            processed: 0, 
            total: selectedFiles.length,
            status: 'started'
          })
        }
      } else if (response.ok) {
        setSyncResult(result)
      } else {
        console.error('Sync failed:', result.error)
        setSyncResult({ error: result.error || 'Sync failed' })
      }
    } catch (error) {
      console.error('Sync error:', error)
      setSyncResult({ error: 'Network error occurred' })
    } finally {
      setIsSyncing(false)
    }
  };

  return (
    <div className="p-6">
      <h1 className="text-2xl font-bold mb-4">Connectors</h1>
      
      <div className="mb-6">
        <p className="text-sm text-gray-600 mb-4">
          This is a demo page for the Google Drive picker component. 
          For full connector functionality, visit the Settings page.
        </p>
        
        <GoogleDrivePicker 
          onFileSelected={handleFileSelection}
          selectedFiles={selectedFiles}
          isAuthenticated={false} // This would come from auth context in real usage
          accessToken={undefined} // This would come from connected account
        />
      </div>

      {selectedFiles.length > 0 && (
        <div className="space-y-4">
          <button 
            onClick={() => handleSync({ connectionId: "google-drive-connection-id", type: "google-drive" })}
            disabled={isSyncing}
            className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed"
          >
            {isSyncing ? (
              <>Syncing {selectedFiles.length} Selected Items...</>
            ) : (
              <>Sync {selectedFiles.length} Selected Items</>
            )}
          </button>
          
          {syncResult && (
            <div className="p-3 bg-gray-100 rounded text-sm">
              {syncResult.error ? (
                <div className="text-red-600">Error: {syncResult.error}</div>
              ) : syncResult.status === 'started' ? (
                <div className="text-blue-600">
                  Sync started for {syncResult.total} files. Check the task notification for progress.
                </div>
              ) : (
                <div className="text-green-600">
                  <div>Processed: {syncResult.processed || 0}</div>
                  <div>Added: {syncResult.added || 0}</div>
                  {syncResult.errors && <div>Errors: {syncResult.errors}</div>}
                </div>
              )}
            </div>
          )}
        </div>
      )}
    </div>
  );
}