import React, {useState} from 'react';
import {useNavigation} from '@react-navigation/native';
import ListWorkView from './view';
import * as ScreenName from '../../routers/ScreenNames';

/**
 * Container component quản lý logic nghiệp vụ cho màn hình danh sách công việc
 * Chứa tất cả state và business logic, truyền xuống view component thông qua props
 */
const ListWork = props => {
  const {searchQuery, setSearchQuery} = props;
  const navigation = useNavigation();

  // ==================== STATE MANAGEMENT ====================
  
  // Trạng thái hiển thị modal thêm công việc
  const [modalVisible, setModalVisible] = useState(false);
  
  // Danh sách công việc mẫu với các trạng thái khác nhau
  const [dataList, setDataList] = useState([
    {
      id: 1,
      title: 'Tạo thời khóa biểu cho sinh viến khai giảng và học kỳ 2 năm 2025',
      status: 'Đang thực hiện',
      deadline: '2025-09-04',
      supervisor: [
        {id: 1, name: 'Trần Văn Hùng'},
        {id: 2, name: 'Nguyễn Văn A'},
      ],
      document: 'BM255, Nguyễn Minh Đức',
    },
    {
      id: 2,
      title: 'Tạo thời khóa biểu cho sinh viến khai giảng và học kỳ 2 năm 2025',
      status: 'Cần chỉnh sửa',
      deadline: '2025-09-04',
      supervisor: [
        {id: 1, name: 'Trần Văn Hùng'},
        {id: 2, name: 'Nguyễn Văn A'},
      ],
      document: 'BM255, Nguyễn Minh Đức',
    },
    {
      id: 3,
      title: 'Tạo thời khóa biểu cho sinh viến khai giảng và học kỳ 2 năm 2025',
      status: 'Chờ duyệt',
      deadline: '2025-09-04',
      supervisor: [
        {id: 1, name: 'Trần Văn Hùng'},
        {id: 2, name: 'Nguyễn Văn A'},
      ],
      document: 'BM255, Nguyễn Minh Đức',
    },
    {
      id: 4,
      title: 'Tạo thời khóa biểu cho sinh viên khai giảng và học kỳ 2 năm 2025',
      status: 'Đợi báo cáo',
      deadline: '2025-09-04',
      supervisor: [
        {id: 1, name: 'Trần Văn Hùng'},
        {id: 2, name: 'Nguyễn Văn A'},
      ],
      document: 'BM255, Nguyễn Minh Đức',
    },
    {
      id: 5,
      title: 'Tạo thời khóa biểu cho sinh viến khai giảng và học kỳ 2 năm 2025',
      status: 'Đã hoàn thành',
      deadline: '2025-09-04',
      supervisor: [
        {id: 1, name: 'Trần Văn Hùng'},
        {id: 2, name: 'Nguyễn Văn A'},
      ],
      document: 'Văn bản thông báo lịch nộp thời khóa biểu của học kỳ 2 năm 2025',
    },
  ]);

  // ==================== MODAL HANDLERS ====================
  
  // Mở modal thêm công việc mới
  const handleAddWork = () => {
    setModalVisible(true);
  };

  // Đóng modal thêm công việc
  const handleCloseModal = () => {
    setModalVisible(false);
  };

  // Xử lý lưu công việc mới
  const handleSaveWork = workData => {
    console.log('Đang lưu công việc:', workData);
    // TODO: Thêm logic lưu công việc vào database
    setModalVisible(false);
  };

  // ==================== FILTER & SEARCH HANDLERS ====================
  
  // Xử lý thay đổi bộ lọc tab
  const handleFilterChange = item => {
    console.log('Bộ lọc đã thay đổi:', item);
    // TODO: Thêm logic lọc danh sách theo tab được chọn
  };

  // ==================== NAVIGATION HANDLERS ====================
  
  // Điều hướng đến màn hình chi tiết công việc
  const handleViewDetail = item => {
    navigation.navigate(ScreenName.DETAILWORK, {workItem: item});
  };

  // ==================== ACTION HANDLERS ====================
  
  // Xử lý các hành động báo cáo (báo cáo, yêu cầu báo cáo)
  const handleReportAction = (item, action) => {
    console.log(`Thực hiện hành động ${action} cho công việc:`, item.id);
    // TODO: Thêm logic xử lý các hành động báo cáo
    switch (action) {
      case 'report':
        // Xử lý báo cáo công việc
        break;
      default:
        break;
    }
  };

  // Xử lý các hành động phê duyệt (phê duyệt, yêu cầu chỉnh sửa)
  const handleApprovalAction = (item, action) => {
    console.log(`Thực hiện hành động ${action} cho công việc:`, item.id);
    // TODO: Thêm logic xử lý phê duyệt
    switch (action) {
      case 'approve':
        // Xử lý phê duyệt công việc
        break;
      case 'needsEdit':
        // Xử lý yêu cầu chỉnh sửa
        break;
      default:
        break;
    }
  };

  // ==================== UTILITY FUNCTIONS ====================
  
  // Lấy màu sắc theo trạng thái công việc
  const getStatusColor = status => {
    switch (status) {
      case 'Đang thực hiện':
        return '#FF9500'; // Cam
      case 'Chờ duyệt':
        return '#007AFF'; // Xanh dương
      case 'Cần chỉnh sửa':
        return '#FF9500'; // Cam
      case 'Đã hoàn thành':
        return '#34C759'; // Xanh lá
      case 'Đợi báo cáo':
        return '#007AFF'; // Xanh dương
      default:
        return '#8E8E93'; // Xám
    }
  };

  // Lấy danh sách button theo trạng thái công việc
  const getButtonsForStatus = status => {
    // Ẩn button cho các trạng thái: hoàn thành, cần chỉnh sửa, đợi báo cáo
    if (['Đã hoàn thành', 'Cần chỉnh sửa', 'Đợi báo cáo'].includes(status)) {
      return [];
    }

    // Trường hợp đặc biệt cho "Chờ duyệt" - hiển thị 2 button
    if (status === 'Chờ duyệt') {
      return [
        {
          title: 'Cần chỉnh sửa',
          backgroundColor: '#FF9500',
          action: 'needsEdit',
        },
        {
          title: 'Phê duyệt',
          backgroundColor: '#007AFF',
          action: 'approve',
        },
      ];
    }

    // Button mặc định cho các trạng thái khác
    const buttonTitle = status === 'Đang thực hiện' ? 'Yêu cầu báo cáo' : 'Báo cáo';
    return [
      {
        title: buttonTitle,
        backgroundColor: '#FF9500',
        action: 'report',
      },
    ];
  };

  const [tabView, setTabView] = useState([
    {key: 'all', label: 'Tất cả'},
          {key: 'public', label: 'Giao cho tôi'},
          {key: 'private', label: 'Đang giám sát'},
  ]);

  // ==================== RENDER ====================
  

  return (
    <ListWorkView
      // Props dữ liệu
      searchQuery={searchQuery}
      setSearchQuery={setSearchQuery}
      dataList={dataList}
      modalVisible={modalVisible}
      
      // Props xử lý sự kiện
      onFilterChange={handleFilterChange}
      onAddWork={handleAddWork}
      onSaveWork={handleSaveWork}
      onCloseModal={handleCloseModal}
      onViewDetail={handleViewDetail}
      onReportAction={handleReportAction}
      onApprovalAction={handleApprovalAction}
      tabView={tabView}
      
      // Props utility functions
      getStatusColor={getStatusColor}
      getButtonsForStatus={getButtonsForStatus}
    />
  );
};

export default ListWork;
