import React, { useState } from "react";
import {
  Modal,
  ModalOverlay,
  ModalContent,
  ModalHeader,
  ModalFooter,
  ModalBody,
  ModalCloseButton,
  Button,
  VStack,
  FormControl,
  FormLabel,
  Input,
  FormHelperText,
  Tabs,
  TabList,
  TabPanels,
  Tab,
  TabPanel,
  useColorMode,
} from "@chakra-ui/react";
import { useTranslation } from 'react-i18next';
import dayjs from 'dayjs';
import UserSelect from "../../../components/user-select";

interface AttendanceEntry {
  name: string;
  date: string;
  students: any[];
  teachers: any[];
}

interface AddDataDialogProps {
  isOpen: boolean;
  onClose: () => void;
  onAddData: (data: AttendanceEntry) => void;
}

const AddDataDialog = ({ isOpen, onClose, onAddData }: AddDataDialogProps) => {
  const { colorMode } = useColorMode();
  const { t } = useTranslation();
  const [name, setName] = useState("");
  const [date, setDate] = useState(dayjs().format('YYYY-MM-DD'));
  const [selectedStudents, setSelectedStudents] = useState<any[]>([]);
  const [selectedTeachers, setSelectedTeachers] = useState<any[]>([]);

  const handleSubmit = () => {
    const newEntry: AttendanceEntry = {
      name,
      date,
      students: selectedStudents,
      teachers: selectedTeachers,
    };
    
    onAddData(newEntry);
    resetForm();
    onClose();
  };

  const resetForm = () => {
    setName("");
    setDate(dayjs().format('YYYY-MM-DD'));
    setSelectedStudents([]);
    setSelectedTeachers([]);
  };

  return (
    <Modal isOpen={isOpen} onClose={onClose} size="xl">
      <ModalOverlay />
      <ModalContent bg={colorMode === 'dark' ? 'gray.800' : 'white'}>
        <ModalHeader>{t('journal.pl.attendance.addDialog.title')}</ModalHeader>
        <ModalCloseButton />
        <ModalBody>
          <VStack spacing={4} align="stretch">
            <FormControl isRequired>
              <FormLabel>{t('journal.pl.common.lessonName')}</FormLabel>
              <Input 
                value={name} 
                onChange={(e) => setName(e.target.value)} 
                placeholder={t('journal.pl.attendance.addDialog.lessonNamePlaceholder')}
              />
            </FormControl>

            <FormControl isRequired>
              <FormLabel>{t('journal.pl.common.date')}</FormLabel>
              <Input 
                type="date" 
                value={date} 
                onChange={(e) => setDate(e.target.value)}
              />
            </FormControl>

            <Tabs isFitted variant="enclosed" colorScheme="blue" mt={4}>
              <TabList>
                <Tab>{t('journal.pl.common.students')}</Tab>
                <Tab>{t('journal.pl.common.teachers')}</Tab>
              </TabList>
              <TabPanels>
                <TabPanel>
                  <FormControl>
                    <FormLabel>{t('journal.pl.attendance.addDialog.selectStudents')}</FormLabel>
                    <UserSelect
                      isMulti
                      value={selectedStudents}
                      onChange={setSelectedStudents}
                      placeholder={t('journal.pl.attendance.addDialog.studentsPlaceholder')}
                    />
                    <FormHelperText>{t('journal.pl.attendance.addDialog.studentsHelperText')}</FormHelperText>
                  </FormControl>
                </TabPanel>
                <TabPanel>
                  <FormControl>
                    <FormLabel>{t('journal.pl.attendance.addDialog.selectTeachers')}</FormLabel>
                    <UserSelect
                      isMulti
                      value={selectedTeachers}
                      onChange={setSelectedTeachers}
                      placeholder={t('journal.pl.attendance.addDialog.teachersPlaceholder')}
                    />
                    <FormHelperText>{t('journal.pl.attendance.addDialog.teachersHelperText')}</FormHelperText>
                  </FormControl>
                </TabPanel>
              </TabPanels>
            </Tabs>
          </VStack>
        </ModalBody>

        <ModalFooter>
          <Button variant="ghost" mr={3} onClick={onClose}>
            {t('journal.pl.common.cancel')}
          </Button>
          <Button colorScheme="blue" onClick={handleSubmit} isDisabled={!name || !date}>
            {t('journal.pl.common.add')}
          </Button>
        </ModalFooter>
      </ModalContent>
    </Modal>
  );
};

export default AddDataDialog; 