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";

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 [progressValue, setProgressValue] = useState(0);
  const [switchValue, setSwitchValue] = useState<boolean | null>(false);
  const [modalOpen, setModalOpen] = 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={() => setModalOpen(true)}>Open modal</Button>
      <Button>Click me</Button>
      <Button variant="green">Click me</Button>
      <Button variant="red">Click me</Button>
      <Button variant="yellow">Click me</Button>
      <Button 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} />
      <ActionModal
        open={modalOpen}
        description="Are you sure you want to proceed with this action?"
        onClose={() => setModalOpen(false)}
        onConfirm={() => setModalOpen(false)}
        confirmText="Confirm"
      />
    </SectionSurface>
  );
}