'use client';

import { useState, useEffect, useCallback } from 'react';
import { MapPin } from 'lucide-react';
import { Button } from '@/components/ui/button';
import GoogleMap from '@/components/attendance/GoogleMap';
import AttendanceComplete from '@/components/attendance/AttendanceComplete';

// ========================================
// 하드코딩 설정값 (MVP - 추후 API로 대체)
// ========================================
// TODO: 이 값들은 출퇴근관리 설정 페이지에서 관리됨
// 설정 페이지 경로: /settings/attendance-settings
// API 연동 시: GET /api/settings/attendance 에서 조회
// ────────────────────────────────────────
// - radius: 출퇴근관리 설정의 allowedRadius 값 사용
// - gpsDepartments: 로그인 사용자의 부서가 포함되어 있는지 체크
// - gpsEnabled: false면 GPS 출퇴근 기능 비활성화
// ────────────────────────────────────────
const SITE_LOCATION = {
  name: '본사',
  lat: 37.557358,
  lng: 126.864414,
  radius: 100, // meters → 출퇴근관리 설정의 allowedRadius 값으로 대체 예정
};

const TEST_USER = {
  name: '홍길동',
  department: '부서명',
  position: '직급명',
};

// 출퇴근 상태 타입
type AttendanceStatus = 'not-checked-in' | 'checked-in' | 'checked-out';
type ViewMode = 'main' | 'check-in-complete' | 'check-out-complete';

export default function MobileAttendancePage() {
  // Hydration 에러 방지: 클라이언트 마운트 상태
  const [mounted, setMounted] = useState(false);

  // 상태 관리
  const [currentTime, setCurrentTime] = useState<string>('--:--:--');
  const [currentDate, setCurrentDate] = useState<string>('');
  const [distance, setDistance] = useState<number | null>(null);
  const [isInRange, setIsInRange] = useState(false);
  const [attendanceStatus, setAttendanceStatus] = useState<AttendanceStatus>('not-checked-in');
  const [viewMode, setViewMode] = useState<ViewMode>('main');
  const [checkInTime, setCheckInTime] = useState<string>('');
  const [checkOutTime, setCheckOutTime] = useState<string>('');
  const [userName, setUserName] = useState(TEST_USER.name);
  const [userDepartment, setUserDepartment] = useState(TEST_USER.department);
  const [userPosition, setUserPosition] = useState(TEST_USER.position);

  // 클라이언트 마운트 확인
  useEffect(() => {
    setMounted(true);
  }, []);

  // 현재 시간 업데이트 (마운트 후에만 실행)
  useEffect(() => {
    if (!mounted) return;

    const updateTime = () => {
      const now = new Date();
      const hours = String(now.getHours()).padStart(2, '0');
      const minutes = String(now.getMinutes()).padStart(2, '0');
      const seconds = String(now.getSeconds()).padStart(2, '0');
      setCurrentTime(`${hours}:${minutes}:${seconds}`);

      // 날짜 포맷
      const year = now.getFullYear();
      const month = now.getMonth() + 1;
      const date = now.getDate();
      const dayNames = ['일', '월', '화', '수', '목', '금', '토'];
      const day = dayNames[now.getDay()];
      setCurrentDate(`${year}년 ${month}월 ${date}일 (${day})`);
    };

    updateTime();
    const interval = setInterval(updateTime, 1000);
    return () => clearInterval(interval);
  }, [mounted]);

  // localStorage에서 사용자 정보 가져오기 (마운트 후에만 실행)
  useEffect(() => {
    if (!mounted) return;

    const userDataStr = localStorage.getItem('user');
    if (userDataStr) {
      try {
        const userData = JSON.parse(userDataStr);
        if (userData.name) setUserName(userData.name);
        if (userData.department) setUserDepartment(userData.department);
        if (userData.position) setUserPosition(userData.position);
      } catch (e) {
        console.error('사용자 정보 파싱 실패:', e);
      }
    }
  }, [mounted]);

  // 거리 변경 콜백
  const handleDistanceChange = useCallback((dist: number, inRange: boolean) => {
    setDistance(dist);
    setIsInRange(inRange);
  }, []);

  // 출근하기
  const handleCheckIn = () => {
    if (!isInRange) return;

    const now = new Date();
    const hours = String(now.getHours()).padStart(2, '0');
    const minutes = String(now.getMinutes()).padStart(2, '0');
    const seconds = String(now.getSeconds()).padStart(2, '0');
    const timeStr = `${hours}:${minutes}:${seconds}`;

    setCheckInTime(timeStr);
    setAttendanceStatus('checked-in');
    setViewMode('check-in-complete');

    // TODO: API 호출로 출근 기록 저장
    console.log('[출근 기록]', {
      time: timeStr,
      location: SITE_LOCATION.name,
      coordinates: { lat: SITE_LOCATION.lat, lng: SITE_LOCATION.lng },
    });
  };

  // 퇴근하기
  const handleCheckOut = () => {
    if (!isInRange) return;

    const now = new Date();
    const hours = String(now.getHours()).padStart(2, '0');
    const minutes = String(now.getMinutes()).padStart(2, '0');
    const seconds = String(now.getSeconds()).padStart(2, '0');
    const timeStr = `${hours}:${minutes}:${seconds}`;

    setCheckOutTime(timeStr);
    setAttendanceStatus('checked-out');
    setViewMode('check-out-complete');

    // TODO: API 호출로 퇴근 기록 저장
    console.log('[퇴근 기록]', {
      time: timeStr,
      location: SITE_LOCATION.name,
      coordinates: { lat: SITE_LOCATION.lat, lng: SITE_LOCATION.lng },
    });
  };

  // 완료 화면에서 확인 클릭
  const handleConfirm = () => {
    setViewMode('main');
  };

  // 마운트 전 로딩 UI (Hydration 에러 방지)
  if (!mounted) {
    return (
      <div className="flex flex-col h-[calc(100vh-100px)]">
        <div className="text-center py-3 border-b bg-white">
          <h1 className="text-lg font-semibold">출퇴근하기</h1>
        </div>
        <div className="flex-1 flex items-center justify-center bg-gray-100">
          <div className="text-center">
            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500 mx-auto mb-2"></div>
            <p className="text-gray-500 text-sm">로딩 중...</p>
          </div>
        </div>
      </div>
    );
  }

  // 완료 화면 렌더링
  if (viewMode === 'check-in-complete') {
    return (
      <div className="h-[calc(100vh-100px)]">
        <AttendanceComplete
          type="check-in"
          time={checkInTime}
          date={currentDate}
          location={SITE_LOCATION.name}
          onConfirm={handleConfirm}
        />
      </div>
    );
  }

  if (viewMode === 'check-out-complete') {
    return (
      <div className="h-[calc(100vh-100px)]">
        <AttendanceComplete
          type="check-out"
          time={checkOutTime}
          date={currentDate}
          location={SITE_LOCATION.name}
          onConfirm={handleConfirm}
        />
      </div>
    );
  }

  // 버튼 활성화 상태
  const canCheckIn = isInRange && attendanceStatus === 'not-checked-in';
  const canCheckOut = isInRange && attendanceStatus === 'checked-in';

  return (
    <div className="flex flex-col h-[calc(100vh-100px)]">
      {/* 타이틀 */}
      <div className="text-center py-3 border-b bg-white">
        <h1 className="text-lg font-semibold">출퇴근하기</h1>
      </div>

      {/* 지도 영역 */}
      <div className="flex-1 relative">
        <GoogleMap
          siteLocation={SITE_LOCATION}
          onDistanceChange={handleDistanceChange}
        />

        {/* 거리 표시 오버레이 */}
        {distance !== null && (
          <div className="absolute top-3 left-3 bg-white/90 backdrop-blur px-3 py-1.5 rounded-lg shadow-md">
            <div className="flex items-center gap-1.5 text-sm">
              <MapPin className="w-4 h-4 text-blue-500" />
              <span className={isInRange ? 'text-green-600 font-medium' : 'text-gray-600'}>
                {distance < 1000
                  ? `${Math.round(distance)}m`
                  : `${(distance / 1000).toFixed(1)}km`}
                {isInRange && ' (범위 내)'}
              </span>
            </div>
          </div>
        )}
      </div>

      {/* 사용자 정보 + 시간 + 버튼 */}
      <div className="bg-white border-t p-4 space-y-4">
        {/* 사용자 정보 */}
        <div className="flex items-center gap-3">
          <div className="w-10 h-10 bg-gray-200 rounded-full flex items-center justify-center">
            <span className="text-gray-600 font-medium">{userName.charAt(0)}</span>
          </div>
          <div>
            <p className="font-semibold text-gray-900">{userName}</p>
            <p className="text-sm text-gray-500">
              {userDepartment} {userPosition}
            </p>
          </div>
        </div>

        {/* 현재 시간 */}
        <div className="text-center">
          <p className="text-3xl font-bold text-red-500" suppressHydrationWarning>{currentTime}</p>
          <p className="text-xs text-gray-400 mt-0.5" suppressHydrationWarning>{currentDate}</p>
          {attendanceStatus === 'checked-in' && (
            <p className="text-sm text-green-600 mt-1">출근중</p>
          )}
        </div>

        {/* 출근/퇴근 버튼 */}
        <div className="flex gap-3">
          <Button
            onClick={handleCheckIn}
            disabled={!canCheckIn}
            className={`flex-1 h-12 text-base font-medium rounded-lg transition-all ${
              canCheckIn
                ? 'bg-blue-500 hover:bg-blue-600 text-white'
                : 'bg-gray-200 text-gray-400 cursor-not-allowed'
            }`}
          >
            출근하기
          </Button>
          <Button
            onClick={handleCheckOut}
            disabled={!canCheckOut}
            className={`flex-1 h-12 text-base font-medium rounded-lg transition-all ${
              canCheckOut
                ? 'bg-gray-800 hover:bg-gray-900 text-white'
                : 'bg-gray-200 text-gray-400 cursor-not-allowed'
            }`}
          >
            퇴근하기
          </Button>
        </div>

        {/* 범위 밖 경고 */}
        {!isInRange && distance !== null && (
          <p className="text-center text-sm text-orange-500">
            출퇴근 가능 범위({SITE_LOCATION.radius}m) 밖에 있습니다.
          </p>
        )}
      </div>
    </div>
  );
}
