"use client";

import React, { useState, useEffect } from "react";
import { DashboardHeader } from "./DashboardHeader";
import { NoticeBanner } from "./NoticeBanner";
import { KpiBar } from "./KpiBar";
import { MenuGrid } from "./MenuGrid";
import { ActivityList } from "./ActivityList";
import { NoticeList } from "./NoticeList";
import { DashboardFooter } from "./DashboardFooter";
import {
  KPI_ITEMS,
  MENU_ITEMS,
  ACTIVITY_ITEMS,
  NOTICE_ITEMS,
  NOTICE_MARQUEE_TEXT,
} from "./data";
import "./dashboard.css";

export function PopDashboard() {
  const [theme, setTheme] = useState<"dark" | "light">("dark");

  // 로컬 스토리지에서 테마 로드
  useEffect(() => {
    const savedTheme = localStorage.getItem("popTheme") as "dark" | "light" | null;
    if (savedTheme) {
      setTheme(savedTheme);
    }
  }, []);

  const handleThemeToggle = () => {
    const newTheme = theme === "dark" ? "light" : "dark";
    setTheme(newTheme);
    localStorage.setItem("popTheme", newTheme);
  };

  const handleUserClick = () => {
    if (confirm("로그아웃 하시겠습니까?")) {
      alert("로그아웃되었습니다.");
    }
  };

  const handleActivityMore = () => {
    alert("전체 활동 내역 화면으로 이동합니다.");
  };

  const handleNoticeMore = () => {
    alert("전체 공지사항 화면으로 이동합니다.");
  };

  return (
    <div className={`pop-dashboard-container ${theme === "light" ? "light" : ""}`}>
      <div className="pop-dashboard">
        <DashboardHeader
          theme={theme}
          weather={{ temp: "18°C", description: "맑음" }}
          user={{ name: "김철수", role: "생산1팀", avatar: "김" }}
          company={{ name: "탑씰", subTitle: "현장 관리 시스템" }}
          onThemeToggle={handleThemeToggle}
          onUserClick={handleUserClick}
        />

        <NoticeBanner text={NOTICE_MARQUEE_TEXT} />

        <KpiBar items={KPI_ITEMS} />

        <MenuGrid items={MENU_ITEMS} />

        <div className="pop-dashboard-bottom-section">
          <ActivityList items={ACTIVITY_ITEMS} onMoreClick={handleActivityMore} />
          <NoticeList items={NOTICE_ITEMS} onMoreClick={handleNoticeMore} />
        </div>

        <DashboardFooter
          companyName="탑씰"
          version="1.0.0"
          emergencyContact="042-XXX-XXXX"
        />
      </div>
    </div>
  );
}