import { Button } from '@/components/ui/button';
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog';
import { ClockIcon, CopyIcon } from '@phosphor-icons/react';
import { useTranslation } from 'react-i18next';
import { toast } from 'sonner';

export default function CronScheduleInfo({ basePath }: { basePath: string }) {
  const { t } = useTranslation();
  const cronCommand = `* * * * * cd ${basePath} && php artisan schedule:run >> /dev/null 2>&1`;

  const copy = () => {
    navigator.clipboard.writeText(cronCommand);
    toast.success(t('Copied to clipboard'));
  };

  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button variant="outline">
          <ClockIcon weight="bold" />
          {t('Cron Schedule')}
        </Button>
      </DialogTrigger>
      <DialogContent className="max-w-lg">
        <DialogHeader>
          <DialogTitle>{t('Cron Schedule Setup')}</DialogTitle>
        </DialogHeader>
        <div className="space-y-4">
          <p className="text-sm text-black/60">
            {t(
              'Add the following cron entry to your server to enable automatic job execution. Run',
            )}{' '}
            <code className="rounded bg-black/5 px-1 py-0.5 text-xs">
              crontab -e
            </code>{' '}
            {t('and paste:')}
          </p>
          <div className="flex items-center gap-2 rounded-lg border border-black/10 bg-black/5 p-3">
            <code className="flex-1 text-xs break-all">{cronCommand}</code>
            <Button
              size="icon"
              variant="ghost"
              className="shrink-0"
              onClick={copy}
            >
              <CopyIcon weight="bold" />
            </Button>
          </div>
          <p className="text-xs text-black/40">
            {t(
              "This runs Laravel's scheduler every minute. Each cron job's interval is managed within the application.",
            )}
          </p>
        </div>
      </DialogContent>
    </Dialog>
  );
}