import { useState } from "react";
import { ScrollView, View } 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 { HistoryCard, HistoryCategory } from "@/lib/history/types";
import { MoodHistoryCard } from "@/components/history/MoodHistoryCard";
import { SleepRecordCard } from "@/components/history/SleepRecordCard";
import { TriggerHistoryCard } from "@/components/history/TriggerCard";
import { MedicineHistoryCard } from "@/components/history/MedicineHistoryCard";
import { AppointmentHistoryCard } from "@/components/history/AppointmentHistoryCard";
import { ActivityHistoryCard } from "@/components/history/ActivityHistoryCard";
import { EmptyState } from "@/components/ui/EmptyState";

function HistoryCardRenderer({ card }: { card: HistoryCard }) {
  switch (card.category) {
    case "mood":
      return <MoodHistoryCard card={card} />;
    case "sleep":
      return <SleepRecordCard card={card} />;
    case "trigger":
      return <TriggerHistoryCard card={card} />;
    case "care_action":
      switch (card.subtype) {
        case "medicine":
          return <MedicineHistoryCard card={card} />;
        case "appointment":
          return <AppointmentHistoryCard card={card} />;
        case "activity":
          return <ActivityHistoryCard card={card} />;
        default:
          return null;
      }
  }
}

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}
    >
      <ScrollView testID="history-list">
        <FilterPills active={activeFilter} onChange={setActiveFilter} />

        {Object.keys(grouped).length === 0 ? (
          <EmptyState
            title="Nenhum registro encontrado"
            subtitle="Tente mudar o filtro ou adicione um novo registro."
            icon="time-outline"
          />
        ) : (
          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>
  );
}