import { Title } from "@components/title";
import {
  Dialog,
  DialogContent,
  DialogActions,
  Button,
  Select,
  MenuItem,
  FormControl,
  InputLabel,
  TextField,
  Box,
  Typography,
  Fade,
  IconButton,
} from "@mui/material";
import CloseIcon from "@mui/icons-material/Close";
import { useState } from "react";

interface ProjectSelectorProps {
  open: boolean;
  onSelect: (workspace: string, networkName: string, extent: number[]) => void;
  onClose?: () => void;
}

const PROJECTS = [
  {
    label: "默认",
    workspace: "tjwater",
    networkName: "tjwater",
    extent: [13508802, 3608164, 13555651, 3633686],
  },
  {
    label: "苏州河",
    workspace: "szh",
    networkName: "szh",
    extent: [13490131, 3630016, 13525879, 3666969],
  },
  {
    label: "测试项目",
    workspace: "test",
    networkName: "test",
    extent: [13508849, 3608036, 13555781, 3633813],
  },
];

export const ProjectSelector: React.FC<ProjectSelectorProps> = ({
  open,
  onSelect,
  onClose,
}) => {
  const [workspace, setWorkspace] = useState(PROJECTS[0].workspace);
  const [networkName, setNetworkName] = useState(PROJECTS[0].networkName);
  const [extent, setExtent] = useState<number[]>(
    PROJECTS[0].extent,
  );
  const [customMode, setCustomMode] = useState(false);

  const handleConfirm = () => {
    onSelect(workspace, networkName, extent);
  };

  return (
    <Dialog
      open={open}
      disableEscapeKeyDown={!onClose}
      onClose={onClose ? onClose : undefined}
      slotProps={{
        paper: {
          sx: {
            borderRadius: 2,
            padding: 2,
            minWidth: 400,
            background: "rgba(255, 255, 255, 0.95)",
            backdropFilter: "blur(10px)",
            position: "relative",
          },
        },
      }}
      slots={{ transition: Fade }}
      transitionDuration={500}
    >
      {onClose && (
        <IconButton
          aria-label="close"
          onClick={onClose}
          sx={{
            position: "absolute",
            right: 8,
            top: 8,
            color: (theme) => theme.palette.grey[500],
          }}
        >
          <CloseIcon />
        </IconButton>
      )}
      <Box
        sx={{
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          mb: 2,
        }}
      >
        <Box sx={{ transform: "scale(1.5)", mb: 2, mt: 1 }}>
          <Title />
        </Box>
        <Typography variant="subtitle1" color="text.secondary">
          请选择项目环境
        </Typography>
      </Box>

      <DialogContent
        sx={{ display: "flex", flexDirection: "column", gap: 3, pt: 1 }}
      >
        {!customMode ? (
          <FormControl fullWidth variant="outlined">
            <InputLabel>项目</InputLabel>
            <Select
              value={workspace}
              label="项目"
              onChange={(e) => {
                const val = e.target.value;
                if (val === "custom") {
                  setCustomMode(true);
                } else {
                  const p = PROJECTS.find((p) => p.workspace === val);
                  if (p) {
                    setWorkspace(p.workspace);
                    setNetworkName(p.networkName);
                    setExtent(p.extent);
                  }
                }
              }}
            >
              {PROJECTS.map((p) => (
                <MenuItem key={p.workspace} value={p.workspace}>
                  <Box sx={{ display: "flex", flexDirection: "column" }}>
                    <Typography variant="body1">{p.label}</Typography>
                    <Typography variant="caption" color="text.secondary">
                      工作区: {p.workspace} | 管网: {p.networkName}
                    </Typography>
                  </Box>
                </MenuItem>
              ))}
              <MenuItem value="custom">
                <Typography variant="body1">自定义配置...</Typography>
              </MenuItem>
            </Select>
          </FormControl>
        ) : (
          <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
            <TextField
              label="Geoserver 工作区"
              value={workspace}
              onChange={(e) => setWorkspace(e.target.value)}
              fullWidth
              helperText="例如: tjwater"
            />
            <TextField
              label="管网名称"
              value={networkName}
              onChange={(e) => setNetworkName(e.target.value)}
              fullWidth
              helperText="例如: tjwater"
            />
            <Button
              onClick={() => setCustomMode(false)}
              size="small"
              sx={{ alignSelf: "flex-start" }}
            >
              返回列表
            </Button>
          </Box>
        )}
      </DialogContent>
      <DialogActions sx={{ px: 3, pb: 2 }}>
        <Button
          onClick={handleConfirm}
          variant="contained"
          fullWidth
          size="large"
          sx={{
            textTransform: "none",
            borderRadius: 2,
            fontWeight: "bold",
          }}
        >
          进入系统
        </Button>
      </DialogActions>
    </Dialog>
  );
};