import React, { useState, useMemo } from 'react'
import {
  Box,
  Typography,
  FormControl,
  InputLabel,
  Select,
  MenuItem,
  Chip,
  Stack,
  Paper,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  useMediaQuery,
  useTheme,
} from '@mui/material'
import { useTasks } from '~/hooks/useTasks'
import { TaskStatus } from '~/types/task'
import LoadingSpinner from './LoadingSpinner'

type SortOption =
  | 'created_desc'
  | 'created_asc'
  | 'title_asc'
  | 'title_desc'
  | 'status'

interface TaskListProps {
  className?: string
}

export function TaskList({ className }: TaskListProps) {
  const { tasks, loading, error } = useTasks()
  const [statusFilter, setStatusFilter] = useState<TaskStatus | 'all'>('all')
  const [sortBy, setSortBy] = useState<SortOption>('created_desc')
  const theme = useTheme()
  const isMobile = useMediaQuery(theme.breakpoints.down('md'))

  const filteredAndSortedTasks = useMemo(() => {
    let filteredTasks = tasks

    // Apply status filter
    if (statusFilter !== 'all') {
      filteredTasks = tasks.filter(task => task.status === statusFilter)
    }

    // Apply sorting
    const sorted = [...filteredTasks].sort((a, b) => {
      switch (sortBy) {
        case 'created_desc':
          return (
            new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
          )
        case 'created_asc':
          return (
            new Date(a.created_at).getTime() - new Date(b.created_at).getTime()
          )
        case 'title_asc':
          return a.title.localeCompare(b.title)
        case 'title_desc':
          return b.title.localeCompare(a.title)
        case 'status': {
          const statusOrder = {
            [TaskStatus.Todo]: 0,
            [TaskStatus.Backlog]: 1,
            [TaskStatus.Done]: 2,
          }
          return statusOrder[a.status] - statusOrder[b.status]
        }
        default:
          return 0
      }
    })

    return sorted
  }, [tasks, statusFilter, sortBy])

  const getStatusColor = (status: TaskStatus) => {
    switch (status) {
      case TaskStatus.Todo:
        return 'primary'
      case TaskStatus.Done:
        return 'success'
      case TaskStatus.Backlog:
        return 'default'
      default:
        return 'default'
    }
  }

  const formatCompactDate = (dateString: string) => {
    const date = new Date(dateString)
    const now = new Date()
    const diffInDays = Math.floor(
      (now.getTime() - date.getTime()) / (1000 * 60 * 60 * 24)
    )

    if (diffInDays === 0) return 'Today'
    if (diffInDays === 1) return 'Yesterday'
    if (diffInDays < 7) return `${diffInDays}d ago`
    if (diffInDays < 30) return `${Math.floor(diffInDays / 7)}w ago`
    if (diffInDays < 365) return `${Math.floor(diffInDays / 30)}mo ago`
    return `${Math.floor(diffInDays / 365)}y ago`
  }

  if (loading) {
    return <LoadingSpinner />
  }

  if (error) {
    return (
      <Box sx={{ p: 2, textAlign: 'center' }}>
        <Typography color="error" variant="h6">
          Error loading tasks
        </Typography>
        <Typography color="text.secondary" variant="body2">
          {error}
        </Typography>
      </Box>
    )
  }

  return (
    <Box className={className}>
      {/* Filter and Sort Controls */}
      <Paper sx={{ p: 2, mb: 2 }}>
        <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
          <FormControl size="small" sx={{ minWidth: 120 }}>
            <InputLabel>Status</InputLabel>
            <Select
              value={statusFilter}
              label="Status"
              onChange={e =>
                setStatusFilter(e.target.value as TaskStatus | 'all')
              }
            >
              <MenuItem value="all">All Tasks</MenuItem>
              <MenuItem value={TaskStatus.Todo}>Todo</MenuItem>
              <MenuItem value={TaskStatus.Done}>Done</MenuItem>
              <MenuItem value={TaskStatus.Backlog}>Backlog</MenuItem>
            </Select>
          </FormControl>

          <FormControl size="small" sx={{ minWidth: 150 }}>
            <InputLabel>Sort by</InputLabel>
            <Select
              value={sortBy}
              label="Sort by"
              onChange={e => setSortBy(e.target.value as SortOption)}
            >
              <MenuItem value="created_desc">Newest First</MenuItem>
              <MenuItem value="created_asc">Oldest First</MenuItem>
              <MenuItem value="title_asc">Title A-Z</MenuItem>
              <MenuItem value="title_desc">Title Z-A</MenuItem>
              <MenuItem value="status">By Status</MenuItem>
            </Select>
          </FormControl>

          <Typography
            variant="body2"
            color="text.secondary"
            sx={{ display: 'flex', alignItems: 'center' }}
          >
            {filteredAndSortedTasks.length} task
            {filteredAndSortedTasks.length !== 1 ? 's' : ''}
          </Typography>
        </Stack>
      </Paper>

      {/* Task Table */}
      {filteredAndSortedTasks.length === 0 ? (
        <Paper sx={{ p: 4, textAlign: 'center' }}>
          <Typography variant="h6" color="text.secondary" gutterBottom>
            No tasks found
          </Typography>
          <Typography variant="body2" color="text.secondary">
            {statusFilter === 'all'
              ? 'Create your first task to get started!'
              : `No ${statusFilter} tasks found.`}
          </Typography>
        </Paper>
      ) : (
        <TableContainer component={Paper}>
          <Table size="small" sx={{ '& .MuiTableCell-root': { py: 1 } }}>
            <TableHead>
              <TableRow>
                <TableCell sx={{ fontWeight: 'bold' }}>Title</TableCell>
                {!isMobile && (
                  <TableCell sx={{ fontWeight: 'bold' }}>Description</TableCell>
                )}
                <TableCell sx={{ fontWeight: 'bold', width: 100 }}>
                  Status
                </TableCell>
                <TableCell sx={{ fontWeight: 'bold', width: 120 }}>
                  Created
                </TableCell>
                {!isMobile && (
                  <TableCell sx={{ fontWeight: 'bold', width: 120 }}>
                    Completed
                  </TableCell>
                )}
              </TableRow>
            </TableHead>
            <TableBody>
              {filteredAndSortedTasks.map(task => (
                <TableRow
                  key={task.id}
                  sx={{
                    '&:hover': {
                      backgroundColor: 'action.hover',
                    },
                    '&:last-child td, &:last-child th': { border: 0 },
                  }}
                >
                  <TableCell>
                    <Box>
                      <Typography
                        variant="body1"
                        component="div"
                        sx={{
                          textDecoration:
                            task.status === TaskStatus.Done
                              ? 'line-through'
                              : 'none',
                          opacity: task.status === TaskStatus.Done ? 0.7 : 1,
                          fontWeight: 500,
                        }}
                      >
                        {task.title}
                      </Typography>
                      {isMobile && task.description && (
                        <Typography
                          variant="body2"
                          color="text.secondary"
                          sx={{ mt: 0.5 }}
                        >
                          {task.description}
                        </Typography>
                      )}
                    </Box>
                  </TableCell>
                  {!isMobile && (
                    <TableCell>
                      <Typography
                        variant="body2"
                        color="text.secondary"
                        sx={{
                          maxWidth: 300,
                          overflow: 'hidden',
                          textOverflow: 'ellipsis',
                          whiteSpace: 'nowrap',
                        }}
                      >
                        {task.description || '—'}
                      </Typography>
                    </TableCell>
                  )}
                  <TableCell>
                    <Chip
                      label={task.status}
                      color={getStatusColor(task.status)}
                      size="small"
                      variant="outlined"
                    />
                  </TableCell>
                  <TableCell>
                    <Typography variant="body2" color="text.secondary">
                      {formatCompactDate(task.created_at)}
                    </Typography>
                  </TableCell>
                  {!isMobile && (
                    <TableCell>
                      <Typography variant="body2" color="text.secondary">
                        {task.completed_at
                          ? formatCompactDate(task.completed_at)
                          : '—'}
                      </Typography>
                    </TableCell>
                  )}
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </TableContainer>
      )}
    </Box>
  )
}