apps/canvas/front/src/Integrations.tsx

import { useProjectId, useGithubService, useStateStore } from '@/lib/state';
import { Form, FormControl, FormField, FormItem, FormMessage } from './components/ui/form';
import { Input } from './components/ui/input';
import { useForm } from 'react-hook-form';
import { z } from 'zod';
import { zodResolver } from '@hookform/resolvers/zod';
import { Button } from './components/ui/button';
import { useToast } from '@/hooks/use-toast';
import { Checkbox } from './components/ui/checkbox';
import { useState, useCallback } from 'react';

const schema = z.object({
    githubToken: z.string().min(1, "GitHub token is required"),
});

export function Integrations() {
    const { toast } = useToast();
    const store = useStateStore();
    const projectId = useProjectId();
    const [isEditing, setIsEditing] = useState(false);
    const githubService = useGithubService();
    const [isSaving, setIsSaving] = useState(false);

    const form = useForm<z.infer<typeof schema>>({
        resolver: zodResolver(schema),
        mode: "onChange",
    });

    const onSubmit = useCallback(async (data: z.infer<typeof schema>) => {
        if (!projectId) return;

        setIsSaving(true);

        try {
            const response = await fetch(`/api/project/${projectId}/github-token`, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                },
                body: JSON.stringify({ githubToken: data.githubToken }),
            });

            if (!response.ok) {
                throw new Error("Failed to save GitHub token");
            }

            await store.refreshEnv();
            setIsEditing(false);
            form.reset();
            toast({
                title: "GitHub token saved successfully",
            });
        } catch (error) {
            toast({
                variant: "destructive",
                title: "Failed to save GitHub token",
                description: error instanceof Error ? error.message : "Unknown error",
            });
        } finally {
            setIsSaving(false);
        }
    }, [projectId, store, form, toast, setIsEditing, setIsSaving]);

    const handleCancel = () => {
        setIsEditing(false);
        form.reset();
    };

    return (
        <div className="px-5 space-y-6">
            <div>
                <h3 className="text-md font-medium mb-2">GitHub</h3>
                <div className="space-y-4">
                    <div className="flex items-center space-x-2">
                        <Checkbox checked={!!githubService} disabled />
                        <label className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
                            GitHub Access Token
                        </label>
                    </div>

                    {!!githubService && !isEditing && (
                        <Button
                            variant="outline"
                            onClick={() => setIsEditing(true)}
                        >
                            Update Access Token
                        </Button>
                    )}

                    {(!githubService || isEditing) && (
                        <Form {...form}>
                            <form className="space-y-4" onSubmit={form.handleSubmit(onSubmit)}>
                                <FormField
                                    control={form.control}
                                    name="githubToken"
                                    render={({ field }) => (
                                        <FormItem>
                                            <FormControl>
                                                <Input
                                                    type="password"
                                                    placeholder="GitHub Personal Access Token"
                                                    className="border border-black"
                                                    {...field}
                                                />
                                            </FormControl>
                                            <FormMessage />
                                        </FormItem>
                                    )}
                                />
                                <div className="flex space-x-2">
                                    <Button type="submit" disabled={isSaving}>
                                        {isSaving ? "Saving..." : "Save"}
                                    </Button>
                                    {!!githubService && (
                                        <Button
                                            type="button"
                                            variant="outline"
                                            onClick={handleCancel}
                                            disabled={isSaving}
                                        >
                                            Cancel
                                        </Button>
                                    )}
                                </div>
                            </form>
                        </Form>
                    )}
                </div>
            </div>
        </div>
    );
}