import { useEffect, useState } from "react";
import { ScrollView, StyleSheet, Text, View } from "react-native";
import { API_BASE_URL } from "../../lib/api";

const CHARACTER_ID = "seed-character-genki";

interface ScheduleInfo {
  dayType: string;
  minute: number;
  slot: { status: string; label: string | null } | null;
  isWaking: boolean;
  isPreSleep: boolean;
  availability: string;
}

// Q-2 日常分頁：展示 I 群組的作息狀態（她現在在做什麼、回應可用度），是「她有自己的生活」這件事
// 在 APP 上最直接的呈現位置。若種子角色沒有掛作息表（見 I 群組實作記錄），slot 會是 null。
export default function DailyScreen() {
  const [info, setInfo] = useState<ScheduleInfo | null>(null);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    fetch(`${API_BASE_URL}/schedule/${CHARACTER_ID}/info`)
      .then((res) => res.json())
      .then(setInfo)
      .catch(() => setError("作息資料載入失敗，請確認 api 服務是否已啟動"));
  }, []);

  return (
    <ScrollView style={styles.container} contentContainerStyle={styles.content}>
      <Text style={styles.title}>今天的她</Text>
      {error && <Text style={styles.error}>{error}</Text>}
      {info && (
        <View style={styles.card}>
          <Text style={styles.line}>作息類型：{info.dayType}</Text>
          <Text style={styles.line}>目前時段：{info.slot?.label ?? info.slot?.status ?? "（未設定作息表）"}</Text>
          <Text style={styles.line}>回應可用度：{info.availability}</Text>
          {info.isWaking && <Text style={styles.badge}>剛睡醒</Text>}
          {info.isPreSleep && <Text style={styles.badge}>快睡了</Text>}
        </View>
      )}
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: "#FFF5F7" },
  content: { padding: 20, gap: 16 },
  title: { fontSize: 22, fontWeight: "bold", color: "#FF7E9D" },
  card: { gap: 8 },
  line: { fontSize: 14, color: "#222" },
  badge: { fontSize: 12, color: "#FF7E9D", fontWeight: "bold" },
  error: { color: "#FF7E9D", fontSize: 12 },
});