import type { Route } from './+types/all-tasks'
import { Box, Typography, Container } from '@mui/material'
import { TaskList } from '~/components/TaskList'
import type { Task } from '~/types/task'

export function meta(_: Route.MetaArgs) {
  return [
    { title: "Captain's Log - All Tasks" },
    { name: 'description', content: 'Complete Task List' },
  ]
}

export async function loader(): Promise<{ tasks: Task[] }> {
  try {
    // Fetch all tasks from the backend API during SSR
    const apiUrl = process.env.API_URL || 'http://localhost:3000'
    const response = await fetch(`${apiUrl}/api/tasks`, {
      headers: {
        'Content-Type': 'application/json',
      },
    })

    if (!response.ok) {
      console.error('Failed to fetch tasks:', response.statusText)
      return { tasks: [] }
    }

    const tasks = await response.json()
    return { tasks }
  } catch (error) {
    console.error('Error fetching tasks during SSR:', error)
    return { tasks: [] }
  }
}

export default function AllTasks({ loaderData }: Route.ComponentProps) {
  return (
    <Container maxWidth="lg">
      <Box sx={{ py: 4 }}>
        <Typography variant="h1" component="h1" gutterBottom>
          All Tasks
        </Typography>
        <TaskList initialTasks={loaderData.tasks} />
      </Box>
    </Container>
  )
}