"use client";

import React, { useState, useEffect } from "react";
import { Moon, Sun } from "lucide-react";
import { Equipment, Process, ProductionType } from "./types";

interface PopHeaderProps {
  currentDateTime: Date;
  productionType: ProductionType;
  selectedEquipment: Equipment | null;
  selectedProcess: Process | null;
  showMyWorkOnly: boolean;
  theme: "dark" | "light";
  onProductionTypeChange: (type: ProductionType) => void;
  onEquipmentClick: () => void;
  onProcessClick: () => void;
  onMyWorkToggle: () => void;
  onSearchClick: () => void;
  onSettingsClick: () => void;
  onThemeToggle: () => void;
}

export function PopHeader({
  currentDateTime,
  productionType,
  selectedEquipment,
  selectedProcess,
  showMyWorkOnly,
  theme,
  onProductionTypeChange,
  onEquipmentClick,
  onProcessClick,
  onMyWorkToggle,
  onSearchClick,
  onSettingsClick,
  onThemeToggle,
}: PopHeaderProps) {
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  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}`;
  };

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

  return (
    <div className="pop-header-container">
      {/* 1행: 날짜/시간 + 테마 토글 + 작업지시/원자재 */}
      <div className="pop-top-bar row-1">
        <div className="pop-datetime">
          <span className="pop-date">{mounted ? formatDate(currentDateTime) : "----.--.--"}</span>
          <span className="pop-time">{mounted ? formatTime(currentDateTime) : "--:--"}</span>
        </div>

        {/* 테마 토글 버튼 */}
        <button className="pop-theme-toggle-inline" onClick={onThemeToggle} title="테마 변경">
          {theme === "dark" ? <Sun size={18} /> : <Moon size={18} />}
        </button>

        <div className="pop-spacer" />

        <div className="pop-type-buttons">
          <button
            className={`pop-type-btn ${productionType === "work-order" ? "active" : ""}`}
            onClick={() => onProductionTypeChange("work-order")}
          >
            작업지시
          </button>
          <button
            className={`pop-type-btn ${productionType === "material" ? "active" : ""}`}
            onClick={() => onProductionTypeChange("material")}
          >
            원자재
          </button>
        </div>
      </div>

      {/* 2행: 필터 버튼들 */}
      <div className="pop-top-bar row-2">
        <button
          className={`pop-filter-btn ${selectedEquipment ? "active" : ""}`}
          onClick={onEquipmentClick}
        >
          <span>{selectedEquipment?.name || "설비"}</span>
        </button>
        <button
          className={`pop-filter-btn ${selectedProcess ? "active" : ""}`}
          onClick={onProcessClick}
          disabled={!selectedEquipment}
        >
          <span>{selectedProcess?.name || "공정"}</span>
        </button>
        <button
          className={`pop-filter-btn ${showMyWorkOnly ? "active" : ""}`}
          onClick={onMyWorkToggle}
        >
          내 작업
        </button>

        <div className="pop-spacer" />

        <button className="pop-filter-btn primary" onClick={onSearchClick}>
          조회
        </button>
        <button className="pop-filter-btn" onClick={onSettingsClick}>
          설정
        </button>
      </div>
    </div>
  );
}