"use client";

import React, {useEffect, useState} from "react";
import Paper from "@mui/material/Paper";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TablePagination from "@mui/material/TablePagination";
import TableRow from "@mui/material/TableRow";
import IconButton from "@mui/material/IconButton";
import EditIcon from "@mui/icons-material/Edit";
import SaveIcon from "@mui/icons-material/Save";
import CancelIcon from "@mui/icons-material/Close";
import DeleteIcon from "@mui/icons-material/Delete";
import TextField from "@mui/material/TextField";
import MultiSelect from "@/components/SearchBox/MultiSelect";
import { Collapse } from "@mui/material";
import TempInputGridForMockUp from "./TempInputGridForMockUp";
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";

export interface ResultWithId {
    id: string | number;
}

interface BaseColumn<T extends ResultWithId> {
    field: keyof T;
    label: string;
    type: string;
    options?: T[];
    renderCell?: (T) => void;
}

interface ColumnWithAction<T extends ResultWithId> extends BaseColumn<T> {
    onClick: (item: T) => void;
    buttonIcon: React.ReactNode;
    buttonColor?: "inherit" | "default" | "primary" | "secondary";
}

export type Column<T extends ResultWithId> =
    | BaseColumn<T>
    | ColumnWithAction<T>;

interface Props<T extends ResultWithId> {
    items: T[],
    isMockUp?: Boolean,
    columns: Column<T>[],
    noWrapper?: boolean,
    setPagingController: (value: { pageNum: number; pageSize: number; totalCount: number, index?: number}) => void,
    pagingController: { pageNum: number; pageSize: number; totalCount: number },
    isAutoPaging: boolean
}

function EditableSearchResults<T extends ResultWithId>({
                                                           index,
                                                           items,
                                                           isMockUp,
                                                           columns,
                                                           noWrapper,
                                                           pagingController,
                                                           setPagingController,
                                                           isAutoPaging = true,
                                                           isEdit = true,
                                                           isHideButton = false,
                                                           hasCollapse = false,
                                                       }: Props<T>) {
    const [page, setPage] = useState(0);
    const [rowsPerPage, setRowsPerPage] = useState(10);
    const [editingRowId, setEditingRowId] = useState<number | null>(null);
    const [editedItems, setEditedItems] = useState<T[]>(items);
                                                        console.log(items)
    useEffect(()=>{
        setEditedItems(items)
    },[items])
    const handleChangePage = (_event: unknown, newPage: number) => {
        setPage(newPage);
        setPagingController({ ...pagingController, pageNum: newPage + 1 }, (index ?? -1));
    };

    const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => {
        setRowsPerPage(+event.target.value);
        setPage(0);
        setPagingController({ ...pagingController, pageSize: +event.target.value, pageNum: 1 , index: index});
    };

    const handleEditClick = (id: number) => {
        setEditingRowId(id);
    };

    const handleSaveClick = (item: T) => {
        setEditingRowId(null);
        // Call API or any save logic here
        setEditedItems((prev) =>
            prev.map((row) => (row.id === item.id ? { ...row } : row))
        );
    };

    const handleInputChange = (id: number, field: keyof T, value: string | number[]) => {
        setEditedItems((prev) =>
            prev.map((item) =>
                item.id === id ? { ...item, [field]: value } : item
            )
        );
    };

    const handleDeleteClick = (id: number) => {
        // Implement delete logic here
        setEditedItems((prev) => prev.filter(item => item.id !== id));
    };

    useEffect(()=>{
        console.log("[debug] isEdit in table", isEdit)
        //TODO: switch all record to not in edit mode and save the changes
        if (!isEdit) {
            editedItems.forEach(item => {
                // Call save logic here
                console.log("Saving item:", item);
                // Reset editing state if needed
            });

            setEditingRowId(null);
        }
    },[isEdit])

    function Row(props: { row: T }) {
        const { row } = props;
        const [open, setOpen] = useState(false);
        console.log(row)
        return (
            <>
            <TableRow hover tabIndex={-1} key={row.id}>
                {
                    !isHideButton && <TableCell>
                        {(editingRowId === row.id) ? (
                            <>
                                <IconButton disabled={!isEdit} onClick={() => handleSaveClick(row)}>
                                    <SaveIcon/>
                                </IconButton>
                                <IconButton disabled={!isEdit} onClick={() => setEditingRowId(null)}>
                                    <CancelIcon/>
                                </IconButton>
                                {
                                    hasCollapse && <IconButton
                                      aria-label="expand row"
                                      size="small"
                                      onClick={() => setOpen(!open)}
                                    >
                                        {open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
                                    </IconButton>
                                }
                            </>
                        ) : (
                            <>
                                <IconButton disabled={!isEdit}
                                            onClick={() => handleEditClick(row.id as number)}>
                                    <EditIcon/>
                                </IconButton>
                                <IconButton disabled={!isEdit}
                                            onClick={() => handleDeleteClick(row.id as number)}>
                                    <DeleteIcon/>
                                </IconButton>
                                {
                                    hasCollapse && <IconButton
                                        aria-label="expand row"
                                        size="small"
                                        onClick={() => setOpen(!open)}
                                    >
                                        {open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
                                    </IconButton>
                                }
                            </>
                        )}
                    </TableCell>

                }
                {columns.map((column, idx) => {
                    console.log(column)
                    const columnName = column.field;
                    return (
                        <TableCell key={`${columnName.toString()}-${idx}`}>
                            {editingRowId === row.id ? (
                                (() => {
                                    switch (column.type) {
                                        case 'input':
                                            console.log(column.type)
                                            return (
                                                <TextField
                                                    hiddenLabel={true}
                                                    fullWidth
                                                    defaultValue={row[columnName] as string}
                                                    onChange={(e) => handleInputChange(row.id as number, columnName, e.target.value)}
                                                />
                                            );
                                        case 'multi-select':
                                            return (
                                                <MultiSelect
                                                    //label={column.label}
                                                    options={column.options}
                                                    selectedValues={[]}
                                                    onChange={(selectedValues) => handleInputChange(row.id as number, columnName, selectedValues)}
                                                />
                                            );
                                        case 'read-only':
                                            return (
                                                <span>
                                                    {row[columnName] as string}
                                                </span>
                                            );
                                        default:
                                            return null; // Handle any default case if needed
                                    }
                                })()
                            ) : (
                                column.renderCell ?
                                    column.renderCell(row)
                                    :
                                    <span onDoubleClick={() => isEdit && handleEditClick(row.id as number)}>
                                        {row[columnName] as string}
                                    </span>
                            )}
                        </TableCell>
                    );
                })}
            </TableRow>
        <TableRow>
            {
                hasCollapse &&
                <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
                  <Collapse in={open} timeout="auto" unmountOnExit>
                    <Table>
                      <TableBody>
                        <TableRow>
                          <TableCell>
                            <TempInputGridForMockUp
                              stockInLine={row.lines as any[]}
                            />
                          </TableCell>
                        </TableRow>
                      </TableBody>
                    </Table>
                  </Collapse>
                </TableCell>
            }
        </TableRow>
        </>
        )
    }

    const table = (
        <>
            <TableContainer sx={{ maxHeight: 440 }}>
                <Table stickyHeader>
                    <TableHead>
                        <TableRow>
                            {!isHideButton && <TableCell>Actions</TableCell>} {/* Action Column Header */}
                            {columns.map((column, idx) => (
                                <TableCell key={`${column.field.toString()}${idx}`}>
                                    {column.label}
                                </TableCell>
                            ))}
                        </TableRow>
                    </TableHead>
                    <TableBody>
                        {(isAutoPaging ? editedItems.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) : editedItems).map((item) => (
                            <Row key={item.id} row={item} />
                        ))}
                    </TableBody>
                </Table>
            </TableContainer>
            <TablePagination
                rowsPerPageOptions={[10, 25, 100]}
                component="div"
                count={pagingController.totalCount === 0 ? editedItems.length : pagingController.totalCount}
                rowsPerPage={rowsPerPage}
                page={page}
                onPageChange={handleChangePage}
                onRowsPerPageChange={handleChangeRowsPerPage}
            />
        </>
    );

    return noWrapper ? table : <Paper sx={{ overflow: "hidden" }}>{table}</Paper>;
}

export default EditableSearchResults;