SurfSense/surfsense_web/components/editConnector/EditGitHubConnectorConfig.tsx

import React from 'react';
import { UseFormReturn } from 'react-hook-form';
import { FormField, FormItem, FormLabel, FormControl, FormDescription, FormMessage } from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { Skeleton } from "@/components/ui/skeleton";
import { Edit, KeyRound, Loader2, CircleAlert } from 'lucide-react';

// Types needed from parent
interface GithubRepo {
    id: number;
    name: string;
    full_name: string;
    private: boolean;
    url: string;
    description: string | null;
    last_updated: string | null;
}
type GithubPatFormValues = { github_pat: string; };
type EditMode = 'viewing' | 'editing_repos';

interface EditGitHubConnectorConfigProps {
    // State from parent
    editMode: EditMode;
    originalPat: string;
    currentSelectedRepos: string[];
    fetchedRepos: GithubRepo[] | null;
    newSelectedRepos: string[];
    isFetchingRepos: boolean;
    // Forms from parent
    patForm: UseFormReturn<GithubPatFormValues>;
    // Handlers from parent
    setEditMode: (mode: EditMode) => void;
    handleFetchRepositories: (values: GithubPatFormValues) => Promise<void>;
    handleRepoSelectionChange: (repoFullName: string, checked: boolean) => void;
    setNewSelectedRepos: React.Dispatch<React.SetStateAction<string[]>>;
    setFetchedRepos: React.Dispatch<React.SetStateAction<GithubRepo[] | null>>;
}

export function EditGitHubConnectorConfig({
    editMode,
    originalPat,
    currentSelectedRepos,
    fetchedRepos,
    newSelectedRepos,
    isFetchingRepos,
    patForm,
    setEditMode,
    handleFetchRepositories,
    handleRepoSelectionChange,
    setNewSelectedRepos,
    setFetchedRepos
}: EditGitHubConnectorConfigProps) {

    return (
        <div className="space-y-4">
            <h4 className="font-medium text-muted-foreground">Repository Selection & Access</h4>

            {/* Viewing Mode */}
            {editMode === 'viewing' && (
                <div className="space-y-3 p-4 border rounded-md bg-muted/50">
                    <FormLabel>Currently Indexed Repositories:</FormLabel>
                    {currentSelectedRepos.length > 0 ? (
                        <ul className="list-disc pl-5 text-sm">
                            {currentSelectedRepos.map(repo => <li key={repo}>{repo}</li>)}
                        </ul>
                    ) : (
                        <p className="text-sm text-muted-foreground">(No repositories currently selected)</p>
                    )}
                    <Button type="button" variant="outline" size="sm" onClick={() => setEditMode('editing_repos')}>
                        <Edit className="mr-2 h-4 w-4" /> Change Selection / Update PAT
                    </Button>
                    <FormDescription>To change repo selections or update the PAT, click above.</FormDescription>
                </div>
            )}

            {/* Editing Mode */}
            {editMode === 'editing_repos' && (
                <div className="space-y-4 p-4 border rounded-md">
                    {/* PAT Input */}
                    <div className="flex items-end gap-4 p-4 border rounded-md bg-muted/90">
                        <FormField
                            control={patForm.control}
                            name="github_pat"
                            render={({ field }) => (
                                <FormItem className="flex-grow">
                                    <FormLabel className="flex items-center gap-1"><KeyRound className="h-4 w-4" /> GitHub PAT</FormLabel>
                                    <FormControl><Input type="password" placeholder="ghp_... or github_pat_..." {...field} /></FormControl>
                                    <FormDescription>Enter PAT to fetch/update repos or if you need to update the stored token.</FormDescription>
                                    <FormMessage />
                                </FormItem>
                            )}
                        />
                        <Button
                            type="button"
                            disabled={isFetchingRepos}
                            size="sm"
                            onClick={async () => {
                                const isValid = await patForm.trigger('github_pat');
                                if (isValid) {
                                    handleFetchRepositories(patForm.getValues());
                                }
                            }}
                        >
                            {isFetchingRepos ? <Loader2 className="h-4 w-4 animate-spin" /> : "Fetch Repositories"}
                        </Button>
                    </div>

                    {/* Repo List */}
                    {isFetchingRepos && <Skeleton className="h-40 w-full" />}
                    {!isFetchingRepos && fetchedRepos !== null && (
                        fetchedRepos.length === 0 ? (
                            <Alert variant="destructive">
                                <CircleAlert className="h-4 w-4" />
                                <AlertTitle>No Repositories Found</AlertTitle>
                                <AlertDescription>Check PAT & permissions.</AlertDescription>
                            </Alert>
                        ) : (
                            <div className="space-y-2">
                                <FormLabel>Select Repositories to Index ({newSelectedRepos.length} selected):</FormLabel>
                                <div className="h-64 w-full rounded-md border p-4 overflow-y-auto">
                                    {fetchedRepos.map((repo) => (
                                        <div key={repo.id} className="flex items-center space-x-2 mb-2 py-1">
                                            <Checkbox
                                                id={`repo-${repo.id}`}
                                                checked={newSelectedRepos.includes(repo.full_name)}
                                                onCheckedChange={(checked) => handleRepoSelectionChange(repo.full_name, !!checked)}
                                            />
                                            <label
                                                htmlFor={`repo-${repo.id}`}
                                                className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                                            >
                                                {repo.full_name} {repo.private && "(Private)"}
                                            </label>
                                        </div>
                                    ))}
                                </div>
                            </div>
                        )
                    )}
                    <Button
                        type="button"
                        variant="ghost"
                        size="sm"
                        onClick={() => {
                            setEditMode('viewing');
                            setFetchedRepos(null);
                            setNewSelectedRepos(currentSelectedRepos);
                            patForm.reset({ github_pat: originalPat }); // Reset PAT form on cancel
                        }}
                    >
                        Cancel Repo Change
                    </Button>
                </div>
            )}
        </div>
    );
}