"use client";

import React, { useState, useEffect } from "react";
import { Moon, Sun } from "lucide-react";
import { WeatherInfo, UserInfo, CompanyInfo } from "./types";

interface DashboardHeaderProps {
  theme: "dark" | "light";
  weather: WeatherInfo;
  user: UserInfo;
  company: CompanyInfo;
  onThemeToggle: () => void;
  onUserClick: () => void;
}

export function DashboardHeader({
  theme,
  weather,
  user,
  company,
  onThemeToggle,
  onUserClick,
}: DashboardHeaderProps) {
  const [mounted, setMounted] = useState(false);
  const [currentTime, setCurrentTime] = useState(new Date());

  useEffect(() => {
    setMounted(true);
    const timer = setInterval(() => {
      setCurrentTime(new Date());
    }, 1000);
    return () => clearInterval(timer);
  }, []);

  const formatTime = (date: Date) => {
    const hours = String(date.getHours()).padStart(2, "0");
    const minutes = String(date.getMinutes()).padStart(2, "0");
    const seconds = String(date.getSeconds()).padStart(2, "0");
    return `${hours}:${minutes}:${seconds}`;
  };

  const formatDate = (date: Date) => {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, "0");
    const day = String(date.getDate()).padStart(2, "0");
    return `${year}-${month}-${day}`;
  };

  return (
    <header className="pop-dashboard-header">
      <div className="pop-dashboard-header-left">
        <div className="pop-dashboard-time-display">
          <div className="pop-dashboard-time-main">
            {mounted ? formatTime(currentTime) : "--:--:--"}
          </div>
          <div className="pop-dashboard-time-date">
            {mounted ? formatDate(currentTime) : "----.--.--"}
          </div>
        </div>
      </div>

      <div className="pop-dashboard-header-right">
        {/* 테마 토글 */}
        <button
          className="pop-dashboard-theme-toggle"
          onClick={onThemeToggle}
          title="테마 변경"
        >
          {theme === "dark" ? <Moon size={16} /> : <Sun size={16} />}
        </button>

        {/* 날씨 정보 */}
        <div className="pop-dashboard-weather">
          <span className="pop-dashboard-weather-temp">{weather.temp}</span>
          <span className="pop-dashboard-weather-desc">{weather.description}</span>
        </div>

        {/* 회사 정보 */}
        <div className="pop-dashboard-company">
          <div className="pop-dashboard-company-name">{company.name}</div>
          <div className="pop-dashboard-company-sub">{company.subTitle}</div>
        </div>

        {/* 사용자 배지 */}
        <button className="pop-dashboard-user-badge" onClick={onUserClick}>
          <div className="pop-dashboard-user-avatar">{user.avatar}</div>
          <div className="pop-dashboard-user-text">
            <div className="pop-dashboard-user-name">{user.name}</div>
            <div className="pop-dashboard-user-role">{user.role}</div>
          </div>
        </button>
      </div>
    </header>
  );
}