'use client';

import * as React from 'react';
import {
  Box,
  Card,
  Divider,
  FormControl,
  InputLabel,
  OutlinedInput,
  Select,
  MenuItem,
  Tab,
  Tabs,
  useTheme,
} from '@mui/material';
import { MagnifyingGlass as MagnifyingGlassIcon } from '@phosphor-icons/react/dist/ssr/MagnifyingGlass';

export interface TrainingFiltersProps {
  value: number;
  onChange: (event: React.SyntheticEvent, newValue: number) => void;
  onSearchChange: (query: string) => void;
  onCategorySearch: (query: string) => void;
  onContentTypeChange: (type: 'all' | 'video' | 'document' | 'blog') => void;
}

export function TrainingFilters({
  value,
  onChange,
  onSearchChange,
  onCategorySearch,
  onContentTypeChange,
}: TrainingFiltersProps): React.JSX.Element {
  const theme = useTheme();
  const [searchQuery, setSearchQuery] = React.useState('');
  const [categoryQuery, setCategoryQuery] = React.useState('');
  const [contentType, setContentType] = React.useState<'all' | 'video' | 'document' | 'blog'>('all');

  const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const query = event.target.value;
    setSearchQuery(query);
    onSearchChange(query);
  };

  const handleCategorySearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const query = event.target.value;
    setCategoryQuery(query);
    onCategorySearch(query);
  };

  const handleContentTypeChange = (event: any) => {
    const type = event.target.value as 'all' | 'video' | 'document' | 'blog';
    setContentType(type);
    onContentTypeChange(type);
  };

  return (
    <Card 
      sx={{ 
        p: 3, 
        mb: 3,
        borderRadius: 4,
        background: theme.palette.mode === 'dark' 
          ? 'linear-gradient(145deg, #1e293b 0%, #334155 100%)' 
          : 'linear-gradient(145deg, #ffffff 0%, #f8fafc 100%)',
        border: theme.palette.mode === 'dark' 
          ? '1px solid #475569' 
          : '1px solid rgba(255, 255, 255, 0.2)',
        boxShadow: theme.palette.mode === 'dark' 
          ? '0 8px 32px rgba(0, 0, 0, 0.3)' 
          : '0 8px 32px rgba(0, 0, 0, 0.08)',
      }}
    >
      {/* Tabs for switching between content and categories */}
      <Tabs
        value={value}
        onChange={onChange}
        sx={{
          mb: 3,
          '& .MuiTab-root': {
            fontWeight: 600,
            fontSize: '1rem',
            minHeight: 48,
            borderRadius: 2,
            mx: 0.5,
            color: theme.palette.mode === 'dark' ? '#94a3b8' : '#64748b',
            '&.Mui-selected': {
              color: theme.palette.mode === 'dark' ? '#60a5fa' : '#3b82f6',
              backgroundColor: theme.palette.mode === 'dark' 
                ? 'rgba(96, 165, 250, 0.1)' 
                : 'rgba(59, 130, 246, 0.1)',
            },
          },
          '& .MuiTabs-indicator': {
            display: 'none',
          },
        }}
      >
        <Tab label="📚 Training Content" />
        {/* <Tab label="📂 Categories" /> */}
      </Tabs>

      <Divider sx={{ mb: 3 }} />

      {/* Filters */}
      <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap', alignItems: 'center' }}>
        {value === 0 ? (
          <>
            {/* Content Search */}
            <FormControl sx={{ minWidth: 240 }}>
              <InputLabel>Search Training Content</InputLabel>
              <OutlinedInput
                value={searchQuery}
                onChange={handleSearchChange}
                startAdornment={<MagnifyingGlassIcon fontSize="var(--icon-fontSize-md)" />}
                label="Search Training Content"
                placeholder="Search by title..."
                sx={{
                  borderRadius: 3,
                  backgroundColor: theme.palette.mode === 'dark' 
                    ? 'rgba(51, 65, 85, 0.3)' 
                    : 'rgba(248, 250, 252, 0.8)',
                }}
              />
            </FormControl>

            {/* Content Type Filter */}
            <FormControl sx={{ minWidth: 180 }}>
              <InputLabel>Content Type</InputLabel>
              <Select
                value={contentType}
                onChange={handleContentTypeChange}
                label="Content Type"
                sx={{
                  borderRadius: 3,
                  backgroundColor: theme.palette.mode === 'dark' 
                    ? 'rgba(51, 65, 85, 0.3)' 
                    : 'rgba(248, 250, 252, 0.8)',
                }}
              >
                <MenuItem value="all">🎯 All Content</MenuItem>
                <MenuItem value="video">🎥 Videos</MenuItem>
                <MenuItem value="document">📄 Documents</MenuItem>
                <MenuItem value="blog">📝 Blogs</MenuItem>
              </Select>
            </FormControl>
          </>
        ) : (
          <>
            {/* Category Search */}
            <FormControl sx={{ minWidth: 240 }}>
              <InputLabel>Search Categories</InputLabel>
              <OutlinedInput
                value={categoryQuery}
                onChange={handleCategorySearchChange}
                startAdornment={<MagnifyingGlassIcon fontSize="var(--icon-fontSize-md)" />}
                label="Search Categories"
                placeholder="Search by category name..."
                sx={{
                  borderRadius: 3,
                  backgroundColor: theme.palette.mode === 'dark' 
                    ? 'rgba(51, 65, 85, 0.3)' 
                    : 'rgba(248, 250, 252, 0.8)',
                }}
              />
            </FormControl>
          </>
        )}
      </Box>
    </Card>
  );
}