import { Head, router, useForm } from '@inertiajs/react';
import {
    BookOpen,
    CheckCircle2,
    FileText,
    Globe,
    Send,
    Slack,
    ShoppingBag,
} from 'lucide-react';
import { useState } from 'react';
import InputError from '@/components/input-error';
import { Button } from '@/components/ui/button';
import { Card } from '@/components/ui/card';
import { Checkbox } from '@/components/ui/checkbox';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import AppLayout from '@/layouts/app-layout';
import { useT } from '@/lib/i18n';
import { relativeTime } from '@/lib/relative-time';
import {
    destroy as destroyIntegration,
    index as integrationsIndex,
} from '@/routes/integrations';
import { store as storeSlack } from '@/routes/integrations/slack';
import {
    destroy as destroyWebhook,
    store as storeWebhook,
    update as updateWebhook,
} from '@/routes/integrations/webhooks';
import { start as startGoogle } from '@/routes/oauth/google';
import { start as startNotion } from '@/routes/oauth/notion';

type Integration = {
    id: string;
    kind: 'slack' | 'notion' | 'google' | string;
    is_configured: boolean;
    webhook_hint: string | null;
    status: string;
    last_sync_at: string | null;
    summary: string | null;
};

type WordpressConnection = {
    agent_id: string;
    agent_name: string;
    site_url: string | null;
    plugin_version: string | null;
    wordpress_version: string | null;
    woocommerce_active: boolean | null;
    last_seen_at: string | null;
};

type Props = {
    integrations: Integration[];
    wordpressConnections: WordpressConnection[];
    webhookSubscriptions: WebhookSubscription[];
    webhookEventOptions: WebhookEventOption[];
};

type WebhookSubscription = {
    id: string;
    url: string;
    host: string | null;
    enabled: boolean;
    events: string[];
    event_labels: string[];
    secret_hint: string;
    created_at: string | null;
    updated_at: string | null;
};

type WebhookEventOption = {
    value: string;
    label: string;
};

export default function IntegrationsPage({
    integrations,
    wordpressConnections,
    webhookSubscriptions,
    webhookEventOptions,
}: Props) {
    const { t } = useT();
    const slack = integrations.find((i) => i.kind === 'slack') ?? null;
    const notion = integrations.find((i) => i.kind === 'notion') ?? null;
    const google = integrations.find((i) => i.kind === 'google') ?? null;
    const [showForm, setShowForm] = useState(slack === null);
    const [showWebhookForm, setShowWebhookForm] = useState(
        webhookSubscriptions.length === 0,
    );
    const [editingWebhookId, setEditingWebhookId] = useState<string | null>(
        null,
    );
    const defaultWebhookEvents =
        webhookEventOptions.length > 0
            ? webhookEventOptions.map((option) => option.value)
            : ['lead.captured'];

    const form = useForm<{ webhook_url: string; send_test: boolean }>({
        webhook_url: '',
        send_test: true,
    });

    const webhookForm = useForm<{
        url: string;
        secret: string;
        enabled: boolean;
        events: string[];
    }>({
        url: '',
        secret: '',
        enabled: true,
        events: defaultWebhookEvents,
    });

    const startCreatingWebhook = () => {
        setEditingWebhookId(null);
        webhookForm.reset();
        webhookForm.clearErrors();
        setShowWebhookForm(true);
    };

    const startEditingWebhook = (subscription: WebhookSubscription) => {
        setEditingWebhookId(subscription.id);
        webhookForm.clearErrors();
        webhookForm.setData('url', subscription.url);
        webhookForm.setData('secret', '');
        webhookForm.setData('enabled', subscription.enabled);
        webhookForm.setData(
            'events',
            subscription.events.length > 0
                ? subscription.events
                : defaultWebhookEvents,
        );
        setShowWebhookForm(true);
    };

    const resetWebhookForm = () => {
        setEditingWebhookId(null);
        webhookForm.reset();
        webhookForm.clearErrors();
        setShowWebhookForm(false);
    };

    const toggleWebhookEvent = (value: string, checked: boolean) => {
        const nextEvents = checked
            ? Array.from(new Set([...webhookForm.data.events, value]))
            : webhookForm.data.events.filter((event) => event !== value);

        webhookForm.setData('events', nextEvents);
    };

    return (
        <AppLayout
            breadcrumbs={[
                {
                    title: t('Integrations'),
                    href: integrationsIndex.url(),
                },
            ]}
        >
            <Head title={t('Integrations')} />
            <div className="flex flex-1 flex-col gap-4 p-4">
                <div>
                    <h1 className="text-2xl font-semibold tracking-tight">
                        {t('Integrations')}
                    </h1>
                    <p className="text-sm text-muted-foreground">
                        {t(
                            'Push captured leads to the tools your team already lives in.',
                        )}
                    </p>
                </div>

                <Card className="p-5">
                    <div className="flex items-start justify-between gap-4">
                        <div className="flex items-start gap-3">
                            <Slack className="mt-0.5 size-6 text-purple-600" />
                            <div>
                                <p className="font-medium">{t('Slack')}</p>
                                <p className="mt-0.5 text-sm text-muted-foreground">
                                    {t(
                                        'Get a message in any channel as soon as a visitor hands over their email.',
                                    )}
                                </p>
                                {slack?.is_configured && (
                                    <p className="mt-2 inline-flex flex-wrap items-center gap-1 text-xs text-emerald-600 dark:text-emerald-400">
                                        <CheckCircle2 className="size-3.5" />{' '}
                                        {t('Connected')}
                                        {slack.webhook_hint && (
                                            <span className="text-muted-foreground">
                                                · {slack.webhook_hint}
                                            </span>
                                        )}
                                        {slack.summary && (
                                            <span className="text-muted-foreground">
                                                · {slack.summary}
                                            </span>
                                        )}
                                    </p>
                                )}
                            </div>
                        </div>
                        <div className="flex shrink-0 gap-2">
                            {slack?.is_configured && (
                                <Button
                                    variant="ghost"
                                    size="sm"
                                    onClick={() => {
                                        if (confirm(t('Disconnect Slack?'))) {
                                            router.delete(
                                                destroyIntegration.url(
                                                    slack.id,
                                                ),
                                            );
                                        }
                                    }}
                                >
                                    {t('Disconnect')}
                                </Button>
                            )}
                            {!showForm && (
                                <Button
                                    size="sm"
                                    onClick={() => setShowForm(true)}
                                >
                                    {slack?.is_configured
                                        ? t('Replace')
                                        : t('Connect')}
                                </Button>
                            )}
                        </div>
                    </div>

                    {showForm && (
                        <div className="mt-5 rounded-lg border bg-muted/15">
                            <div className="grid gap-5 p-4 sm:p-5 lg:grid-cols-[220px_1fr] lg:gap-8">
                                <div>
                                    <p className="text-sm font-medium">
                                        {t('Connect webhook')}
                                    </p>
                                    <p className="mt-1 text-xs leading-5 text-muted-foreground">
                                        {t(
                                            'Paste the incoming webhook URL for the Slack channel where new leads should be delivered.',
                                        )}
                                    </p>
                                </div>

                                <form
                                    onSubmit={(e) => {
                                        e.preventDefault();
                                        form.post(storeSlack.url(), {
                                            onSuccess: () => {
                                                form.reset('webhook_url');
                                                setShowForm(false);
                                            },
                                        });
                                    }}
                                    className="grid gap-4"
                                >
                                    <div className="grid gap-1.5">
                                        <Label htmlFor="webhook">
                                            {t('Slack Incoming Webhook URL')}
                                        </Label>
                                        <Input
                                            id="webhook"
                                            type="url"
                                            placeholder="https://hooks.slack.com/services/T.../B.../..."
                                            value={form.data.webhook_url}
                                            aria-invalid={Boolean(
                                                form.errors.webhook_url,
                                            )}
                                            onChange={(e) =>
                                                form.setData(
                                                    'webhook_url',
                                                    e.target.value,
                                                )
                                            }
                                        />
                                        <p className="text-xs text-muted-foreground">
                                            {t(
                                                'Create one in Slack: Apps → Incoming Webhooks → New Configuration → pick a channel → copy the URL.',
                                            )}
                                        </p>
                                        <InputError
                                            message={form.errors.webhook_url}
                                        />
                                    </div>

                                    <label
                                        htmlFor="send-test"
                                        className="flex items-start gap-3 rounded-md border bg-background px-3 py-2"
                                    >
                                        <Checkbox
                                            id="send-test"
                                            checked={form.data.send_test}
                                            onCheckedChange={(checked) =>
                                                form.setData(
                                                    'send_test',
                                                    checked === true,
                                                )
                                            }
                                        />
                                        <span>
                                            <span className="block text-sm font-medium">
                                                {t('Send a test message')}
                                            </span>
                                            <span className="mt-0.5 block text-xs text-muted-foreground">
                                                {t(
                                                    'Useful for confirming the webhook is wired to the right channel before the next real lead arrives.',
                                                )}
                                            </span>
                                        </span>
                                    </label>

                                    <div className="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
                                        <Button
                                            type="button"
                                            variant="ghost"
                                            size="sm"
                                            onClick={() => setShowForm(false)}
                                            className="w-full sm:w-auto"
                                        >
                                            {t('Cancel')}
                                        </Button>
                                        <Button
                                            type="submit"
                                            size="sm"
                                            disabled={form.processing}
                                            className="w-full sm:w-auto"
                                        >
                                            {form.processing
                                                ? t('Connecting…')
                                                : t('Save connection')}
                                        </Button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    )}
                </Card>

                <Card className="p-5">
                    <div className="flex items-start justify-between gap-4">
                        <div className="flex items-start gap-3">
                            <Send className="mt-0.5 size-6 text-amber-600" />
                            <div>
                                <p className="font-medium">
                                    {t('Outbound webhooks')}
                                </p>
                                <p className="mt-0.5 text-sm text-muted-foreground">
                                    {t(
                                        'POST signed lead events into your CRM, workflow engine, or internal automation.',
                                    )}
                                </p>
                                <p className="mt-2 text-xs text-muted-foreground">
                                    {t('Every request includes')}{' '}
                                    <span className="font-mono text-[11px]">
                                        X-Pitchbar-Signature:
                                        t=&lt;unix&gt;,v1=&lt;hmac&gt;
                                    </span>{' '}
                                    {t('where the HMAC is SHA-256 over')}{' '}
                                    <span className="font-mono text-[11px]">
                                        {'<timestamp>.<raw body>'}
                                    </span>
                                    .
                                </p>
                            </div>
                        </div>
                        <div className="flex shrink-0 gap-2">
                            {!showWebhookForm && (
                                <Button
                                    size="sm"
                                    onClick={startCreatingWebhook}
                                >
                                    {t('Add endpoint')}
                                </Button>
                            )}
                        </div>
                    </div>

                    <div className="mt-5 grid gap-3">
                        {webhookSubscriptions.length === 0 ? (
                            <div className="rounded-lg border border-dashed bg-muted/10 px-4 py-5 text-sm text-muted-foreground">
                                {t('No outbound webhook endpoints yet.')}
                            </div>
                        ) : (
                            webhookSubscriptions.map((subscription) => (
                                <div
                                    key={subscription.id}
                                    className="rounded-xl border border-border/80 bg-muted/10 p-4"
                                >
                                    <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
                                        <div>
                                            <div className="flex flex-wrap items-center gap-2">
                                                <p className="font-medium">
                                                    {subscription.host ??
                                                        t('Custom endpoint')}
                                                </p>
                                                <span
                                                    className={`inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-medium ${
                                                        subscription.enabled
                                                            ? 'bg-emerald-500/15 text-emerald-700 dark:text-emerald-400'
                                                            : 'bg-amber-500/15 text-amber-700 dark:text-amber-400'
                                                    }`}
                                                >
                                                    {subscription.enabled
                                                        ? t('Enabled')
                                                        : t('Paused')}
                                                </span>
                                            </div>
                                            <p className="mt-1 text-xs break-all text-muted-foreground">
                                                {subscription.url}
                                            </p>
                                            <div className="mt-3 flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
                                                {subscription.event_labels.map(
                                                    (label) => (
                                                        <span
                                                            key={`${subscription.id}-${label}`}
                                                            className="rounded-full border border-border/80 px-2 py-1"
                                                        >
                                                            {label}
                                                        </span>
                                                    ),
                                                )}
                                                <span className="rounded-full border border-border/80 px-2 py-1 font-mono text-[11px]">
                                                    {t('Secret')}{' '}
                                                    {subscription.secret_hint}
                                                </span>
                                            </div>
                                        </div>

                                        <div className="flex shrink-0 gap-2">
                                            <Button
                                                variant="ghost"
                                                size="sm"
                                                onClick={() =>
                                                    startEditingWebhook(
                                                        subscription,
                                                    )
                                                }
                                            >
                                                {t('Edit')}
                                            </Button>
                                            <Button
                                                variant="ghost"
                                                size="sm"
                                                onClick={() => {
                                                    if (
                                                        confirm(
                                                            t(
                                                                'Delete this webhook endpoint?',
                                                            ),
                                                        )
                                                    ) {
                                                        router.delete(
                                                            destroyWebhook.url(
                                                                subscription.id,
                                                            ),
                                                        );
                                                    }
                                                }}
                                            >
                                                {t('Delete')}
                                            </Button>
                                        </div>
                                    </div>
                                </div>
                            ))
                        )}
                    </div>

                    {showWebhookForm && (
                        <div className="mt-5 rounded-lg border bg-muted/15">
                            <div className="grid gap-5 p-4 sm:p-5 lg:grid-cols-[220px_1fr] lg:gap-8">
                                <div>
                                    <p className="text-sm font-medium">
                                        {editingWebhookId === null
                                            ? t('Add endpoint')
                                            : t('Edit endpoint')}
                                    </p>
                                    <p className="mt-1 text-xs leading-5 text-muted-foreground">
                                        {t(
                                            'Configure where signed lead events should land. Rotate the secret any time you need to invalidate an old receiver.',
                                        )}
                                    </p>
                                </div>

                                <form
                                    onSubmit={(event) => {
                                        event.preventDefault();

                                        const onSuccess = () => {
                                            webhookForm.reset();
                                            setEditingWebhookId(null);
                                            setShowWebhookForm(false);
                                        };

                                        if (editingWebhookId === null) {
                                            webhookForm.post(
                                                storeWebhook.url(),
                                                {
                                                    onSuccess,
                                                },
                                            );

                                            return;
                                        }

                                        webhookForm.patch(
                                            updateWebhook.url(editingWebhookId),
                                            {
                                                onSuccess,
                                            },
                                        );
                                    }}
                                    className="grid gap-4"
                                >
                                    <div className="grid gap-1.5">
                                        <Label htmlFor="outbound-webhook-url">
                                            {t('Endpoint URL')}
                                        </Label>
                                        <Input
                                            id="outbound-webhook-url"
                                            type="url"
                                            placeholder="https://example.com/webhooks/pitchbar"
                                            value={webhookForm.data.url}
                                            aria-invalid={Boolean(
                                                webhookForm.errors.url,
                                            )}
                                            onChange={(event) =>
                                                webhookForm.setData(
                                                    'url',
                                                    event.target.value,
                                                )
                                            }
                                        />
                                        <p className="text-xs text-muted-foreground">
                                            {t(
                                                'Pitchbar sends JSON with a signed HMAC header so your receiver can verify the request body.',
                                            )}
                                        </p>
                                        <InputError
                                            message={webhookForm.errors.url}
                                        />
                                    </div>

                                    <div className="grid gap-1.5">
                                        <Label htmlFor="outbound-webhook-secret">
                                            {editingWebhookId === null
                                                ? t('Signing secret')
                                                : t('Rotate signing secret')}
                                        </Label>
                                        <Input
                                            id="outbound-webhook-secret"
                                            type="password"
                                            placeholder={
                                                editingWebhookId === null
                                                    ? t(
                                                          'Use at least 12 characters',
                                                      )
                                                    : t(
                                                          'Leave blank to keep the current secret',
                                                      )
                                            }
                                            value={webhookForm.data.secret}
                                            aria-invalid={Boolean(
                                                webhookForm.errors.secret,
                                            )}
                                            onChange={(event) =>
                                                webhookForm.setData(
                                                    'secret',
                                                    event.target.value,
                                                )
                                            }
                                        />
                                        <p className="text-xs text-muted-foreground">
                                            {t('Recompute')}{' '}
                                            <span className="font-mono text-[11px]">
                                                hash_hmac('sha256',
                                                '&lt;timestamp&gt;.&lt;raw
                                                body&gt;', secret)
                                            </span>{' '}
                                            {t(
                                                'on the receiver and compare it to the header value.',
                                            )}
                                        </p>
                                        <InputError
                                            message={webhookForm.errors.secret}
                                        />
                                    </div>

                                    <div className="grid gap-3 rounded-md border bg-background px-3 py-3">
                                        <div>
                                            <p className="text-sm font-medium">
                                                {t('Events')}
                                            </p>
                                            <p className="mt-0.5 text-xs text-muted-foreground">
                                                {t(
                                                    'Choose which platform events get pushed to this endpoint.',
                                                )}
                                            </p>
                                        </div>

                                        {webhookEventOptions.map((option) => (
                                            <label
                                                key={option.value}
                                                htmlFor={`event-${option.value}`}
                                                className="flex items-start gap-3 rounded-md border bg-muted/10 px-3 py-2"
                                            >
                                                <Checkbox
                                                    id={`event-${option.value}`}
                                                    checked={webhookForm.data.events.includes(
                                                        option.value,
                                                    )}
                                                    onCheckedChange={(
                                                        checked,
                                                    ) =>
                                                        toggleWebhookEvent(
                                                            option.value,
                                                            checked === true,
                                                        )
                                                    }
                                                />
                                                <span className="block text-sm font-medium">
                                                    {option.label}
                                                </span>
                                            </label>
                                        ))}

                                        <InputError
                                            message={webhookForm.errors.events}
                                        />
                                    </div>

                                    <label
                                        htmlFor="enable-webhook"
                                        className="flex items-start gap-3 rounded-md border bg-background px-3 py-2"
                                    >
                                        <Checkbox
                                            id="enable-webhook"
                                            checked={webhookForm.data.enabled}
                                            onCheckedChange={(checked) =>
                                                webhookForm.setData(
                                                    'enabled',
                                                    checked === true,
                                                )
                                            }
                                        />
                                        <span>
                                            <span className="block text-sm font-medium">
                                                {t('Endpoint enabled')}
                                            </span>
                                            <span className="mt-0.5 block text-xs text-muted-foreground">
                                                {t(
                                                    'Pause delivery without deleting the endpoint configuration.',
                                                )}
                                            </span>
                                        </span>
                                    </label>

                                    <div className="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
                                        <Button
                                            type="button"
                                            variant="ghost"
                                            size="sm"
                                            onClick={resetWebhookForm}
                                            className="w-full sm:w-auto"
                                        >
                                            {t('Cancel')}
                                        </Button>
                                        <Button
                                            type="submit"
                                            size="sm"
                                            disabled={webhookForm.processing}
                                            className="w-full sm:w-auto"
                                        >
                                            {webhookForm.processing
                                                ? t('Saving…')
                                                : editingWebhookId === null
                                                  ? t('Save endpoint')
                                                  : t('Update endpoint')}
                                        </Button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    )}
                </Card>

                <Card className="p-5">
                    <div className="flex items-start gap-3">
                        <Globe className="mt-0.5 size-6 text-blue-600" />
                        <div className="min-w-0 flex-1">
                            <div className="flex flex-wrap items-center gap-2">
                                <p className="font-medium">
                                    {t('WordPress & WooCommerce')}
                                </p>
                                {wordpressConnections.length > 0 && (
                                    <span className="inline-flex items-center gap-1 rounded-full bg-emerald-500/10 px-2 py-0.5 text-xs font-medium text-emerald-600 dark:text-emerald-400">
                                        <CheckCircle2 className="size-3" />
                                        {wordpressConnections.length === 1
                                            ? t('1 site connected')
                                            : t(':n sites connected', {
                                                  n: String(
                                                      wordpressConnections.length,
                                                  ),
                                              })}
                                    </span>
                                )}
                            </div>
                            <p className="mt-0.5 text-sm text-muted-foreground">
                                {t(
                                    'Install the Pitchbar plugin on your WordPress site to embed the chat widget, sync posts and products as agent knowledge, and (with WooCommerce) enable order lookup, coupon apply, and abandoned-cart triggers.',
                                )}
                            </p>

                            {wordpressConnections.length === 0 ? (
                                <p className="mt-3 text-xs text-muted-foreground">
                                    {t(
                                        'No WordPress sites connected yet. Install the Pitchbar plugin from CodeCanyon (or your Pitchbar admin) on your WP site, paste this workspace URL + an API token, and pick the agent you want to attach.',
                                    )}
                                </p>
                            ) : (
                                <ul className="mt-3 space-y-2">
                                    {wordpressConnections.map((row) => (
                                        <li
                                            key={row.agent_id}
                                            className="rounded-md border border-border bg-muted/30 px-3 py-2 text-sm"
                                        >
                                            <div className="flex flex-wrap items-center justify-between gap-2">
                                                <div className="flex min-w-0 items-center gap-2">
                                                    <span className="truncate font-medium">
                                                        {row.agent_name}
                                                    </span>
                                                    {row.woocommerce_active && (
                                                        <span className="inline-flex items-center gap-1 rounded-full bg-purple-500/10 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-purple-600 dark:text-purple-400">
                                                            <ShoppingBag className="size-3" />
                                                            {t('WooCommerce')}
                                                        </span>
                                                    )}
                                                </div>
                                                {row.last_seen_at && (
                                                    <span
                                                        className="shrink-0 text-xs text-muted-foreground"
                                                        title={row.last_seen_at}
                                                    >
                                                        {t('Last seen :when', {
                                                            when: relativeTime(
                                                                row.last_seen_at,
                                                            ),
                                                        })}
                                                    </span>
                                                )}
                                            </div>
                                            <div className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground">
                                                {row.site_url && (
                                                    <a
                                                        href={row.site_url}
                                                        target="_blank"
                                                        rel="noopener noreferrer"
                                                        className="truncate font-mono text-foreground/70 hover:underline"
                                                    >
                                                        {row.site_url.replace(
                                                            /^https?:\/\//,
                                                            '',
                                                        )}
                                                    </a>
                                                )}
                                                {row.plugin_version && (
                                                    <span>
                                                        {t('Plugin v:v', {
                                                            v: row.plugin_version,
                                                        })}
                                                    </span>
                                                )}
                                                {row.wordpress_version && (
                                                    <span>
                                                        {t('WordPress :v', {
                                                            v: row.wordpress_version,
                                                        })}
                                                    </span>
                                                )}
                                            </div>
                                        </li>
                                    ))}
                                </ul>
                            )}

                            <p className="mt-3 text-xs text-muted-foreground">
                                {t(
                                    'Need the plugin? Download it from your CodeCanyon receipt, or read the setup guide:',
                                )}{' '}
                                <a
                                    href="/documentation/wordpress-install"
                                    className="font-medium underline"
                                >
                                    {t('WordPress install & connect')}
                                </a>
                                .
                            </p>
                        </div>
                    </div>
                </Card>

                <Card className="p-5">
                    <div className="flex items-start justify-between gap-4">
                        <div className="flex items-start gap-3">
                            <BookOpen className="mt-0.5 size-6 text-slate-700 dark:text-slate-300" />
                            <div>
                                <p className="font-medium">{t('Notion')}</p>
                                <p className="mt-0.5 text-sm text-muted-foreground">
                                    {t(
                                        'Index pages from your Notion workspace as agent knowledge — no manual export.',
                                    )}
                                </p>
                                {notion?.is_configured && (
                                    <p className="mt-2 inline-flex flex-wrap items-center gap-1 text-xs text-emerald-600 dark:text-emerald-400">
                                        <CheckCircle2 className="size-3.5" />{' '}
                                        {t('Connected')}
                                        {notion.webhook_hint && (
                                            <span className="text-muted-foreground">
                                                · {notion.webhook_hint}
                                            </span>
                                        )}
                                        {notion.summary && (
                                            <span className="text-muted-foreground">
                                                · {notion.summary}
                                            </span>
                                        )}
                                    </p>
                                )}
                            </div>
                        </div>
                        <div className="flex shrink-0 gap-2">
                            {notion?.is_configured && (
                                <Button
                                    variant="ghost"
                                    size="sm"
                                    onClick={() => {
                                        if (confirm(t('Disconnect Notion?'))) {
                                            router.delete(
                                                destroyIntegration.url(
                                                    notion.id,
                                                ),
                                            );
                                        }
                                    }}
                                >
                                    {t('Disconnect')}
                                </Button>
                            )}
                            <Button
                                size="sm"
                                onClick={() => router.visit(startNotion.url())}
                            >
                                {notion?.is_configured
                                    ? t('Reconnect')
                                    : t('Connect Notion')}
                            </Button>
                        </div>
                    </div>
                    {notion?.is_configured && (
                        <p className="mt-3 text-xs text-muted-foreground">
                            {t(
                                "Once connected, paste a Notion page URL on any agent's Sources page to ingest it.",
                            )}
                        </p>
                    )}
                </Card>

                <Card className="p-5">
                    <div className="flex items-start justify-between gap-4">
                        <div className="flex items-start gap-3">
                            <FileText className="mt-0.5 size-6 text-blue-600" />
                            <div>
                                <p className="font-medium">
                                    {t('Google Drive (Docs)')}
                                </p>
                                <p className="mt-0.5 text-sm text-muted-foreground">
                                    {t(
                                        'Index Google Docs as agent knowledge with read-only Drive access.',
                                    )}
                                </p>
                                {google?.is_configured && (
                                    <p className="mt-2 inline-flex flex-wrap items-center gap-1 text-xs text-emerald-600 dark:text-emerald-400">
                                        <CheckCircle2 className="size-3.5" />{' '}
                                        {t('Connected')}
                                        {google.summary && (
                                            <span className="text-muted-foreground">
                                                · {google.summary}
                                            </span>
                                        )}
                                    </p>
                                )}
                            </div>
                        </div>
                        <div className="flex shrink-0 gap-2">
                            {google?.is_configured && (
                                <Button
                                    variant="ghost"
                                    size="sm"
                                    onClick={() => {
                                        if (confirm(t('Disconnect Google?'))) {
                                            router.delete(
                                                destroyIntegration.url(
                                                    google.id,
                                                ),
                                            );
                                        }
                                    }}
                                >
                                    {t('Disconnect')}
                                </Button>
                            )}
                            <Button
                                size="sm"
                                onClick={() => router.visit(startGoogle.url())}
                            >
                                {google?.is_configured
                                    ? t('Reconnect')
                                    : t('Connect Google')}
                            </Button>
                        </div>
                    </div>
                    {google?.is_configured && (
                        <p className="mt-3 text-xs text-muted-foreground">
                            {t(
                                "Once connected, paste a Google Doc URL on any agent's Sources page to ingest it.",
                            )}
                        </p>
                    )}
                </Card>
            </div>
        </AppLayout>
    );
}
