( Subject The subject line for your campaign email. )} /> ( Campaign Type Choose the type of campaign you want to create. )} /> ( Content Type Choose the content type for your campaign. )} /> ( Campaign Body

</FormControl>
            <FormDescription>
              The main content of your campaign. Use the format specified in the
              Content Type field.
            </FormDescription>
            <FormMessage />
          </FormItem>
        )}
      />

<FormField
        control={form.control}
        name={`actions.${index}.parameters.lists`}
        render={({ field }) => (
          <FormItem>
            <FormLabel>Lists</FormLabel>
            <FormControl>
              <Select
                onValueChange={(value) => {
                  const newLists = [...(field.value || []), parseInt(value)];
                  field.onChange(newLists);
                }}
              >
                <SelectTrigger>
                  <SelectValue placeholder="Select lists" />
                </SelectTrigger>
                <SelectContent>
                  {lists.map((list) => (
                    <SelectItem key={list.id} value={list.id.toString()}>
                      {list.name}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </FormControl>
            <div className="mt-2 flex flex-wrap gap-2">
              {field.value?.map((listId: number) => {
                const list = lists.find((l) => l.id === listId);
                return (
                  <Badge key={listId} variant="secondary" className="px-2 py-1">
                    {list ? list.name : `List ${listId}`}
                    <Button
                      variant="ghost"
                      size="sm"
                      className="ml-1 h-4 w-4 p-0"
                      onClick={() => {
                        const newLists = field.value.filter(
                          (id: number) => id !== listId
                        );
                        field.onChange(newLists);
                      }}
                    >
                      <X className="h-3 w-3" />
                    </Button>
                  </Badge>
                );
              })}
            </div>
            <FormDescription>
              Select the lists to send this campaign to.
            </FormDescription>
            <FormMessage />
          </FormItem>
        )}
      />

<FormField
        control={form.control}
        name={`actions.${index}.parameters.template_id`}
        render={({ field }) => (
          <FormItem>
            <FormLabel>Template</FormLabel>
            <FormControl>
              <Select
                onValueChange={(value) => field.onChange(parseInt(value))}
                value={field.value?.toString()}
              >
                <SelectTrigger>
                  <SelectValue placeholder="Select template" />
                </SelectTrigger>
                <SelectContent>
                  {templates.map((template) => (
                    <SelectItem
                      key={template.id}
                      value={template.id.toString()}
                    >
                      {template.name}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </FormControl>
            <FormDescription>
              Choose the template for your campaign email.
            </FormDescription>
            <FormMessage />
          </FormItem>
        )}
      />

<FormField
        control={form.control}
        name={`actions.${index}.parameters.tags`}
        render={({ field }) => (
          <FormItem>
            <FormLabel>Tags</FormLabel>
            <FormControl>
              <Input {...field} placeholder="Enter comma-separated tags" />
            </FormControl>
            <FormDescription>
              Add tags to categorize your campaign (comma-separated).
            </FormDescription>
            <FormMessage />
          </FormItem>
        )}
      />

<FormField
        control={form.control}
        name={`actions.${index}.parameters.send_now`}
        render={({ field }) => (
          <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
            <div className="space-y-0.5">
              <FormLabel className="text-base">Send Now</FormLabel>
              <FormDescription>
                Toggle to send the campaign immediately upon creation.
              </FormDescription>
            </div>
            <FormControl>
              <Switch checked={field.value} onCheckedChange={field.onChange} />
            </FormControl>
          </FormItem>
        )}
      />
    </div>
  );
}

================
File: components/ContextWrapper.tsx
================
import { SonProvider } from "@/contexts/SonContext";
import { ListProvider } from "@/contexts/ListContext";
import { TemplateProvider } from "@/contexts/TemplateContext";

export default function ContextWrapper({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <SonProvider>
      <ListProvider>
        <TemplateProvider>{children}</TemplateProvider>
      </ListProvider>
    </SonProvider>
  );
}

================
File: components/Dashboard.tsx
================
import { useEffect, useState } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
} from "recharts";
import { ChartContainer, ChartConfig } from "@/components/ui/chart";
import { DashboardSkeleton } from "./DashboardSKeleton";

// Mock data - replace with actual API calls in production
const recentActivity = [
  {
    id: 1,
    action: 'Son "Welcome Email" triggered',
    timestamp: "2024-08-10T10:30:00Z",
  },
  {
    id: 2,
    action: 'New Son "Survey Request" created',
    timestamp: "2024-08-10T09:15:00Z",
  },
  {
    id: 3,
    action: 'Son "Monthly Newsletter" modified',
    timestamp: "2024-08-09T16:45:00Z",
  },
];

const sonStats = [
  { name: "Welcome Email", executions: 120, success: 115, failure: 5 },
  { name: "Survey Request", executions: 80, success: 78, failure: 2 },
  { name: "Monthly Newsletter", executions: 50, success: 50, failure: 0 },
];

const chartConfig = {
  executions: {
    label: "Executions",
    color: "#2563eb",
  },
  success: {
    label: "Success",
    color: "#F97316",
  },
  failure: {
    label: "Failure",
    color: "#d1d5db",
  },
} satisfies ChartConfig;

export default function Dashboard() {
  const [isLoading, setIsLoading] = useState(true);

useEffect(() => {
    // Simulate API call
    setTimeout(() => setIsLoading(false), 1000);
  }, []);

if (isLoading) {
    return <DashboardSkeleton />;
  }

return (
    <div className="flex-1 space-y-4">
      <h1 className="text-2xl font-bold">Dashboard</h1>

<div className="grid gap-4 md:grid-cols-2">
        <Card>
          <CardHeader>
            <CardTitle>Recent Activity</CardTitle>
          </CardHeader>
          <CardContent>
            {recentActivity.map((activity) => (
              <Alert key={activity.id} className="mb-2">
                <AlertTitle>{activity.action}</AlertTitle>
                <AlertDescription>
                  {new Date(activity.timestamp).toLocaleString()}
                </AlertDescription>
              </Alert>
            ))}
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle>Son Performance</CardTitle>
          </CardHeader>
          <CardContent>
            <ChartContainer
              config={chartConfig}
              className="min-h-[200px] w-full"
            >
              <BarChart data={sonStats}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="name" />
                <YAxis />
                <Tooltip />
                <Legend />
                <Bar dataKey="success" fill="var(--color-success)" />
                <Bar dataKey="failure" fill="var(--color-failure)" />
              </BarChart>
            </ChartContainer>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}

================
File: components/DashboardSKeleton.tsx
================
import { Card, CardContent, CardHeader } from "@/components/ui/card";

export function DashboardSkeleton() {
  return (
    <div className="flex-1 space-y-4">
      <div className="h-8 w-1/4 bg-gray-200 rounded animate-pulse"></div>

<Card>
          <CardHeader>
            <div className="h-6 w-1/3 bg-gray-200 rounded animate-pulse"></div>
          </CardHeader>
          <CardContent>
            <div className="h-40 bg-gray-200 rounded animate-pulse"></div>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}

================
File: components/layout.tsx
================
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Menu } from "lucide-react";
import ContextWrapper from "@/components/ContextWrapper";
import { Sidebar } from "@/components/Sidebar";
import { AuthButton } from "./AuthButton";

export default function Layout({ children }: { children: React.ReactNode }) {
  const [isSidebarOpen, setIsSidebarOpen] = useState(false);

return (
    <div className="flex">
      <Sidebar isOpen={isSidebarOpen} />
      <div className="flex-1 flex flex-col">
        <header className="bg-white shadow p-4 flex justify-between items-center">
          <Button
            variant="ghost"
            className="md:hidden"
            onClick={() => setIsSidebarOpen(!isSidebarOpen)}
          >
            <Menu className="h-6 w-6" />
          </Button>
          <h1 className="text-xl font-bold">Ghost-Listmonk Connector</h1>
          <AuthButton />
        </header>
        <main className="flex-1 bg-gray-100 p-4 overflow-y-auto">
          <ContextWrapper>{children}</ContextWrapper>
        </main>
      </div>
    </div>
  );
}

================
File: components/ManageSubscriberActionFields.tsx
================
import React from "react";
import {
  FormField,
  FormItem,
  FormLabel,
  FormControl,
  FormMessage,
  FormDescription,
} from "@/components/ui/form";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { X } from "lucide-react";
import { ManageSubscriberActionFieldsProps } from "@/lib/types";

export function ManageSubscriberActionFields({
  form,
  index,
  lists,
}: ManageSubscriberActionFieldsProps) {
  return (
    <div className="space-y-4">
      <FormField
        control={form.control}
        name={`actions.${index}.parameters.lists`}
        render={({ field }) => (
          <FormItem>
            <FormLabel>Lists</FormLabel>
            <FormControl>
              <Select
                onValueChange={(value) => {
                  const newLists = [...(field.value || []), parseInt(value)];
                  field.onChange(newLists);
                }}
              >
                <SelectTrigger>
                  <SelectValue placeholder="Select lists" />
                </SelectTrigger>
                <SelectContent>
                  {lists.map((list) => (
                    <SelectItem key={list.id} value={list.id.toString()}>
                      {list.name}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </FormControl>
            <div className="mt-2 flex flex-wrap gap-2">
              {field.value?.map((listId: number) => {
                const list = lists.find((l) => l.id === listId);
                return (
                  <Badge key={listId} variant="secondary" className="px-2 py-1">
                    {list ? list.name : `List ${listId}`}
                    <Button
                      variant="ghost"
                      size="sm"
                      className="ml-1 h-4 w-4 p-0"
                      onClick={() => {
                        const newLists = field.value.filter(
                          (id: number) => id !== listId
                        );
                        field.onChange(newLists);
                      }}
                    >
                      <X className="h-3 w-3" />
                    </Button>
                  </Badge>
                );
              })}
            </div>
            <FormDescription>
              Default lists to add this user on creation. (Apart from the lists
              for the ghost blog newsletters) p.e. "New Subscribers"
            </FormDescription>
            <FormMessage />
          </FormItem>
        )}
      />
      {/* Add more fields specific to manage_subscriber action if needed */}
    </div>
  );
}

================
File: components/MinimalLayout.tsx
================
import ContextWrapper from "@/components/ContextWrapper";

export default function MinimalLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return <main className="flex min-h-screen p-4">{children}</main>;
}

================
File: components/ProtectedRoute.tsx
================
import { useEffect } from "react";
import { useRouter } from "next/router";
import { useAuthContext } from "@/contexts/AuthContext";

export function ProtectedRoute({ children }: { children: React.ReactNode }) {
  const { user, loading } = useAuthContext();
  const router = useRouter();

useEffect(() => {
    if (!loading && !user) {
      router.push("/login");
    }
  }, [user, loading, router]);

if (loading) {
    return <div>Loading...</div>;
  }

return user ? <>{children}</> : null;
}

================
File: components/Sidebar.tsx
================
// components/Sidebar.tsx

import { usePathname } from "next/navigation";
import Link from "next/link";
import { Button } from "@/components/ui/button";
import {
  LayoutDashboard,
  ListPlus,
  ListTree,
  Settings,
} from "lucide-react";

export const Sidebar = ({ isOpen }: { isOpen: boolean }) => {
  const pathname = usePathname();

const menuItems = [
    { href: "/", label: "Dashboard", icon: LayoutDashboard },
    { href: "/sons/new", label: "Create Son", icon: ListPlus },
    { href: "/sons", label: "Manage Sons", icon: ListTree },
    { href: "/settings", label: "Settings", icon: Settings },
  ];

return (
    <aside
      className={`bg-primary text-primary-foreground w-64 min-h-screen p-4 ${
        isOpen ? "" : "hidden"
      } md:block`}
    >
      <nav>
        <ul>
          {menuItems.map((item) => (
            <li key={item.href} className="mb-2">
              <Link href={item.href}>
                <Button
                  variant={pathname === item.href ? "secondary" : "ghost"}
                  className="w-full justify-start"
                >
                  <item.icon className="mr-2 h-4 w-4" />
                  {item.label}
                </Button>
              </Link>
            </li>
          ))}
        </ul>
      </nav>
    </aside>
  );
};

================
File: components/SonCreationForm.tsx
================
import React from "react";
import { useForm, useFieldArray } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import * as z from "zod";
import { useRouter } from "next/navigation";
import { Button } from "@/components/ui/button";
import { Form } from "@/components/ui/form";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { PlusCircle } from "lucide-react";
import { useCustomToast } from "@/hooks/useCustomToast";
import { SonDetailsForm } from "./SonDetailsForm";
import { ActionForm } from "./ActionForm";

// Import or define your schema here
import { sonSchema } from "@/lib/schemas";
import { useSonContext } from "@/contexts/SonContext";
import { useListContext } from "@/contexts/ListContext";
import { useTemplateContext } from "@/contexts/TemplateContext";

type SonFormValues = z.infer<typeof sonSchema>;

export default function SonCreationForm() {
  const { createSon } = useSonContext();
  const { showToast } = useCustomToast();
  const router = useRouter();
  const { lists, loading: listsLoading, error: listsError } = useListContext();
  const {
    templates,
    loading: templatesLoading,
    error: templatesError,
  } = useTemplateContext();

const form = useForm<SonFormValues>({
    resolver: zodResolver(sonSchema),
    defaultValues: {
      name: "",
      trigger: "member_created",
      delay: "0s",
      enabled: true,
      actions: [
        {
          type: "send_transactional_email",
          parameters: {},
        },
      ],
    },
  });

const { fields, append, remove } = useFieldArray({
    control: form.control,
    name: "actions",
  });

if (listsLoading || templatesLoading) {
    return (
      <div className="flex justify-center items-center h-full">Loading...</div>
    );
  }

if (listsError || templatesError) {
    return (
      <div className="text-red-500">
        Error: {listsError?.message || templatesError?.message}
      </div>
    );
  }

return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
        <SonDetailsForm form={form} />

<Card>
          <CardHeader>
            <CardTitle>Actions</CardTitle>
          </CardHeader>
          <CardContent className="space-y-6">
            {fields.map((field, index) => (
              <ActionForm
                key={field.id}
                form={form}
                index={index}
                remove={remove}
                lists={lists}
                templates={templates}
              />
            ))}

<Button
              type="button"
              onClick={() =>
                append({ type: "send_transactional_email", parameters: {} })
              }
              variant="outline"
              className="w-full"
            >
              <PlusCircle className="mr-2 h-4 w-4" /> Add Action
            </Button>
          </CardContent>
        </Card>

<Button type="submit" className="w-full">
          Create Son
        </Button>
      </form>
    </Form>
  );
}

================
File: components/SonDetailsForm.tsx
================
import React from "react";
import {
  FormField,
  FormItem,
  FormLabel,
  FormControl,
  FormMessage,
  FormDescription,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { SonDetailsFormProps } from "@/lib/types";
import { Switch } from "@/components/ui/switch";

export function SonDetailsForm({ form }: SonDetailsFormProps) {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Son Details</CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        <FormField
          control={form.control}
          name="name"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Son Name</FormLabel>
              <FormControl>
                <Input placeholder="Enter Son name" {...field} />
              </FormControl>
              <FormDescription>
                Give your Son a unique and descriptive name.
              </FormDescription>
              <FormMessage />
            </FormItem>
          )}
        />
        <FormField
          control={form.control}
          name="trigger"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Trigger</FormLabel>
              <Select onValueChange={field.onChange} defaultValue={field.value}>
                <FormControl>
                  <SelectTrigger>
                    <SelectValue placeholder="Select a trigger" />
                  </SelectTrigger>
                </FormControl>
                <SelectContent>
                  <SelectItem value="member_created">Member Created</SelectItem>
                  <SelectItem value="member_deleted">Member Deleted</SelectItem>
                  <SelectItem value="member_updated">Member Updated</SelectItem>
                  <SelectItem value="post_published">Post Published</SelectItem>
                  <SelectItem value="post_scheduled">Post Scheduled</SelectItem>
                </SelectContent>
              </Select>
              <FormDescription>
                Choose the event that will trigger this Son.
              </FormDescription>
              <FormMessage />
            </FormItem>
          )}
        />
        <FormField
          control={form.control}
          name="delay"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Delay</FormLabel>
              <FormControl>
                <Input
                  {...field}
                  placeholder="e.g., 30m, 2h, 1d, 1w"
                />
              </FormControl>
              <FormDescription>
                Set a delay before the Son executes its actions. Use format like "30m" for 30 minutes, "2h" for 2 hours, "1d" for 1 day, or "1w" for 1 week.
              </FormDescription>
              <FormMessage />
            </FormItem>
          )}
        />
        <FormField
          control={form.control}
          name="enabled"
          render={({ field }) => (
            <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
              <div className="space-y-0.5">
                <FormLabel className="text-base">Enabled</FormLabel>
                <FormDescription>Enable or disable this Son.</FormDescription>
              </div>
              <FormControl>
                <Switch
                  checked={field.value}
                  onCheckedChange={field.onChange}
                />
              </FormControl>
            </FormItem>
          )}
        />
      </CardContent>
    </Card>
  );
}

================
File: components/SonList.tsx
================
import React from "react";
import Link from "next/link";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { Pencil, Trash2, ToggleLeft, ToggleRight } from "lucide-react";
import { useSonContext } from "@/contexts/SonContext";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
import { SonListSkeleton } from "./SonListSkeleton";
import { useToast } from "@/components/ui/use-toast";
import { Son } from "@/lib/types";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip";

function formatDuration(duration: string): string {
  console.log("duration", duration);
  const match = duration.match(/^(\d+)([smhdw])$/);
  if (!match) return duration;

const [, value, unit] = match;
  const num = parseInt(value, 10);

switch (unit) {
    case "s":
      return `${num} second${num !== 1 ? "s" : ""}`;
    case "m":
      return `${num} minute${num !== 1 ? "s" : ""}`;
    case "h":
      return `${num} hour${num !== 1 ? "s" : ""}`;
    case "d":
      return `${num} day${num !== 1 ? "s" : ""}`;
    case "w":
      return `${num} week${num !== 1 ? "s" : ""}`;
    default:
      return duration;
  }
}

export function SonList() {
  const { sons, loading, error, deleteSon, updateSon } = useSonContext();
  const { toast } = useToast();

if (loading) {
    return <SonListSkeleton />;
  }

if (error) {
    return <div>Error: {error.message}</div>;
  }

if (sons.length === 0) {
    return <div>No sons found. Create your first son!</div>;
  }

return (
    <Card>
      <CardHeader>
        <CardTitle>Your Sons</CardTitle>
      </CardHeader>
      <CardContent>
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Name</TableHead>
              <TableHead>Trigger</TableHead>
              <TableHead>Status</TableHead>
              <TableHead>Delay</TableHead>
              <TableHead>Actions</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {sons.map((son) => (
              <TableRow key={son.id}>
                <TableCell>{son.name}</TableCell>
                <TableCell>{son.trigger}</TableCell>
                <TableCell>
                  <TooltipProvider>
                    <Tooltip>
                      <TooltipTrigger>
                        <Button
                          variant="ghost"
                          size="sm"
                          onClick={() => handleToggleEnabled(son)}
                        >
                          {son.enabled ? (
                            <ToggleRight className="h-4 w-4 text-green-500" />
                          ) : (
                            <ToggleLeft className="h-4 w-4 text-red-500" />
                          )}
                        </Button>
                      </TooltipTrigger>
                      <TooltipContent>
                        <p>{son.enabled ? "Enabled" : "Disabled"}</p>
                      </TooltipContent>
                    </Tooltip>
                  </TooltipProvider>
                </TableCell>
                <TableCell>{formatDuration(son.delay)}</TableCell>
                <TableCell>
                  <div className="flex space-x-2">
                    <Link href={`/sons/${son.id}`}>
                      <Button variant="outline" size="icon">
                        <Pencil className="h-4 w-4" />
                      </Button>
                    </Link>
                    <AlertDialog>
                      <AlertDialogTrigger asChild>
                        <Button variant="outline" size="icon">
                          <Trash2 className="h-4 w-4" />
                        </Button>
                      </AlertDialogTrigger>
                      <AlertDialogContent>
                        <AlertDialogHeader>
                          <AlertDialogTitle>Are you sure?</AlertDialogTitle>
                          <AlertDialogDescription>
                            This action cannot be undone. This will permanently
                            delete the Son.
                          </AlertDialogDescription>
                        </AlertDialogHeader>
                        <AlertDialogFooter>
                          <AlertDialogCancel>Cancel</AlertDialogCancel>
                          <AlertDialogAction onClick={() => deleteSon(son.id)}>
                            Delete
                          </AlertDialogAction>
                        </AlertDialogFooter>
                      </AlertDialogContent>
                    </AlertDialog>
                  </div>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </CardContent>
    </Card>
  );
}

================
File: components/SonListSkeleton.tsx
================
import React from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";

export function SonListSkeleton() {
  return (
    <Card className="flex-1">
      <CardHeader>
        <CardTitle>Your Sons</CardTitle>
      </CardHeader>
      <CardContent>
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Name</TableHead>
              <TableHead>Trigger</TableHead>
              <TableHead>Actions</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {[...Array(5)].map((_, index) => (
              <TableRow key={index}>
                <TableCell>
                  <div className="h-4 bg-gray-300 rounded w-3/4 animate-pulse"></div>
                </TableCell>
                <TableCell>
                  <div className="h-4 bg-gray-300 rounded w-1/2 animate-pulse"></div>
                </TableCell>
                <TableCell>
                  <div className="flex space-x-2">
                    <div className="h-8 w-8 bg-gray-300 rounded-full animate-pulse"></div>
                    <div className="h-8 w-8 bg-gray-300 rounded-full animate-pulse"></div>
                  </div>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </CardContent>
    </Card>
  );
}

================
File: components/TransactionalEmailActionFields.tsx
================
import React, { useState, useEffect } from "react";
import { UseFormReturn } from "react-hook-form";
import {
  FormField,
  FormItem,
  FormLabel,
  FormControl,
  FormMessage,
  FormDescription,
} from "@/components/ui/form";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Trash2, Plus } from "lucide-react";
import { ListmonkTemplate } from "@/lib/types";
import Link from "next/link";

interface TransactionalEmailActionFieldsProps {
  form: UseFormReturn<any>;
  index: number;
  templates: ListmonkTemplate[];
}

interface Header {
  key: string;
  value: string;
}

interface EditingField {
  key: string;
  newKey: string;
  value: string;
}

export function TransactionalEmailActionFields({
  form,
  index,
  templates,
}: TransactionalEmailActionFieldsProps) {
  const [localData, setLocalData] = useState<Record<string, string>>({});
  const [editingField, setEditingField] = useState<EditingField | null>(null);

useEffect(() => {
    const formData = form.getValues(`actions.${index}.parameters.data`);
    if (formData && Object.keys(formData).length > 0) {
      setLocalData(formData);
    }
  }, [form, index]);

const handleKeyChange = (oldKey: string, newKey: string) => {
    setEditingField((prev) => (prev ? { ...prev, newKey } : null));
  };

const handleValueChange = (key: string, value: string) => {
    setLocalData((prev) => ({ ...prev, [key]: value }));
  };

useEffect(() => {
    form.setValue(`actions.${index}.parameters.data`, localData);
  }, [localData, form, index]);
  return (
    <>
      {/* Template selection field remains unchanged */}
      <FormField
        control={form.control}
        name={`actions.${index}.parameters.template_id`}
        render={({ field }) => (
          <FormItem>
            <FormLabel>Template</FormLabel>
            <Select
              onValueChange={(value: string) => field.onChange(parseInt(value))}
              value={field.value?.toString()}
            >
              <FormControl>
                <SelectTrigger>
                  <SelectValue placeholder="Select a template" />
                </SelectTrigger>
              </FormControl>
              <SelectContent>
                {templates.map((template) => (
                  <SelectItem key={template.id} value={template.id.toString()}>
                    {template.name}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
            <FormDescription>
              Check the available template expressions in this link -{" "}
              <Link href="https://listmonk.app/docs/templating" target="_blank">
                https://listmonk.app/docs/templating
              </Link>
            </FormDescription>
            <FormMessage />
          </FormItem>
        )}
      />

<FormField
        control={form.control}
        name={`actions.${index}.parameters.headers`}
        render={({ field }) => (
          <FormItem>
            <FormLabel>Headers</FormLabel>
            <div className="space-y-2">
              {((field.value as Header[]) || []).map((header, headerIndex) => (
                <div key={headerIndex} className="flex items-center space-x-2">
                  <Input
                    placeholder="Key"
                    value={header.key}
                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                      const newHeaders = [...(field.value as Header[])];
                      newHeaders[headerIndex].key = e.target.value;
                      field.onChange(newHeaders);
                    }}
                  />
                  <Input
                    placeholder="Value"
                    value={header.value}
                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                      const newHeaders = [...(field.value as Header[])];
                      newHeaders[headerIndex].value = e.target.value;
                      field.onChange(newHeaders);
                    }}
                  />
                  <Button
                    type="button"
                    variant="ghost"
                    size="sm"
                    onClick={() => {
                      const newHeaders = (field.value as Header[]).filter(
                        (_, i) => i !== headerIndex
                      );
                      field.onChange(newHeaders);
                    }}
                  >
                    <Trash2 className="h-4 w-4" />
                  </Button>
                </div>
              ))}
              <Button
                type="button"
                variant="outline"
                size="sm"
                onClick={() => {
                  const newHeaders = [
                    ...((field.value as Header[]) || []),
                    { key: "", value: "" },
                  ];
                  field.onChange(newHeaders);
                }}
              >
                <Plus className="mr-2 h-4 w-4" /> Add Header
              </Button>
            </div>
            <FormMessage />
            <FormDescription>
              Headers will be added on the email, you can use this to track
              campaigns.
            </FormDescription>
          </FormItem>
        )}
      />

<FormField
        control={form.control}
        name={`actions.${index}.parameters.data`}
        render={() => (
          <FormItem>
            <FormLabel>Additional Data</FormLabel>
            <div className="space-y-2">
              {Object.entries(localData).map(([key, value]) => (
                <div key={key} className="flex items-center space-x-2">
                  <Input
                    placeholder="Key"
                    value={
                      editingField?.key === key ? editingField.newKey : key
                    }
                    onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                      handleKeyChange(key, e.target.value)
                    }
                    onFocus={() => setEditingField({ key, newKey: key, value })}
                    onBlur={handleKeyBlur}
                  />
                  <Input
                    placeholder="Value"
                    value={value}
                    onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                      handleValueChange(key, e.target.value)
                    }
                  />
                  <Button
                    type="button"
                    variant="ghost"
                    size="sm"
                    onClick={() => removeDataField(key)}
                  >
                    <Trash2 className="h-4 w-4" />
                  </Button>
                </div>
              ))}
              <Button
                type="button"
                variant="outline"
                size="sm"
                onClick={addDataField}
              >
                <Plus className="mr-2 h-4 w-4" /> Add Data Field
              </Button>
            </div>
            <FormMessage />
            <FormDescription>
              <p>Enter any additional data for the transactional email.</p>
              <p>
                Available in the template as{" "}
                <code className="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold">
                  {{ .Tx.Data.* }}
                </code>
              </p>
            </FormDescription>
          </FormItem>
        )}
      />
    </>
  );
}

================
File: components/WebhookInfo.tsx
================
// Create a new file: ui/components/WebhookInfo.tsx
import React, { useState } from "react";
import { useSonContext } from "@/contexts/SonContext";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Eye, EyeOff } from "lucide-react";

export function WebhookInfo() {
  const { webhook, webhookLoading, webhookError } = useSonContext();
  const [showSecret, setShowSecret] = useState(false);

if (webhookLoading) {
    return <div>Loading webhook information...</div>;
  }

if (webhookError) {
    return <div>Error loading webhook information: {webhookError.message}</div>;
  }

if (!webhook) {
    return <div>No webhook information available.</div>;
  }

return (
    <Card>
      <CardHeader>
        <CardTitle>Webhook Information</CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        <div>
          <label className="text-sm font-medium">Endpoint:</label>
          <Input value={webhook.endpoint} readOnly />
        </div>
        <div>
          <label className="text-sm font-medium">Secret:</label>
          <div className="flex items-center space-x-2">
            <Input
              type={showSecret ? "text" : "password"}
              value={webhook.secret}
              readOnly
            />
            <Button
              variant="outline"
              size="icon"
              onClick={() => setShowSecret(!showSecret)}
            >
              {showSecret ? (
                <EyeOff className="h-4 w-4" />
              ) : (
                <Eye className="h-4 w-4" />
              )}
            </Button>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}

================
File: contexts/AuthContext.tsx
================
import { createContext, useContext, useState, useEffect } from "react";
import { apiClient } from "@/lib/api-client";

interface User {
  id: string;
  email: string;
}

interface AuthContextType {
  user: User | null;
  login: (token: string, user: User) => Promise<void>;
  logout: () => Promise<void>;
  loading: boolean;
}

const AuthContext = createContext<AuthContextType | null>(null);

export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({
  children,
}) => {
  const [user, setUser] = useState<User | null>(null);
  const [loading, setLoading] = useState(true);

useEffect(() => {
    const token = localStorage.getItem("authToken");
    const storedUser = localStorage.getItem("user");
    if (token && storedUser) {
      setUser(JSON.parse(storedUser));
      apiClient.defaults.headers.common["Authorization"] = `Bearer ${token}`;
    }
    setLoading(false);
  }, []);

const login = async (token: string, user: User) => {
    localStorage.setItem("authToken", token);
    localStorage.setItem("user", JSON.stringify(user));
    apiClient.defaults.headers.common["Authorization"] = `Bearer ${token}`;
    setUser(user);
  };

return (
    <AuthContext.Provider value={{ user, login, logout, loading }}>
      {children}
    </AuthContext.Provider>
  );
};

export const useAuthContext = () => {
  const context = useContext(AuthContext);
  if (!context) {
    throw new Error("useAuth must be used within an AuthProvider");
  }
  return context;
};

================
File: contexts/ListContext.tsx
================
import React, { createContext, useContext } from "react";
import { ListmonkList } from "@/lib/types";
import { useLists } from "@/hooks/useLists";

interface ListContextProps {
  lists: ListmonkList[];
  loading: boolean;
  error: Error | null;
  fetchLists: () => void;
}

const ListContext = createContext<ListContextProps | undefined>(undefined);

export const ListProvider: React.FC<{ children: React.ReactNode }> = ({
  children,
}) => {
  const { lists, loading, error, fetchLists } = useLists();

return (
    <ListContext.Provider
      value={{
        lists,
        loading,
        error,
        fetchLists,
      }}
    >
      {children}
    </ListContext.Provider>
  );
};

export const useListContext = () => {
  const context = useContext(ListContext);
  if (!context) {
    throw new Error("useListContext must be used within a ListProvider");
  }
  return context;
};

================
File: contexts/SonContext.tsx
================
// ui/contexts/SonContext.tsx
import React, { createContext, useContext } from "react";
import { Son } from "@/lib/types";
import { useSons } from "@/hooks/useSons";
import { Dispatch, SetStateAction } from "react";
import { useWebhook } from "@/hooks/useWebhook";
import { Webhook } from "@/lib/types";

interface SonContextProps {
  sons: Son[];
  setSons: Dispatch<SetStateAction<Son[]>>;
  loading: boolean;
  error: Error | null;
  fetchSons: () => void;
  createSon: (
    sonData: Omit<Son, "id" | "created_at" | "updated_at">
  ) => Promise<Son>;
  updateSon: (id: string, sonData: Partial<Son>) => Promise<Son>;
  deleteSon: (id: string) => Promise<void>;
  webhook: Webhook | null;
  webhookLoading: boolean;
  webhookError: Error | null;
  fetchWebhook: () => Promise<void>;
}

const SonContext = createContext<SonContextProps | undefined>(undefined);

export const SonProvider: React.FC<{ children: React.ReactNode }> = ({
  children,
}) => {
  const {
    sons,
    setSons,
    loading,
    error,
    fetchSons,
    createSon,
    updateSon,
    deleteSon,
  } = useSons();
  const {
    webhook,
    loading: webhookLoading,
    error: webhookError,
    fetchWebhook,
  } = useWebhook();

return (
    <SonContext.Provider
      value={{
        sons,
        setSons,
        loading,
        error,
        fetchSons,
        createSon,
        updateSon,
        deleteSon,
        webhook,
        webhookLoading,
        webhookError,
        fetchWebhook,
      }}
    >
      {children}
    </SonContext.Provider>
  );
};

export const useSonContext = () => {
  const context = useContext(SonContext);
  if (!context) {
    throw new Error("useSonContext must be used within a SonProvider");
  }
  return context;
};

================
File: contexts/TemplateContext.tsx
================
import React, { createContext, useContext } from "react";
import { ListmonkTemplate } from "@/lib/types";
import { useTemplates } from "@/hooks/useTemplates";

interface TemplateContextProps {
  templates: ListmonkTemplate[];
  loading: boolean;
  error: Error | null;
  fetchTemplates: () => void;
}

const TemplateContext = createContext<TemplateContextProps | undefined>(
  undefined
);

export const TemplateProvider: React.FC<{ children: React.ReactNode }> = ({
  children,
}) => {
  const { templates, loading, error, fetchTemplates } = useTemplates();

return (
    <TemplateContext.Provider
      value={{
        templates,
        loading,
        error,
        fetchTemplates,
      }}
    >
      {children}
    </TemplateContext.Provider>
  );
};

export const useTemplateContext = () => {
  const context = useContext(TemplateContext);
  if (!context) {
    throw new Error(
      "useTemplateContext must be used within a TemplateProvider"
    );
  }
  return context;
};

================
File: hooks/useCustomToast.ts
================
import { useToast } from "@/components/ui/use-toast"

export function useCustomToast() {
    const { toast } = useToast()

const showToast = (title: string, description: string, variant: "default" | "destructive" = "default") => {
        toast({
            title,
            description,
            variant,
        })
    }

return { showToast }
}

================
File: hooks/useInitialData.ts
================
import { useState, useEffect, useCallback } from 'react';
import { apiClient } from '@/lib/api-client';
import { Son, Webhook, ListmonkList, ListmonkTemplate } from '@/lib/types';

interface InitialData {
    sons: Son[];
    webhook: Webhook;
    lists: ListmonkList[];
    templates: ListmonkTemplate[];
}

export function useInitialData() {
    const [data, setData] = useState<InitialData | null>(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState<Error | null>(null);

useEffect(() => {
        fetchInitialData();
    }, [fetchInitialData]);

return { data, loading, error, fetchInitialData };
}

================
File: hooks/useLists.ts
================
import { useState, useEffect, useCallback } from 'react';
import { apiClient } from '@/lib/api-client';
import { ListmonkList } from '@/lib/types';

export function useLists() {
    const [lists, setLists] = useState<ListmonkList[]>([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState<Error | null>(null);

useEffect(() => {
        fetchLists();
    }, [fetchLists]);

return { lists, loading, error, fetchLists };
}

================
File: hooks/useSon.ts
================
import { useState, useEffect } from "react";
import { useSonContext } from "@/contexts/SonContext";
import { Son } from "@/lib/types";
import { apiClient } from "@/lib/api-client";

export function useSon(id: string) {
    const { sons, setSons } = useSonContext();  // Assuming you expose setSons in the context
    const [son, setSon] = useState<Son | null>(null);
    const [loading, setLoading] = useState<boolean>(true);
    const [error, setError] = useState<Error | null>(null);

useEffect(() => {
        // Check if the Son is already in the context
        const existingSon = sons.find((s) => s.id === id);
        if (existingSon) {
            setSon(existingSon);
            setLoading(false);
        } else {
            // If not, fetch from the server
            const fetchSon = async () => {
                setLoading(true);
                try {
                    const response = await apiClient.get<Son>(`/sons/${id}`);
                    setSon(response.data);
                    setError(null);

// Optimistically update the context with the new Son
                    setSons((prevSons) => [...prevSons, response.data]);
                } catch (err) {
                    setError(err instanceof Error ? err : new Error("An error occurred"));
                } finally {
                    setLoading(false);
                }
            };

fetchSon();
        }
    }, [id, sons, setSons]);

return { son, loading, error };
}

================
File: hooks/useSons.ts
================
// src/hooks/useSons.ts
import { useState, useEffect, useCallback } from 'react';
import { apiClient } from '@/lib/api-client';
import { Son } from '@/lib/types';

export function useSons() {
    const [sons, setSons] = useState<Son[]>([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState<Error | null>(null);

useEffect(() => {
        fetchSons(); // Initial data fetch
    }, [fetchSons]);

return { sons, setSons, loading, error, fetchSons, createSon, updateSon, deleteSon };
}

================
File: hooks/useTemplates.ts
================
import { useState, useEffect, useCallback } from 'react';
import { apiClient } from '@/lib/api-client';
import { ListmonkTemplate } from '@/lib/types';

export function useTemplates() {
    const [templates, setTemplates] = useState<ListmonkTemplate[]>([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState<Error | null>(null);

useEffect(() => {
        fetchTemplates();
    }, [fetchTemplates]);

return { templates, loading, error, fetchTemplates };
}

================
File: hooks/useWebhook.ts
================
import { useState, useEffect, useCallback } from 'react';
import { apiClient } from '@/lib/api-client';
import { Webhook } from '@/lib/types';

export function useWebhook() {
    const [webhook, setWebhook] = useState<Webhook | null>(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState<Error | null>(null);

useEffect(() => {
        fetchWebhook();
    }, [fetchWebhook]);

return { webhook, loading, error, fetchWebhook };
}

================
File: lib/api-client.ts
================
import axios from 'axios';

const API_BASE_URL = '/api';

export const apiClient = axios.create({
    baseURL: API_BASE_URL,
    withCredentials: true,
});

apiClient.interceptors.request.use(
    (config) => {
        const token = localStorage.getItem('authToken');
        if (token) {
            config.headers['Authorization'] = `Bearer ${token}`;
        }
        return config;
    },
    (error) => Promise.reject(error)
);

apiClient.interceptors.response.use(
    (response) => response,
    async (error) => {
        if (error.response && error.response.status === 401) {
            localStorage.removeItem('authToken');
            localStorage.removeItem('user');
            delete apiClient.defaults.headers.common['Authorization'];
            window.dispatchEvent(new CustomEvent('unauthorized'));
            window.location.href = '/login';
        }
        return Promise.reject(error);
    }
);

export default apiClient;

================
File: lib/schemas.ts
================
import * as z from 'zod';

// Define the schema for action parameters
const actionParametersSchema = z.object({
    subject: z.string().optional(),
    lists: z.array(z.number()).optional(),
    template_id: z.number().optional(),
    tags: z.string().optional(),
    send_now: z.boolean().optional(),
}).strict().or(z.record(z.any())); // Allow any other properties for flexibility

// Define the schema for a single action
const actionSchema = z.object({
    type: z.enum(['send_transactional_email', 'manage_subscriber', 'create_campaign']),
    parameters: actionParametersSchema,
});

// Define the schema for the entire Son object
export const sonSchema = z.object({
    id: z.string().optional(), // Optional because it might not be present when creating a new Son
    name: z.string().min(1, 'Name is required'),
    trigger: z.enum([
        'member_created',
        'member_deleted',
        'member_updated',
        'post_published',
        'post_scheduled',
    ]),
    delay: z.string().refine((val) => {
        const durationRegex = /^(\d+)\s*(s|m|h|d|w)$/;
        return durationRegex.test(val);
    }, {
        message: "Invalid duration format. Use format like '30m', '2h', '1d', or '1w'.",
    }).default('0s'),
    actions: z.array(actionSchema).min(1, 'At least one action is required'),
    enabled: z.boolean().default(true),
    created_at: z.date().optional(),
    updated_at: z.date().optional(),
});

export const editableSonSchema = z.object({
    name: z.string().min(1, 'Name is required'),
    trigger: z.enum([
        'member_created',
        'member_deleted',
        'member_updated',
        'post_published',
        'post_scheduled',
    ]),
    delay: z.string().min(2).default('0s').refine((val) => {
        const durationRegex = /^(\d+)\s*(s|m|h|d|w)$/;
        return durationRegex.test(val);
    }, {
        message: "Invalid duration format. Use format like '30m', '2h', '1d', or '1w'.",
    }),
    actions: z.array(z.object({
        type: z.enum(['send_transactional_email', 'manage_subscriber', 'create_campaign']),
        parameters: z.record(z.any()),
    })),
    enabled: z.boolean().default(true),
});

// Define a schema for creating a new Son (without id, createdAt, and updatedAt)
export const createSonSchema = sonSchema.omit({ id: true, created_at: true, updated_at: true });

// Define a schema for updating an existing Son
export const updateSonSchema = sonSchema.partial().extend({
    id: z.string(),
});

// Define types for create and update operations
export type CreateSonInput = z.infer<typeof createSonSchema>;
export type UpdateSonInput = z.infer<typeof updateSonSchema>;

================
File: lib/types.ts
================
import { UseFormReturn, FieldValues } from 'react-hook-form';
import { editableSonSchema } from '@/lib/schemas';  // Assuming this is where your Son type is defined
import { z } from 'zod';
// Define a type for the Son object based on the schema
export interface Son extends z.infer<typeof editableSonSchema> {
    id: string;
    created_at: string;
    updated_at: string;
}

// Type for editable Son fields
export type EditableSon = z.infer<typeof editableSonSchema>;

export interface ListmonkList {
    id: number;
    name: string;
    type: string;
    optin: string;
    tags: string[];
}

export interface ListmonkTemplate {
    id: number;
    name: string;
    type: string;
    is_default: boolean;
}
// Props for CampaignActionFields
export interface CampaignActionFieldsProps {
    form: UseFormReturn<EditableSon>;
    index: number;
    lists: ListmonkList[];
    templates: ListmonkTemplate[];
}

// Props for ManageSubscriberActionFields
export interface ManageSubscriberActionFieldsProps {
    form: UseFormReturn<EditableSon>;
    index: number;
    lists: ListmonkList[];
}

// Props for SonDetailsForm
export interface SonDetailsFormProps {
    form: UseFormReturn<EditableSon>;
}

export interface ActionFormProps {
    form: UseFormReturn<EditableSon>;
    index: number;
    remove: (index: number) => void;
    lists: ListmonkList[];
    templates: ListmonkTemplate[];
}

export interface Webhook {
    id: string;
    endpoint: string;
    secret: string;
}

================
File: lib/utils.ts
================
import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

================
File: pages/auth/verify.tsx
================
import { useEffect } from "react";
import { useRouter } from "next/router";
import { useAuthContext } from "@/contexts/AuthContext";
import { useCustomToast } from "@/hooks/useCustomToast";
import { apiClient } from "@/lib/api-client";

const VerifyPage = () => {
  const router = useRouter();
  const { login } = useAuthContext();
  const { showToast } = useCustomToast();

useEffect(() => {
    const verifyToken = async () => {
      const { token } = router.query;
      if (token) {
        try {
          const response = await apiClient.get(`/auth/verify?token=${token}`);
          await login(response.data.token, response.data.user);
          showToast("Success", "Logged in successfully");
          router.push("/");
        } catch (error) {
          console.error("Verification failed:", error);
          showToast("Error", "Verification failed", "destructive");
          router.push("/login");
        }
      }
    };

verifyToken();
  }, [router.query]);

return (
    <div className="flex items-center justify-center h-screen">
      <p>Verifying your magic link...</p>
    </div>
  );
};

VerifyPage.layout = "minimal";

export default VerifyPage;

================
File: pages/sons/[id].tsx
================
import { NextPageWithExtras } from "next";

import React, { useEffect } from "react";
import { useRouter } from "next/router";
import { useForm, useFieldArray } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { Button } from "@/components/ui/button";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
import { Form } from "@/components/ui/form";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { PlusCircle } from "lucide-react";
import { useSon } from "@/hooks/useSon";
import { useCustomToast } from "@/hooks/useCustomToast";
import { SonDetailsForm } from "@/components/SonDetailsForm";
import { ActionForm } from "@/components/ActionForm";
import { editableSonSchema } from "@/lib/schemas";
import { EditableSon } from "@/lib/types";
import { useSonContext } from "@/contexts/SonContext";
import { useListContext } from "@/contexts/ListContext";
import { useTemplateContext } from "@/contexts/TemplateContext";

function isValidTrigger(trigger: string): trigger is EditableSon["trigger"] {
  return [
    "member_created",
    "member_deleted",
    "member_updated",
    "post_published",
    "post_scheduled",
  ].includes(trigger);
}

const SonDetailPage: NextPageWithExtras = () => {
  const router = useRouter();
  const { id } = router.query;
  const { son, loading: sonLoading, error: sonError } = useSon(id as string);
  const { updateSon, deleteSon } = useSonContext();
  const { showToast } = useCustomToast();
  const { lists, loading: listsLoading, error: listsError } = useListContext();
  const {
    templates,
    loading: templatesLoading,
    error: templatesError,
  } = useTemplateContext();

const form = useForm<EditableSon>({
    resolver: zodResolver(editableSonSchema),
    defaultValues: {
      name: "",
      trigger: "member_created",
      delay: 0,
      actions: [],
    },
  });

const { fields, append, remove } = useFieldArray({
    control: form.control,
    name: "actions",
  });

useEffect(() => {
    if (son) {
      const { name, trigger, delay, actions } = son;

if (isValidTrigger(trigger)) {
        form.reset({
          name,
          trigger,
          delay,
          actions: actions.map((action) => ({
            type: action.type,
            parameters: action.parameters,
          })),
        });
      } else {
        console.error(`Invalid trigger value: ${trigger}`);
        form.reset({
          name,
          trigger: "member_created",
          delay,
          actions: actions.map((action) => ({
            type: action.type,
            parameters: action.parameters,
          })),
        });
      }
    }
  }, [son, form]);

if (sonLoading || listsLoading || templatesLoading) {
    return (
      <div className="flex justify-center items-center h-full">Loading...</div>
    );
  }

if (sonError || listsError || templatesError) {
    return (
      <div className="text-red-500">
        Error:{" "}
        {sonError?.message || listsError?.message || templatesError?.message}
      </div>
    );
  }

if (!son) return <div>Son not found</div>;

return (
    <div className="flex-1 max-w-3xl mx-auto space-y-4">
      <h1 className="text-2xl font-bold">Edit Son: {son.name}</h1>
      <p className="text-sm text-gray-500">
        Created at: {new Date(son.created_at).toLocaleString()}
      </p>
      <p className="text-sm text-gray-500">
        Last updated: {new Date(son.updated_at).toLocaleString()}
      </p>

<Card>
            <CardHeader>
              <CardTitle>Actions</CardTitle>
            </CardHeader>
            <CardContent className="space-y-6">
              {fields.map((field, index) => (
                <ActionForm
                  key={field.id}
                  form={form}
                  index={index}
                  remove={remove}
                  lists={lists}
                  templates={templates}
                />
              ))}

<Button
                type="button"
                onClick={() =>
                  append({ type: "send_transactional_email", parameters: {} })
                }
                variant="outline"
                className="w-full"
              >
                <PlusCircle className="mr-2 h-4 w-4" /> Add Action
              </Button>
            </CardContent>
          </Card>

<Button type="submit" className="w-full">
            Save Changes
          </Button>
        </form>
      </Form>
      <AlertDialog>
        <AlertDialogTrigger asChild>
          <Button variant="destructive">Delete Son</Button>
        </AlertDialogTrigger>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Are you sure?</AlertDialogTitle>
            <AlertDialogDescription>
              This action cannot be undone. This will permanently delete the
              Son.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancel</AlertDialogCancel>
            <AlertDialogAction onClick={handleDelete}>Delete</AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  );
};

SonDetailPage.auth = true;

export default SonDetailPage;

================
File: pages/sons/index.tsx
================
import type { NextPageWithExtras } from "next";
import Link from "next/link";
import { Button } from "@/components/ui/button";
import { SonList } from "@/components/SonList";

const SonListPage: NextPageWithExtras = () => {
  return (
    <div className="flex-1 space-y-4 max-w-3xl mx-auto">
      <div className="flex justify-between items-center">
        <h1 className="text-2xl font-bold">Manage Sons</h1>
        <Link href="/sons/new">
          <Button>Create New Son</Button>
        </Link>
      </div>

<SonList />
    </div>
  );
};

SonListPage.auth = true;

export default SonListPage;

================
File: pages/sons/new.tsx
================
import { NextPageWithExtras } from "next";
import SonCreationForm from "@/components/SonCreationForm";

const NewSonPage: NextPageWithExtras = () => {
  return (
    <div className="flex-1 max-w-3xl mx-auto">
      <h1 className="text-2xl font-bold mb-4">Create New Son</h1>
      <SonCreationForm />
    </div>
  );
};

NewSonPage.auth = true;

export default NewSonPage;

================
File: pages/_app.tsx
================
// ui/pages/_app.tsx
"use client";
import { AppProps } from "next/app";
import type { NextPageWithExtras } from "next";
import localFont from "next/font/local";
import { cn } from "@/lib/utils";
import DefaultLayout from "@/components/layout";
import MinimalLayout from "@/components/MinimalLayout";
import { Toaster } from "@/components/ui/toaster";
import "@/styles/globals.css";
import { ProtectedRoute } from "@/components/ProtectedRoute";
import { AuthProvider } from "@/contexts/AuthContext";
import { AnimatePresence, motion } from "framer-motion";
import { useRouter } from "next/router";
import { useToast } from "@/components/ui/use-toast";
import { useEffect } from "react";

const fontSans = localFont({
  src: "../public/fonts/inter-var-latin.woff2",
  variable: "--font-sans",
});

type AppPropsWithAuth = AppProps & {
  Component: NextPageWithExtras;
};

function MyApp({ Component, pageProps }: AppPropsWithAuth) {
  const router = useRouter();
  const Layout = Component.layout === "minimal" ? MinimalLayout : DefaultLayout;
  const { toast } = useToast();

useEffect(() => {
    const handleUnauthorized = (event: Event) => {
      if (event instanceof CustomEvent && event.detail === "unauthorized") {
        toast({
          title: "Session Expired",
          description:
            "You've been logged out due to inactivity. Please log in again.",
          variant: "destructive",
        });
      }
    };

window.addEventListener("unauthorized", handleUnauthorized);

return () => {
      window.removeEventListener("unauthorized", handleUnauthorized);
    };
  }, [toast]);

return (
    <div
      className={cn(
        "min-h-screen max-h-screen bg-background font-sans antialiased",
        fontSans.variable
      )}
    >
      <AuthProvider>
        <AnimatePresence mode="wait">
          <Layout>
            <motion.div
              key={router.route}
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              transition={{ duration: 0.2 }}
              className="flex w-full"
            >
              {Component.auth ? (
                <ProtectedRoute>
                  <Component {...pageProps} />
                </ProtectedRoute>
              ) : (
                <Component {...pageProps} />
              )}
            </motion.div>
          </Layout>
        </AnimatePresence>
      </AuthProvider>
      <Toaster />
    </div>
  );
}

export default MyApp;

================
File: pages/_document.tsx
================
import { Html, Head, Main, NextScript } from "next/document";

export default function Document() {
  return (
    <Html lang="en">
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

================
File: pages/index.tsx
================
import { NextPageWithExtras } from "next";
import Dashboard from "@/components/Dashboard";

const HomePage: NextPageWithExtras = () => {
  return <Dashboard />;
};

HomePage.auth = true;

export default HomePage;

================
File: pages/login.tsx
================
import { useState } from "react";
import { useRouter } from "next/router";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
  Card,
  CardHeader,
  CardTitle,
  CardContent,
  CardFooter,
} from "@/components/ui/card";
import { useCustomToast } from "@/hooks/useCustomToast";
import { apiClient } from "@/lib/api-client";

const LoginPage = () => {
  const [email, setEmail] = useState("");
  const router = useRouter();
  const { showToast } = useCustomToast();

return (
    <div className="flex flex-col w-full items-center justify-center bg-gray-100">
      <h1>
        <span className="font-bold text-2xl">Ghost-Listmonk Connector</span>
      </h1>
      <Card className="w-full max-w-md mt-12">
        <CardHeader>
          <CardTitle>Login</CardTitle>
        </CardHeader>
        <form onSubmit={handleSubmit}>
          <CardContent className="space-y-4">
            <Input
              type="email"
              placeholder="Email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              required
            />
          </CardContent>
          <CardFooter>
            <Button type="submit" className="w-full">
              Send Magic Link
            </Button>
          </CardFooter>
        </form>
      </Card>
    </div>
  );
};

LoginPage.layout = "minimal";

export default LoginPage;

================
File: pages/settings.tsx
================
import { NextPageWithExtras } from "next";
import { WebhookInfo } from "@/components/WebhookInfo";

const SettingsPage: NextPageWithExtras = () => {
  return (
    <div className="flex-1 space-y-4 max-w-3xl mx-auto">
      <h1 className="text-2xl font-bold">Settings</h1>
      <WebhookInfo />
    </div>
  );
};

SettingsPage.auth = true;

export default SettingsPage;

================
File: public/next.svg
================
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

================
File: public/vercel.svg
================
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>

================
File: styles/globals.css
================
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  @layer base {
    :root {
      --background: 0 0% 100%;
      --foreground: 20 14.3% 4.1%;
      --card: 0 0% 100%;
      --card-foreground: 20 14.3% 4.1%;
      --popover: 0 0% 100%;
      --popover-foreground: 20 14.3% 4.1%;
      --primary: 24.6 95% 53.1%;
      --primary-foreground: 60 9.1% 97.8%;
      --secondary: 60 4.8% 95.9%;
      --secondary-foreground: 24 9.8% 10%;
      --muted: 60 4.8% 95.9%;
      --muted-foreground: 25 5.3% 44.7%;
      --accent: 60 4.8% 95.9%;
      --accent-foreground: 24 9.8% 10%;
      --destructive: 0 84.2% 60.2%;
      --destructive-foreground: 60 9.1% 97.8%;
      --border: 20 5.9% 90%;
      --input: 20 5.9% 90%;
      --ring: 24.6 95% 53.1%;
      --radius: 1rem;
      --chart-1: 12 76% 61%;
      --chart-2: 173 58% 39%;
      --chart-3: 197 37% 24%;
      --chart-4: 43 74% 66%;
      --chart-5: 27 87% 67%;
    }

.dark {
      --background: 20 14.3% 4.1%;
      --foreground: 60 9.1% 97.8%;
      --card: 20 14.3% 4.1%;
      --card-foreground: 60 9.1% 97.8%;
      --popover: 20 14.3% 4.1%;
      --popover-foreground: 60 9.1% 97.8%;
      --primary: 20.5 90.2% 48.2%;
      --primary-foreground: 60 9.1% 97.8%;
      --secondary: 12 6.5% 15.1%;
      --secondary-foreground: 60 9.1% 97.8%;
      --muted: 12 6.5% 15.1%;
      --muted-foreground: 24 5.4% 63.9%;
      --accent: 12 6.5% 15.1%;
      --accent-foreground: 60 9.1% 97.8%;
      --destructive: 0 72.2% 50.6%;
      --destructive-foreground: 60 9.1% 97.8%;
      --border: 12 6.5% 15.1%;
      --input: 12 6.5% 15.1%;
      --ring: 20.5 90.2% 48.2%;
      --chart-1: 220 70% 50%;
      --chart-2: 160 60% 45%;
      --chart-3: 30 80% 55%;
      --chart-4: 280 65% 60%;
      --chart-5: 340 75% 55%;
    }
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

================
File: types/next-auth.d.ts
================
import type { NextComponentType, NextPageContext } from 'next'

declare module 'next' {
    export type NextPageWithExtras<P = {}, IP = P> = NextComponentType<NextPageContext, IP, P> & {
        auth?: boolean,
        layout?: 'default' | 'admin' | 'minimal' | (string & {})
        permissions?: string[]
        dataFetching?: 'ssg' | 'ssr' | 'csr'
    }
}

================
File: .eslintrc.json
================
{
  "extends": "next/core-web-vitals"
}

================
File: .gitignore
================
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js
.yarn/install-state.gz

# testing
/coverage

# next.js
/.next/
/out/

# production
/build

# misc
.DS_Store
*.pem

# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# local env files
.env*.local

# vercel
.vercel

# typescript
*.tsbuildinfo
next-env.d.ts

================
File: components.json
================
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": false,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.ts",
    "css": "styles/globals.css",
    "baseColor": "zinc",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  }
}

================
File: next.config.mjs
================
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  output: "export",
  // assetPrefix: ".",
  images: {
    unoptimized: true,
  },
};

export default nextConfig;

================
File: package.json
================
{
  "name": "ui2",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@hookform/resolvers": "^3.9.0",
    "@radix-ui/react-alert-dialog": "^1.1.1",
    "@radix-ui/react-icons": "^1.3.0",
    "@radix-ui/react-label": "^2.1.0",
    "@radix-ui/react-select": "^2.1.1",
    "@radix-ui/react-separator": "^1.1.0",
    "@radix-ui/react-slot": "^1.1.0",
    "@radix-ui/react-switch": "^1.1.0",
    "@radix-ui/react-toast": "^1.2.1",
    "@radix-ui/react-tooltip": "^1.1.2",
    "axios": "^1.7.3",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.1",
    "framer-motion": "^11.3.24",
    "lucide-react": "^0.427.0",
    "next": "14.2.5",
    "react": "^18",
    "react-dom": "^18",
    "react-hook-form": "^7.52.2",
    "recharts": "^2.12.7",
    "tailwind-merge": "^2.5.1",
    "tailwindcss-animate": "^1.0.7",
    "zod": "^3.23.8"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "14.2.5",
    "postcss": "^8",
    "tailwindcss": "^3.4.1",
    "typescript": "^5"
  }
}

================
File: postcss.config.mjs
================
/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: {
    tailwindcss: {},
  },
};

export default config;

================
File: README.md
================
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).

## Getting Started

First, run the development server:

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.

[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.

The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.

This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.

## Learn More

To learn more about Next.js, take a look at the following resources:

- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.

You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!

## Deploy on Vercel

The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.

Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

================
File: tailwind.config.ts
================
import type { Config } from "tailwindcss"
import { fontFamily } from "tailwindcss/defaultTheme"

const config = {
  darkMode: ["class"],
  content: [
    './pages/**/*.{ts,tsx}',
    './components/**/*.{ts,tsx}',
    './app/**/*.{ts,tsx}',
    './src/**/*.{ts,tsx}',
  ],
  prefix: "",
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      fontFamily: {
        sans: ["var(--font-sans)", ...fontFamily.sans],
      },
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        "accordion-down": {
          from: { height: "0" },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: "0" },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
} satisfies Config

export default config

================
File: tsconfig.json
================
{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "typeRoots": ["./node_modules/@types", "./types"],
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}