"use client"

import {useState} from "react"
import {Badge, Card, Col, Layout, Menu, Row, Statistic, Switch} from "antd"
import {
  BellOutlined,
  DashboardOutlined,
  DatabaseOutlined,
  EnvironmentOutlined,
  ExclamationCircleOutlined,
  MonitorOutlined,
  MoonOutlined,
  SafetyOutlined,
  SunOutlined,
} from "@ant-design/icons"
import dynamic from "next/dynamic"

const GasNetworkMap = dynamic(() => import("./components/gas-network-map"), {
  ssr: false,
  loading: () => <div className="flex items-center justify-center h-96">加载地图中...</div>,
})

const PipelineDataManagement = dynamic(() => import("./components/pipeline-data-management"), {
  ssr: false,
  loading: () => <div className="flex items-center justify-center h-96">加载中...</div>,
})

const DeviceManagement = dynamic(() => import("./components/device-management"), {
  ssr: false,
  loading: () => <div className="flex items-center justify-center h-96">加载中...</div>,
})

const HazardArchive = dynamic(() => import("./components/hazard-archive"), {
  ssr: false,
  loading: () => <div className="flex items-center justify-center h-96">加载中...</div>,
})

const HazardTreatmentStats = dynamic(() => import("./components/hazard-treatment-stats"), {
  ssr: false,
  loading: () => <div className="flex items-center justify-center h-96">加载中...</div>,
})

const KeyIndicatorsMonitoring = dynamic(() => import("./components/key-indicators-monitoring"), {
  ssr: false,
  loading: () => <div className="flex items-center justify-center h-96">加载中...</div>,
})

const MonitoringVisualization = dynamic(() => import("./components/monitoring-visualization"), {
  ssr: false,
  loading: () => <div className="flex items-center justify-center h-96">加载中...</div>,
})

const AbnormalAlarm = dynamic(() => import("./components/abnormal-alarm"), {
  ssr: false,
  loading: () => <div className="flex items-center justify-center h-96">加载中...</div>,
})

const AlarmVisualization = dynamic(() => import("./components/alarm-visualization"), {
  ssr: false,
  loading: () => <div className="flex items-center justify-center h-96">加载中...</div>,
})

// 添加风险评估模块组件的动态导入
const RiskArchive = dynamic(() => import("./components/risk-archive"), {
  ssr: false,
  loading: () => <div className="flex items-center justify-center h-96">加载中...</div>,
})

const RiskVisualization = dynamic(() => import("./components/risk-visualization"), {
  ssr: false,
  loading: () => <div className="flex items-center justify-center h-96">加载中...</div>,
})

const { Header, Sider, Content } = Layout

export default function HomePage() {
  const [selectedKey, setSelectedKey] = useState("dashboard")
  const [isDarkMode, setIsDarkMode] = useState(false)

  const menuItems = [
    {
      key: "dashboard",
      icon: <DashboardOutlined />,
      label: "总览仪表板",
    },
    {
      key: "basic-data",
      icon: <DatabaseOutlined />,
      label: "基础数据管理",
      children: [
        { key: "pipeline-data", label: "燃气管网数据" },
        { key: "device-management", label: "监测设备管理" },
      ],
    },
    {
      key: "hazard-management",
      icon: <ExclamationCircleOutlined />,
      label: "隐患管理",
      children: [
        { key: "hazard-archive", label: "隐患台账" },
        { key: "hazard-treatment", label: "隐患治理统计" },
      ],
    },
    {
      key: "operation-monitoring",
      icon: <MonitorOutlined />,
      label: "运行监测",
      children: [
        { key: "key-indicators", label: "关键指标监测" },
        { key: "monitoring-visualization", label: "监测可视化" },
      ],
    },
    {
      key: "alarm-monitoring",
      icon: <BellOutlined />,
      label: "监测报警",
      children: [
        { key: "abnormal-alarm", label: "异常报警" },
        { key: "alarm-visualization", label: "报警可视化" },
      ],
    },
    {
      key: "risk-assessment",
      icon: <SafetyOutlined />,
      label: "风险评估",
      children: [
        { key: "risk-archive", label: "风险档案" },
        { key: "risk-visualization", label: "风险可视化" },
      ],
    },
  ]

  const renderContent = () => {
    switch (selectedKey) {
      case "dashboard":
        return (
          <div className="p-6">
            <div className="mb-6">
              <h1 className={`text-2xl font-bold mb-2 ${isDarkMode ? "text-white" : "text-gray-800"}`}>
                燃气管网安全运行监测系统 - 长沙市
              </h1>
              <p className={isDarkMode ? "text-gray-300" : "text-gray-600"}>
                实时监控长沙市燃气管网运行状态，保障城市燃气安全
              </p>
            </div>

            <Row gutter={[16, 16]} className="mb-6">
              <Col span={6}>
                <Card className="dashboard-card">
                  <Statistic title="管网总长度" value={2156.8} suffix="km" valueStyle={{ color: "#1890ff" }} />
                </Card>
              </Col>
              <Col span={6}>
                <Card className="dashboard-card">
                  <Statistic title="监测设备" value={568} suffix="台" valueStyle={{ color: "#52c41a" }} />
                </Card>
              </Col>
              <Col span={6}>
                <Card className="dashboard-card">
                  <Statistic title="待处理隐患" value={12} suffix="项" valueStyle={{ color: "#faad14" }} />
                </Card>
              </Col>
              <Col span={6}>
                <Card className="dashboard-card">
                  <Statistic title="活跃报警" value={3} suffix="个" valueStyle={{ color: "#f5222d" }} />
                </Card>
              </Col>
            </Row>

            <Row gutter={[16, 16]} className="mb-6">
              <Col span={24}>
                <Card title="长沙市燃气管网一张图" className="mb-4">
                  <GasNetworkMap height="500px" />
                </Card>
              </Col>
            </Row>

            <Row gutter={[16, 16]}>
              <Col span={12}>
                <Card title="系统状态" className="h-64">
                  <div className="flex items-center justify-center h-full">
                    <div className="text-center">
                      <Badge status="processing" />
                      <span className="ml-2 text-lg">系统运行正常</span>
                    </div>
                  </div>
                </Card>
              </Col>
              <Col span={12}>
                <Card title="最新动态" className="h-64">
                  <div className="space-y-3">
                    <div className="flex items-center">
                      <Badge status="warning" />
                      <span className="ml-2">管线压力异常 - 五一大道段</span>
                    </div>
                    <div className="flex items-center">
                      <Badge status="success" />
                      <span className="ml-2">设备维护完成 - 监测点CS001</span>
                    </div>
                    <div className="flex items-center">
                      <Badge status="processing" />
                      <span className="ml-2">隐患整改中 - 芙蓉路段</span>
                    </div>
                  </div>
                </Card>
              </Col>
            </Row>
          </div>
        )
      case "pipeline-data":
        return <PipelineDataManagement />
      case "device-management":
        return <DeviceManagement />
      case "hazard-archive":
        return <HazardArchive />
      case "hazard-treatment":
        return <HazardTreatmentStats />
      case "key-indicators":
        return <KeyIndicatorsMonitoring />
      case "monitoring-visualization":
        return <MonitoringVisualization />
      case "abnormal-alarm":
        return <AbnormalAlarm />
      case "alarm-visualization":
        return <AlarmVisualization />
      // 添加风险评估模块页面的渲染逻辑
      case "risk-archive":
        return <RiskArchive />
      case "risk-visualization":
        return <RiskVisualization />
      default:
        return (
          <div className="p-6">
            <Card>
              <div className="text-center py-12">
                <h2 className="text-xl font-semibold mb-4">功能开发中</h2>
                <p className="text-gray-600">该功能模块正在开发中，敬请期待...</p>
              </div>
            </Card>
          </div>
        )
    }
  }

  return (
    <>
      <style jsx>{`
          /* 添加主题相关样式 */
          :global(.dark-theme) {
              background-color: #141414;
              color: #ffffff;
          }

          :global(.dark-theme .ant-layout) {
              background-color: #141414;
          }

          :global(.dark-theme .ant-layout-header) {
              background-color: #1f1f1f !important;
              border-bottom: 1px solid #303030;
          }

          :global(.dark-theme .ant-layout-sider) {
              background-color: #1f1f1f !important;
          }

          :global(.dark-theme .ant-layout-content) {
              background-color: #0f0f0f !important;
          }

          :global(.dark-theme .ant-menu) {
              background-color: #1f1f1f !important;
              color: #ffffff;
          }

          :global(.dark-theme .ant-menu-item) {
              color: #ffffff !important;
          }

          :global(.dark-theme .ant-menu-item:hover) {
              background-color: #303030 !important;
          }

          :global(.dark-theme .ant-menu-item-selected) {
              background-color: #1890ff !important;
          }

          :global(.dark-theme .ant-card) {
              background-color: #1f1f1f !important;
              border-color: #303030 !important;
          }

          :global(.dark-theme .ant-card-head) {
              background-color: #1f1f1f !important;
              border-bottom-color: #303030 !important;
          }

          :global(.dark-theme .ant-card-head-title) {
              color: #ffffff !important;
          }

          :global(.dark-theme .ant-statistic-title) {
              color: #bfbfbf !important;
          }

          /* Ant Design customizations - 只在此组件内生效 */
          :global(.ant-layout-header) {
              padding: 0 24px;
              line-height: 64px;
          }

          :global(.ant-menu-inline) {
              border-right: none;
          }

          :global(.ant-card) {
              border-radius: 8px;
              box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
          }

          :global(.ant-statistic-title) {
              font-size: 14px;
              color: #666;
          }

          :global(.ant-statistic-content) {
              font-size: 24px;
              font-weight: 600;
          }

          /* Custom dashboard card styles */
          :global(.dashboard-card) {
              transition: all 0.3s ease;
          }

          :global(.dashboard-card:hover) {
              transform: translateY(-2px);
              box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
          }
      `}</style>

      <div className={isDarkMode ? "dark-theme" : ""}>
        <Layout className="min-h-screen">
          <Header className={isDarkMode ? "bg-gray-800" : "bg-blue-600"} style={{ padding: "0 24px" }}>
            <div className="flex items-center justify-between">
              <div className="flex items-center">
                <EnvironmentOutlined className="text-white text-2xl mr-3" />
                <h1 className="text-white text-xl font-semibold">长沙市燃气管网安全监测平台</h1>
              </div>
              <div className="flex items-center gap-2">
                <SunOutlined className="text-white" />
                <Switch
                  checked={isDarkMode}
                  onChange={setIsDarkMode}
                  checkedChildren={<MoonOutlined />}
                  unCheckedChildren={<SunOutlined />}
                />
                <MoonOutlined className="text-white" />
              </div>
            </div>
          </Header>

          <Layout>
            <Sider
              width={250}
              className={isDarkMode ? "bg-gray-800" : "bg-white"}
              style={{ boxShadow: "2px 0 8px rgba(0,0,0,0.1)" }}
            >
              <Menu
                mode="inline"
                selectedKeys={[selectedKey]}
                defaultOpenKeys={[
                  "basic-data",
                  "hazard-management",
                  "operation-monitoring",
                  "alarm-monitoring",
                  "risk-assessment",
                ]}
                items={menuItems}
                onClick={({ key }) => setSelectedKey(key)}
                className="border-r-0"
                theme={isDarkMode ? "dark" : "light"}
              />
            </Sider>

            <Content className={isDarkMode ? "bg-gray-900" : "bg-gray-50"}>{renderContent()}</Content>
          </Layout>
        </Layout>
      </div>
    </>
  )
}