import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { LuSparkles, LuX } from 'react-icons/lu';

import { getStoreContext } from '../../service/visibility/visibility.service';

interface StoreContextAnnounceModalProps {
  clientId: string;
  token: string;
  brandId: string | null;
}

const PROFILE_PATH = '/ai-visibility';

const seenKey = (brandId: string): string =>
  `reco_store_context_seen_${brandId}`;

const StoreContextAnnounceModal = ({
  clientId,
  token,
  brandId,
}: StoreContextAnnounceModalProps): JSX.Element | null => {
  const navigate = useNavigate();
  const [open, setOpen] = useState(false);
  const [identity, setIdentity] = useState('');

  useEffect(() => {
    if (!brandId) return;
    if (
      typeof window !== 'undefined' &&
      window.localStorage.getItem(seenKey(brandId))
    ) {
      return;
    }
    let cancelled = false;
    getStoreContext(clientId, token, brandId)
      .then(context => {
        if (cancelled) return;
        if (context.exists && !context.edited && context.identity.trim()) {
          setIdentity(context.identity.trim());
          setOpen(true);
        }
      })
      .catch(() => {});
    return () => {
      cancelled = true;
    };
  }, [clientId, token, brandId]);

  const markSeen = () => {
    if (brandId && typeof window !== 'undefined') {
      window.localStorage.setItem(seenKey(brandId), '1');
    }
  };

  const handleDismiss = () => {
    markSeen();
    setOpen(false);
  };

  const handleReview = () => {
    markSeen();
    setOpen(false);
    navigate(PROFILE_PATH);
  };

  if (!brandId || !open) return null;

  return (
    <div className="fixed bottom-4 left-4 z-50 w-80 max-w-[calc(100vw-2rem)]">
      <div className="space-y-3 rounded-lg border border-gray-200 bg-white p-4 shadow-lg">
        <div className="flex items-start justify-between gap-2">
          <div className="flex items-center gap-2">
            <LuSparkles className="h-4 w-4 text-[#B7007C]" aria-hidden />
            <span className="text-sm font-medium text-gray-900">
              How Recomaze Co-pilot sees your store
            </span>
            <span className="rounded-full border border-yellow-500/40 bg-yellow-50 px-2 py-0.5 text-xs font-medium text-yellow-700">
              Beta
            </span>
          </div>
          <button
            type="button"
            onClick={handleDismiss}
            className="text-gray-400 hover:text-gray-700"
            aria-label="Dismiss"
          >
            <LuX className="h-4 w-4" aria-hidden />
          </button>
        </div>

        <p className="line-clamp-4 text-sm text-gray-600">{identity}</p>

        <div className="flex items-center gap-2">
          <button
            type="button"
            onClick={handleReview}
            className="rounded-md bg-gray-900 px-3 py-1.5 text-sm font-medium text-white hover:bg-gray-800"
          >
            Review &amp; edit
          </button>
          <button
            type="button"
            onClick={handleDismiss}
            className="rounded-md px-3 py-1.5 text-sm font-medium text-gray-600 hover:bg-gray-100"
          >
            Dismiss
          </button>
        </div>
      </div>
    </div>
  );
};

export default StoreContextAnnounceModal;