import { ChevronDown } from 'lucide-react'; import { toast } from 'sonner'; import { useState } from 'react'; import { Head, router, useForm } from '@inertiajs/react'; import InputError from '@/Components/InputError'; import EditorialPageHeader from '@/Components/layout/EditorialPageHeader'; import { Button } from '@/Components/ui/button'; import { Input } from '@/Components/ui/input'; import { Label } from '@/Components/ui/label'; import { LoadingButton } from '@/Components/ui/loading-button'; import { useUnsavedChanges } from '@/hooks/useUnsavedChanges'; import DashboardLayout from '@/Layouts/DashboardLayout'; import { formatDateOnly } from '@/lib/format'; interface SiteGeneral { id: number; name: string; domain: string; created_at: string | null; is_owner: boolean; has_gsc_connection: boolean; has_wp_connection: boolean; } interface Props { site: SiteGeneral; } export default function SiteSettingsGeneral({ site }: Props) { const { data, setData, patch, processing, errors, isDirty } = useForm({ name: site.name, domain: site.domain, }); useUnsavedChanges(isDirty); const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); patch(route('sites.update', site.id), { preserveScroll: true }); }; const domainChanged = data.domain !== site.domain; const hasConnections = site.has_gsc_connection || site.has_wp_connection; // Typed-confirmation delete: user must type the site domain to enable the button. // Danger Zone is collapsed by default so a day-one user isn't shown how to // delete everything immediately; they must click to reveal the section. const [dangerZoneOpen, setDangerZoneOpen] = useState(false); const [deleteOpen, setDeleteOpen] = useState(false); const [confirmText, setConfirmText] = useState(''); const [deleting, setDeleting] = useState(false); const confirmMatches = confirmText.trim() === site.domain; const handleDelete = () => { if (!confirmMatches) return; setDeleting(true); router.delete(route('sites.destroy', site.id), { preserveScroll: false, onError: () => toast.error('Could not delete the site. Please try again or contact support.'), onFinish: () => setDeleting(false), }); }; return ( <>

Internal label — only visible to you and your team.

setData('name', e.target.value)} maxLength={255} className="mt-2" autoComplete="off" />

The full URL of the site you want to analyze, e.g. https://example.com.

setData('domain', e.target.value)} maxLength={500} className="mt-2" inputMode="url" autoComplete="off" /> {domainChanged && hasConnections && (

Changing the domain may require you to reconnect{' '} {site.has_gsc_connection && site.has_wp_connection ? 'your Google Search Console and WordPress connections' : site.has_gsc_connection ? 'your Google Search Console connection' : 'your WordPress connection'} .

)}
Save changes
{site.created_at && (

Site added on {formatDateOnly(site.created_at)}.

)} {/* Danger Zone — owner only. Collapsed by default so a day-one user isn't immediately shown how to delete their site. SitePolicy::delete enforces ownership server-side regardless of UI visibility. */} {site.is_owner && (
{dangerZoneOpen && (

Deleting this site permanently removes all analysis runs, recommendations, drafts, snapshots, and connection metadata. This cannot be undone.

{!deleteOpen ? ( ) : (
setConfirmText(e.target.value)} autoComplete="off" aria-describedby="delete-confirm-hint" />

This permanently deletes the site and all its data.

)}
)}
)}
); } SiteSettingsGeneral.layout = (page: React.ReactNode) => {page};