'use client';

import { useState } from 'react';
import {
  Box,
  Switch,
  Stack,
  Text,
  ActionIcon,
  Group,
  Slider,
  Paper,
} from '@mantine/core';
import { IoChevronBack, IoChevronForward } from 'react-icons/io5';
import styles from './GraphFilterPanel.module.css';

// All possible node and edge types in the graph
const NODE_TYPES = ['USER', 'COLLECTION', 'URL', 'NOTE'] as const;
const EDGE_TYPES = [
  'USER_FOLLOWS_USER',
  'USER_FOLLOWS_COLLECTION',
  'USER_AUTHORED_URL',
  'NOTE_REFERENCES_URL',
  'COLLECTION_CONTAINS_URL',
  'URL_CONNECTS_URL',
] as const;

type NodeType = (typeof NODE_TYPES)[number];
type EdgeType = (typeof EDGE_TYPES)[number];

interface GraphFilterPanelProps {
  visibleNodeTypes: Set<NodeType>;
  visibleEdgeTypes: Set<EdgeType>;
  onNodeTypeToggle: (type: NodeType) => void;
  onEdgeTypeToggle: (type: EdgeType) => void;
  hiddenNodeTypeControls?: Set<NodeType>;
  // Optional depth control (for URL sub-graph view)
  depth?: number;
  onDepthChange?: (depth: number) => void;
  showDepthControl?: boolean;
  // Optional control for initial collapsed state
  defaultCollapsed?: boolean;
}

// Human-readable labels for types
const NODE_TYPE_LABELS: Record<NodeType, string> = {
  USER: 'Users',
  COLLECTION: 'Collections',
  URL: 'URLs',
  NOTE: 'Notes',
};

const EDGE_TYPE_LABELS: Record<EdgeType, string> = {
  USER_FOLLOWS_USER: 'User → User',
  USER_FOLLOWS_COLLECTION: 'User → Collection',
  USER_AUTHORED_URL: 'User → URL',
  NOTE_REFERENCES_URL: 'Note → URL',
  COLLECTION_CONTAINS_URL: 'Collection → URL',
  URL_CONNECTS_URL: 'URL → URL',
};

export default function GraphFilterPanel({
  visibleNodeTypes,
  visibleEdgeTypes,
  onNodeTypeToggle,
  onEdgeTypeToggle,
  hiddenNodeTypeControls = new Set(),
  depth,
  onDepthChange,
  showDepthControl = false,
  defaultCollapsed = true,
}: GraphFilterPanelProps) {
  const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed);

  return (
    <Paper
      className={`${styles.panel} ${isCollapsed ? styles.collapsed : ''}`}
      radius={'lg'}
      shadow="lg"
      p={'sm'}
      withBorder
    >
      {/* Collapse/Expand Button */}
      <ActionIcon
        className={styles.toggleButton}
        onClick={() => setIsCollapsed(!isCollapsed)}
        variant="filled"
        radius={'xl'}
        size="sm"
        aria-label={isCollapsed ? 'Expand panel' : 'Collapse panel'}
      >
        {isCollapsed ? (
          <IoChevronBack size={16} />
        ) : (
          <IoChevronForward size={16} />
        )}
      </ActionIcon>

      {/* Panel Content */}
      {!isCollapsed && (
        <Stack gap="md" className={styles.content}>
          <Text size="sm" fw={600}>
            Graph Filters
          </Text>

          {/* Depth Control (only shown for URL sub-graph view) */}
          {showDepthControl && depth !== undefined && onDepthChange && (
            <Stack gap="xs">
              <Group justify="space-between">
                <Text size="xs" fw={600} c="dimmed" tt="uppercase">
                  Depth
                </Text>
                <Text size="sm" c="dimmed">
                  {depth} {depth === 1 ? 'hop' : 'hops'}
                </Text>
              </Group>
              <Slider
                value={depth}
                onChange={onDepthChange}
                min={1}
                max={5}
                step={1}
                marks={[
                  { value: 1, label: '1' },
                  { value: 2, label: '2' },
                  { value: 3, label: '3' },
                  { value: 4, label: '4' },
                  { value: 5, label: '5' },
                ]}
                size="sm"
              />
            </Stack>
          )}

          {/* Node Type Filters */}
          <Stack gap="xs" mt={'lg'}>
            <Text size="xs" fw={600} tt="uppercase">
              Node Types
            </Text>
            {NODE_TYPES.filter((type) => !hiddenNodeTypeControls.has(type)).map(
              (type) => (
                <Group key={type} justify="space-between" gap="xs">
                  <Text size="sm" c={'dimmed'}>
                    {NODE_TYPE_LABELS[type]}
                  </Text>
                  <Switch
                    checked={visibleNodeTypes.has(type)}
                    onChange={() => onNodeTypeToggle(type)}
                    size="sm"
                  />
                </Group>
              ),
            )}
          </Stack>

          {/* Edge Type Filters */}
          <Stack gap="xs">
            <Text size="xs" fw={600} tt="uppercase">
              Edge Types
            </Text>
            {EDGE_TYPES.map((type) => (
              <Group key={type} justify="space-between" gap="xs">
                <Text size="sm" c={'dimmed'}>
                  {EDGE_TYPE_LABELS[type]}
                </Text>
                <Switch
                  checked={visibleEdgeTypes.has(type)}
                  onChange={() => onEdgeTypeToggle(type)}
                  size="sm"
                />
              </Group>
            ))}
          </Stack>
        </Stack>
      )}
    </Paper>
  );
}
