import { useState } from "react";

import SectionSurface from "@components/surface/SectionSurface";
import { Link } from "@tanstack/react-router";
import DarkSurface from "@components/surface/DarkSurface";
import ContentSurface from "@components/surface/ContentSurface";
import LightSurface from "@components/surface/LightSurface";
import DataSurface from "@components/surface/DataSurface";
import Button from "@components/atoms/Button";
import TabSelector from "@components/atoms/TabSelector";
import Progress from "@components/atoms/Progress";
import RangeInput from "@components/form/RangeInput";
import SwitchInput from "@components/form/SwitchInput";
import TextInput from "@components/form/TextInput";
import NumberInput from "@components/form/NumberInput";
import TextAreaInput from "@components/form/TextAreaInput";
import ActionModal from "@components/modals/ActionModal";
import Pagination from "@components/atoms/Pagination";

const TABS = [
  { key: "tab1", title: "Tab 1" },
  { key: "tab2", title: "Tab 2" },
  { key: "tab3", title: "Tab 3" },
];

export default function GameRoute() {
  const [activeTab, setActiveTab] = useState<string | null>(TABS[0].key);
  const [page, setPage] = useState(1);
  const [progressValue, setProgressValue] = useState(0);
  const [switchValue, setSwitchValue] = useState<boolean | null>(false);
  const [modalOpen, setModalOpen] = useState(false);
  const [buttonsDisabled, setButtonsDisabled] = useState(false);

  return (
    <SectionSurface className="relative flex flex-col gap-4 w-full">
      <TabSelector tabs={TABS} value={activeTab} onChange={setActiveTab} />
      <SwitchInput value={switchValue} onChange={setSwitchValue} />
      <ContentSurface className="rounded-2xl">
        <LightSurface className="rounded-2xl rounded-b-sm p-2">
          Hello "/game"!
          <DataSurface>100$</DataSurface>
        </LightSurface>
        <DarkSurface className="rounded-2xl rounded-t-sm p-2 flex flex-col gap-2">
          <Link to="/roulette">Roulette</Link>
          <DataSurface>100$</DataSurface>
        </DarkSurface>
      </ContentSurface>
      <Button onClick={() => setButtonsDisabled((v) => !v)}>Toggle disabled</Button>
      <Button disabled={buttonsDisabled} onClick={() => setModalOpen(true)}>
        Open modal
      </Button>
      <Button disabled={buttonsDisabled}>Click me</Button>
      <Button disabled={buttonsDisabled} variant="green">
        Click me
      </Button>
      <Button disabled={buttonsDisabled} variant="red">
        Click me
      </Button>
      <Button disabled={buttonsDisabled} variant="yellow">
        Click me
      </Button>
      <Button disabled={buttonsDisabled} variant="blue">
        Click me
      </Button>
      <ContentSurface className="rounded-full">
        <Progress value={progressValue} max={10000} variant="green" />
      </ContentSurface>
      <ContentSurface className="rounded-full">
        <Progress value={progressValue} max={10000} variant="yellow" />
      </ContentSurface>
      <RangeInput
        value={progressValue}
        onChange={(e) => setProgressValue(Number(e.target.value))}
        min={0}
        max={10000}
      />
      <TextInput placeholder="Text Input" />
      <TextInput placeholder="Text Input Error" error />
      <NumberInput placeholder="Number Input" />
      <NumberInput error prefix="$" value={progressValue} onChange={setProgressValue} />
      <TextAreaInput placeholder="Text Area Input" rows={3} />
      <TextAreaInput placeholder="Text Area Error" error rows={3} />
      <Pagination value={page} total={10} onChange={setPage} />
      <Pagination value={page} total={10} onChange={setPage} variant="blue" />
      <ActionModal
        open={modalOpen}
        description="Are you sure you want to proceed with this action?"
        onClose={() => setModalOpen(false)}
        onConfirm={() => setModalOpen(false)}
        confirmText="Confirm"
      />
    </SectionSurface>
  );
}
