"use client";

import * as React from "react";
import dynamic from "next/dynamic";
import {
  Box,
  Paper,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Typography,
  IconButton,
  Tooltip,
  TextField,
  Button,
  Stack,
} from "@mui/material";
import AddIcon from "@mui/icons-material/Add";

const Canvas = dynamic(() => import("@react-three/fiber").then((m) => m.Canvas), {
  ssr: false,
});
const OrbitControls = dynamic(
  () => import("@react-three/drei").then((m) => m.OrbitControls),
  { ssr: false }
);

type Product = {
  record_num: number;
  product_id: number;
  name: string;
  exp_date: string; // ISO yyyy-mm-dd
};

function isoTodayPlus(days: number) {
  const d = new Date();
  d.setDate(d.getDate() + days);
  const yyyy = d.getFullYear();
  const mm = String(d.getMonth() + 1).padStart(2, "0");
  const dd = String(d.getDate()).padStart(2, "0");
  return `${yyyy}-${mm}-${dd}`;
}

const seed: Product[] = [
  { record_num: 1, product_id: 1001, name: "Milk", exp_date: isoTodayPlus(30) },
  { record_num: 2, product_id: 1002, name: "Eggs", exp_date: isoTodayPlus(12) },
  { record_num: 3, product_id: 1003, name: "Bread", exp_date: isoTodayPlus(6) },
  { record_num: 4, product_id: 1004, name: "Cheese", exp_date: isoTodayPlus(90) },
  { record_num: 5, product_id: 1005, name: "Yogurt", exp_date: isoTodayPlus(20) },
  { record_num: 6, product_id: 1006, name: "Butter", exp_date: isoTodayPlus(120) },
];

const glassPaperSx = {
  borderRadius: 3,
  // glossy glass look
  background: `
    linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.05) 100%),
    radial-gradient(1200px 600px at 20% 0%, rgba(130,170,255,0.20) 0%, rgba(0,0,0,0) 55%),
    radial-gradient(900px 500px at 80% 10%, rgba(255,140,180,0.14) 0%, rgba(0,0,0,0) 60%)
  `,
  border: "1px solid rgba(255,255,255,0.14)",
  backdropFilter: "blur(14px) saturate(130%)",
  boxShadow: "0 12px 40px rgba(0,0,0,0.35)",
  color: "rgba(245,245,245,0.92)",
};

const PLANE_SIDE = 5;
const CUBE_SIZE = 1.0;
const GAP = 0.25;
const GAP_Z = 0.9;

export default function Products() {
  const [products, setProducts] = React.useState<Product[]>(seed);
  const [selected, setSelected] = React.useState<Product | null>(null);
  const [mode, setMode] = React.useState<"view3d" | "form">("view3d");

  const sorted = React.useMemo(() => {
    return [...products].sort((a, b) => (a.exp_date < b.exp_date ? 1 : -1));
  }, [products]);

  const startCreate = () => {
    setSelected({
      record_num: -1,
      product_id: -1,
      name: "",
      exp_date: isoTodayPlus(1),
    });
    setMode("form");
  };

  const startEdit = (p: Product) => {
    setSelected(p);
    setMode("form");
  };

  const cancelForm = () => {
    setMode("view3d");
    setSelected(null);
  };

  const saveForm = (p: Product) => {
    const isNew = p.record_num === -1;

    if (isNew) {
      const nextRecord =
        Math.max(0, ...products.map((x) => x.record_num)) + 1;
      const nextProductId =
        Math.max(0, ...products.map((x) => x.product_id)) + 1;

      const inserted: Product = {
        ...p,
        record_num: nextRecord,
        product_id: nextProductId,
      };
      setProducts((prev) => [inserted, ...prev]);
    } else {
      setProducts((prev) =>
        prev.map((x) => (x.record_num === p.record_num ? p : x))
      );
    }

    setMode("view3d");
    setSelected(null);
  };

  return (
    <Box
      sx={{
        minHeight: "100vh",
        display: "flex",
        gap: 2,
        p: 2,
      }}
    >
      <Box sx={{ width: { xs: "100%", md: 520 }, flex: "0 0 auto" }}>
        <TableContainer
          component={Paper}
          sx={{
            ...glassPaperSx,
            height: "calc(100vh - 16px)",
            overflow: "auto",
          }}
        >
          <Table stickyHeader size="small" aria-label="products table">
            <TableHead>
              <TableRow>
                <TableCell
                   sx={{
                    position: "sticky",
                    top: 0,
                    zIndex: 3,
                    fontWeight: 800,
                    whiteSpace: "nowrap",
                    backgroundColor: "rgba(15, 18, 28, 0.65)", 
                    backdropFilter: "blur(10px)",
                    borderBottom: "1px solid rgba(255,255,255,0.10)",
                    color: "rgba(245,245,245,0.92)",
                  }}
                >
                  Products
                </TableCell>

                <TableCell
                   sx={{
                    position: "sticky",
                    top: 0,
                    zIndex: 3,
                    fontWeight: 800,
                    whiteSpace: "nowrap",
                    backgroundColor: "rgba(15, 18, 28, 0.65)",
                    backdropFilter: "blur(10px)",
                    borderBottom: "1px solid rgba(255,255,255,0.10)",
                    color: "rgba(245,245,245,0.92)",
                  }}
                >
                  Exp Date
                </TableCell>

                <TableCell
                  sx={{
                    position: "sticky",
                    top: 0,
                    zIndex: 4,
                    width: 1,
                    p: 0,
                  }}
                >
                  <Box sx={{ position: "relative", height: 1 }}>
                    <Tooltip title="Add product">
                      <IconButton
                        onClick={startCreate}
                        size="small"
                        sx={{
                          position: "absolute",
                          right: -18,
                          top: "50%",
                          transform: "translateY(-50%)",
                          bgcolor: "background.paper",
                          border: "1px solid",
                          borderColor: "divider",
                          boxShadow: 1,
                          "&:hover": { bgcolor: "action.hover" },
                        }}
                        aria-label="add product"
                      >
                        <AddIcon fontSize="small" />
                      </IconButton>
                    </Tooltip>
                  </Box>
                </TableCell>
              </TableRow>
            </TableHead>

            <TableBody>
              {sorted.map((p) => (
                <TableRow
                  key={p.record_num}
                  hover
                  onClick={() => startEdit(p)}
                  sx={{ cursor: "pointer" }}
                >
                  <TableCell>
                    <Typography fontWeight={700}>{p.name}</Typography>
                    <Typography variant="caption" sx={{ opacity: 0.7 }}>
                      record #{p.record_num} • product_id {p.product_id}
                    </Typography>
                  </TableCell>
                  <TableCell sx={{ whiteSpace: "nowrap" }}>{p.exp_date}</TableCell>
                  <TableCell sx={{ width: 1 }} />
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </TableContainer>
      </Box>

      <Box
        sx={{
          flex: "1 1 auto",
          minWidth: 0,
          position: "relative",
          borderRadius: 0,
          bgcolor: "transparent",
        }}
      >
        {mode === "view3d" ? (
          <Box sx={{ width: "100%", height: "calc(100vh - 16px)" }}>
            <World3D products={sorted} />
          </Box>
        ) : (
          <Box sx={{ width: "100%", height: "calc(100vh - 16px)" }}>
            <ProductForm
              value={selected}
              onCancel={cancelForm}
              onSave={saveForm}
            />
          </Box>
        )}
      </Box>
    </Box>
  );
}

function rowsUsedForPlane(total: number, planeIndex: number, side: number) {
  const perPlane = side * side;
  const start = planeIndex * perPlane;
  const remaining = Math.max(0, total - start);
  const countThisPlane = Math.min(perPlane, remaining);
  return Math.max(1, Math.ceil(countThisPlane / side));
}

function computePosition(
  i: number,
  total: number,
  side: number,
  cubeSize: number,
  gap: number,
  gapZ: number
) {
  const perPlane = side * side;
  const plane = Math.floor(i / perPlane);
  const within = i % perPlane;

  // We fill "down" first, then left:
  // row changes slowest? Actually: for down-first, row = within % rowsUsed, col = floor(within / rowsUsed)
  // But we still want a bounded side x side layout. Easiest is:
  // row = within % side (down)
  // col = floor(within / side) (left)
  const row = within % side;                 // 0..side-1 (top->down)
  const col = Math.floor(within / side);     // 0..side-1 (right->left)

  // How many rows are actually used in this plane?
  const rowsUsed = rowsUsedForPlane(total, plane, side);

  // Center the grid in X around 0, but start at right-most column
  const step = cubeSize + gap;
  const xHalfSpan = ((side - 1) * step) / 2;

  // Top-right start:
  // col=0 should be right-most => x positive
  const x = (xHalfSpan - col * step);

  // FLOOR-LOCK:
  // Bottom row sits on floor (grid) at y = cubeSize/2
  // If rowsUsed < side, we compress downward so the lowest row hits the floor.
  // row=0 is the top row; we want top row higher.
  const rowInUsedRange = row; // row already 0..side-1
  const clampedRow = Math.min(rowInUsedRange, rowsUsed - 1);
  const y = cubeSize / 2 + (rowsUsed - 1 - clampedRow) * step;

  // Next plane goes "forward" (you said z is forward/back); using negative z to go "forward"
  const z = -plane * (cubeSize + gapZ);

  return [x, y, z] as const;
}


function World3D({ products }: { products: Product[] }) {
  return (

    <Canvas
      camera={{ position: [7, 6, 13], fov: 45, near: 0.1, far: 200 }}
      onCreated={({ camera }) => {
        camera.lookAt(2.8, 2.6, -2); 
      }}
    >

      {/* eslint-disable-next-line react/no-unknown-property */}
      <ambientLight intensity={0.8} />
      {/* eslint-disable-next-line react/no-unknown-property */}
      <directionalLight position={[8, 10, 6]} intensity={1.2} />
      <gridHelper args={[60, 60]} />

      {/* products */}
      {products.map((p, i) => (
        <ProductBox key={p.record_num} product={p} index={i} total={products.length} />
      ))}

      <OrbitControls
        enableRotate={true}
        enablePan={true}
        enableZoom={true}
        minDistance={10}
        maxDistance={14}
      />
    </Canvas>
  );
}

function ProductBox({
  product,
  index,
  total,
}: {
  product: Product;
  index: number;
  total: number;
}) {
  const [x, y, z] = computePosition(
    index,
    total,
    PLANE_SIDE,
    CUBE_SIZE,
    GAP,
    GAP_Z
  );

  return (
    // eslint-disable-next-line react/no-unknown-property
    <mesh position={[x, y, z]}>
      {/* eslint-disable-next-line react/no-unknown-property */}
      <boxGeometry args={[CUBE_SIZE, CUBE_SIZE, CUBE_SIZE]} />
      {/* eslint-disable-next-line react/no-unknown-property */}
      <meshStandardMaterial />
    </mesh>
  );
}


function ProductForm({
  value,
  onCancel,
  onSave,
}: {
  value: Product | null;
  onCancel: () => void;
  onSave: (p: Product) => void;
}) {
  const [draft, setDraft] = React.useState<Product | null>(value);

  React.useEffect(() => {
    setDraft(value);
  }, [value]);

  if (!draft) return null;

  const isNew = draft.record_num === -1;

  return (
    <Box
      sx={{
        height: "100%",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        px: 2,
      }}
    >
      <Paper
        elevation={0}
        sx={{
          ...glassPaperSx,
          width: "min(720px, 100%)",
          p: 3,
        }}
      >        
        <Typography variant="h6" fontWeight={800} gutterBottom>
          {isNew ? "Create Product" : "Update Product"}
        </Typography>

        <Stack spacing={2} sx={{ mt: 2 }}>
          <TextField
            label="Name"
            value={draft.name}
            onChange={(e) =>
              setDraft((d) => (d ? { ...d, name: e.target.value } : d))
            }
            inputProps={{ maxLength: 20 }}
            fullWidth
          />

          <TextField
            label="Expiration Date"
            type="date"
            value={draft.exp_date}
            onChange={(e) =>
              setDraft((d) => (d ? { ...d, exp_date: e.target.value } : d))
            }
            InputLabelProps={{ shrink: true }}
            fullWidth
          />

          <Box sx={{ display: "flex", gap: 1, justifyContent: "flex-end" }}>
            <Button onClick={onCancel} variant="text">
              Cancel
            </Button>
            <Button
              onClick={() => onSave(draft)}
              variant="contained"
              disabled={!draft.name.trim() || !draft.exp_date}
            >
              Save
            </Button>
          </Box>
        </Stack>
      </Paper>
    </Box>
  );
}