import { useState } from 'react';
import { Box, Button, ButtonGroup, Text, Input, List, Field, Stack, SimpleGrid, HStack, Table, Checkbox, createListCollection } from "@chakra-ui/react"
import DropDownMenu from "../../CanvasComponents/DropDownMenu"
import { useForm } from 'react-hook-form';

const startYear = 1970;
const currentYear = new Date().getFullYear();

const yearItems = Array.from(
{ length: currentYear - startYear + 1 }, 
(_, i) => {
    const year = startYear + i;
    return { label: String(year), value: String(year) };
}
);

const years = createListCollection({
items: yearItems.reverse(),
});

const quarters = createListCollection({
items: [
    { label: "Q1", value: "quarter_1" },
    { label: "Q2", value: "quarter_2" },
    { label: "Q3", value: "quarter_3" },
    { label: "Q4", value: "quarter_4" },
],
})

const sections = createListCollection({
    items: [
        { label: "All", value: "all" },
        { label: "Com", value: "com" },
        { label: "Eng", value: "eng" },
        { label: "Gas", value: "gas" },
        { label: "Geophys", value: "geophys" },
        { label: "GRSP", value: "grsp" },
        { label: "IT", value: "it" },
    ],
})

// Sample entries for visual reference - remove before flight
const items = [
    {
      id: "r1",
      section: "Com",
      volcano: "Nevado del Ruiz",
      country: "COL",
      start: "2024-01-15",
      end: "2024-01-30",
      type: "Training",
      vpi10: "Yes",
      downstream: 1200,
      male: 600,
      female: 600,
      total: 1200,
    },
    {
      id: "r2",
      section: "Gas",
      volcano: "Etna",
      country: "ITA",
      start: "2024-02-01",
      end: "2024-02-20",
      type: "Assistance",
      vpi10: "No",
      downstream: 900,
      male: 450,
      female: 450,
      total: 900,
    },
    {
      id: "r3",
      section: "Eng",
      volcano: "Kilauea",
      country: "USA",
      start: "2024-03-10",
      end: "2024-03-25",
      type: "Support",
      vpi10: "Yes",
      downstream: 2000,
      male: 1000,
      female: 1000,
      total: 2000,
    },
    {
      id: "r4",
      section: "Geophys",
      volcano: "Fuji",
      country: "JPN",
      start: "2024-04-05",
      end: "2024-04-18",
      type: "Monitoring",
      vpi10: "Yes",
      downstream: 1500,
      male: 700,
      female: 800,
      total: 1500,
    },
    {
      id: "r5",
      section: "IT",
      volcano: "Merapi",
      country: "IDN",
      start: "2024-05-02",
      end: "2024-05-12",
      type: "Deployment",
      vpi10: "No",
      downstream: 1100,
      male: 550,
      female: 550,
      total: 1100,
    },
    {
        id: "r6",
        section: "Gas",
        volcano: "Ranier",
        country: "US",
        start: "2024-07-02",
        end: "2027-05-12",
        type: "Deployment",
        vpi10: "Yes",
        downstream: 1200,
        male: 570,
        female: 570,
        total: 1400,
      },
  ];
 
export function MEDataEntry() {
    const [value, setValue] = useState("");
    const [selection, setSelection] = useState([]);
    
    const { 
        register, 
        handleSubmit,
        reset,
        watch,
        formState: { errors },
    } = useForm();
    
    const onSubmit = (data) => {
        console.log("Form submitted:", data);
    }

    const rows = items.map((item) => (
        <Table.Row
            key={item.id}
            data-selected={selection.includes(item.id) ? "" : undefined }
        >
            <Table.Cell>
                <Checkbox.Root
                    size="sm"
                    mt="0.5"
                    aria-label="Select row"
                    checked={selection.includes(item.id)}
                    onCheckedChange={(changes) => {
                        setSelection((prev) => 
                            changes.checked
                            ? [...prev, item.id]
                            : prev.filter((id) => id !== item.id ),
                        );
                    }}
                >
                    <Checkbox.HiddenInput />
                    <Checkbox.Control>
                        <Checkbox.Indicator />
                    </Checkbox.Control>
                </Checkbox.Root>
            </Table.Cell>
            <Table.Cell>{item.section}</Table.Cell>
            <Table.Cell>{item.volcano}</Table.Cell>
            <Table.Cell>{item.country}</Table.Cell>
            <Table.Cell>{item.start}</Table.Cell>
            <Table.Cell>{item.end}</Table.Cell>
            <Table.Cell>{item.type}</Table.Cell>
            <Table.Cell>{item.vpi10}</Table.Cell>
            <Table.Cell isNumeric>{item.downstream}</Table.Cell>
            <Table.Cell isNumeric>{item.male}</Table.Cell>
            <Table.Cell isNumeric>{item.female}</Table.Cell>
            <Table.Cell isNumeric>{item.total}</Table.Cell>
        </Table.Row>
    ))

    return(
        <Box>   
           <HStack spacing={6} m={2}>
                <DropDownMenu collection={years} placeholder="Year" width="130px" />
                <DropDownMenu collection={quarters} placeholder="Quarter" width="130px" />
                <DropDownMenu collection={sections} placeholder="Section" width="130px" />
            </HStack>
            <Text fontSize="xs" pl={2} pt={2}>
                Use Volcano names as found in GVP and dashboard. (e.g. Nevado del Ruiz, Chiles-Cerro Negro).
            </Text>
            <List.Root as="ul" styleType="circle" fontSize="xs" pl={6}>
                <List.Item>Edit entry.</List.Item>
                <List.Item>Delete entry.</List.Item>
                <List.Item>Copy entry to form. Then hitting 'Save' will create a new entry.</List.Item>
            </List.Root>
            
            <Box m={4} mt={1} border="1px solid" borderRadius="sm" borderColor="gray.500">
                <Box m={4} border="1px solid">
                    <Box pl={1} bg="gray.200" border="1px solid" borderColor="gray.400">
                        Number of people benefitting from VDAP activities, disaggregate by sex
                    </Box>
                    
                    {/* <Box overflowX="auto">  */}
                        <Table.ScrollArea height="240px">
                            <Table.Root variant="outline" overflow="initial" size="sm" stickyHeader interactive>
                                <Table.Header>
                                    <Table.Row bg="bg.subtle">
                                        <Table.ColumnHeader w="40px"/> 
                                        <Table.ColumnHeader>Section</Table.ColumnHeader>
                                        <Table.ColumnHeader>Volcano</Table.ColumnHeader>
                                        <Table.ColumnHeader>Country</Table.ColumnHeader>
                                        <Table.ColumnHeader>Start Date of Assistance</Table.ColumnHeader>
                                        <Table.ColumnHeader>End Date of Assistance</Table.ColumnHeader>
                                        <Table.ColumnHeader>Assistance Type</Table.ColumnHeader>
                                        <Table.ColumnHeader>VPI10</Table.ColumnHeader>
                                        <Table.ColumnHeader>Downstream Population</Table.ColumnHeader>
                                        <Table.ColumnHeader>Male</Table.ColumnHeader>
                                        <Table.ColumnHeader>Female</Table.ColumnHeader>
                                        <Table.ColumnHeader>Total</Table.ColumnHeader>
                                    </Table.Row>
                                </Table.Header>

                                <Table.Body>
                                    {rows}
                                </Table.Body>
                            </Table.Root>
                        </Table.ScrollArea>
                    {/* </Box> */}
                </Box>
                {/* Row actions aligned right */}
                <HStack justify="flex-end" p={3} pt={0} borderBottom="1px solid" borderColor="gray.300" spacing={3} >
                    <ButtonGroup variant="surface" size="sm">  
                        <Button >EDIT</Button>
                        <Button>COPY</Button>
                        <Button variant="solid" colorPalette="red">DELETE</Button>
                    </ButtonGroup>
                </HStack>
                
                {/* Form Section */}
                <Box 
                    as="form"
                    onSubmit={handleSubmit(onSubmit)}
                    m={4} 
                    border="1px solid"
                >
                    <Box pl={1} bg="gray.200" border="1px solid" borderColor="gray.400" overflow="hidden">
                        Fill in Form
                    </Box>

                    <Stack p={2} gap="2" css={{ "--field-label-width": "80px" }}>
                        <HStack spacing={6} align="flex-start" w="100%" flexWrap="wrap"> 
                            <Field.Root orientation="horizontal" flex="1" minW="260px">
                                <Field.Label>Country:</Field.Label>
                                <Input {...register("country")} placeholder="US" />
                            </Field.Root>
                
                            <Field.Root orientation="horizontal" flex="1" minW="260px">
                                <Field.Label>Start Date of Assistance:</Field.Label>
                                <Input {...register("startdate", { valueAsDate: true })} placeholder="9/6/1987" />
                            </Field.Root>
                
                            <Field.Root orientation="horizontal" flex="1">
                                <Field.Label>VPI10 (LandScan 2014):</Field.Label>
                                <Input {...register("lastname")} placeholder="CatPic.jpg" />
                            </Field.Root>
                        </HStack> 

                        <HStack spacing={6} align="flex-start" w="100%" flexWrap="wrap"> 
                            <Field.Root orientation="horizontal" flex="1" minW="260px">
                                <Field.Label>Volcano:</Field.Label>
                                <Input {...register("volcano")} placeholder="St Helens" />
                            </Field.Root>
                
                            <Field.Root orientation="horizontal" flex="1" minW="260px">
                                <Field.Label>End Date of Assistance:</Field.Label>
                                <Input {...register("enddate", { valueAsDate: true })} placeholder="7/14/2054" />
                            </Field.Root>
                
                            <Field.Root orientation="horizontal" flex="1">
                                <Field.Label>Downstream Affected Population:</Field.Label>
                                <Input {...register("downstream", { valueAsNumber: true })} placeholder="1337" />
                            </Field.Root>
                        </HStack> 

                        <HStack spacing={6} align="flex-start" w="100%" flexWrap="wrap"> 
                            <Field.Root orientation="horizontal" flex="1" minW="260px">
                                <Field.Label>Male Population:</Field.Label>
                                <Input {...register("male", { valueAsNumber: true })} placeholder="1776" />
                            </Field.Root>
                
                            <Field.Root orientation="horizontal" flex="1" minW="260px">
                                <Field.Label>Female Population:</Field.Label>
                                <Input {...register("female", { valueAsNumber: true })} placeholder="1892" />
                            </Field.Root>
                
                            <Field.Root orientation="horizontal" flex="1">
                                <Field.Label>Total Population:</Field.Label>
                                <Input {...register("total", { valueAsNumber: true })} placeholder="3668" />
                            </Field.Root>
                        </HStack> 

                        <Field.Root orientation="horizontal" flex="1" pt={2}> 
                            <Field.Label>Assistance Type:</Field.Label>
                            <Input {...register("assistance")} placeholder="Monetary" flex="1" />
                        </Field.Root>

                        <HStack alignSelf="flex-start" pt={2}>
                            <ButtonGroup variant="surface" size="sm">
                                <Button type="submit" variant="solid" colorPalette="green" >
                                    Add
                                </Button>
                                <Button onClick={() => reset()}>
                                    Reset
                                </Button>
                            </ButtonGroup>
                        </HStack>
                    </Stack>
                </Box>
            </Box>
        </Box>
    );
}