move-data-nas/web/src/pages/Schedules.tsx

import { useEffect, useState } from 'react';
import { api, SyncPair, Schedule } from '../api/client';
import { Button } from '@/components/ui/Button';
import { Input } from '@/components/ui/Input';
import { Label } from '@/components/ui/Label';
import { Select, SelectValue, SelectTrigger, SelectContent, SelectItem } from '@/components/ui/Select';
import {
  Modal,
  ModalContent,
  ModalHeader,
  ModalTitle,
  ModalDescription,
  ModalBody,
  ModalFooter,
} from '@/components/ui/Modal';
import { PageHeader } from '@/components/ui/PageHeader';
import {
  Table,
  TableHeader,
  TableBody,
  TableHead,
  TableRow,
  TableCell,
} from '@/components/ui/Table';
import { EmptyState } from '@/components/ui/EmptyState';
import { Badge } from '@/components/ui/Badge';
import { Card } from '@/components/ui/Card';
import { Trash2, Plus, Clock, Pencil, AlertTriangle } from 'lucide-react';
import { toast } from 'sonner';
import { cn } from '@/lib/utils';

type ScheduleForm = {
  id: number | undefined;
  sync_pair_id: number | null;
  cron_expr: string;
  enabled: boolean;
};

const defaultForm: ScheduleForm = {
  id: undefined,
  sync_pair_id: null,
  cron_expr: '',
  enabled: true,
};

export default function Schedules() {
  const [schedules, setSchedules] = useState<Schedule[]>([]);
  const [syncPairs, setSyncPairs] = useState<SyncPair[]>([]);
  const [modalOpen, setModalOpen] = useState(false);
  const [deleteId, setDeleteId] = useState<number | null>(null);
  const [form, setForm] = useState<ScheduleForm>(defaultForm);
  const [loading, setLoading] = useState(false);

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

  async function load() {
    try {
      const [s, p] = await Promise.all([
        api<Schedule[]>('/api/schedules'),
        api<SyncPair[]>('/api/sync-pairs'),
      ]);
      setSchedules(s);
      setSyncPairs(p);
    } catch {}
  }

  function openCreate() {
    setForm(defaultForm);
    setModalOpen(true);
  }

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    if (!form.sync_pair_id) {
      toast.error('Sync pair is required');
      return;
    }
    if (!form.cron_expr.trim()) {
      toast.error('Cron expression is required');
      return;
    }
    setLoading(true);
    try {
      await api(form.id ? `/api/schedules/${form.id}` : '/api/schedules', {
        method: form.id ? 'PUT' : 'POST',
        body: {
          sync_pair_id: form.sync_pair_id,
          cron_expr: form.cron_expr,
          enabled: form.enabled,
        },
      });
      setModalOpen(false);
      toast.success(form.id ? 'Schedule updated' : 'Schedule created');
      load();
    } catch (e: unknown) {
      toast.error((e as Error).message);
    } finally {
      setLoading(false);
    }
  }

  async function handleToggleEnabled(schedule: Schedule) {
    try {
      await api(`/api/schedules/${schedule.id}`, {
        method: 'PUT',
        body: {
          cron_expr: schedule.cron_expr,
          enabled: !schedule.enabled,
        },
      });
      toast.success(`Schedule ${schedule.enabled ? 'disabled' : 'enabled'}`);
      load();
    } catch (e: unknown) {
      toast.error((e as Error).message);
    }
  }

  async function handleDelete() {
    if (deleteId === null) return;
    try {
      await api(`/api/schedules/${deleteId}`, { method: 'DELETE' });
      toast.success('Schedule deleted');
      setDeleteId(null);
      load();
    } catch (e: unknown) {
      toast.error((e as Error).message);
    }
  }

  function syncPairName(id: number) {
    const p = syncPairs.find(p => p.id === id);
    return p ? p.name : `Sync Pair ${id}`;
  }

  function formatNextRun(nextRun: string | null) {
    if (!nextRun) return 'Not scheduled';
    const d = new Date(nextRun);
    return d.toLocaleString();
  }

  return (
    <div className="space-y-6">
      <PageHeader
        title="Schedules"
        description="Automate sync pair execution with cron-based scheduling"
        actions={
          <Button onClick={openCreate} size="sm">
            <Plus className="h-4 w-4" />
            Add Schedule
          </Button>
        }
      />

      <Card>
        <div className="p-0">
          {schedules.length === 0 ? (
            <EmptyState
              icon={<Clock className="h-5 w-5" />}
              title="No schedules"
              description="Create a schedule to automate sync pair execution"
              action={
                <Button onClick={openCreate} size="sm">
                  <Plus className="h-4 w-4" />
                  Add Schedule
                </Button>
              }
            />
          ) : (
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Sync Pair</TableHead>
                  <TableHead>Cron Expression</TableHead>
                  <TableHead>Next Run</TableHead>
                  <TableHead>Status</TableHead>
                  <TableHead className="w-28">Actions</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {schedules.map(s => (
                  <TableRow key={s.id}>
                    <TableCell className="font-medium">{syncPairName(s.sync_pair_id)}</TableCell>
                    <TableCell>
                      <code className="text-xs bg-surface-raised px-2 py-1 rounded font-mono">
                        {s.cron_expr}
                      </code>
                    </TableCell>
                    <TableCell className="text-fg-muted text-sm">
                      {formatNextRun(s.next_run_at)}
                    </TableCell>
                    <TableCell>
                      <button
                        onClick={() => handleToggleEnabled(s)}
                        className={cn(
                          'relative inline-flex h-5 w-9 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-accent/40 focus:ring-offset-2 focus:ring-offset-canvas',
                          s.enabled ? 'bg-emerald-500/20' : 'bg-surface-raised'
                        )}
                      >
                        <span
                          className={cn(
                            'inline-block h-3.5 w-3.5 transform rounded-full bg-fg-muted transition-transform',
                            s.enabled ? 'translate-x-4 bg-emerald-400' : 'translate-x-1 bg-fg-subtle'
                          )}
                        />
                      </button>
                    </TableCell>
                    <TableCell>
                      <div className="flex items-center gap-1">
                        <Button
                          variant="ghost"
                          size="icon-sm"
                          onClick={() => setDeleteId(s.id)}
                          className="text-rose-400 hover:text-rose-300 hover:bg-rose-500/10"
                          title="Delete"
                        >
                          <Trash2 className="h-3.5 w-3.5" />
                        </Button>
                      </div>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          )}
        </div>
      </Card>

      <Modal open={modalOpen} onOpenChange={setModalOpen}>
        <ModalContent size="md">
          <ModalHeader>
            <ModalTitle>Add Schedule</ModalTitle>
            <ModalDescription>
              Schedule automated sync pair execution using cron syntax.
              Format: &quot;minute hour day-of-month month day-of-week&quot;
            </ModalDescription>
          </ModalHeader>
          <form onSubmit={handleSubmit}>
            <ModalBody className="space-y-4">
              <div className="space-y-1.5">
                <Label htmlFor="sch-sync-pair" required>
                  Sync Pair
                </Label>
                <Select
                  value={form.sync_pair_id?.toString() ?? ''}
                  onValueChange={v => setForm({ ...form, sync_pair_id: Number(v) })}
                >
                  <SelectTrigger id="sch-sync-pair">
                    <SelectValue placeholder="Select a sync pair" />
                  </SelectTrigger>
                  <SelectContent>
                    {syncPairs.map(p => (
                      <SelectItem key={p.id} value={p.id.toString()}>
                        {p.name}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
              <div className="space-y-1.5">
                <Label htmlFor="sch-cron" required>
                  Cron Expression
                </Label>
                <Input
                  id="sch-cron"
                  placeholder="0 2 * * *"
                  value={form.cron_expr}
                  onChange={e => setForm({ ...form, cron_expr: e.target.value })}
                  className="font-mono"
                />
                <p className="text-xs text-fg-subtle">
                  Format: &quot;m h dom mon dow&quot; (5 fields, no seconds)
                  <br />
                  Examples: &quot;0 2 * * *&quot; (daily at 2am), &quot;0 */6 * * *&quot; (every 6 hours)
                </p>
              </div>
              <div
                className={cn(
                  'flex items-center gap-2 rounded-card p-3 transition-colors',
                  form.enabled
                    ? 'bg-accent/5 border border-accent/20'
                    : 'bg-surface-raised border border-border'
                )}
              >
                <input
                  type="checkbox"
                  id="sch-enabled"
                  checked={form.enabled}
                  onChange={e => setForm({ ...form, enabled: e.target.checked })}
                  className="h-4 w-4 rounded border-border accent-accent"
                />
                <Label htmlFor="sch-enabled" className="cursor-pointer mb-0">
                  Enable this schedule
                </Label>
              </div>
            </ModalBody>
            <ModalFooter>
              <Button
                type="button"
                variant="secondary"
                onClick={() => setModalOpen(false)}
              >
                Cancel
              </Button>
              <Button type="submit" loading={loading}>
                Add Schedule
              </Button>
            </ModalFooter>
          </form>
        </ModalContent>
      </Modal>

      <Modal open={deleteId !== null} onOpenChange={v => !v && setDeleteId(null)}>
        <ModalContent size="sm">
          <ModalHeader>
            <ModalTitle>Delete Schedule</ModalTitle>
            <ModalDescription>
              Are you sure you want to delete this schedule?
            </ModalDescription>
          </ModalHeader>
          <ModalFooter>
            <Button variant="secondary" onClick={() => setDeleteId(null)}>
              Cancel
            </Button>
            <Button variant="danger-solid" onClick={handleDelete}>
              Delete
            </Button>
          </ModalFooter>
        </ModalContent>
      </Modal>
    </div>
  );
}