import { Card, Col, Row, Space, Typography } from "antd";
import React, { useEffect } from "react";
import ipcTypes from "../../../ipc.types";
import NotificationsToggleAtom from "../../atoms/notifications-toggle/notifications-toggle.atom";
import WatcherStartupAtom from "../../atoms/watcher-startup/watcher-startup.atom";
import WatcherPollingMolecule from "../../molecules/watcher-polling/watcher-polling.molecule";
import FilePathsListOrganism from "../../organisms/filepaths-list/filepaths-list.organism";
import ShopSettingsOrganism from "../../organisms/shop-settings/shop-settings.organism";
import WatcherManagerOrganism from "../../organisms/watcher-manager/watcher-manager.organism";
import "./settings.page.styles.scss";
const { ipcRenderer } = window;

export default function SettingsPage() {
  useEffect(() => {
    ipcRenderer.send(ipcTypes.store.getAll);
  }, []);

  return (
    <div className="settings-page-container">
      <div className="settings-page__hero">
        <Typography.Title level={3}>Settings</Typography.Title>
        <Typography.Paragraph type="secondary">
          Manage watcher behavior, notifications, and shop defaults in one compact workspace.
        </Typography.Paragraph>
      </div>

      <Row gutter={[16, 16]} align="top">
        <Col xs={24} xl={16}>
          <Card variant="borderless" className="settings-page__card settings-page__card--filepaths">
            <FilePathsListOrganism />
          </Card>
        </Col>
        <Col xs={24} xl={8}>
          <Space direction="vertical" size={16} className="settings-page__side-stack">
            <Card variant="borderless" className="settings-page__card">
              <WatcherManagerOrganism />
            </Card>
            <Card variant="borderless" className="settings-page__card settings-page__card--automation">
              <Typography.Title level={5}>Automation</Typography.Title>
              <Typography.Paragraph type="secondary">
                Fine-tune polling, startup behavior, and desktop notifications.
              </Typography.Paragraph>
              <Space direction="vertical" size={10} className="settings-page__controls">
                <WatcherPollingMolecule />
                <NotificationsToggleAtom />
                <WatcherStartupAtom />
              </Space>
            </Card>
          </Space>
        </Col>
      </Row>

      <Card variant="borderless" className="settings-page__card settings-page__card--shop">
        <ShopSettingsOrganism />
      </Card>
    </div>
  );
}
