"use client";
import React, { useTransition } from "react";
import ProductionRecordingModal from "./ProductionRecordingModal";
import {
  Box,
  Button,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Paper,
  Typography,
  Chip,
} from "@mui/material";
import { Material } from "./types";
import { useTranslation } from "react-i18next";
import QualityCheckModal from "./QualityCheckModal";
import { sampleItem } from "./dummyData";

interface ProcessData {
  id: string;
  processName: string;
  status: "Not Started" | "In Progress" | "Completed";
  recordedData?: any; // You can type this based on your actual data structure
  materials: Material[];
}

interface ProductionProcessProps {
  processes: ProcessData[];
}

interface ProductionRecordingModalProps {
  isOpen: boolean;
  onClose: () => void;
  process?: ProcessData | null;
  onDataRecorded?: (processId: string, data: any) => void;
}

const ProductionProcess: React.FC<ProductionProcessProps> = ({ processes }) => {
  const [isModalOpen, setIsModalOpen] = React.useState<boolean>(false);
  const [selectedProcess, setSelectedProcess] =
    React.useState<ProcessData | null>(null);

  const [isQCModalOpen, setIsQCModalOpen] = React.useState<boolean>(false);

  const { t } = useTranslation("productionProcess");

  console.log("production process");

  const handleOpenModal = (process: ProcessData) => {
    setSelectedProcess(process);
    setIsModalOpen(true);
  };

  const handleCloseModal = () => {
    setIsModalOpen(false);
    setSelectedProcess(null);
  };

  const handleQCOpenModal = (process: ProcessData) => {
    setSelectedProcess(process);
    setIsQCModalOpen(true);
  };

  const handleQCCloseModal = () => {
    setIsQCModalOpen(false);
    setSelectedProcess(null);
  };

  const handleDataRecorded = (processId: string, data: any) => {
    const updated = processes.map((process) =>
      process.id === processId
        ? { ...process, status: "Completed", recordedData: data }
        : process,
    );
    console.log(updated);
  };

  const getStatusColor = (status: ProcessData["status"]) => {
    switch (status) {
      case "Not Started":
        return "default";
      case "In Progress":
        return "warning";
      case "Completed":
        return "success";
      default:
        return "default";
    }
  };

  return (
    <Box sx={{ p: 3 }}>
      <Typography variant="h4" component="h1" gutterBottom sx={{ mb: 3 }}>
        Production Process Recording
      </Typography>

      <TableContainer component={Paper} sx={{ boxShadow: 2 }}>
        <Table sx={{ minWidth: 650 }}>
          <TableHead>
            <TableRow sx={{ bgcolor: "grey.50" }}>
              <TableCell sx={{ fontWeight: "bold" }}>Process ID</TableCell>
              <TableCell sx={{ fontWeight: "bold" }}>Process Name</TableCell>
              <TableCell sx={{ fontWeight: "bold" }}>Status</TableCell>
              <TableCell sx={{ fontWeight: "bold" }}>Action</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {processes.map((process) => (
              <TableRow
                key={process.id}
                sx={{
                  "&:last-child td, &:last-child th": { border: 0 },
                  "&:hover": { bgcolor: "grey.50" },
                }}
              >
                <TableCell component="th" scope="row">
                  {process.id}
                </TableCell>
                <TableCell>{process.processName}</TableCell>
                <TableCell>
                  <Chip
                    label={t(process.status)}
                    color={getStatusColor(process.status)}
                    size="small"
                  />
                </TableCell>
                <TableCell>
                  <Button
                    variant="contained"
                    color="primary"
                    size="small"
                    onClick={() => handleOpenModal(process)}
                    sx={{
                      fontWeight: 500,
                      textTransform: "none",
                    }}
                  >
                    {process.status === "Completed"
                      ? "View/Edit Data"
                      : "Record Data"}
                  </Button>
                  <Button
                    variant="contained"
                    color="primary"
                    size="small"
                    onClick={() => handleQCOpenModal(process)}
                    sx={{
                      fontWeight: 500,
                      textTransform: "none",
                    }}
                  >
                    {t("Quality Check")}
                  </Button>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>

      {selectedProcess && (
        <ProductionRecordingModal
          isOpen={isModalOpen}
          onClose={handleCloseModal}
          jobProcess={selectedProcess}
          onDataRecorded={handleDataRecorded}
        />
      )}

      {
        <QualityCheckModal
          isOpen={isQCModalOpen}
          onClose={() => handleQCCloseModal()}
          item={sampleItem}
        />
      }
    </Box>
  );
};

export default ProductionProcess;