"use client";
import React, { useCallback } from "react";
import { Form } from "react-compose-form";
import { toast } from "sonner";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { FormReset } from "@/components/form/form-reset";
import { FormSubmit } from "@/components/form/form-submit";
import { InputControl } from "@/components/form/control/input.control";
import { SelectControl } from "@/components/form/control/select.control";
import { SelectContent, SelectItem, SelectValue, SelectTrigger } from "@/components/ui/select";
import { Card, CardContent, CardHeader } from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
import { api } from "@/lib/trpc/client";
import { SiteConfigValidator } from "@/server/modules/site-config/validators/site-config.validator";
import Link from "next/link";
import { SiteConfigKey } from "@/server/modules/site-config/enums";
import { useTranslations } from "next-intl";

const defaultConfig = {
    [SiteConfigKey.HOME_LAYOUT]: "default",
    [SiteConfigKey.FACEBOOK_PAGE_SUBSCRIBERS_TOTAL]: "0",
    [SiteConfigKey.NEWSLETTER_SUBSCRIBERS_TOTAL]: "0",

    [SiteConfigKey.FACEBOOK_APP_ID]: "",
    [SiteConfigKey.FACEBOOK_APP_SECRET]: "",
    [SiteConfigKey.MAILCHIMP_API_KEY]: "",
    [SiteConfigKey.MAILCHIMP_LIST_ID]: "",
    [SiteConfigKey.GOOGLE_ADS_ID]: "",

    // Basic Meta Tags
    [SiteConfigKey.META_BASIC_TITLE]: "[node:title] | [site:name]",
    [SiteConfigKey.META_BASIC_DESCRIPTION]: "[node:field_underrubrik]",
    [SiteConfigKey.META_BASIC_ABSTRACT]: "",
    [SiteConfigKey.META_BASIC_KEYWORDS]: "",

    // Schema.org Article
    [SiteConfigKey.META_SCHEMA_TYPE]: "Article",
    [SiteConfigKey.META_SCHEMA_HEADLINE]: "[node:title]",
    [SiteConfigKey.META_SCHEMA_NAME]: "[node:title]",
    [SiteConfigKey.META_SCHEMA_DESCRIPTION]: "[node:field_underrubrik]",
    [SiteConfigKey.META_SCHEMA_DATE_PUBLISHED]: "[node:datePublished]",
    [SiteConfigKey.META_SCHEMA_DATE_MODIFIED]: "[node:dateModified]",
    [SiteConfigKey.META_SCHEMA_ABOUT]: "",
    [SiteConfigKey.META_SCHEMA_MAIN_ENTITY]: "[node:url]",
    [SiteConfigKey.META_SCHEMA_IS_ACCESSIBLE_FREE]: "true",
    [SiteConfigKey.META_SCHEMA_AUTHOR_TYPE]: "Person",
    [SiteConfigKey.META_SCHEMA_AUTHOR_NAME]: "[node:author]",
    [SiteConfigKey.META_SCHEMA_AUTHOR_URL]: "",
    [SiteConfigKey.META_SCHEMA_PUBLISHER_TYPE]: "Organization",
    [SiteConfigKey.META_SCHEMA_PUBLISHER_NAME]: "[site:name]",
    [SiteConfigKey.META_SCHEMA_PUBLISHER_URL]: "",
    [SiteConfigKey.META_SCHEMA_PUBLISHER_LOGO_URL]: "",
    [SiteConfigKey.META_SCHEMA_IMAGE_URL]: "[node:image]",
    [SiteConfigKey.META_SCHEMA_IMAGE_WIDTH]: "800",
    [SiteConfigKey.META_SCHEMA_IMAGE_HEIGHT]: "640",
    [SiteConfigKey.META_SCHEMA_HAS_PART_TYPE]: "WebPageElement",
    [SiteConfigKey.META_SCHEMA_HAS_PART_CSS_SELECTOR]: "",
    [SiteConfigKey.META_SCHEMA_SPEAKABLE_CSS_SELECTOR]: "",
    [SiteConfigKey.META_SCHEMA_SPEAKABLE_XPATH]: "",

    // Open Graph
    [SiteConfigKey.META_OG_TITLE]: "[node:title]",
    [SiteConfigKey.META_OG_DESCRIPTION]: "[node:field_underrubrik]",
    [SiteConfigKey.META_OG_URL]: "[node:url]",
    [SiteConfigKey.META_OG_TYPE]: "article",
    [SiteConfigKey.META_OG_SITE_NAME]: "[site:name]",
    [SiteConfigKey.META_OG_LOCALE]: "da_DK",
    [SiteConfigKey.META_OG_LOCALE_ALTERNATE]: "",
    [SiteConfigKey.META_OG_UPDATED_TIME]: "[node:dateModified]",
    [SiteConfigKey.META_OG_IMAGE_URL]: "[node:image]",
    [SiteConfigKey.META_OG_IMAGE_WIDTH]: "1200",
    [SiteConfigKey.META_OG_IMAGE_HEIGHT]: "630",
    [SiteConfigKey.META_OG_ARTICLE_AUTHOR]: "[node:author]",
    [SiteConfigKey.META_OG_ARTICLE_PUBLISHED_TIME]: "[node:datePublished]",
    [SiteConfigKey.META_OG_ARTICLE_MODIFIED_TIME]: "[node:dateModified]",
    [SiteConfigKey.META_OG_ARTICLE_TAG]: "[node:tags]",

    // Legacy
    [SiteConfigKey.META_SITE_NAME]: "Magasinet KBH",
    [SiteConfigKey.META_SITE_URL]: "https://magasinetkbh.dk",
    [SiteConfigKey.META_SITE_LOGO]: "https://magasinetkbh.dk/logo.png",
    [SiteConfigKey.META_SITE_DESCRIPTION]: "Copenhagen magazine covering culture, events, and city life",
    [SiteConfigKey.META_SITE_LANGUAGE]: "da",
    [SiteConfigKey.META_FB_ADMINS]: "",
    [SiteConfigKey.META_FB_APP_ID]: "",
    [SiteConfigKey.META_FB_PAGES]: "",
    [SiteConfigKey.META_TWITTER_SITE]: "@magasinetkbh",
    [SiteConfigKey.META_TWITTER_CREATOR]: "@magasinetkbh",
    [SiteConfigKey.META_DC_PUBLISHER]: "Magasinet KBH",
    [SiteConfigKey.META_DC_RIGHTS]: "",
    [SiteConfigKey.META_DC_FORMAT]: "text/html",
    [SiteConfigKey.META_DC_TITLE]: "[node:title]",
    [SiteConfigKey.META_DC_DESCRIPTION]: "[node:field_underrubrik]",
    [SiteConfigKey.META_DC_DATE]: "[node:datePublished]",
    [SiteConfigKey.META_DC_CREATOR]: "[node:author]"
} as z.infer<typeof SiteConfigValidator>;

export const ConfigEditor: React.FC = () => {
    const { data: config } = api.siteConfig.values.useQuery();
    const t = useTranslations('dashboard.config')
    const utils = api.useUtils();
    const updateMutation = api.siteConfig.update.useMutation({
        async onSuccess() {
            toast.success("Configuration updated");
            await utils.siteConfig.values.invalidate();
        },
        onError(error) {
            toast.error(error.message || "Failed to update configuration");
        }
    });

    const handleSubmit = useCallback(
        async (data: z.infer<typeof SiteConfigValidator>) => {
            await updateMutation.mutateAsync(data);
        },
        [updateMutation]
    );

    return (
        <Form<z.infer<typeof SiteConfigValidator>>
            className="flex gap-6"
            resolver={zodResolver(SiteConfigValidator)}
            values={{ ...defaultConfig, ...config }}
            onSubmit={handleSubmit}
        >
            <div className="max-w-4xl flex-1">
                <Tabs defaultValue="general" className="w-full">
                    <TabsList className="grid w-full grid-cols-3">
                        <TabsTrigger value="general">{t('tabs.general')}</TabsTrigger>
                        <TabsTrigger value="meta">{t('tabs.meta')}</TabsTrigger>
                        <TabsTrigger value="integrations">{t('tabs.integrations')}</TabsTrigger>
                    </TabsList>

                    <TabsContent value="general" className="mt-4">
                        <div className="flex flex-col gap-4 px-4">
                            <Card className="shadow-none">
                                <CardContent className="pt-6">
                                    <div className="space-y-4">
                                        <SelectControl label="Home Layout" name={SiteConfigKey.HOME_LAYOUT}>
                                            <SelectTrigger className="w-full capitalize">
                                                <SelectValue placeholder="Select layout" />
                                            </SelectTrigger>
                                            <SelectContent>
                                                <SelectItem value="default">Default</SelectItem>
                                                <SelectItem value="compact">Compact</SelectItem>
                                            </SelectContent>
                                        </SelectControl>

                                        <InputControl
                                            label="Facebook Page Subscribers Total"
                                            name={SiteConfigKey.FACEBOOK_PAGE_SUBSCRIBERS_TOTAL}
                                            type="number"
                                        />

                                        <InputControl
                                            label="Newsletter Subscribers Total"
                                            name={SiteConfigKey.NEWSLETTER_SUBSCRIBERS_TOTAL}
                                            type="number"
                                        />
                                    </div>
                                </CardContent>
                            </Card>
                        </div>
                    </TabsContent>

                    <TabsContent value="meta" className="mt-4">
                        <div className="px-4">
                            <Accordion type="multiple" defaultValue={["site"]} className="w-full">
                                <AccordionItem value="site">
                                    <AccordionTrigger>Site</AccordionTrigger>
                                    <AccordionContent className="space-y-4">
                                        <InputControl label="Site Name" name={SiteConfigKey.META_SITE_NAME} />
                                        <InputControl label="Site URL" name={SiteConfigKey.META_SITE_URL} />
                                        <InputControl label="Site Logo URL" name={SiteConfigKey.META_SITE_LOGO} />
                                        <InputControl
                                            label="Site Description"
                                            name={SiteConfigKey.META_SITE_DESCRIPTION}
                                        />
                                        <InputControl
                                            label="Site Language (e.g. da)"
                                            name={SiteConfigKey.META_SITE_LANGUAGE}
                                        />
                                    </AccordionContent>
                                </AccordionItem>

                                <AccordionItem value="basic">
                                    <AccordionTrigger>Basic</AccordionTrigger>
                                    <AccordionContent className="space-y-4">
                                        <InputControl
                                            label="Title Template"
                                            name={SiteConfigKey.META_BASIC_TITLE}
                                            placeholder="[node:title] | [site:name]"
                                        />
                                        <InputControl
                                            label="Description Template"
                                            name={SiteConfigKey.META_BASIC_DESCRIPTION}
                                            placeholder="[node:field_underrubrik]"
                                        />
                                        <InputControl
                                            label="Abstract Template"
                                            name={SiteConfigKey.META_BASIC_ABSTRACT}
                                            placeholder="Optional abstract"
                                        />
                                        <InputControl
                                            label="Keywords Template"
                                            name={SiteConfigKey.META_BASIC_KEYWORDS}
                                            placeholder="keyword1, keyword2, keyword3"
                                        />
                                    </AccordionContent>
                                </AccordionItem>

                                <AccordionItem value="opengraph">
                                    <AccordionTrigger>Open Graph</AccordionTrigger>
                                    <AccordionContent className="space-y-6">
                                        <div>
                                            <h3 className="mb-3 text-sm font-medium">Basic</h3>
                                            <div className="space-y-4">
                                                <InputControl
                                                    label="Title Template"
                                                    name={SiteConfigKey.META_OG_TITLE}
                                                    placeholder="[node:title]"
                                                />
                                                <InputControl
                                                    label="Description Template"
                                                    name={SiteConfigKey.META_OG_DESCRIPTION}
                                                    placeholder="[node:field_underrubrik]"
                                                />
                                                <InputControl
                                                    label="URL Template"
                                                    name={SiteConfigKey.META_OG_URL}
                                                    placeholder="[node:url]"
                                                />
                                                <SelectControl label="Type" name={SiteConfigKey.META_OG_TYPE}>
                                                    <SelectTrigger className="w-full">
                                                        <SelectValue placeholder="Select type" />
                                                    </SelectTrigger>
                                                    <SelectContent>
                                                        <SelectItem value="article">article</SelectItem>
                                                        <SelectItem value="website">website</SelectItem>
                                                        <SelectItem value="profile">profile</SelectItem>
                                                    </SelectContent>
                                                </SelectControl>
                                                <InputControl
                                                    label="Site Name Template"
                                                    name={SiteConfigKey.META_OG_SITE_NAME}
                                                    placeholder="[site:name]"
                                                />
                                                <InputControl
                                                    label="Locale"
                                                    name={SiteConfigKey.META_OG_LOCALE}
                                                    placeholder="da_DK"
                                                />
                                                <InputControl
                                                    label="Locale Alternate"
                                                    name={SiteConfigKey.META_OG_LOCALE_ALTERNATE}
                                                    placeholder="Optional"
                                                />
                                                <InputControl
                                                    label="Updated Time Template"
                                                    name={SiteConfigKey.META_OG_UPDATED_TIME}
                                                    placeholder="[node:dateModified]"
                                                />
                                            </div>
                                        </div>
                                        <div>
                                            <h3 className="mb-3 text-sm font-medium">Image</h3>
                                            <div className="space-y-4">
                                                <InputControl
                                                    label="Image URL Template"
                                                    name={SiteConfigKey.META_OG_IMAGE_URL}
                                                    placeholder="[node:image]"
                                                />
                                                <InputControl
                                                    label="Image Width"
                                                    name={SiteConfigKey.META_OG_IMAGE_WIDTH}
                                                    placeholder="1200"
                                                    type="number"
                                                />
                                                <InputControl
                                                    label="Image Height"
                                                    name={SiteConfigKey.META_OG_IMAGE_HEIGHT}
                                                    placeholder="630"
                                                    type="number"
                                                />
                                            </div>
                                        </div>
                                        <div>
                                            <h3 className="mb-3 text-sm font-medium">Article</h3>
                                            <div className="space-y-4">
                                                <InputControl
                                                    label="Author Template"
                                                    name={SiteConfigKey.META_OG_ARTICLE_AUTHOR}
                                                    placeholder="[node:author]"
                                                />
                                                <InputControl
                                                    label="Published Time Template"
                                                    name={SiteConfigKey.META_OG_ARTICLE_PUBLISHED_TIME}
                                                    placeholder="[node:datePublished]"
                                                />
                                                <InputControl
                                                    label="Modified Time Template"
                                                    name={SiteConfigKey.META_OG_ARTICLE_MODIFIED_TIME}
                                                    placeholder="[node:dateModified]"
                                                />
                                                <InputControl
                                                    label="Tag Template"
                                                    name={SiteConfigKey.META_OG_ARTICLE_TAG}
                                                    placeholder="[node:tags]"
                                                />
                                            </div>
                                        </div>
                                    </AccordionContent>
                                </AccordionItem>

                                <AccordionItem value="schema">
                                    <AccordionTrigger>Schema.org</AccordionTrigger>
                                    <AccordionContent className="space-y-6">
                                        <div>
                                            <h3 className="mb-3 text-sm font-medium">Article</h3>
                                            <div className="space-y-4">
                                                <SelectControl label="Type" name={SiteConfigKey.META_SCHEMA_TYPE}>
                                                    <SelectTrigger className="w-full">
                                                        <SelectValue placeholder="Select type" />
                                                    </SelectTrigger>
                                                    <SelectContent>
                                                        <SelectItem value="Article">Article</SelectItem>
                                                        <SelectItem value="NewsArticle">NewsArticle</SelectItem>
                                                        <SelectItem value="BlogPosting">BlogPosting</SelectItem>
                                                        <SelectItem value="Report">Report</SelectItem>
                                                    </SelectContent>
                                                </SelectControl>
                                                <InputControl
                                                    label="Headline Template"
                                                    name={SiteConfigKey.META_SCHEMA_HEADLINE}
                                                    placeholder="[node:title]"
                                                />
                                                <InputControl
                                                    label="Name Template"
                                                    name={SiteConfigKey.META_SCHEMA_NAME}
                                                    placeholder="[node:title]"
                                                />
                                                <InputControl
                                                    label="Description Template"
                                                    name={SiteConfigKey.META_SCHEMA_DESCRIPTION}
                                                    placeholder="[node:field_underrubrik]"
                                                />
                                                <InputControl
                                                    label="Date Published Template"
                                                    name={SiteConfigKey.META_SCHEMA_DATE_PUBLISHED}
                                                    placeholder="[node:datePublished]"
                                                />
                                                <InputControl
                                                    label="Date Modified Template"
                                                    name={SiteConfigKey.META_SCHEMA_DATE_MODIFIED}
                                                    placeholder="[node:dateModified]"
                                                />
                                                <InputControl
                                                    label="About Template"
                                                    name={SiteConfigKey.META_SCHEMA_ABOUT}
                                                    placeholder="Optional"
                                                />
                                                <InputControl
                                                    label="Main Entity Template"
                                                    name={SiteConfigKey.META_SCHEMA_MAIN_ENTITY}
                                                    placeholder="[node:url]"
                                                />
                                                <SelectControl
                                                    label="Is Accessible For Free"
                                                    name={SiteConfigKey.META_SCHEMA_IS_ACCESSIBLE_FREE}
                                                >
                                                    <SelectTrigger className="w-full">
                                                        <SelectValue placeholder="Select" />
                                                    </SelectTrigger>
                                                    <SelectContent>
                                                        <SelectItem value="true">True</SelectItem>
                                                        <SelectItem value="false">False</SelectItem>
                                                    </SelectContent>
                                                </SelectControl>
                                            </div>
                                        </div>
                                        <div>
                                            <h3 className="mb-3 text-sm font-medium">Author</h3>
                                            <div className="space-y-4">
                                                <SelectControl
                                                    label="Author Type"
                                                    name={SiteConfigKey.META_SCHEMA_AUTHOR_TYPE}
                                                >
                                                    <SelectTrigger className="w-full">
                                                        <SelectValue placeholder="Select type" />
                                                    </SelectTrigger>
                                                    <SelectContent>
                                                        <SelectItem value="Person">Person</SelectItem>
                                                        <SelectItem value="Organization">Organization</SelectItem>
                                                    </SelectContent>
                                                </SelectControl>
                                                <InputControl
                                                    label="Author Name Template"
                                                    name={SiteConfigKey.META_SCHEMA_AUTHOR_NAME}
                                                    placeholder="[node:author]"
                                                />
                                                <InputControl
                                                    label="Author URL Template"
                                                    name={SiteConfigKey.META_SCHEMA_AUTHOR_URL}
                                                    placeholder="Optional"
                                                />
                                            </div>
                                        </div>
                                        <div>
                                            <h3 className="mb-3 text-sm font-medium">Publisher</h3>
                                            <div className="space-y-4">
                                                <SelectControl
                                                    label="Publisher Type"
                                                    name={SiteConfigKey.META_SCHEMA_PUBLISHER_TYPE}
                                                >
                                                    <SelectTrigger className="w-full">
                                                        <SelectValue placeholder="Select type" />
                                                    </SelectTrigger>
                                                    <SelectContent>
                                                        <SelectItem value="Organization">Organization</SelectItem>
                                                        <SelectItem value="Person">Person</SelectItem>
                                                    </SelectContent>
                                                </SelectControl>
                                                <InputControl
                                                    label="Publisher Name Template"
                                                    name={SiteConfigKey.META_SCHEMA_PUBLISHER_NAME}
                                                    placeholder="[site:name]"
                                                />
                                                <InputControl
                                                    label="Publisher URL Template"
                                                    name={SiteConfigKey.META_SCHEMA_PUBLISHER_URL}
                                                    placeholder="Optional"
                                                />
                                                <InputControl
                                                    label="Publisher Logo URL Template"
                                                    name={SiteConfigKey.META_SCHEMA_PUBLISHER_LOGO_URL}
                                                    placeholder="Optional"
                                                />
                                            </div>
                                        </div>
                                        <div>
                                            <h3 className="mb-3 text-sm font-medium">Image</h3>
                                            <div className="space-y-4">
                                                <InputControl
                                                    label="Image URL Template"
                                                    name={SiteConfigKey.META_SCHEMA_IMAGE_URL}
                                                    placeholder="[node:image]"
                                                />
                                                <InputControl
                                                    label="Image Width"
                                                    name={SiteConfigKey.META_SCHEMA_IMAGE_WIDTH}
                                                    placeholder="800"
                                                    type="number"
                                                />
                                                <InputControl
                                                    label="Image Height"
                                                    name={SiteConfigKey.META_SCHEMA_IMAGE_HEIGHT}
                                                    placeholder="640"
                                                    type="number"
                                                />
                                            </div>
                                        </div>
                                        <div>
                                            <h3 className="mb-3 text-sm font-medium">Has Part</h3>
                                            <div className="space-y-4">
                                                <SelectControl
                                                    label="Has Part Type"
                                                    name={SiteConfigKey.META_SCHEMA_HAS_PART_TYPE}
                                                >
                                                    <SelectTrigger className="w-full">
                                                        <SelectValue placeholder="Select type" />
                                                    </SelectTrigger>
                                                    <SelectContent>
                                                        <SelectItem value="WebPageElement">WebPageElement</SelectItem>
                                                        <SelectItem value="Clip">Clip</SelectItem>
                                                        <SelectItem value="TVClip">TVClip</SelectItem>
                                                    </SelectContent>
                                                </SelectControl>
                                                <InputControl
                                                    label="Has Part CSS Selector"
                                                    name={SiteConfigKey.META_SCHEMA_HAS_PART_CSS_SELECTOR}
                                                    placeholder="Optional"
                                                />
                                            </div>
                                        </div>
                                        <div>
                                            <h3 className="mb-3 text-sm font-medium">Speakable</h3>
                                            <div className="space-y-4">
                                                <InputControl
                                                    label="Speakable CSS Selector"
                                                    name={SiteConfigKey.META_SCHEMA_SPEAKABLE_CSS_SELECTOR}
                                                    placeholder="Optional"
                                                />
                                                <InputControl
                                                    label="Speakable XPath"
                                                    name={SiteConfigKey.META_SCHEMA_SPEAKABLE_XPATH}
                                                    placeholder="Optional"
                                                />
                                            </div>
                                        </div>
                                    </AccordionContent>
                                </AccordionItem>

                                <AccordionItem value="twitter">
                                    <AccordionTrigger>Twitter</AccordionTrigger>
                                    <AccordionContent className="space-y-4">
                                        <InputControl
                                            label="Twitter Site (e.g. @magasinetkbh)"
                                            name={SiteConfigKey.META_TWITTER_SITE}
                                        />
                                        <InputControl
                                            label="Twitter Creator (e.g. @magasinetkbh)"
                                            name={SiteConfigKey.META_TWITTER_CREATOR}
                                        />
                                    </AccordionContent>
                                </AccordionItem>

                                <AccordionItem value="dublin">
                                    <AccordionTrigger>Dublin Core</AccordionTrigger>
                                    <AccordionContent className="space-y-4">
                                        <InputControl
                                            label="Title Template"
                                            name={SiteConfigKey.META_DC_TITLE}
                                            placeholder="[node:title]"
                                        />
                                        <InputControl
                                            label="Description Template"
                                            name={SiteConfigKey.META_DC_DESCRIPTION}
                                            placeholder="[node:field_underrubrik]"
                                        />
                                        <InputControl
                                            label="Date Template"
                                            name={SiteConfigKey.META_DC_DATE}
                                            placeholder="[node:datePublished]"
                                        />
                                        <InputControl
                                            label="Creator Template"
                                            name={SiteConfigKey.META_DC_CREATOR}
                                            placeholder="[node:author]"
                                        />
                                        <InputControl label="Publisher" name={SiteConfigKey.META_DC_PUBLISHER} />
                                        <InputControl label="Rights" name={SiteConfigKey.META_DC_RIGHTS} />
                                        <InputControl
                                            label="Format (e.g. text/html)"
                                            name={SiteConfigKey.META_DC_FORMAT}
                                        />
                                    </AccordionContent>
                                </AccordionItem>

                                <AccordionItem value="facebook">
                                    <AccordionTrigger>Facebook</AccordionTrigger>
                                    <AccordionContent className="space-y-4">
                                        <InputControl
                                            label="Facebook Admins (comma-separated IDs)"
                                            name={SiteConfigKey.META_FB_ADMINS}
                                        />
                                        <InputControl label="Facebook App ID" name={SiteConfigKey.META_FB_APP_ID} />
                                        <InputControl label="Facebook Pages" name={SiteConfigKey.META_FB_PAGES} />
                                    </AccordionContent>
                                </AccordionItem>
                            </Accordion>
                        </div>
                    </TabsContent>

                    <TabsContent value="integrations" className="mt-4">
                        <div className="flex flex-col gap-4 px-4">
                            <Card className="shadow-none">
                                <CardContent className="pt-6">
                                    <div className="space-y-4">
                                        <CardHeader>Google</CardHeader>

                                        <InputControl
                                            label="Google ADS Id"
                                            name={SiteConfigKey.GOOGLE_ADS_ID}
                                            type="string"
                                        />

                                        <CardHeader>Mailchimp</CardHeader>

                                        <InputControl
                                            label="Mailchimp API Key"
                                            name={SiteConfigKey.MAILCHIMP_API_KEY}
                                            type="string"
                                        />

                                        <InputControl
                                            label="Mailchimp List ID"
                                            name={SiteConfigKey.MAILCHIMP_LIST_ID}
                                            type="string"
                                        />
                                    </div>
                                </CardContent>
                            </Card>
                        </div>
                    </TabsContent>

                </Tabs>

                <div className="flex justify-between px-4 pt-5">
                    <div className="flex gap-2">
                        <FormReset asChild>
                            <Link href=".">Cancel</Link>
                        </FormReset>
                        <FormSubmit>Update Configuration</FormSubmit>
                    </div>
                </div>
            </div>
        </Form>
    );
};