'use client';
import React, { useState } from 'react';
import { Text } from '@/components/ui/text';
import { format } from 'date-fns';
import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogTitle,
} from '@/components/ui/dialog';
import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
import { cn } from '@/lib/utils';
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormMessage,
} from '@/components/ui/form';
import { Input } from '@/components/ui/input';
import {
  Popover,
  PopoverTrigger,
  PopoverContent,
} from '@/components/ui/popover';
import { Calendar } from '@/components/ui/calendar';
import { CalendarIcon, Loader2 } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { zodResolver } from '@hookform/resolvers/zod';
import { useForm } from 'react-hook-form';
import { z } from 'zod';
import { API_ENDPOINTS, RECORDS_PER_PAGE } from '@/constants';
import CommonImage from '@/components/common/CommonImage';
import { globalApiPost } from '@/services/global/globalApiCalls';

const ReleaseFormSchema = z.object({
  release_version: z.string().optional(),
  release_date: z.date().optional(),
});

const ReleaseNotes = () => {
  const defaultValues = {
    release_version: '',
    release_date: undefined,
  };

  const ReleaseForm = useForm<z.infer<typeof ReleaseFormSchema>>({
    resolver: zodResolver(ReleaseFormSchema),
    defaultValues,
  });

  const [releaseNotes, setReleaseNotes] = useState<Record<string, any>[]>([]);
  const [currentPage, setCurrentPage] = useState<number>(1);
  const [lastPage, setLastPage] = useState<number>(1);
  const [noteInfo, setNoteInfo] = useState<string>('');
  const [filterParams, setFilterParams] = useState<Record<string, any>>({});
  const [loading, setLoading] = useState(false);

  const handleReleaseNotes = async (
    params: Record<string, any> = {},
    page: number = 1,
  ) => {
    if (noteInfo) setNoteInfo('');
    params.page = page ?? currentPage;
    params.per_page = RECORDS_PER_PAGE;

    try {
      setLoading(true);
      const response = (await globalApiPost(
        API_ENDPOINTS.MASTERS.RELEASE_NOTES.LIST,
        params,
      )) as any;

      // Add proper null/undefined checks
      const responseData = response?.data;
      const newNotes = responseData?.list ?? [];
      const pagination = responseData?.pagination;

      setLoading(false);

      if (newNotes.length === 0) {
        await handleCommonCalls();
      } else {
        setReleaseNotes((prevNotes) => [...prevNotes, ...newNotes]);
        setCurrentPage((prePage) => prePage + 1);
        // Add safety check for pagination
        setLastPage(pagination?.last_page ?? 1);
      }
    } catch (error) {
      console.error('Error fetching release notes:', error);
      setLoading(false);
      // Reset state on error
      await handleCommonCalls();
    }
  };

  const handleReleaseNotesPages = async (
    filterParams: Record<string, any>,
    currentPage: number,
  ) => {
    if (currentPage <= lastPage) {
      await handleReleaseNotes(filterParams, currentPage);
    }
  };

  const handleReleaseNoteInfo = (note: Record<string, any>) => {
    // Add safety check for development_note
    setNoteInfo(note?.development_note ?? '');
  };

  const handleClearSearch = async () => {
    try {
      await handleCommonCalls();
      ReleaseForm.reset();
      setFilterParams({});
      await handleReleaseNotes({}, 1);
    } catch (error) {
      console.error('Error clearing search:', error);
    }
  };

  const ReleaseSubmit = async (data: z.infer<typeof ReleaseFormSchema>) => {
    try {
      const params = {
        release_version: data.release_version,
        release_date: data.release_date,
      };
      setFilterParams(params);
      await handleCommonCalls();
      await handleReleaseNotes(params, 1);
    } catch (error) {
      console.error('Error submitting form:', error);
    }
  };

  const handleCommonCalls = async () => {
    setReleaseNotes([]);
    setCurrentPage(1);
    setLastPage(1);
  };

  return (
    <>
      <Dialog>
        <DialogTrigger
          onClick={() => {
            handleCommonCalls();
            handleReleaseNotes({}, 1);
          }}
          asChild
        >
          <Text weight="semibold" className="mb-2 cursor-pointer">
            Release Notes
          </Text>
        </DialogTrigger>
        <DialogContent
          aria-describedby={undefined}
          className="z-[9999] w-full max-w-7xl p-0 m-0 release-modal-settings modal-common-widget"
        >
          <DialogTitle className="p-5 modal-header">Release Notes</DialogTitle>

          <VisuallyHidden>
            <DialogTitle>Hidden Title</DialogTitle>
          </VisuallyHidden>
          <Text className="release-widget-cont">
            <Form {...ReleaseForm}>
              <form
                onSubmit={ReleaseForm.handleSubmit(ReleaseSubmit)}
                className={`space-y-6 flex justify-start form-release-widget justify-center gap-3 mb-10 mt-0 ${noteInfo ? 'hidden' : ''}`}
              >
                <Text className="main-scroll-widget">
                  <Text className="filter-master-search flex justify-center gap-2 p-0 m-0">
                    <FormField
                      control={ReleaseForm.control}
                      name="release_version"
                      render={({ field }) => (
                        <FormItem className="w-1/4 p-0 m-0">
                          <FormControl>
                            <Input
                              autoComplete="off"
                              className="rounded-full border-gray-600 shadow-none"
                              placeholder="Version Number"
                              {...field}
                              onChange={(e) => {
                                field.onChange(e);
                              }}
                            />
                          </FormControl>
                          <FormMessage />
                        </FormItem>
                      )}
                    />
                    <FormField
                      control={ReleaseForm.control}
                      name="release_date"
                      render={({ field }) => (
                        <FormItem className="w-1/4 p-0 m-0">
                          <Popover>
                            <PopoverTrigger asChild>
                              <FormControl>
                                <Button
                                  variant={'outline'}
                                  className={cn(
                                    'w-[100%] pl-3 text-left font-normal rounded-full border-gray-700 button-date-picker',
                                    !field.value && 'text-muted-foreground',
                                  )}
                                >
                                  {field.value ? (
                                    format(new Date(field.value), 'PPP')
                                  ) : (
                                    <span>Release Date</span>
                                  )}
                                  <CommonImage
                                    src="/main/date_calendar.webp"
                                    width={18}
                                    height={18}
                                    alt="calendar"
                                    classname="calendar-icon"
                                  />
                                </Button>
                              </FormControl>
                            </PopoverTrigger>

                            <PopoverContent
                              className="w-auto p-0 z-[9999] single-calender-widget"
                              align="start"
                            >
                              <Calendar
                                mode="single"
                                selected={
                                  field.value
                                    ? new Date(field.value)
                                    : undefined
                                }
                                onSelect={(date) => field.onChange(date)}
                                disabled={(date) => date > new Date()}
                                initialFocus
                              />
                            </PopoverContent>
                          </Popover>
                          <FormMessage />
                        </FormItem>
                      )}
                    />
                    <Button
                      type="submit"
                      className="p-0 m-0 primary-button"
                      disabled={loading}
                    >
                      {loading ? (
                        <>
                          <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                          Searching...
                        </>
                      ) : (
                        'Search'
                      )}
                    </Button>
                    <Button
                      type="button"
                      className="m-0 shadow primary-button-refresh"
                      onClick={handleClearSearch}
                      disabled={loading}
                    >
                      {loading ? (
                        <>
                          <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                          Searching...
                        </>
                      ) : (
                        'Clear'
                      )}
                    </Button>
                  </Text>
                  <Text className="form-mid">Content</Text>
                </Text>
              </form>
            </Form>
            {/* Mapping release notes dynamically */}
            <Text className="container release-notes-box">
              <Text
                className={`flex justify-center gap-4 flex-wrap mt-10 ${
                  noteInfo ? 'hidden' : ''
                }`}
              >
                {releaseNotes?.map((note) => (
                  <Text
                    key={note?.release_id ?? Math.random()}
                    className="box-item"
                    onClick={() => handleReleaseNoteInfo(note)}
                  >
                    <Text className="text-ver">
                      Version: {note?.release_version ?? 'Unknown'}
                    </Text>
                    <Text className="text-date">
                      {note?.release_date ?? 'Unknown'}
                    </Text>
                  </Text>
                )) ?? []}
              </Text>
              {releaseNotes.length > 0 && currentPage <= lastPage && (
                <Button
                  type="button"
                  className="load-more-btn text-center"
                  onClick={() => {
                    handleReleaseNotesPages(filterParams, currentPage);
                  }}
                  disabled={loading}
                >
                  {loading ? (
                    <>
                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                      Searching...
                    </>
                  ) : (
                    'Load More'
                  )}
                </Button>
              )}
              <Text className={`container flex p-4`}>
                <div dangerouslySetInnerHTML={{ __html: noteInfo }} />
              </Text>
            </Text>
            <Text className="modal-footer border-t border-gray-200 p-4 pb-0">
              <Button
                type="submit"
                className={`btn btn-back flex justify-center justify-items-center ${noteInfo === '' ? 'hidden' : ''}`}
                onClick={() => {
                  setNoteInfo('');
                }}
              >
                <CommonImage
                  src="/main/right_arrow_icon.webp"
                  classname="dark:invert"
                  alt="User"
                  width={9}
                  height={9}
                />
                Back
              </Button>
            </Text>
          </Text>
        </DialogContent>
      </Dialog>
    </>
  );
};

export default ReleaseNotes;