import React, {useState, useMemo} from 'react';
import {useNavigation} from '@react-navigation/native';
import ListWorkView from './view';
import * as ScreenName from '../../routers/ScreenNames';
import {WORK_PROGRESS, ROLE} from '../../actions/actionTypes';
import R from '../../assets/R';

const ListWork = props => {
  const navigation = useNavigation();
  const [searchQuery, setSearchQuery] = useState('');
  const [modalVisible, setModalVisible] = useState(false);
  const [currentTabKey, setCurrentTabKey] = useState(ROLE.ALL);
  const [currentDropDownKey, setCurrentDropDownKey] = useState(
    WORK_PROGRESS.ALL_WORK_PROGRESS,
  );

  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', // hợp lệ cho cả 2 role
      deadline: '2025-09-04',
      assignedToMe: true,
      supervisedByMe: false,
      supervisor: [
        {id: 1, name: 'Trần Văn Hùng'},
        {id: 2, name: 'Nguyễn Văn A'},
      ],
      document: 'BM255, Nguyễn Minh Đức',
      workProgress: 'Đang thực hiện',
    },
    {
      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', // chỉ hợp lệ với role Giao cho tôi
      deadline: '2025-09-04',
      assignedToMe: true,
      supervisedByMe: false,
      supervisor: [
        {id: 1, name: 'Trần Văn Hùng'},
        {id: 2, name: 'Nguyễn Văn A'},
      ],
      document: 'BM255, Nguyễn Minh Đức',
      workProgress: 'Đang hoàn thành',
    },
    {
      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: 'Hoàn thành', // hợp lệ cho cả 2 role
      deadline: '2025-09-04',
      assignedToMe: true,
      supervisedByMe: false,
      supervisor: [
        {id: 1, name: 'Trần Văn Hùng'},
        {id: 2, name: 'Nguyễn Văn A'},
      ],
      document: 'BM255, Nguyễn Minh Đức',
      workProgress: 'Đang hoàn thành',
    },
    {
      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', // chỉ hợp lệ với role Đang giám sát
      deadline: '2025-09-04',
      assignedToMe: false,
      supervisedByMe: true,
      supervisor: [
        {id: 1, name: 'Trần Văn Hùng'},
        {id: 2, name: 'Nguyễn Văn A'},
      ],
      document: 'BM255, Nguyễn Minh Đức',
      workProgress: 'Đang hoàn thành',
    },
    {
      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',
      assignedToMe: false,
      supervisedByMe: true,
      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',
      workProgress: 'Đang thực hiện',
    },
  ]);

  // ==================== 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 => {
    setCurrentTabKey(item?.key || ROLE.ALL);
    console.log('Tab changed to:', item?.key);
  };
   // Hiển thị dữ liệu sau khi chọn
   const filterList = useMemo(() => {
    let base = dataList;
    console.log('Dữ liệu danh sách đầu vào', base);

    // Lọc theo tab role
    if (currentTabKey === ROLE.ASSIGNEE) {
      base = base.filter(x => x.assignedToMe);
    } else if (currentTabKey === ROLE.SUPERVISOR) {
      base = base.filter(x => x.supervisedByMe);
    }
    // ROLE.ALL không cần filter

    // Lọc theo search query
    if (searchQuery && searchQuery.trim()) {
      const q = searchQuery.trim().toLowerCase();
      base = base.filter(
        x =>
          x.title.toLowerCase().includes(q) ||
          x.status.toLowerCase().includes(q),
      );
    }

    // Lọc theo dropdown progress (chỉ khi không phải ALL)
    if (currentDropDownKey === WORK_PROGRESS.SUCCESS_WORK_PROGRESS) {
      base = base.filter(x => x.status === 'Đã hoàn thành');
    } else if (currentDropDownKey === WORK_PROGRESS.CONTINUE_WORK_PROGRESS) {
      base = base.filter(x => x.status !== 'Đã hoàn thành');
    }
    // WORK_PROGRESS.ALL_WORK_PROGRESS không cần filter

    console.log('Dữ liệu sau khi lọc:', base);
    return base;
  }, [dataList, currentTabKey, searchQuery, currentDropDownKey]);

  // ==================== 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 (assignee)
      case 'Đợi chỉnh sửa':
        return '#FF9500'; // Cam (supervisor)
      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 => {
    // Đang giám sát
    if (currentTabKey === ROLE.SUPERVISOR) {
      switch (status) {
        case 'Đang thực hiện':
          return [
            {title: 'Yêu cầu báo cáo', backgroundColor: R.colors.orange, action: 'requestReport'},
            {title: 'Chi tiết', backgroundColor: R.colors.blue, action: 'detail'},
          ];
        case 'Đợi chỉnh sửa':
          return [{title: 'Chi tiết', backgroundColor: R.colors.blue, action: 'detail'}];
        case 'Chờ duyệt':
          return [
            {title: 'Cần chỉnh sửa', backgroundColor: R.colors.orange, action: 'needsEdit'},
            {title: 'Phê duyệt', backgroundColor: R.colors.blue, action: 'approve'},
            {title: 'Chi tiết', backgroundColor: R.colors.blue, action: 'detail'},
          ];
        case 'Đợi báo cáo':
          return [{title: 'Chi tiết', backgroundColor: R.colors.blue, action: 'detail'}];
        case 'Đã hoàn thành':
          return [{title: 'Chi tiết', backgroundColor: R.colors.blue, action: 'detail'}];
        default:
          return [];
      }
    }

    // Giao cho tôi
    if (currentTabKey === ROLE.ASSIGNEE) {
      switch (status) {
        case 'Đang thực hiện':
        case 'Cần chỉnh sửa':
        case 'Đợi báo cáo':
          return [
            {title: 'Báo cáo', backgroundColor: R.colors.orange, action: 'report'},
            {title: 'Chi tiết', backgroundColor: R.colors.blue, action: 'detail'},
          ];
        case 'Chờ duyệt':
          return [
            {title: 'Sửa báo cáo', backgroundColor: R.colors.orange, action: 'editReport'},
            {title: 'Chi tiết', backgroundColor: R.colors.blue, action: 'detail'},
          ];
        case 'Hoàn thành':
          return [{title: 'Chi tiết', backgroundColor: R.colors.blue, action: 'detail'}];
        default:
          return [];
      }
    }

    // Tất cả - hiển thị tất cả buttons có thể
    return [{title: 'Chi tiết', backgroundColor: R.colors.blue, action: 'detail'}];
  };

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

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

  return (
    <ListWorkView
    // Dữ liệu
    searchQuery={searchQuery}
    setSearchQuery={setSearchQuery}
    dataList={filterList}
    modalVisible={modalVisible}
    tabView={tabView}
    // Sự kiện
    onFilterChange={handleFilterChange}
    onAddWork={handleAddWork}
    onSaveWork={handleSaveWork}
    onCloseModal={handleCloseModal}
    onViewDetail={handleViewDetail}
    onReportAction={handleReportAction}
    onApprovalAction={handleApprovalAction}
    // Utils
    getStatusColor={getStatusColor}
    getButtonsForStatus={getButtonsForStatus}
    />
  );
};

export default ListWork;
