breed_detail_screen.dart

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import '../models/pet_model.dart';

class BreedDetailScreen extends StatefulWidget {
  final Pet pet;
  const BreedDetailScreen({super.key, required this.pet});

  @override
  State<BreedDetailScreen> createState() => _BreedDetailScreenState();
}

class _BreedDetailScreenState extends State<BreedDetailScreen> {
  Map<String, String> lifeStages = {};

  @override
  void initState() {
    super.initState();
    loadLifeStages();
  }

  Future<void> loadLifeStages() async {
    final jsonString = await rootBundle.loadString('assets/data/lifestage_care.json');
    final Map<String, dynamic> jsonMap = jsonDecode(jsonString);
    final animalLifeStages = jsonMap[widget.pet.animalType]; // เช่น 'สุนัข' หรือ 'แมว'

    if (animalLifeStages != null) {
      setState(() {
        lifeStages = Map<String, String>.from(animalLifeStages);
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFFFA726),
      appBar: AppBar(
        backgroundColor: const Color(0xFFCE8426),
        title: Text(
          widget.pet.name,
          style: const TextStyle(color: Colors.black),
        ),
        centerTitle: true,
        iconTheme: const IconThemeData(color: Colors.black),
      ),
      body: lifeStages.isEmpty
          ? const Center(child: CircularProgressIndicator())
          : ListView(
              padding: const EdgeInsets.all(16),
              children: [
                _buildImageSection(),
                _buildBreedName(),
                _buildInfoExpansionTiles(),
                _buildLifeStageSection(),
              ],
            ),
    );
  }

  Widget _buildImageSection() {
    return ClipRRect(
      borderRadius: BorderRadius.circular(16),
      child: Container(
        height: 270,
        width: double.infinity,
        color: Colors.grey[200],
        child: Image.asset(
          widget.pet.imageAsset,
          fit: BoxFit.cover,
        ),
      ),
    );
  }

  Widget _buildBreedName() {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 16),
      child: Text(
        widget.pet.name,
        style: const TextStyle(
          fontSize: 26,
          fontWeight: FontWeight.bold,
          color: Colors.black87,
        ),
        textAlign: TextAlign.center,
      ),
    );
  }

  Widget _buildInfoExpansionTiles() {
    return Column(
      children: [
        _buildExpansionTile(
          title: 'ประวัติ',
          content: widget.pet.history,
        ),
        _buildExpansionTile(
          title: 'อุปนิสัย',
          content: widget.pet.personality,
        ),
        _buildExpansionTile(
          title: 'อายุขัยเฉลี่ย',
          content: widget.pet.lifespan,
        ),
        _buildExpansionTile(
          title: 'สิ่งที่ต้องรู้ก่อนเลี้ยง',
          contentWidget: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: widget.pet.careTips.map((tip) => 
              Padding(
                padding: const EdgeInsets.symmetric(vertical: 4),
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const Text('• ', style: TextStyle(fontSize: 16)),
                    Expanded(
                      child: Text(
                        tip,
                        style: const TextStyle(fontSize: 16),
                      ),
                    ),
                  ],
                ),
              ),
            ).toList(),
          ),
        ),
      ],
    );
  }

  Widget _buildExpansionTile({
    required String title,
    String? content,
    Widget? contentWidget,
  }) {
    return Card(
      margin: const EdgeInsets.only(bottom: 12),
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(8),
      ),
      child: ExpansionTile(
        title: Text(
          title,
          style: const TextStyle(
            fontSize: 18,
            fontWeight: FontWeight.bold,
          ),
        ),
        children: [
          Padding(
            padding: const EdgeInsets.all(16),
            child: contentWidget ??
                Text(
                  content ?? '',
                  style: const TextStyle(fontSize: 16),
                  textAlign: TextAlign.start,
                ),
          ),
        ],
      ),
    );
  }

  Widget _buildLifeStageSection() {
    return Card(
      margin: const EdgeInsets.only(bottom: 12),
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(8),
      ),
      child: ExpansionTile(
        title: const Text(
          'คำแนะนำการดูแลแต่ละช่วงวัย',
          style: TextStyle(
            fontSize: 18,
            fontWeight: FontWeight.bold,
            color: Color.fromARGB(255, 89, 57, 45),
          ),
        ),
        children: lifeStages.entries.map((entry) {
          return Padding(
            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  entry.key,
                  style: const TextStyle(
                    fontSize: 16,
                    fontWeight: FontWeight.w600,
                  ),
                ),
                const SizedBox(height: 4),
                Text(
                  entry.value,
                  style: const TextStyle(fontSize: 15),
                ),
                const Divider(),
              ],
            ),
          );
        }).toList(),
      ),
    );
  }
}

---

1. โครงสร้างคลาส

class BreedDetailScreen extends StatefulWidget {
  final Pet pet;
  const BreedDetailScreen({super.key, required this.pet});

• BreedDetailScreen เป็น StatefulWidget เพราะต้องโหลดข้อมูล life stages จากไฟล์ JSON

• รับ Pet pet → object ของสายพันธุ์ที่จะแสดงรายละเอียด

---

2. _BreedDetailScreenState

Map<String, String> lifeStages = {};

@override
void initState() {
  super.initState();
  loadLifeStages();
}

• lifeStages → เก็บคำแนะนำการดูแลตามช่วงวัย (เช่น ลูก, วัยรุ่น, ผู้ใหญ่, ผู้สูงอายุ)

• initState() → โหลด JSON ของ life stages ตอนสร้าง widget

---

3. โหลด Life Stages จาก JSON

Future<void> loadLifeStages() async {
  final jsonString = await rootBundle.loadString('assets/data/lifestage_care.json');
  final Map<String, dynamic> jsonMap = jsonDecode(jsonString);
  final animalLifeStages = jsonMap[widget.pet.animalType]; // 'สุนัข' หรือ 'แมว'

  if (animalLifeStages != null) {
    setState(() {
      lifeStages = Map<String, String>.from(animalLifeStages);
    });
  }
}

• โหลดไฟล์ lifestage_care.json จาก assets

• ดึงข้อมูลตามประเภทสัตว์ (animalType)

• แปลงเป็น Map<String,String> แล้วอัปเดต UI ด้วย setState()

---

4. Scaffold + AppBar

return Scaffold(
  backgroundColor: const Color(0xFFFFA726),
  appBar: AppBar(
    backgroundColor: const Color(0xFFCE8426),
    title: Text(widget.pet.name, style: const TextStyle(color: Colors.black)),
    centerTitle: true,
    iconTheme: const IconThemeData(color: Colors.black),
  ),

• หน้า detail สีส้ม

• AppBar แสดงชื่อสายพันธุ์

• iconTheme → กำหนดสี icon เป็นดำ

---

5. Body ของหน้าจอ

body: lifeStages.isEmpty
    ? const Center(child: CircularProgressIndicator())
    : ListView(
        padding: const EdgeInsets.all(16),
        children: [
          _buildImageSection(),
          _buildBreedName(),
          _buildInfoExpansionTiles(),
          _buildLifeStageSection(),
        ],
      ),

• ถ้า lifeStages ยังโหลดไม่เสร็จ → แสดง loading spinner

• ถ้าโหลดเสร็จ → แสดง ListView ประกอบด้วย:

  1. รูปสัตว์

  2. ชื่อสายพันธุ์

  3. ข้อมูลรายละเอียด (ประวัติ, อุปนิสัย, อายุขัย, สิ่งที่ต้องรู้)

  4. คำแนะนำตามช่วงวัย

---

6. ส่วนต่าง ๆ ของ UI

รูปสัตว์

Widget _buildImageSection() {
  return ClipRRect(
    borderRadius: BorderRadius.circular(16),
    child: Container(
      height: 270,
      color: Colors.grey[200],
      child: Image.asset(widget.pet.imageAsset, fit: BoxFit.cover),
    ),
  );
}

• แสดงรูปสัตว์แบบมีมุมโค้ง

• ขนาดสูง 270px

ชื่อสายพันธุ์

Widget _buildBreedName() {
  return Padding(
    padding: const EdgeInsets.symmetric(vertical: 16),
    child: Text(
      widget.pet.name,
      style: const TextStyle(fontSize: 26, fontWeight: FontWeight.bold),
      textAlign: TextAlign.center,
    ),
  );
}

• ชื่อสายพันธุ์ตรงกลางตัวใหญ่

ข้อมูลสายพันธุ์

Widget _buildInfoExpansionTiles() {
  return Column(
    children: [
      _buildExpansionTile(title: 'ประวัติ', content: widget.pet.history),
      _buildExpansionTile(title: 'อุปนิสัย', content: widget.pet.personality),
      _buildExpansionTile(title: 'อายุขัยเฉลี่ย', content: widget.pet.lifespan),
      _buildExpansionTile(
        title: 'สิ่งที่ต้องรู้ก่อนเลี้ยง',
        contentWidget: Column(
          children: widget.pet.careTips.map((tip) => Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const Text('• '),
              Expanded(child: Text(tip)),
            ],
          )).toList(),
        ),
      ),
    ],
  );
}

• ใช้ ExpansionTile → กดแล้วขยายดูรายละเอียด

• มี 4 ส่วนหลัก: ประวัติ, อุปนิสัย, อายุขัย, สิ่งที่ต้องรู้ก่อนเลี้ยง

---

7. Life Stage Section

Widget _buildLifeStageSection() {
  return Card(
    child: ExpansionTile(
      title: const Text('คำแนะนำการดูแลแต่ละช่วงวัย'),
      children: lifeStages.entries.map((entry) {
        return Padding(
          padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(entry.key, style: const TextStyle(fontWeight: FontWeight.w600)),
              Text(entry.value),
              const Divider(),
            ],
          ),
        );
      }).toList(),
    ),
  );
}

• แสดงคำแนะนำตามช่วงวัย (ลูก, วัยรุ่น, ผู้ใหญ่, ผู้สูงอายุ)

• แต่ละ entry → ข้อความ + Divider

---

8. สรุปง่าย ๆ

1. โหลดข้อมูล Pet และ life stages จาก JSON

2. แสดงรูปสัตว์ + ชื่อสายพันธุ์

3. ใช้ ExpansionTile แสดงรายละเอียดแบบ expandable

4. มี section พิเศษสำหรับคำแนะนำการดูแลตามช่วงวัย

5. UI ใช้สีส้มสว่าง, Card, และ Scrollable ListView