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";
import { TriggerHistoryCard } from "@/components/history/TriggerCard";

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

function HistoryCardRenderer({ card }: { card: HistoryCard }) {
  switch (card.category) {
    case "mood":
      return <MoodHistoryCard card={card as any} />;
    case "sleep":
      return <SleepRecordCard card={card as any} />;
    case "trigger":
      return <TriggerHistoryCard 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>
  );
}