'use client';

import { useState } from 'react';
import { NoticePopupModal, isPopupDismissedForToday } from '@/components/common/NoticePopupModal';
import { Button } from '@/components/ui/button';
import { PageLayout } from '@/components/organisms/PageLayout';
import type { NoticePopupData } from '@/components/common/NoticePopupModal';

// 테스트용 샘플 팝업 데이터
const SAMPLE_POPUPS: NoticePopupData[] = [
  {
    id: 'popup-1',
    title: '휴가 안내',
    content: '<p>전사 휴가 안내입니다.</p><p>2025년 신정 연휴 기간: 2025.01.01 ~ 2025.01.03</p>',
    imageUrl: undefined,
  },
  {
    id: 'popup-2',
    title: '시스템 점검 안내',
    content: '<p>시스템 점검으로 인해 아래 일시에 서비스 이용이 제한됩니다.</p><ul><li>점검일시: 2025.01.15 00:00 ~ 06:00</li><li>점검내용: 서버 업그레이드</li></ul>',
    imageUrl: 'https://placehold.co/400x300/e2e8f0/64748b?text=Notice+Image',
  },
  {
    id: 'popup-3',
    title: '신규 기능 안내',
    content: '<p>새로운 기능이 추가되었습니다!</p><p>자세한 내용은 공지사항을 확인해주세요.</p>',
    imageUrl: 'https://placehold.co/400x300/dbeafe/3b82f6?text=New+Feature',
  },
];

export default function PopupTestPage() {
  const [selectedPopup, setSelectedPopup] = useState<NoticePopupData | null>(null);
  const [isOpen, setIsOpen] = useState(false);

  const handleOpenPopup = (popup: NoticePopupData, force = false) => {
    // 숨김 처리된 팝업은 강제로 열지 않는 한 열지 않음
    if (!force && isPopupDismissedForToday(popup.id)) {
      return;
    }
    setSelectedPopup(popup);
    setIsOpen(true);
  };

  const clearDismissedPopups = () => {
    SAMPLE_POPUPS.forEach((popup) => {
      localStorage.removeItem(`popup_dismissed_${popup.id}`);
    });
    window.location.reload();
  };

  return (
    <PageLayout>
      <div className="space-y-6">
        {/* 타이틀 */}
        <h1 className="text-2xl font-bold">팝업 테스트 페이지</h1>

        {/* 설명 */}
        <div className="bg-muted/50 rounded-lg p-4 border">
          <h2 className="text-lg font-medium mb-2">팝업 모달 테스트</h2>
          <p className="text-sm text-muted-foreground">
            아래 버튼을 클릭하여 팝업 모달을 테스트할 수 있습니다.
            &quot;1일간 이 창을 열지 않음&quot; 체크 후 닫으면 localStorage에 저장됩니다.
          </p>
        </div>

        {/* 팝업 리스트 */}
        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
          {SAMPLE_POPUPS.map((popup) => {
            const isDismissed = isPopupDismissedForToday(popup.id);

            return (
              <div
                key={popup.id}
                className="border rounded-lg p-4 bg-background"
              >
                <h3 className="font-medium mb-2">{popup.title}</h3>
                <p className="text-sm text-muted-foreground mb-4 line-clamp-2">
                  {popup.content.replace(/<[^>]*>/g, '')}
                </p>

                <div className="flex items-center justify-between">
                  <span
                    className={`text-xs px-2 py-1 rounded ${
                      isDismissed
                        ? 'bg-yellow-100 text-yellow-800'
                        : 'bg-green-100 text-green-800'
                    }`}
                  >
                    {isDismissed ? '오늘 숨김됨' : '표시 가능'}
                  </span>

                  <div className="flex gap-2">
                    {isDismissed ? (
                      <Button
                        size="sm"
                        variant="outline"
                        onClick={() => handleOpenPopup(popup, true)}
                      >
                        강제로 열기
                      </Button>
                    ) : (
                      <Button
                        size="sm"
                        onClick={() => handleOpenPopup(popup)}
                      >
                        팝업 열기
                      </Button>
                    )}
                  </div>
                </div>
              </div>
            );
          })}
        </div>

        {/* 초기화 버튼 */}
        <div className="pt-4 border-t">
          <Button variant="outline" onClick={clearDismissedPopups}>
            숨김 설정 초기화 (localStorage 삭제)
          </Button>
        </div>
      </div>

      {/* 팝업 모달 */}
      {selectedPopup && (
        <NoticePopupModal
          popup={selectedPopup}
          open={isOpen}
          onOpenChange={setIsOpen}
        />
      )}
    </PageLayout>
  );
}