import { useState } from 'react'
import { useNavigate, useParams } from 'react-router-dom'
import Header from '../components/layout/Header'
import CategoryTab from '../components/facility/CategoryTab'
import FloorSection from '../components/facility/FloorSection'
import EntryCard from '../components/facility/EntryCard'
import styles from './FacilityDetailPage.module.css'

const categories = ['물류동', '생산동', '관리동', '위험물', '휴게동', '식당']

// Mock data - 추후 API 연동
const floorData = [
  {
    id: 1,
    name: '2F(RF)',
    workerCount: 7,
    entries: [
      {
        id: 1,
        floor: '2F(RF)',
        location: '옥상 출입구',
        inCount: 56,
        outCount: 25,
        anchorStatus: 'normal' as const
      }
    ]
  },
  {
    id: 2,
    name: '2F',
    workerCount: 86,
    entries: [
      {
        id: 1,
        floor: '2F',
        location: '서쪽출입문',
        inCount: 56,
        outCount: 25,
        anchorStatus: 'broken' as const
      },
      {
        id: 2,
        floor: '2F',
        location: '동쪽출입문',
        inCount: 56,
        outCount: 25,
        anchorStatus: 'normal' as const
      },
      {
        id: 3,
        floor: '2F',
        location: '남쪽출입문',
        inCount: 56,
        outCount: 25,
        anchorStatus: 'normal' as const
      }
    ]
  }
]

export default function FacilityDetailPage() {
  const navigate = useNavigate()
  const { facilityName } = useParams<{ facilityName: string }>()
  const [activeCategory, setActiveCategory] = useState(facilityName || '물류동')

  const handleAllLogClick = () => {
    navigate(`/facility-status/${activeCategory}/all-log`)
  }

  const handleFloorLogClick = (floorName: string) => {
    navigate(`/facility-status/${activeCategory}/floor-log/${encodeURIComponent(floorName)}`)
  }

  const handleEntryLogClick = (location: string) => {
    navigate(`/facility-status/${activeCategory}/log/${encodeURIComponent(location)}`)
  }

  return (
    <div className={styles.container}>
      {/* Background blur effect */}
      <div className={styles.bgBlur} />

      {/* Header with back button and menu */}
      <Header showBackButton showMenu />

      {/* Content */}
      <div className={styles.content}>
        {/* Category Tabs */}
        <div className={styles.categoryArea}>
          <CategoryTab
            categories={categories}
            activeCategory={activeCategory}
            onCategoryChange={setActiveCategory}
          />
        </div>

        {/* All Log Link */}
        <div className={styles.allLogLink} onClick={handleAllLogClick}>
          <span className={styles.allLogText}>전체 출입로그 보기</span>
          <svg
            className={styles.chevronIcon}
            viewBox="0 0 28 28"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M10.5 7L17.5 14L10.5 21"
              stroke="white"
              strokeWidth="1.5"
            />
          </svg>
        </div>

        {/* Floor Sections */}
        <div className={styles.floorSections}>
          {floorData.map((floor) => (
            <FloorSection
              key={floor.id}
              floorName={floor.name}
              workerCount={floor.workerCount}
              onFloorLogClick={() => handleFloorLogClick(floor.name)}
            >
              {floor.entries.map((entry) => (
                <EntryCard
                  key={entry.id}
                  floor={entry.floor}
                  location={entry.location}
                  inCount={entry.inCount}
                  outCount={entry.outCount}
                  anchorStatus={entry.anchorStatus}
                  onLogClick={() => handleEntryLogClick(entry.location)}
                />
              ))}
            </FloorSection>
          ))}
        </div>
      </div>
    </div>
  )
}
