import 'package:flutter/material.dart';
import 'package:mysql_client/mysql_client.dart';

class HistoricalRecord extends StatefulWidget {
  final String email; // 接收來自上個頁面的 email
  HistoricalRecord({required this.email});

  @override
  _HistoricalRecordState createState() => _HistoricalRecordState();
}

class _HistoricalRecordState extends State<HistoricalRecord> {
  List<Map<String, dynamic>> _results = [];

  @override
  void initState() {
    super.initState();
    _fetchData(); // 連資料庫
  }

  void _fetchData() async {
    print('connect');

    final conn = await MySQLConnection.createConnection(
      host: '203.64.84.154',
      port: 33061,
      userName: 'root',
      password: 'Topic@2024',
      databaseName: 'care',
    );
    await conn.connect();

    try {
      var result = await conn.execute(
          'SELECT HomeElderFall.*, HomeElder.heName FROM HomeElderFall JOIN HomeElder ON HomeElderFall.heId = HomeElder.heId;');
      print('Result: ${result.length} rows found.');

      if (result.rows.isEmpty) {
        print('No data found in users table.');
      } else {
        setState(() {
          _results = result.rows
              .map((row) =>
          {
            '長者ID': row.colAt(4), //去裝資料庫的行數
            '姓名': row.colAt(8),
            '跌倒時間': row.colAt(1),
            '跌倒原因': row.colAt(2),
            '跌倒地點': row.colAt(7),
          })
              .toList();
        });
      }
    } catch (e) {
      print('Error: $e');
    } finally {
      await conn.close();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Container(
            height: 100,
            color: Color(0xFFF5E3C3),
            width: double.infinity,
            padding: EdgeInsets.all(10.0),
            child: Center(
              child: Text(
                '跌倒紀錄',
                style: TextStyle(fontSize: 24, height: 5),
              ),
            ),
          ),
          Expanded(
            child: ListView.builder(
              padding: EdgeInsets.symmetric(vertical: 5), // 调整列表视图的 padding
              itemCount: _results.length,
              itemBuilder: (context, index) {
                return Padding(
                  padding: const EdgeInsets.symmetric(
                      vertical: 4.0, horizontal: 16.0),
                  child:Card(
                    elevation: 4, // 卡片陰影效果
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(10.0), // 圓角卡片
                    ),
                    child:  Container(
                      decoration: BoxDecoration(
                        border: Border(
                          left: BorderSide(color: Color(0xFFFFCC99), width: 5.0), // 左邊框
                          top: BorderSide(color: Color(0xFFFFCC99), width: 5.0),  // 上邊框
                        ),
                        borderRadius: BorderRadius.circular(10.0), // 圓角
                      ),
                    child: ListTile(
                      title: Text(
                        _results[index]['姓名'],
                        style: TextStyle(
                          fontWeight: FontWeight.bold,
                          fontSize: 18,
                        ),),
                      subtitle: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text('長者ID: ${_results[index]['長者ID']}\n'
                              '跌倒時間: ${_results[index]['跌倒時間']}\n'
                              '跌倒原因: ${_results[index]['跌倒原因']}\n'
                              '跌倒地點: ${_results[index]['跌倒地點']}\n',
                              style: TextStyle(fontSize: 16, color: Colors.black), // 統一字體樣式
                          ),
                        ],
                      ),
                      onTap: () {
                        // 點擊時導向詳細資料頁面，並傳遞資料
                        Navigator.push(
                          context,
                          MaterialPageRoute(
                            builder: (context) =>
                                FallDetailPage(fallDetail: _results[index]),
                          ),
                        );
                      },
                    ),
                  ),
                  ),
                );
              },
            ),
          ),
          SizedBox(height: 70),
        ],
      ),
    );
  }
}

// 新增詳細資料頁面
class FallDetailPage extends StatelessWidget {
  final Map<String, dynamic> fallDetail;

  FallDetailPage({required this.fallDetail});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('${fallDetail['姓名']} 的詳細資料'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text('長者ID: ${fallDetail['長者ID']}', style: TextStyle(fontSize: 18)),
            SizedBox(height: 10),
            Text('跌倒時間: ${fallDetail['跌倒時間']}', style: TextStyle(fontSize: 18)),
            SizedBox(height: 10),
            Text('跌倒原因: ${fallDetail['跌倒原因']}', style: TextStyle(fontSize: 18)),
            SizedBox(height: 10),
            Text('跌倒地點: ${fallDetail['跌倒地點']}', style: TextStyle(fontSize: 18)),
            // 在這裡可以添加更多詳細資料
          ],
        ),
      ),
    );
  }
}