"use client";

import React, { useState } from 'react';
import { useParams, useRouter } from 'next/navigation';
import { ArrowLeft, Star } from 'lucide-react';
import ScreenshotsTab from './components/ScreenshotsTab';
import StarredTab from './components/StarredTab';
import CredentialsTab from './components/CredentialsTab';
import { ScreenRecord } from './types';
import { formatDate } from './utils';

export default function HostDetail() {
  const params = useParams();
  const router = useRouter();
  const hostname = params.hostname as string;

  // 状态管理
  const [activeTab, setActiveTab] = useState('screenshots');
  const [selectedDate, setSelectedDate] = useState<string | null>(null);
  const [jumpRequest, setJumpRequest] = useState<{ timestamp: number; recordId?: string } | null>(null);
  const [lastUpdate, setLastUpdate] = useState<string | null>(null);

  const handleViewRecord = (record: ScreenRecord) => {
    const date = new Date(record.timestamp);
    const dateStr = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
    
    setSelectedDate(dateStr);
    setJumpRequest({
      timestamp: date.getTime(),
      recordId: record.id
    });
    setActiveTab('screenshots');
  };

  return (
    <div className="min-h-screen bg-gray-50 dark:bg-gray-900 overflow-x-hidden">
      <div className="max-w-8xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
        {/* 头部导航 */}
        <div className="flex items-center justify-between mb-8">
          <div>
            <button
              onClick={() => router.back()}
              className="inline-flex items-center text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white"
            >
              <ArrowLeft className="h-5 w-5 mr-2" />
              返回
            </button>
            <h1 className="text-3xl font-semibold text-gray-900 dark:text-white mt-2">
              {decodeURI(hostname)}
            </h1>
          </div>
          {lastUpdate && (
            <div className="text-sm text-gray-500 dark:text-gray-400">
              最后更新: {formatDate(lastUpdate)}
            </div>
          )}
        </div>

        {/* 选项卡导航 */}
        <div className="mb-6 border-b border-gray-200 dark:border-gray-700">
          <nav className="-mb-px flex space-x-8">
            <button
              onClick={() => setActiveTab('screenshots')}
              className={`py-2 px-1 border-b-2 font-medium text-sm ${activeTab === 'screenshots'
                ? 'border-blue-600 text-blue-600'
                : 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-600'
                }`}
            >
              截图时间线
            </button>
            <button
              onClick={() => setActiveTab('starred')}
              className={`py-2 px-1 border-b-2 font-medium text-sm flex items-center ${activeTab === 'starred'
                ? 'border-blue-600 text-blue-600'
                : 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-600'
                }`}
            >
              <Star className="h-4 w-4 mr-1" />
              星标记录
            </button>
            <button
              onClick={() => setActiveTab('credentials')}
              className={`py-2 px-1 border-b-2 font-medium text-sm ${activeTab === 'credentials'
                ? 'border-blue-600 text-blue-600'
                : 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-600'
                }`}
            >
              凭据信息
            </button>
          </nav>
        </div>

        {/* 选项卡内容 */}
        {activeTab === 'screenshots' && (
          <ScreenshotsTab
            hostname={hostname}
            selectedDate={selectedDate}
            onDateChange={setSelectedDate}
            jumpRequest={jumpRequest}
            onLastUpdateChange={setLastUpdate}
          />
        )}

        {activeTab === 'starred' && (
          <StarredTab
            hostname={hostname}
            onViewRecord={handleViewRecord}
          />
        )}

        {activeTab === 'credentials' && (
          <CredentialsTab hostname={hostname} />
        )}
      </div>
    </div>
  );
}