'use client';

import { useEffect, useState } from 'react';
import { zodResolver } from '@hookform/resolvers/zod';
import { useForm } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import { toast } from 'sonner';
import { apiClient } from '@/lib/api';
import { useLanguage } from '@/providers/i18n-provider';
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from '@/components/ui/alert-dialog';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Checkbox } from '@/components/ui/checkbox';
import CustomDateTimePicker from '@/components/ui/date-picker';
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from '@/components/ui/form';
import { Input } from '@/components/ui/input';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import {
  sampleRequestSchema,
  SampleRequestType,
} from '../form/sample-request-schema';
import LocationPicker from './location-picker';

export type SubCategoryItem = {
  subCategory: string;
  checked: boolean;
  id: number;
  is_required?: boolean;
};

interface Project {
  id: number;
  name: string;
}

interface Permit {
  id: number;
  permit_number: string;
  is_urgent: boolean;
}

interface Category {
  id: number;
  name: string;
}

interface SubCategory {
  id: number;
  name: string;
  is_required: boolean;
}

export default function SampleRequestForm() {
  const { t } = useTranslation();
  const { dir } = useLanguage();

  const [openDialog, setOpenDialog] = useState(false);
  const [locationConfirmed, setLocationConfirmed] = useState(false);
  const [locationConfirmError, setLocationConfirmError] = useState<string>('');
  const [pendingData, setPendingData] = useState<SampleRequestType | null>(
    null,
  );

  const [projects, setProjects] = useState<Project[]>([]);
  const [permits, setPermits] = useState<Permit[]>([]);
  const [categories, setCategories] = useState<Category[]>([]);
  const [isLoading, setIsLoading] = useState(false);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [submitError, setSubmitError] = useState<string | null>(null);

  // Fetch initial data
  useEffect(() => {
    const fetchInitialData = async () => {
      try {
        const [projectsRes, categoriesRes] = await Promise.all([
          apiClient.get<{ data: Project[] }>(
            '/contractor/select-options/projects',
            { requireAuth: true },
          ),
          apiClient.get<{ data: Category[] }>(
            '/contractor/select-options/sample-categories',
            { requireAuth: true },
          ),
        ]);
        setProjects(projectsRes.data.data);
        setCategories(categoriesRes.data.data);
      } catch (error) {
        console.error('Error fetching initial data:', error);
      }
    };
    fetchInitialData();
  }, []);

  const form = useForm<SampleRequestType>({
    resolver: zodResolver(sampleRequestSchema(t)),
    defaultValues: {
      projectName: '',
      sampleCategory: '',
      sampleSubCategory: [],
      statementType: '',
      dateTime: undefined,
      sampleUrgencies: 'regular',
      lat: undefined,
      lon: undefined,
      sampleLocation: '',
    },
  });

  const isUrgent = form.watch('sampleUrgencies') === 'urgent';

  useEffect(() => {
    if (isUrgent) {
      form.setValue('dateTime', new Date());
    } else {
      form.setValue('dateTime', undefined);
    }
  }, [isUrgent, form]);

  const onSubmit = (values: SampleRequestType) => {
    setPendingData(values);
    setLocationConfirmed(false);
    setLocationConfirmError('');
    setSubmitError(null);
    setOpenDialog(true);
  };

  const handleConfirmSubmit = () => {
    if (!pendingData) return;

    const selectedProject = projects.find(
      (p) => p.name === pendingData.projectName,
    );
    const selectedCategory = categories.find(
      (c) => c.name === pendingData.sampleCategory,
    );
    const selectedStatement = permits.find(
      (p) => p.permit_number === pendingData.statementType,
    );

    const subCategoryIds = pendingData.sampleSubCategory
      .flat()
      .filter((item) => item.checked)
      .map((item) => ({ sample_id: item.id }));

    const formatDate = (date: Date) => {
      const pad = (n: number) => n.toString().padStart(2, '0');
      return (
        [
          date.getFullYear(),
          pad(date.getMonth() + 1),
          pad(date.getDate()),
        ].join('-') +
        ' ' +
        [
          pad(date.getHours()),
          pad(date.getMinutes()),
          pad(date.getSeconds()),
        ].join(':')
      );
    };

    const backendPayload = {
      project_id: selectedProject?.id,
      permit_id: selectedStatement?.id,
      sample_id: selectedCategory?.id,
      date_time: pendingData.dateTime
        ? formatDate(pendingData.dateTime)
        : undefined,
      lat: pendingData.lat,
      lon: pendingData.lon,
      landmark: pendingData.sampleLocation,
      samples: subCategoryIds,
    };

    setIsSubmitting(true);
    setSubmitError(null);
    apiClient
      .post('/contractor/test-requests', backendPayload, { requireAuth: true })
      .then(() => {
        toast.success(
          t('requests.messages.submit_success') ||
            'Request submitted successfully',
        );
        setOpenDialog(false);
        form.reset();
      })
      .catch((error) => {
        console.error('Submission error:', error);
        const msg = error.message || 'Failed to submit request';
        toast.error(msg);
        setSubmitError(msg);
      })
      .finally(() => {
        setIsSubmitting(false);
      });
  };

  const projectName = form.watch('projectName');
  const statementType = form.watch('statementType');
  const sampleCategory = form.watch('sampleCategory');

  return (
    <Card dir={dir}>
      <CardHeader>
        <CardTitle>{t('requests.form_title')}</CardTitle>
      </CardHeader>
      <CardContent>
        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-5">
            <div className="grid sm:grid-cols-2 gap-4">
              {/* Project Name */}
              <FormField
                control={form.control}
                name="projectName"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>{t('requests.labels.project_name')}</FormLabel>
                    <Select
                      dir={dir}
                      onValueChange={(val) => {
                        field.onChange(val);
                        form.setValue('statementType', '');
                        form.setValue('sampleCategory', '');
                        form.setValue('sampleSubCategory', []);
                        form.setValue('sampleUrgencies', 'regular');

                        // Fetch Permits
                        const selectedProject = projects.find(
                          (p) => p.name === val,
                        );
                        if (selectedProject) {
                          apiClient
                            .get<{ data: Permit[] }>(
                              `/contractor/select-options/projects/${selectedProject.id}/permits`,
                              { requireAuth: true },
                            )
                            .then((res: { data: { data: Permit[] } }) =>
                              setPermits(res.data.data),
                            )
                            .catch(console.error);
                        }
                      }}
                      value={field.value}
                    >
                      <FormControl>
                        <SelectTrigger>
                          <SelectValue
                            placeholder={t(
                              'requests.placeholders.select_project',
                            )}
                          />
                        </SelectTrigger>
                      </FormControl>
                      <SelectContent>
                        {projects.map((project) => (
                          <SelectItem key={project.id} value={project.name}>
                            {project.name}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                    <FormMessage />
                  </FormItem>
                )}
              />

              {/* Statement Type */}
              <FormField
                control={form.control}
                name="statementType"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>{t('requests.labels.work_permit')}</FormLabel>
                    <Select
                      dir={dir}
                      onValueChange={(val) => {
                        field.onChange(val);
                        const selectedStatement = permits.find(
                          (s) => s.permit_number === val,
                        );
                        if (selectedStatement) {
                          form.setValue(
                            'sampleUrgencies',
                            selectedStatement.is_urgent ? 'urgent' : 'regular',
                          );
                        }
                        form.setValue('sampleCategory', '');
                        form.setValue('sampleSubCategory', []);
                      }}
                      value={field.value}
                      disabled={!projectName}
                    >
                      <FormControl>
                        <SelectTrigger>
                          <SelectValue
                            placeholder={t(
                              'requests.placeholders.select_work_permit',
                            )}
                          />
                        </SelectTrigger>
                      </FormControl>
                      <SelectContent>
                        {permits.map((type) => (
                          <SelectItem key={type.id} value={type.permit_number}>
                            {type.permit_number}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                    <FormMessage />
                  </FormItem>
                )}
              />
            </div>

            <div className="grid sm:grid-cols-2 gap-4">
              {/* Sample category */}
              <FormField
                control={form.control}
                name="sampleCategory"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>
                      {t('requests.labels.sample_category')}
                    </FormLabel>
                    <Select
                      dir={dir}
                      onValueChange={(val) => {
                        field.onChange(val);
                        form.setValue('sampleSubCategory', []);

                        const selectedCat = categories.find(
                          (c) => c.name === val,
                        );
                        if (selectedCat) {
                          apiClient
                            .get<{ data: SubCategory[] }>(
                              `/contractor/select-options/sample-categories/${selectedCat.id}/sub-categories`,
                              { requireAuth: true },
                            )
                            .then((res: { data: { data: SubCategory[] } }) => {
                              const items: SubCategoryItem[] =
                                res.data.data.map((sc: SubCategory) => ({
                                  id: sc.id,
                                  subCategory: sc.name,
                                  checked: sc.is_required,
                                  is_required: sc.is_required,
                                }));
                              // Split into chunks of 3 for display rows as before or keep as one group
                              // The previous code had SubCategoryItem[][]
                              form.setValue('sampleSubCategory', [items]);
                            })
                            .catch(console.error);
                        }
                      }}
                      value={field.value}
                      disabled={!statementType}
                    >
                      <FormControl>
                        <SelectTrigger>
                          <SelectValue
                            placeholder={t(
                              'requests.placeholders.select_category',
                            )}
                          />
                        </SelectTrigger>
                      </FormControl>
                      <SelectContent>
                        {categories.map((category) => (
                          <SelectItem key={category.id} value={category.name}>
                            {category.name}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                    <FormMessage />
                  </FormItem>
                )}
              />

              {/* Sample sub-category */}
              <FormField
                control={form.control}
                name="sampleSubCategory"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>
                      {t('requests.labels.sample_subcategory')}
                    </FormLabel>
                    <div className="space-y-4">
                      {!sampleCategory ? (
                        <p className="text-[13px] text-muted-foreground opacity-50 mt-1">
                          {t('requests.placeholders.select_category_first')}
                        </p>
                      ) : (
                        <div className="grid grid-cols-1 gap-4 border rounded-lg p-4 bg-muted/20">
                          {field.value.map(
                            (group: SubCategoryItem[], groupIndex: number) => (
                              <div
                                key={groupIndex}
                                className="flex flex-wrap gap-x-6 gap-y-2"
                              >
                                {group.map(
                                  (
                                    item: SubCategoryItem,
                                    itemIndex: number,
                                  ) => (
                                    <div
                                      key={itemIndex}
                                      className="flex items-center space-x-2 rtl:space-x-reverse "
                                    >
                                      <Checkbox
                                        id={`sub-${groupIndex}-${itemIndex}`}
                                        checked={item.checked}
                                        disabled={item.is_required}
                                        onCheckedChange={(checked) => {
                                          const newValue = [...field.value];
                                          newValue[groupIndex] = [
                                            ...newValue[groupIndex],
                                          ];
                                          newValue[groupIndex][itemIndex] = {
                                            ...newValue[groupIndex][itemIndex],
                                            checked: !!checked,
                                          };
                                          field.onChange(newValue);
                                        }}
                                      />
                                      <label
                                        htmlFor={`sub-${groupIndex}-${itemIndex}`}
                                        className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 ms-1"
                                      >
                                        {item.subCategory}
                                      </label>
                                    </div>
                                  ),
                                )}
                              </div>
                            ),
                          )}
                        </div>
                      )}
                    </div>
                    <FormMessage />
                  </FormItem>
                )}
              />
            </div>

            <div className="grid sm:grid-cols-2 gap-4">
              {/* Sample Urgent or Not */}
              <FormField
                control={form.control}
                name="sampleUrgencies"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>{t('requests.labels.request_status')}</FormLabel>
                    <FormControl>
                      <Input
                        {...field}
                        readOnly
                        className="bg-muted cursor-not-allowed"
                        value={t(`requests.urgencies.${field.value}`)}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

              {/* Sample Date & Time */}
              <FormField
                control={form.control}
                name="dateTime"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>{t('requests.labels.date_&_time')}</FormLabel>
                    <CustomDateTimePicker
                      disabled={isUrgent}
                      value={field.value}
                      timeStart="08:00"
                      timeEnd="17:00"
                      onChange={(handleDateTime) =>
                        field.onChange(handleDateTime)
                      }
                    />
                    <FormMessage />
                    {isUrgent && (
                      <p className="text-sm text-muted-foreground">
                        {t('requests.messages.auto_set_current_time')}
                      </p>
                    )}
                  </FormItem>
                )}
              />
            </div>

            {/* Sample Location Text */}
            <FormField
              control={form.control}
              name="sampleLocation"
              render={({ field }) => (
                <FormItem className="flex-1">
                  <FormLabel>{t('requests.labels.sample_location')}</FormLabel>
                  <FormControl>
                    <Input
                      placeholder={t('requests.placeholders.sample_location')}
                      {...field}
                    />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            {/* Sample Location map */}
            <FormField
              control={form.control}
              name="lat"
              render={() => (
                <FormItem>
                  <FormLabel>
                    {t('requests.labels.pin_sample_location')}
                  </FormLabel>
                  <LocationPicker
                    value={{
                      lat: form.getValues('lat'),
                      lon: form.getValues('lon'),
                    }}
                    onChange={(pos) => {
                      form.setValue('lat', pos.lat);
                      form.setValue('lon', pos.lon);
                    }}
                  />
                  <FormMessage />
                </FormItem>
              )}
            />

            {submitError && (
              <div className="p-3 mb-2 text-sm font-medium text-destructive bg-destructive/10 border border-destructive/20 rounded-lg animate-in fade-in slide-in-from-top-1">
                {submitError}
              </div>
            )}

            <Button type="submit" className="w-full" disabled={isSubmitting}>
              {isSubmitting ? (
                <span className="flex items-center gap-2">
                  <span className="h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
                  {t('requests.buttons.submitting') || 'Submitting...'}
                </span>
              ) : (
                t('requests.buttons.submit')
              )}
            </Button>
          </form>
        </Form>

        {/* ✅ Confirmation Dialog */}
        <AlertDialog
          open={openDialog}
          onOpenChange={(open) => {
            setOpenDialog(open);
            if (!open) {
              setLocationConfirmed(false);
              setLocationConfirmError('');
              setPendingData(null);
            }
          }}
        >
          <AlertDialogContent dir={dir}>
            <AlertDialogHeader>
              <AlertDialogTitle className=" rtl:text-right">
                {t('requests.confirm.title')}
              </AlertDialogTitle>
              <AlertDialogDescription className=" rtl:text-right">
                {t('requests.confirm.description')}
              </AlertDialogDescription>
              <div className="mt-2 space-y-2 rtl:text-right">
                <div className="flex items-start gap-2">
                  <Checkbox
                    id="confirm-location"
                    checked={locationConfirmed}
                    onCheckedChange={(v) => {
                      setLocationConfirmed(!!v);
                      if (v) setLocationConfirmError('');
                    }}
                  />
                  <label
                    htmlFor="confirm-location"
                    className="text-sm leading-snug"
                  >
                    {t('requests.confirm.location_checkbox')}
                  </label>
                </div>

                {locationConfirmError && (
                  <p className="text-sm text-destructive">
                    {locationConfirmError}
                  </p>
                )}

                {submitError && (
                  <p className="text-sm text-destructive font-medium bg-destructive/10 p-2 rounded-md">
                    {submitError}
                  </p>
                )}
              </div>
            </AlertDialogHeader>
            <AlertDialogFooter>
              <AlertDialogCancel disabled={isSubmitting}>
                {t('requests.buttons.cancel')}
              </AlertDialogCancel>
              <AlertDialogAction
                variant="primary"
                disabled={isSubmitting}
                onClick={(e) => {
                  if (!locationConfirmed) {
                    e.preventDefault();
                    setLocationConfirmError(
                      t('requests.confirm.location_error'), // e.g. "Please confirm the sample location."
                    );
                    return;
                  }

                  handleConfirmSubmit();
                }}
              >
                {isSubmitting
                  ? t('requests.buttons.submitting') || 'Submitting...'
                  : t('requests.buttons.confirm')}
              </AlertDialogAction>
            </AlertDialogFooter>
          </AlertDialogContent>
        </AlertDialog>
      </CardContent>
    </Card>
  );
}