'use client';

import { useRouter } from 'next/navigation';
import Image from 'next/image';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { ROUTES } from '@/constants';

interface UpgradePromptProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
}

export function UpgradePrompt({ open, onOpenChange }: UpgradePromptProps) {
  const router = useRouter();

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-md text-center">
        <div className="flex justify-center mb-2">
          <div className="flex h-16 w-16 items-center justify-center rounded-full bg-brand-500/10 border border-brand-500/15 overflow-hidden">
            <Image src="/logo.png" alt="Activate Abundanate" width={48} height={48} className="object-contain" />
          </div>
        </div>
        <DialogHeader className="text-center items-center">
          <DialogTitle className="text-2xl">Upgrade to Continue</DialogTitle>
          <DialogDescription className="text-muted-foreground leading-relaxed mt-2">
            You're in restricted mode. Upgrade to a premium plan to create and edit records without
            any limitations.
          </DialogDescription>
        </DialogHeader>
        <div className="flex flex-col gap-3 mt-4">
          <Button
            variant="gold"
            size="lg"
            className="w-full"
            onClick={() => {
              onOpenChange(false);
              router.push(ROUTES.PRICING);
            }}
          >
            View Plans & Upgrade
          </Button>
          <Button variant="ghost" size="sm" onClick={() => onOpenChange(false)}>
            Maybe later
          </Button>
        </div>
      </DialogContent>
    </Dialog>
  );
}