import React, { useState, useEffect, useContext, useRef, useMemo, useCallback } from "react";
import equal from "fast-deep-equal";

import Paper from "@mui/material/Paper";
import Button from "@mui/material/Button";
import Switch from "@mui/material/Switch";
import Dialog from "@mui/material/Dialog";
import DialogTitle from "@mui/material/DialogTitle";
import DialogContent from "@mui/material/DialogContent";
import DialogActions from "@mui/material/DialogActions";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableRow from "@mui/material/TableRow";

// import "./HouseRules.css";

import boardImg from "./assets/category-board.png";
import expansionImg from "./assets/category-expansion.png";
import rollingImg from "./assets/category-rolling.png";
import rulesImg from "./assets/category-rules.png";
import volcanoTile from "./assets/single-volcano.png";

import { GlobalContext } from "./GlobalContext";
import { Placard } from "./Placard";
import Box from "@mui/material/Box/Box";
import { Typography } from "@mui/material";

const categoryImages: { [key: string]: string } = {
  board: boardImg,
  expansion: expansionImg,
  rolling: rollingImg,
  rules: rulesImg,
};

/* eslint-disable @typescript-eslint/no-explicit-any */

interface VolcanoProps {
  sendJsonMessage: (message: any) => void;
  rules: any;
  field: string;
  disabled: boolean;
}

/* Volcano based on https://www.ultraboardgames.com/catan/the-volcano.php */
const Volcano: React.FC<VolcanoProps> = ({ sendJsonMessage, rules, field, disabled }) => {
  const init =
    Math.random() > 0.5
      ? Math.floor(8 + Math.random() * 5) /* Do not include 7 */
      : Math.floor(2 + Math.random() * 5); /* Do not include 7 */
  const [number, setNumber] = useState<number>(field in rules && "number" in rules[field] ? rules[field].number : init);
  const [gold, setGold] = useState<boolean>(field in rules && "gold" in rules[field] ? rules[field].gold : false);

  console.log(`house-rules - ${field} - `, rules[field]);

  useEffect(() => {
    if (field in rules) {
      setGold("gold" in rules[field] ? rules[field].gold : true);
      setNumber("number" in rules[field] ? rules[field].number : init);
      let update = false;
      if (!("gold" in rules[field])) {
        rules[field].gold = true;
        update = true;
      }
      if (!("number" in rules[field])) {
        rules[field].number = init;
        update = true;
      }

      if (update && sendJsonMessage) {
        sendJsonMessage({
          type: "rules",
          rules: rules,
        });
      }
    }
  }, [rules, field, init, sendJsonMessage]);

  const toggleGold = () => {
    if (!sendJsonMessage) return;
    rules[field].gold = !gold;
    rules[field].number = number;
    setGold(rules[field].gold);

    sendJsonMessage({
      type: "rules",
      rules: rules,
    });
  };

  const update = (delta: number) => {
    if (!sendJsonMessage) return;
    let value = number + delta;
    if (value < 2 || value > 12) {
      return;
    }
    /* Number to trigger Volcano cannot be 7 */
    if (value === 7) {
      value = delta > 0 ? 8 : 6;
    }
    setNumber(value);
    rules[field].gold = gold;
    rules[field].number = value;
    sendJsonMessage({
      type: "rules",
      rules: rules,
    });
  };

  return (
    <Box
      className="Volcano"
      sx={{
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        gap: 2,
        marginTop: 2,
      }}
    >
      <Box
        sx={{
          display: "flex",
          flexDirection: "row",
          alignItems: "center",
          gap: 2,
        }}
      >
        <img src={volcanoTile} alt={"Volcano"} style={{ width: "100px", height: "100px" }} />
        <div>
          The Volcano replaces the Desert. When the Volcano erupts, roll a die to determine the direction the lava will
          flow. One of the six intersections on the Volcano tile will be affected. If there is a settlement on the
          selected intersection, it is destroyed!
        </div>
      </Box>
      <div>
        Remove it from the board (its owner may rebuild it later). If a city is located there, it is reduced to a
        settlement! Replace the city with a settlement of its owner&apos;s color. If he has no settlements remaining, the
        city is destroyed instead.
      </div>
      <div>The presence of the Robber on the Volcano does not prevent the Volcano from erupting.</div>
      <div>
        Roll <b>{number}</b> and the Volcano erupts!
        <Button onClick={() => update(+1)}>up</Button>&nbsp;/&nbsp;
        <Button onClick={() => update(-1)}> down</Button>
      </div>
      {/* <Paper sx={{ flexGrow: 1, width: "100%" }}> */}
      <Table>
        <TableRow>
          <TableCell>
            <b>Volcanoes have gold!</b>
            <br />
            Volcano can produce resources when its number is rolled.
          </TableCell>
          <TableCell>
            <Switch
              size={"small"}
              className="RuleSwitch"
              checked={gold}
              onChange={() => toggleGold()}
              {...{ disabled }}
            />
          </TableCell>
        </TableRow>
        {gold && (
          <TableRow>
            <TableCell colSpan={3}>
              <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
                <div>
                  Volcanoes tend to be rich in valuable minerals such as gold or gems. Each settlement that is adjacent
                  to the Volcano when it erupts may produce any one of the five resources it&apos;s owner desires.
                </div>
                <div>
                  Each city adjacent to the Volcano may produce any two resources. This resource production is taken
                  before the results of the volcano eruption are resolved. Note that while the Robber can not prevent the
                  Volcano from erupting, he does prevent any player from producing resources from the Volcano hex if he
                  has been placed there.
                </div>
              </Box>
            </TableCell>
          </TableRow>
        )}
      </Table>
      {/* </Paper> */}
    </Box>
  );
};

interface VictoryPointsProps {
  sendJsonMessage: (message: any) => void;
  rules: any;
  field: string;
}

const VictoryPoints: React.FC<VictoryPointsProps> = ({ sendJsonMessage, rules, field }) => {
  const minVP = 10;
  const [points, setPoints] = useState<number>(rules[field].points || minVP);
  console.log(`house-rules - ${field} - `, rules[field]);

  if (!(field in rules)) {
    rules[field] = {
      points: minVP,
    };
  }

  if (rules[field].points && rules[field].points !== points) {
    setPoints(rules[field].points);
  }

  const update = (value: number) => {
    if (!sendJsonMessage) return;
    const points = (rules[field].points || minVP) + value;
    if (points < minVP) {
      return;
    }
    if (points !== rules[field].points) {
      setPoints(points);
      rules[field].points = points;
      sendJsonMessage({
        type: "rules",
        rules: rules,
      });
    }
  };

  return (
    <Box className="VictoryPoints" sx={{ display: "flex", flexDirection: "column", gap: 2, marginTop: 2 }}>
      <Box>
        The first to reach <b>{points}</b> points wins!
        <Button onClick={() => update(+1)}>up</Button>&nbsp;/&nbsp;
        <Button onClick={() => update(-1)}> down</Button>
      </Box>
      <Box>
        This flexible twist of a rule lets you customize the number of Victory Points needed to claim victory, whether
        youre aiming for a quick 7-point skirmish or a marathon 12-point conquest. Adjust the goal to match your
        mood—keep it low for a fast-paced showdown or crank it up for an epic battle of strategy and luck, ensuring every
        game feels fresh and perfectly suited to your crew’s competitive spirit!
      </Box>
    </Box>
  );
};

interface HouseRulesProps {
  houseRulesActive: boolean;
  setHouseRulesActive: React.Dispatch<React.SetStateAction<boolean>>;
}

const HouseRules: React.FC<HouseRulesProps> = ({ houseRulesActive, setHouseRulesActive }) => {
  const { lastJsonMessage, name, sendJsonMessage } = useContext(GlobalContext);
  const [rules, setRules] = useState<any>({});
  const [state, setState] = useState<any>({});
  const [gameState, setGameState] = useState<string>("");

  const fields = useMemo(() => ["state", "rules"], []);
  useEffect(() => {
    if (!lastJsonMessage) {
      return;
    }
    const data = lastJsonMessage;
    switch (data.type) {
      case "game-update":
        console.log(`house-rules - game-update: `, data.update);
        if ("state" in data.update && data.update.state !== gameState) {
          setGameState(data.update.state);
        }
        if ("rules" in data.update && !equal(rules, data.update.rules)) {
          setRules(data.update.rules);
        }
        break;
      default:
        break;
    }
  }, [lastJsonMessage, rules, gameState]);
  useEffect(() => {
    if (!sendJsonMessage) {
      return;
    }
    sendJsonMessage({
      type: "get",
      fields,
    });
  }, [sendJsonMessage, fields]);

  const dismissClicked = useCallback(() => {
    setHouseRulesActive(false);
  }, [setHouseRulesActive]);

  const setRule = useCallback(
    (event: React.ChangeEvent<HTMLInputElement>, key: string) => {
      if (!sendJsonMessage) return;
      const checked = event.target.checked;
      console.log(`house-rules - set rule ${key} to ${checked}`);
      rules[key].enabled = checked;
      setRules({ ...rules });
      sendJsonMessage({
        type: "rules",
        rules: rules,
      });
    },
    [rules, sendJsonMessage]
  );

  const ruleList = useMemo(
    () =>
      [
        {
          key: "volcano",
          label: "Volcanoes are a lava fun!",
          description: "A volcano is on the island! Let the lava flow!",
          category: "board",
          defaultChecked: false,
          element: (
            <Volcano
              sendJsonMessage={sendJsonMessage}
              rules={rules}
              field={"volcano"}
              disabled={gameState !== "lobby"}
            />
          ),
        },
        {
          key: "victory-points",
          label: "More victory points",
          description: "Customize how many Victory Points are required to win.",
          category: "rules",
          defaultChecked: false,
          element: <VictoryPoints sendJsonMessage={sendJsonMessage} rules={rules} field={"victory-points"} />,
        },
        {
          key: "tiles-start-facing-down",
          label: "Tiles start facing down",
          description: "Resource tiles start upside-down while placing starting settlements.",
          category: "board",
          defaultChecked: false,
          element: (
            <div>
              Once all players have placed their initial settlements and roads, the tiles are flipped and you discover
              what the resources are.
            </div>
          ),
        },
        {
          key: "most-developed",
          label: "You are so developed!",
          description: "The player with the most development cards (more than 4) receives 2VP.",
          category: "expansion",
          defaultChecked: false,
          element: (
            <Box sx={{ display: "block", flexDirection: "column" }}>
              <Placard
                sx={{
                  float: "left",
                  marginRight: "0.5rem",
                  marginBottom: "0.5rem",
                }}
                type="most-developed"
              />
              <Typography variant="body2">
                This card rewards the player who amasses more than 4 development cards with a glorious 2 Victory Points,
                turning your strategic savvy into a medieval masterpiece complete with towering cities and bustling
                fields. Picture yourself snagging this beautifully illustrated card—featuring hardworking villagers and a
                majestic castle!
              </Typography>
              <Box sx={{ clear: "both" }}></Box>
            </Box>
          ),
        },
        {
          key: "port-of-call",
          label: "Another round of port?",
          description: "The player with the most harbor ports (more than 2) receives 2VP.",
          category: "expansion",
          defaultChecked: false,
          element: (
            <Box sx={{ display: "block", flexDirection: "column" }}>
              <Placard
                sx={{
                  float: "left",
                  marginRight: "0.5rem",
                  marginBottom: "0.5rem",
                }}
                type="port-of-call"
              />
              <Typography variant="body2">
                Raise your mugs and hoist the sails! This lively card rewards the most seasoned seafarer among the
                settlers. When you control more than two harbor ports, you claim this card and earn 2 Victory Points as a
                tribute to your mastery of the seas. But beware — other ambitious captains are watching closely! The
                moment someone else builds a larger network of harbors, they’ll steal both the card and the glory right
                from under your nose. Keep those ships moving and never let your rivals toast to your downfall!
              </Typography>
              <Box sx={{ clear: "both" }}></Box>
            </Box>
          ),
        },
        {
          key: "slowest-turn",
          label: "Why you play so slow?",
          description: "The player with the longest turn idle time (longer than 2 minutes) so far loses 2VP.",
          category: "expansion",
          defaultChecked: false,
          element: (
            <Box sx={{ display: "block", flexDirection: "column" }}>
              <Placard
                sx={{
                  float: "left",
                  marginRight: "0.5rem",
                  marginBottom: "0.5rem",
                }}
                type="longest-turn"
              />
              <Typography variant="body2" sx={{ marginTop: "1rem" }}>
                If your turn idle time drags on past 2 minutes, you’re slapped with a -2 Victory Points penalty and
                handed this charming card—featuring industrious villagers raking hay with a castle looming in the
                background—until someone even slower takes it from you with a sheepish grin!
              </Typography>
              <Box sx={{ clear: "both" }}></Box>
            </Box>
          ),
        },
        {
          key: "roll-double-roll-again",
          label: "Roll double, roll again",
          description: "Roll again if you roll two of the same number.",
          category: "rolling",
          defaultChecked: false,
          element: (
            <div>
              If you roll doubles, players get those resources and then you must roll again.
              <Box sx={{ display: "block", fontWeight: "bold", pt: 1, pb: 1 }}>Note:</Box>
              This stacks with Two and Twelve are Synonyms. So if you roll double ones (2), you get resources for 2 and
              12, then roll again!
            </div>
          ),
        },
        {
          key: "twelve-and-two-are-synonyms",
          label: "Twelve and Two are synonyms",
          description: "If twelve is rolled, two scores as well. And vice-versa.",
          category: "rolling",
          defaultChecked: false,
          element: (
            <div>
              If you roll a twelve or two, resources are triggered for both.
              <Box sx={{ display: "block", fontWeight: "bold", pt: 1, pb: 1 }}>Note:</Box> This stacks with Roll Double,
              Roll Again. So if you roll double sixes (12), you get resources for 2 and 12, then roll again!
            </div>
          ),
        },
        {
          key: "robin-hood-robber",
          label: "Robin Hood robber",
          description: "Robbers can't steal from players with two or less victory points.",
          category: "rules",
          defaultChecked: false,
          element: (
            <Typography variant="body2">
              This rule turns the robber into a noble thief, forbidding him from pilfering resources from players with
              two or fewer Victory Points—leaving the underdogs safe while the wealthier lords tremble. Watch as the
              tables turn with a wink and a grin, adding a layer of strategy where protecting the little guy might just
              be the key to your own rise to power!
            </Typography>
          ),
        },
      ].sort((a, b) => a.category.localeCompare(b.category)),
    [rules, setRules, state, setRule, name, gameState]
  );

  if (!houseRulesActive) {
    return <></>;
  }

  return (
    <Paper
      sx={{
        p: 1,
        maxWidth: 600,
        margin: "1rem auto",
        flexDirection: "column",
        display: "flex",
      }}
      className="HouseRules"
      elevation={3}
    >
      <DialogTitle>House Rules</DialogTitle>
      <DialogContent>
        <TableContainer>
          <Table sx={{ tableLayout: "fixed" }}>
            <TableBody>
              {ruleList.map((item) => {
                const defaultChecked = item.defaultChecked;
                if (!(item.key in rules)) {
                  rules[item.key] = {
                    enabled: defaultChecked,
                  };
                }
                const checked = rules[item.key].enabled;
                if (checked !== state[item.key]) {
                  setState({ ...state, [item.key]: checked });
                }

                return (
                  <React.Fragment key={item.key}>
                    <TableRow sx={{ borderTop: "1px solid lightgray" }}>
                      <TableCell sx={{ width: "50px" }}>
                        {/* Fixed width for image */}
                        <img
                          src={categoryImages[item.category]}
                          alt={item.category}
                          style={{ width: "50px", height: "68px" }}
                        />
                      </TableCell>
                      <TableCell sx={{ width: "auto" }}>
                        <b>{item.label}</b>
                        <br />
                        {item.description}
                      </TableCell>
                      <TableCell sx={{ width: "32px" }}>
                        <Switch
                          size={"small"}
                          className="RuleSwitch"
                          checked={checked}
                          id={item.key}
                          onChange={(e) => setRule(e, item.key)}
                          disabled={gameState !== "lobby"}
                        />
                      </TableCell>
                    </TableRow>
                    {checked && (
                      <TableRow
                        sx={{
                          boxShadow: "inset 0 3px 5px -3px rgba(0,0,0,0.5), inset 0 -3px 5px -3px rgba(0,0,0,0.5)",
                          backgroundColor: "rgba(0,0,0,0.1)",
                        }}
                      >
                        <TableCell colSpan={3}>
                          <Paper elevation={3} sx={{ p: 1, m: 0.5, fontSize: "0.8rem" }}>
                            {item.element}
                          </Paper>
                        </TableCell>
                      </TableRow>
                    )}
                  </React.Fragment>
                );
              })}
            </TableBody>
          </Table>
        </TableContainer>
      </DialogContent>
      <DialogActions>
        <Button onClick={dismissClicked}>Close</Button>
      </DialogActions>
    </Paper>
  );
};

export { HouseRules };