// import Dashboard_Chart from "@/components/Chart/Dashboard_Chart";
import DashboardLayout from '@/components/Layouts/DashboardLayout';
import Link from 'next/link';
import React, { useEffect, useState } from 'react';
import {
  Button,
  Card,
  Col,
  ListGroup,
  Dropdown,
  Nav,
  Row,
  Tab,
  Spinner,
  Container,
} from 'react-bootstrap';
// import TimeTable from "@/components/Table/TimeTable";
// import ProfilePictureUpload from "@/components/Form/ProfilePictureUpload";
// import Password from "@/components/Form/Password";
import Modal from 'react-bootstrap/Modal';
import Image from 'react-bootstrap/Image';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faEllipsisVertical } from '@fortawesome/free-solid-svg-icons';
import { useRouter } from 'next/router';
import { ChatAccordian } from '@/components/ChatAccordian/ChatAccordian';
import FileUpload from '@/components/UploadFiles/FileUpload';
import Progressbar from '@/components/Progressbar/progressbar';
import FileUpload2 from '@/components/UploadFiles/FileUpload2';
import { useForm } from 'react-hook-form';
import { useSession } from 'next-auth/react';
import {
  useEditThreadMutation,
  useGetThreadsByIdQuery,
} from '@/lib/redux/services/Organizorflow/Dashboard.api';
import toast from 'react-hot-toast';
import WebsiteLayout from '@/components/Layouts/WebsiteLayout';

export default function CreateThread() {
  const router = useRouter();
  const [discussionThread, setDiscussionThread] = useState('');
  const [pollTitle, setPolTitle] = useState('');
  const [modalShowCongrats, setModalCongrats] = useState(false);
  const [modalShowGallery, setModalShowGallery] = React.useState(false);
  const [thumbnail, setThumbnail] = useState<File | null>(null);
  const [showPollForm, setShowPollForm] = useState(false);
  const [showDescription, setShowDescription] = useState(false);
  const [showInput, setShowInput] = useState(false);
  const [options, setOptions] = useState<string[]>([]);
  const { data: session }: any = useSession();
  const organizer_id = session?.user?._id;

  const { register, reset, handleSubmit, setValue } = useForm<any>({
    defaultValues: {
      organizationId: organizer_id,
      title: '',
      description: '',
      link: '',
      discussiontitle: '',
      pollTitle: '',
    },
  });
  const token = session?.user?.token;
  const skip = !token;
  const { id: threadId } = router.query;
  const [EditThread, { isLoading: loading }] = useEditThreadMutation();
  const {
    data: Getthreads,
    error,
    isLoading,
    refetch,
  } = useGetThreadsByIdQuery({ id: threadId, token }, { refetchOnMountOrArgChange: true, skip });

  const handleThreadEdit = async (data: any) => {
    const formData = new FormData();
    const feilds = {
      threadid: threadId,
      title: data?.title,
      description: data?.description,
      link: data?.website,
      discussiontitle: '',
      pollTitle: '',
    };

    Object.entries(feilds).forEach(([key, value]) => formData.append(key, value as string));
    if (thumbnail && typeof thumbnail !== 'string') {
      formData.append('threadImage', thumbnail);
    }

    try {
      const response: any = await EditThread({
        body: formData,
        token,
      }).unwrap();
      if (response?.status) {
        toast.success('Thread Updated Succesfully');
        reset();
        setThumbnail(null);
        router.push('/organizer/organizer-dashboard/comment/');
      }
    } catch (err: any) {
      const errorMessage = err?.data?.message || 'An error occurred. Please try again.';
      console.error(err);
      toast.error(errorMessage);
    }
  };

  useEffect(() => {
    if (Getthreads) {
      const { data }: any = Getthreads;
      console.log('data ooo', data);
      setValue('title', data?.threadModel.title || '');
      setValue('description', data?.threadModel?.description || '');
      setValue('website', data?.threadModel?.link || '');

      if (data?.threadModel?.media) {
        setThumbnail(data?.threadModel?.media?.mediaUrl);
      }
    }
  }, [Getthreads, setValue]);

  return (
    <>
      <WebsiteLayout>
        <Container fluid>
          <div>
            <div
              style={{
                paddingInline: '70px',
                width: '400px',
              }}
            >
              <button
                type="button"
                className="btn btn-primary payment w-100 mb-3"
                onClick={() => router.back()}
              >
                Go Back
              </button>
            </div>

            {isLoading ? (
              <div className="spinner-container">
                <Spinner animation="border" className="custom-spinner" />
              </div>
            ) : (
              <div
                className="main-sect"
                style={{
                  paddingInline: '400px',
                }}
              >
                <h2 className="heading text-dark">Edit Thread</h2>
                <Row>
                  <Col lg="12">
                    <form onSubmit={handleSubmit(handleThreadEdit)}>
                      <div className="help-feedback">
                        <Row>
                          <Col lg={12}>
                            <div className="form-group">
                              <div className="icon-field">
                                <label htmlFor="">Title</label>
                                <input
                                  type="text"
                                  className="form-control"
                                  placeholder="Food Relief"
                                  {...register('title')}
                                />
                              </div>
                            </div>
                            <div className="form-group">
                              <div className="icon-field">
                                <label htmlFor="">Thread Description</label>
                                <textarea
                                  id=""
                                  className="form-control"
                                  placeholder="Food Relief"
                                  {...register('description')}
                                  rows={8}
                                ></textarea>
                              </div>
                            </div>
                            <div className="form-group">
                              <div className="icon-field">
                                <label htmlFor="">Website</label>
                                <input
                                  type="url"
                                  className="form-control"
                                  placeholder="www.abcd.com"
                                  {...register('website')}
                                />
                              </div>
                            </div>
                            <div className="thread-btn">
                              <button
                                className="btn btn-primary d-block mt-3 w-50"
                                type="button"
                                onClick={() => setModalShowGallery(true)}
                              >
                                Edit Photo
                              </button>

                              <button className="btn btn-primary mt-3 w-100" type="submit">
                                {loading ? <Spinner size="sm" /> : 'Edit Now'}
                              </button>
                            </div>
                          </Col>
                        </Row>
                      </div>
                    </form>
                  </Col>
                </Row>
              </div>
            )}

            <Gallery
              show={modalShowGallery}
              thumbnail={thumbnail}
              setThumbnail={setThumbnail}
              onHide={() => setModalShowGallery(false)}
            />

            <Congrats show={modalShowCongrats} onHide={() => setModalCongrats(false)} />
          </div>
        </Container>

        {/* <MadLibs show={modalShow4} onHide={() => setModalShow4(false)} />

        <Report show={modalShow5} onHide={() => setModalShow5(false)} />

        <Block show={modalShow6} onHide={() => setModalShow6(false)} /> */}

        {/* <MadLibStory
          show={modalShow5}
          onHide={() => setModalShow5(false)}
        /> */}
      </WebsiteLayout>
    </>
  );
}

// MadLibs Modal

function Congrats(props: any) {
  const [chat, setChat] = useState(true);
  const router = useRouter();
  return (
    <Modal
      {...props}
      size="md"
      aria-labelledby="contained-modal-title-vcenter"
      centered
      className="affilaite-modal"
    >
      <Modal.Header></Modal.Header>

      <Modal.Body>
        <div className="report">
          <h4 className="text-center mb-3 mt-4">Congratulation!</h4>
          <h5 className="text-dark">Your Feedback Submitted Successfully</h5>
          <button
            type="button"
            className="btn btn-primary w-100 mt-4"
            onClick={() => router.back()}
          >
            Go back to Home
          </button>
        </div>
      </Modal.Body>
    </Modal>
  );
}

// Reporting Modal
function Report(props: any) {
  const [chat, setChat] = useState(true);
  const router = useRouter();
  return (
    <Modal
      {...props}
      size="md"
      aria-labelledby="contained-modal-title-vcenter"
      centered
      className="icbreak-modal"
    >
      <Modal.Header closeButton></Modal.Header>

      <Modal.Body>
        {chat ? (
          <div className="report">
            <h4 className="text-center mb-2 mt-4">Reason For Reporting</h4>
            <p className="text-dark text-left slogn">What is your reason for Reporting?</p>
            <ChatAccordian />
            <Button
              className="w-100 mt-3 rprt-btn"
              type="button"
              onClick={() => {
                setChat(!chat);
              }}
            >
              Continue
            </Button>
          </div>
        ) : (
          <>
            <div className="report">
              <img src={'/images/check-1.png'} alt="" />
              <h4 className="text-center mb-2 mt-4">Reporting</h4>
              <p>This person has been reported successfully.</p>
              <Button className="w-100 mt-3 rprt-btn" onClick={() => router.reload()}>
                {' '}
                Go Back
              </Button>
            </div>
          </>
        )}
      </Modal.Body>
    </Modal>
  );
}

// Gallery Modal
function Gallery({ show, onHide, thumbnail, setThumbnail, props }: any) {
  const router = useRouter();
  return (
    <Modal
      show={show}
      onHide={onHide}
      size="lg"
      aria-labelledby="contained-modal-title-vcenter"
      centered
      className="affilaite-modal"
    >
      <Modal.Header closeButton></Modal.Header>

      <Modal.Body>
        <div className="report">
          <div className="files">
            <FileUpload2 setSelectedFile={setThumbnail} selectedFile={thumbnail} />
          </div>
          <button type="button" className="btn btn-primary w-50" onClick={onHide}>
            Add Now
          </button>
        </div>
      </Modal.Body>
    </Modal>
  );
}