import { useState } from 'react';
import { ScrollView, View, Text } from 'react-native'
import { ScreenLayout } from '@/components/ui/ScreenLayout';
import { Section, SectionHeader } from '@/components/ui/Sections';
import { FilterPills } from '@/components/ui/FilterPills';
import { useAuth } from '@/context/AuthContext';
import { useHistoryFeed } from '@/hooks/useHistoryFeed';
import type { HistoryCategory } from '@/lib/history/types';
import { MoodHistoryCard } from '@/components/history/MoodHistoryCard'
import { SleepRecordCard } from '@/components/history/SleepRecordCard'

const FILTERS: { label: string; value: HistoryCategory | 'all' }[] = [
  { label: 'Tudo',          value: 'all'          },
  { label: 'Humor',         value: 'mood'         },
  { label: 'Sono',          value: 'sleep'        }
];

function HistoryCardRenderer({ card }: { card: HistoryCard }) {
  switch (card.category) {
    case 'mood':  return <MoodHistoryCard card={card as any} />
    case 'sleep': return <SleepRecordCard card={card as any} />
  }
}

export default function History() {
  const { user } = useAuth();
  const [activeFilter, setActiveFilter] = useState<HistoryCategory | 'all'>('all');
  const grouped = useHistoryFeed(activeFilter);

  return (
    <ScreenLayout userName={user.firstName} userAvatar={user.avatarURL}
      onNotificationPress={() => console.log('Notifications')}
      showNotificationBadge={true}>
      <ScrollView>
      <FilterPills active={activeFilter} onChange={setActiveFilter} />

        {Object.entries(grouped).map(([date, cards]) => (
          <Section key={date}>
            <SectionHeader title={date} />
            <View>
              {cards.map(card => (
                <HistoryCardRenderer key={card.id} card={card} />)
              )}
            </View>
          </Section>
        ))}
      </ScrollView>
    </ScreenLayout>
  );
}