'use client';

import Link from 'next/link';
import { useEffect, useState } from 'react';

interface LoginPromptModalProps {
  isOpen: boolean;
  onClose: () => void;
}

export default function LoginPromptModal({ isOpen, onClose }: LoginPromptModalProps) {
  const [currentUrl, setCurrentUrl] = useState('');

  useEffect(() => {
    if (typeof window !== 'undefined') {
      setCurrentUrl(window.location.pathname + window.location.search);
    }
  }, [isOpen]);

  if (!isOpen) return null;

  const nextParam = currentUrl ? `?next=${encodeURIComponent(currentUrl)}` : '';

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
      <div className="mx-4 w-full max-w-sm rounded-lg border border-line bg-paper p-6 shadow-lg">
        <h2 className="font-display text-2xl">Create an account to shop</h2>
        <p className="mt-3 text-sm text-muted">
          Add items to your bag and save your designs. You'll need an account to checkout.
        </p>

        <div className="mt-6 space-y-3">
          <Link
            href={`/account/register${nextParam}`}
            onClick={onClose}
            className="block w-full rounded bg-clay px-4 py-3 text-center text-sm font-medium text-paper transition-colors hover:bg-clay-dark"
          >
            Create account
          </Link>
          <Link
            href={`/account/login${nextParam}`}
            onClick={onClose}
            className="block w-full rounded border border-ink px-4 py-3 text-center text-sm font-medium text-ink transition-colors hover:border-clay hover:bg-clay hover:text-paper"
          >
            Log in
          </Link>
        </div>

        <button
          onClick={onClose}
          className="mt-4 w-full text-center text-sm text-muted hover:text-ink"
        >
          Continue as guest
        </button>
      </div>
    </div>
  );
}
