'use client';

import { Button } from '@tale/ui/button';
import { Text } from '@tale/ui/text';
import type { ColumnDef } from '@tanstack/react-table';
import { Plus, Calendar, Pencil, Trash2 } from 'lucide-react';
import { useState, useMemo, useCallback } from 'react';

import { DataTable } from '@/app/components/ui/data-table/data-table';
import { DeleteDialog } from '@/app/components/ui/dialog/delete-dialog';
import { Switch } from '@/app/components/ui/forms/switch';
import { useToast } from '@/app/hooks/use-toast';
import { toId } from '@/convex/lib/type_cast_helpers';
import { useT } from '@/lib/i18n/client';

import type { WfSchedule } from '../hooks/queries';
import { useSchedules } from '../hooks/queries';
import { useDeleteSchedule, useToggleSchedule } from '../hooks/slug-mutations';
import { useTriggerTimestamp } from '../hooks/use-trigger-timestamp';
import { CollapsibleSection } from './collapsible-section';
import { ScheduleCreateDialog } from './schedule-create-dialog';

interface SchedulesSectionProps {
  workflowRootId: string;
  organizationId: string;
  workflowSlug: string;
}

type Schedule = WfSchedule;

export function SchedulesSection({
  workflowRootId,
  organizationId,
  workflowSlug,
}: SchedulesSectionProps) {
  const { t } = useT('automations');
  const { toast } = useToast();
  const { schedules } = useSchedules(organizationId, workflowSlug);

  const toggleSchedule = useToggleSchedule();
  const deleteScheduleMutation = useDeleteSchedule();

  const [isCreateOpen, setIsCreateOpen] = useState(false);
  const [editSchedule, setEditSchedule] = useState<Schedule | null>(null);
  const [deleteTarget, setDeleteTarget] = useState<Schedule | null>(null);
  const [isDeleting, setIsDeleting] = useState(false);

  const handleToggle = useCallback(
    async (scheduleId: string, isActive: boolean) => {
      try {
        await toggleSchedule.mutateAsync({
          scheduleId: toId<'wfSchedules'>(scheduleId),
          isActive,
        });
        toast({
          title: isActive
            ? t('triggers.schedules.toast.enabled')
            : t('triggers.schedules.toast.disabled'),
          variant: 'success',
        });
      } catch {
        toast({
          title: t('triggers.schedules.toast.toggleError'),
          variant: 'destructive',
        });
      }
    },
    [toggleSchedule, toast, t],
  );

  const handleDelete = useCallback(async () => {
    if (!deleteTarget) return;
    setIsDeleting(true);
    try {
      await deleteScheduleMutation.mutateAsync({
        scheduleId: deleteTarget._id,
      });
      toast({
        title: t('triggers.schedules.toast.deleted'),
        variant: 'success',
      });
      setDeleteTarget(null);
    } catch {
      toast({
        title: t('triggers.schedules.toast.deleteError'),
        variant: 'destructive',
      });
    } finally {
      setIsDeleting(false);
    }
  }, [deleteTarget, deleteScheduleMutation, toast, t]);

  const formatTimestamp = useTriggerTimestamp();

  const columns = useMemo<ColumnDef<Schedule>[]>(
    () => [
      {
        id: 'cronExpression',
        header: t('triggers.schedules.columns.cronExpression'),
        cell: ({ row }) => (
          <div className="flex items-center gap-2">
            <code className="bg-muted rounded px-2 py-0.5 font-mono text-sm">
              {row.original.cronExpression}
            </code>
            <Text as="span" variant="caption">
              {row.original.timezone}
            </Text>
          </div>
        ),
        size: 220,
      },
      {
        id: 'active',
        header: t('triggers.schedules.columns.active'),
        cell: ({ row }) => (
          <Switch
            checked={row.original.isActive}
            onCheckedChange={(checked) =>
              handleToggle(row.original._id, checked)
            }
            aria-label={t('triggers.schedules.columns.active')}
          />
        ),
        size: 80,
      },
      {
        id: 'lastTriggered',
        header: t('triggers.schedules.columns.lastTriggered'),
        cell: ({ row }) => (
          <Text as="span" variant="muted">
            {formatTimestamp(row.original.lastTriggeredAt)}
          </Text>
        ),
        size: 180,
      },
      {
        id: 'createdBy',
        header: t('triggers.schedules.columns.createdBy'),
        cell: ({ row }) => (
          <Text as="span" variant="muted">
            {row.original.createdBy}
          </Text>
        ),
        size: 160,
      },
      {
        id: 'actions',
        header: '',
        cell: ({ row }) => (
          <div className="flex items-center justify-end gap-1">
            <Button
              variant="ghost"
              size="sm"
              onClick={() => setEditSchedule(row.original)}
              aria-label={t('triggers.schedules.form.editTitle')}
            >
              <Pencil className="size-4" />
            </Button>
            <Button
              variant="ghost"
              size="sm"
              onClick={() => setDeleteTarget(row.original)}
              aria-label={t('triggers.schedules.deleteTitle')}
            >
              <Trash2 className="size-4" />
            </Button>
          </div>
        ),
        size: 100,
      },
    ],
    [t, handleToggle, formatTimestamp],
  );

  return (
    <CollapsibleSection
      id="schedules"
      icon={Calendar}
      title={t('triggers.schedules.title')}
      count={schedules?.length ?? 0}
      defaultOpen={(schedules?.length ?? 0) > 0}
    >
      <DataTable
        columns={columns}
        data={schedules ?? []}
        caption={t('triggers.schedules.title')}
        getRowId={(row) => row._id}
        emptyState={{
          icon: Calendar,
          title: t('triggers.schedules.emptyTitle'),
          description: t('triggers.schedules.emptyDescription'),
        }}
        actionMenu={
          <Button
            variant="secondary"
            size="sm"
            onClick={() => setIsCreateOpen(true)}
          >
            <Plus className="mr-2 size-4" />
            {t('triggers.schedules.createButton')}
          </Button>
        }
      />

      <ScheduleCreateDialog
        open={isCreateOpen || !!editSchedule}
        onOpenChange={(open) => {
          if (!open) {
            setIsCreateOpen(false);
            setEditSchedule(null);
          }
        }}
        workflowRootId={workflowRootId}
        organizationId={organizationId}
        workflowSlug={workflowSlug}
        schedule={editSchedule}
      />

      <DeleteDialog
        open={!!deleteTarget}
        onOpenChange={(open) => {
          if (!open) setDeleteTarget(null);
        }}
        title={t('triggers.schedules.deleteTitle')}
        description={t('triggers.schedules.deleteDescription')}
        isDeleting={isDeleting}
        onDelete={handleDelete}
      />
    </CollapsibleSection>
  );
}
