import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router';
import { PageContainer } from '@/components/layout/PageContainer';
import { Typography } from '@/components/ui/typography';
import { DashboardHero, ScopeSection } from '@/features/dashboard';
import { OnboardingGuideModal } from '@/features/onboarding/OnboardingGuideModal';
import { useGetDashboardSummary } from '@/api/generated/dashboard/dashboard';

// 견적 생성~마감~선정을 한눈에 보는 대시보드.
// 회사 전체·내 견적 두 스코프를 함께 보여준다(조회는 회사 공유). 위젯 행은 클릭 시 견적 상세로 딥링크. 읽기 전용.
const ONBOARDING_SEEN_KEY = 'negodata_onboarding_seen';

export default function DashboardPage() {
  const navigate = useNavigate();
  const { data, isLoading, isError } = useGetDashboardSummary();
  const [guideOpen, setGuideOpen] = useState(false);

  // 첫 방문 시 1회 자동 노출(localStorage). 이후엔 상단 "이용안내" 버튼으로만 연다.
  useEffect(() => {
    if (!localStorage.getItem(ONBOARDING_SEEN_KEY)) {
      setGuideOpen(true);
      localStorage.setItem(ONBOARDING_SEEN_KEY, '1');
    }
  }, []);

  const openQuotation = (qtId: string) => navigate(`/quotation?detail=${qtId}`);

  return (
    <PageContainer>
      <DashboardHero onOpenGuide={() => setGuideOpen(true)} />

      {isLoading ? (
        <Typography variant="muted">대시보드를 불러오는 중…</Typography>
      ) : isError || !data ? (
        <Typography variant="muted">대시보드를 불러오지 못했습니다.</Typography>
      ) : (
        <>
          <ScopeSection label="회사 전체 견적" scope={data.company} onOpen={openQuotation} />
          <ScopeSection label="내 견적" scope={data.mine} onOpen={openQuotation} />
        </>
      )}

      <OnboardingGuideModal open={guideOpen} onOpenChange={setGuideOpen} />
    </PageContainer>
  );
}