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

const CHARACTER_ID = "seed-character-genki";

// Q-2 角色分頁：展示角色設定表（沿用 B 群組的 /characters 端點），驗證分頁本身可獨立運作、能打 API。
export default function CharacterScreen() {
  const [character, setCharacter] = useState<Character | null>(null);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    fetch(`${API_BASE_URL}/characters`)
      .then((res) => res.json())
      .then((characters: Character[]) => {
        setCharacter(characters.find((c) => c.id === CHARACTER_ID) ?? characters[0] ?? null);
      })
      .catch(() => setError("角色資料載入失敗，請確認 api 服務是否已啟動"));
  }, []);

  const formalName = character?.aliases?.[0]?.formalName ?? character?.id ?? "";

  return (
    <ScrollView style={styles.container} contentContainerStyle={styles.content}>
      <Text style={styles.title}>{formalName || "角色"}</Text>
      {error && <Text style={styles.error}>{error}</Text>}
      {character && (
        <View style={styles.card}>
          <Field label="性格原型" value={character.personalityArchetype} />
          <Field label="基本資料" value={character.basicInfo} />
          <Field label="喜好／厭惡" value={character.likesDislikes} />
          <Field label="目標／執念" value={character.goalsObsessions} />
          <Field label="說話方式" value={character.speechStyle} />
        </View>
      )}
    </ScrollView>
  );
}

function Field({ label, value }: { label: string; value: string }) {
  return (
    <View style={styles.field}>
      <Text style={styles.fieldLabel}>{label}</Text>
      <Text style={styles.fieldValue}>{value}</Text>
    </View>
  );
}

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