import { useQuery } from '@tanstack/react-query'
import { tasksQuery } from './queries'
import { TaskRow } from './task-row'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import type { TimeSphere } from '@/integrations/supabase/types'
import { SPHERE_LABELS } from './constants'

const columns: Array<{ key: TimeSphere; description: string; className: string }> = [
  { key:'importante', description:'Ligado às suas metas, valores e resultados de longo prazo.', className:'text-sphere-importante' },
  { key:'urgente', description:'Prazo estourando, crise ou demanda que exige ação imediata.', className:'text-sphere-urgente' },
  { key:'circunstancial', description:'Ruído e distração que consomem tempo sem gerar avanço real.', className:'text-sphere-circunstancial' },
]
export function TriadeView() {
  const {data:tasks=[]}=useQuery(tasksQuery)
  return <div className="grid gap-4 lg:grid-cols-3">{columns.map((col)=><Card key={col.key}><CardHeader><CardTitle className={col.className}>{SPHERE_LABELS[col.key]}</CardTitle><p className="text-sm text-muted-foreground">{col.description}</p></CardHeader><CardContent className="p-0">{tasks.filter((t)=>t.time_sphere===col.key&&t.status!=='done').length ? tasks.filter((t)=>t.time_sphere===col.key&&t.status!=='done').map((task)=><TaskRow key={task.id} task={task}/>) : <div className="p-6 text-center text-sm text-muted-foreground">Nenhuma tarefa nesta esfera.</div>}</CardContent></Card>)}</div>
}