'use client';

import React, { useEffect, useRef, useState } from 'react';
import { useSearchParams } from 'next/navigation';
import { zodResolver } from '@hookform/resolvers/zod';
import { useQuery } from '@tanstack/react-query';
import jsQR from 'jsqr';
import {
  AlertCircle,
  CheckCircle,
  Plus,
  ScanLine,
  Trash,
  Upload,
} from 'lucide-react';
import * as pdfjsLib from 'pdfjs-dist';
import { useFieldArray, useForm, useWatch } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import pdfToText from 'react-pdftotext';
import { toast } from 'sonner';
import { apiClient } from '@/lib/api';
import { useLanguage } from '@/providers/i18n-provider';
import { Alert, AlertDescription } from '@/components/ui/alert';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
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 { extractPermitData } from '@/app/actions/extract-permit-data';
import { PermitFormData, permitSchema } from '../form/new-permit-schema';

// Set worker source for pdfjs
pdfjsLib.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjsLib.version}/build/pdf.worker.min.mjs`;

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

interface BackendResponse<T> {
  success: boolean;
  data: T;
  message: string;
}

// API fetch functions
async function fetchProjects(): Promise<BackendItem[]> {
  const response = await apiClient.get<BackendResponse<BackendItem[]>>(
    '/contractor/select-options/projects',
    { requireAuth: true },
  );
  return response.data.data;
}

async function fetchZones(): Promise<BackendItem[]> {
  const response = await apiClient.get<BackendResponse<BackendItem[]>>(
    '/contractor/select-options/areas',
    { requireAuth: true },
  );
  return response.data.data;
}

async function fetchServiceTypes(): Promise<BackendItem[]> {
  const response = await apiClient.get<BackendResponse<BackendItem[]>>(
    '/contractor/select-options/service-types',
    { requireAuth: true },
  );
  return response.data.data;
}
export default function ScanQrWorkPermitForm() {
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState('');
  const [success, setSuccess] = useState(false);
  const [uploadedFile, setUploadedFile] = useState<File | null>(null);
  const [extractedUrl, setExtractedUrl] = useState<string | null>(null);
  const [extractedFields, setExtractedFields] = useState<Set<string>>(
    new Set(),
  );
  const [initialProjectName, setInitialProjectName] = useState<string | null>(
    null,
  );
  const { dir } = useLanguage();
  const { t } = useTranslation();
  const searchParams = useSearchParams();
  const projectIdFromUrl = searchParams.get('projectId');

  const canvasRef = useRef<HTMLCanvasElement>(null);
  // Use ref to track extracted fields to avoid state closure issues
  const extractedFieldsRef = useRef<Set<string>>(new Set());
  // Track if project name was set from URL to avoid re-setting
  const projectNameSetFromUrlRef = useRef(false);

  // Fetch data using useQuery
  const { data: projectsData } = useQuery({
    queryKey: ['projects'],
    queryFn: fetchProjects,
  });

  const { data: zonesData } = useQuery({
    queryKey: ['zones'],
    queryFn: fetchZones,
  });

  const { data: serviceTypesData } = useQuery({
    queryKey: ['serviceTypes'],
    queryFn: fetchServiceTypes,
  });

  const form = useForm<PermitFormData>({
    resolver: zodResolver(permitSchema(t)),
    defaultValues: {
      projectName: '',
      permitNumber: '',
      serviceType: '',
      zoneName: '',
      statmentUrgencies: '',
      workStartDate: '',
      workEndDate: '',
      pathCodes: [{ route_code: '', start_point: '', end_point: '' }],
    },
  });

  const { fields, append, remove } = useFieldArray({
    control: form.control,
    name: 'pathCodes',
  });

  // Set project name from URL projectId when available
  // Only set if projectName hasn't been extracted from PDF yet (extracted data has priority)
  useEffect(() => {
    // Check if projectName was already extracted (from PDF) - if so, don't override
    if (extractedFieldsRef.current.has('projectName') || projectNameSetFromUrlRef.current) {
      return;
    }

    if (projectIdFromUrl && projectsData && projectsData.length > 0) {
      const projectId = Number(projectIdFromUrl);
      // Find the project by ID
      const matchingProject = projectsData.find((p) => p.id === projectId);
      
      if (matchingProject) {
        // Mark that we've set project name from URL
        projectNameSetFromUrlRef.current = true;
        
        // Use the exact trimmed name from projectsData to ensure it matches SelectItem value
        const projectName = matchingProject.name.trim();
        const currentFormValue = form.getValues('projectName');
        
        // Only set if not already set or if different
        if (!initialProjectName || initialProjectName !== projectName) {
          setInitialProjectName(projectName);
        }
        
        // Set the form value if it's different
        if (currentFormValue !== projectName) {
          form.setValue('projectName', projectName, {
            shouldValidate: true,
            shouldDirty: false,
            shouldTouch: false,
          });
        }
        
        // Mark projectName as extracted so it's disabled
        // Only update ref, not state, to avoid dependency issues
        const newExtractedFields = new Set(extractedFieldsRef.current);
        newExtractedFields.add('projectName');
        extractedFieldsRef.current = newExtractedFields;
        // Update state separately to trigger UI update
        setExtractedFields(newExtractedFields);
      }
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [projectIdFromUrl, projectsData]);

  // Helper to parse Arabic PDF text
  const parseArabicPdfData = (text: string): Partial<PermitFormData> => {
    const normalizeArabic = (str: string) => {
      const map: Record<string, string> = {
        ﺍ: 'ا',
        ﺎ: 'ا',
        ﺃ: 'أ',
        ﺄ: 'أ',
        ﺇ: 'إ',
        ﺈ: 'إ',
        ﺁ: 'آ',
        ﺂ: 'آ',
        ﺀ: 'ء',
        ﺏ: 'ب',
        ﺐ: 'ب',
        ﺑ: 'ب',
        ﺒ: 'ب',
        ﺕ: 'ت',
        ﺖ: 'ت',
        ﺗ: 'ت',
        ﺘ: 'ت',
        ﺙ: 'ث',
        ﺚ: 'ث',
        ﺛ: 'ث',
        ﺜ: 'ث',
        ﺝ: 'ج',
        ﺞ: 'ج',
        ﺟ: 'ج',
        ﺠ: 'ج',
        ﺡ: 'ح',
        ﺢ: 'ح',
        ﺣ: 'ح',
        ﺤ: 'ح',
        ﺥ: 'خ',
        ﺦ: 'خ',
        ﺧ: 'خ',
        ﺨ: 'خ',
        ﺩ: 'د',
        ﺪ: 'د',
        ﺫ: 'ذ',
        ﺬ: 'ذ',
        ﺭ: 'ر',
        ﺮ: 'ر',
        ﺯ: 'ز',
        ﺰ: 'ز',
        ﺱ: 'س',
        ﺲ: 'س',
        ﺳ: 'س',
        ﺴ: 'س',
        ﺵ: 'ش',
        ﺶ: 'ش',
        ﺷ: 'ش',
        ﺸ: 'ش',
        ﺹ: 'ص',
        ﺺ: 'ص',
        ﺻ: 'ص',
        ﺼ: 'ص',
        ﺽ: 'ض',
        ﺾ: 'ض',
        ﺿ: 'ض',
        ﻀ: 'ض',
        ﻁ: 'ط',
        ﻂ: 'ط',
        ﻃ: 'ط',
        ﻄ: 'ط',
        ﻅ: 'ظ',
        ﻆ: 'ظ',
        ﻇ: 'ظ',
        ﻈ: 'ظ',
        ﻉ: 'ع',
        ﻊ: 'ع',
        ﻋ: 'ع',
        ﻌ: 'ع',
        ﻍ: 'غ',
        ﻎ: 'غ',
        ﻏ: 'غ',
        ﻐ: 'غ',
        ﻑ: 'ف',
        ﻒ: 'ف',
        ﻓ: 'ف',
        ﻔ: 'ف',
        ﻕ: 'ق',
        ﻖ: 'ق',
        ﻗ: 'ق',
        ﻘ: 'ق',
        ﻙ: 'ك',
        ﻚ: 'ك',
        ﻛ: 'ك',
        ﻜ: 'ك',
        ﻝ: 'ل',
        ﻞ: 'ل',
        ﻟ: 'ل',
        ﻠ: 'ل',
        ﻡ: 'م',
        ﻢ: 'م',
        ﻣ: 'م',
        ﻤ: 'م',
        ﻥ: 'ن',
        ﻦ: 'ن',
        ﻧ: 'ن',
        ﻨ: 'ن',
        ﻩ: 'ه',
        ﻪ: 'ه',
        ﻫ: 'ه',
        ﻬ: 'ه',
        ﺓ: 'ة',
        ﺔ: 'ة',
        ﻭ: 'و',
        ﻮ: 'و',
        ﻯ: 'ى',
        ئ: 'ئ',
        ﻰ: 'ى',
        ﻱ: 'ي',
        ﻲ: 'ي',
        ﻳ: 'ي',
        ﻴ: 'ي',
        ﺉ: 'ئ',
        ﺋ: 'ئ',
        ﺆ: 'ؤ',
        ﺅ: 'ؤ',
        ﻻ: 'لا',
        ﻼ: 'لا',
      };
      return str
        .split('')
        .map((char) => map[char] || char)
        .join('');
    };

    const cleanText = normalizeArabic(text).replace(/\s+/g, ' ').trim();
    console.log('Cleaned PDF Text:', cleanText);

    // Permit Number (User request: find after specific phrase)
    const permitNumberMatch = cleanText.match(/حتى لا تتعرض للمخالفة\s+(\d+)/);
    const permitNumber = permitNumberMatch
      ? permitNumberMatch[1]
      : cleanText.match(/\d{12,13}/)?.[0] || '';

    let serviceType = '';
    let statmentUrgencies = '';

    // Unified extraction from Title: "تصريح" [Service] [Urgency]
    // Includes "طارﺉ" (U+FE89) for unnormalized cases
    const titleMatch = cleanText.match(
      /تصريح\s+([\u0600-\u06FF\s]+?)\s+(عادي|طارئ|طارى|طارء|طارﺉ)/i,
    );

    if (titleMatch) {
      serviceType = titleMatch[1].trim();
      statmentUrgencies = titleMatch[2].trim();
    } else {
      // Fallbacks if title regex fails
      const serviceMatch = cleanText.match(
        /تصريح\s+([\u0600-\u06FF\s]+?)(?=\s+(?:عادي|طارئ|طارى|طارء|طارﺉ))/i,
      );
      if (serviceMatch) serviceType = serviceMatch[1].trim();

      const urgencyMatch = cleanText.match(/(عادي|طارئ|طارى|طارء|طارﺉ)/);
      console.log('Urgency Match:', urgencyMatch);
      if (urgencyMatch) statmentUrgencies = urgencyMatch[1];
    }

    // Normalize Urgency Value to standard spelling
    if (['طارى', 'طارء', 'طارﺉ'].includes(statmentUrgencies)) {
      statmentUrgencies = 'طارئ';
    }

    return { permitNumber, serviceType, statmentUrgencies };
  };

  const extractTextFromPdf = async (file: File) => {
    try {
      const text = await pdfToText(file);
      const extractedData = parseArabicPdfData(text);
      console.log('✅ PDF Text Extracted:', extractedData);

      const newExtractedFields = new Set(extractedFieldsRef.current);

      // Populate fields from PDF Text
      if (extractedData.permitNumber) {
        form.setValue('permitNumber', extractedData.permitNumber);
        newExtractedFields.add('permitNumber');
      }
      if (extractedData.serviceType) {
        form.setValue('serviceType', extractedData.serviceType);
        newExtractedFields.add('serviceType');
      }
      if (extractedData.statmentUrgencies) {
        form.setValue('statmentUrgencies', extractedData.statmentUrgencies);
        newExtractedFields.add('statmentUrgencies');
      }

      // Update both ref and state
      extractedFieldsRef.current = newExtractedFields;
      setExtractedFields(newExtractedFields);
    } catch (err) {
      console.error('Error parsing PDF text:', err);
      // Non-blocking error, QR might still work
    }
  };

  const extractQrFromPdf = async (file: File) => {
    setIsLoading(true);
    setError('');
    setSuccess(false);
    setExtractedUrl(null);

    // 1. Run Text Extraction (Targeting Permit #, Urgency)
    extractTextFromPdf(file);

    // 2. Run QR Extraction (Targeting URL -> Project, Dates)
    try {
      const arrayBuffer = await file.arrayBuffer();
      const pdf = await pdfjsLib.getDocument({ data: arrayBuffer }).promise;
      const page = await pdf.getPage(1); // Get the first page

      const viewport = page.getViewport({ scale: 2.0 }); // Scale up for better QR detection
      const canvas = canvasRef.current;
      if (!canvas) {
        throw new Error('Canvas not found');
      }

      const context = canvas.getContext('2d', { willReadFrequently: true });
      if (!context) {
        throw new Error('Canvas context not found');
      }

      canvas.height = viewport.height;
      canvas.width = viewport.width;

      await page.render({
        canvasContext: context,
        viewport: viewport,
      }).promise;

      // Only scan the top half of the page to avoid picking up footer QR codes
      const scanHeight = canvas.height / 2;
      const imageData = context.getImageData(0, 0, canvas.width, scanHeight);
      const code = jsQR(imageData.data, imageData.width, scanHeight);

      if (code) {
        console.log('✅ QR Code found:', code.data);
        setExtractedUrl(code.data);
        await simulateDataFetching(code.data);
        setSuccess(true);
      } else {
        // Warning instead of error if QR not found, as text might have been extracted
        console.warn('No QR code found in the top half of the document');
        // We set error only if we really depend on QR, but user wants hybrid.
        // Let's keep it as error if user expects QR scanning.
        throw new Error(
          t('work_permit.errors.qr_not_found') ||
            'No QR code found in the document',
        );
      }
    } catch (err: any) {
      console.error('❌ Error:', err);
      // Clean up error message to be more user friendly
      let message = err.message;
      if (err.name === 'MissingPDFException') {
        message = 'Invalid PDF file';
      }
      setError(message);
    } finally {
      setIsLoading(false);
    }
  };

  const simulateDataFetching = async (url: string) => {
    console.log(`Extracting data from: ${url}`);

    try {
      const result = await extractPermitData(url);

      if (result.success && result.data) {
        console.log('Extracted Data:', result.data);
        const { projectName, workStartDate, workEndDate, zoneName, pathCodes } =
          result.data;

        const newExtractedFields = new Set(extractedFieldsRef.current);

        // Set values from extraction
        // We do NOT set permitNumber as per instructions
        // We map the values we found

        if (projectName) {
          // Extracted project name always takes priority over URL project name
          form.setValue('projectName', projectName, {
            shouldValidate: true,
            shouldDirty: false,
            shouldTouch: false,
          });
          // Update initialProjectName to the extracted value so it displays correctly
          setInitialProjectName(projectName);
          newExtractedFields.add('projectName');
        }
        if (workStartDate) {
          form.setValue('workStartDate', workStartDate);
          newExtractedFields.add('workStartDate');
        }
        if (workEndDate) {
          form.setValue('workEndDate', workEndDate);
          newExtractedFields.add('workEndDate');
        }
        if (zoneName) {
          form.setValue('zoneName', zoneName);
          newExtractedFields.add('zoneName');
        }
        // Use generic setValue for complex/new fields if they exist
        if (pathCodes && pathCodes.length > 0) {
          // we need to replace the field array.
          // The simplest way for useFieldArray is often to setValue, but sometimes 'replace' from destructuring useFieldArray is better.
          // But form.setValue('pathCodes', ...) works with RHF usually.
          form.setValue('pathCodes', pathCodes);
          newExtractedFields.add('pathCodes');
        }

        // Update both ref and state
        extractedFieldsRef.current = newExtractedFields;
        setExtractedFields(newExtractedFields);

        // Service Type comes from PDF, so we don't overwrite it here unless we have better data.
        // User explicitly said "Service Type: Confirm it is extracted from the PDF and not the QR code".
        // So we do NOT set it here.
      } else {
        throw new Error('Failed to extract data from the page');
      }
    } catch (e) {
      console.error('Extraction failed, falling back to mock (or error):', e);
      // Fallback for testing if server action fails (e.g. locally without access)
      // but user asked to read data.
      setError('Could not fetch data from the provided URL.');
    }
  };

  const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;

    if (file.type === 'application/pdf') {
      setUploadedFile(file);
      extractQrFromPdf(file);
    } else {
      setError(
        t('work_permit.errors.invalid_file') ||
          'Please upload a valid PDF file',
      );
    }
  };

  const onSubmit = async (data: PermitFormData) => {
    if (!uploadedFile) {
      // Fallback or alert
    }

    // Prepare data for backend submission
    const normalize = (text: string) => text.replace(/\s+/g, ' ').trim();

    const projectId = projectsData?.find(
      (p) => normalize(p.name) === normalize(data.projectName),
    )?.id;
    const zoneId = zonesData?.find(
      (z) => normalize(z.name) === normalize(data.zoneName),
    )?.id;
    const serviceTypeId = serviceTypesData?.find(
      (s) => normalize(s.name) === normalize(data.serviceType),
    )?.id;

    const isUrgent = data.statmentUrgencies === 'طارئ';

    const submissionData = {
      permit_number: data.permitNumber,
      project_id: projectId,
      service_type_id: serviceTypeId,
      area_id: zoneId,
      type: isUrgent,
      issue_date: data.workStartDate.replace(/\//g, '-'),
      expiry_date: data.workEndDate.replace(/\//g, '-'),
      routes: data.pathCodes,
    };

    console.log('Submission Data:', submissionData);

    try {
      setIsLoading(true);
      await apiClient.post('/contractor/permits', submissionData, {
        requireAuth: true,
      });

      toast.success(
        t('work_permit.success_message') || 'Permit submitted successfully',
      );
      setSuccess(true);
      form.reset();
      setUploadedFile(null);
      setExtractedUrl(null);
      setExtractedFields(new Set());
      extractedFieldsRef.current = new Set();
    } catch (error: any) {
      console.error('Submission error:', error);
      toast.error(
        error.message ||
          t('work_permit.errors.submission_failed') ||
          'Failed to submit permit',
      );
      setError(error.message || 'Failed to submit permit');
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <ScanLine className="w-6 h-6" />
          {t('work_permit.form_title')}
        </CardTitle>
      </CardHeader>
      <CardContent>
        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-5">
            {/* File Upload Area */}
            <div>
              <label className="flex flex-col items-center justify-center w-full h-48 border-2 border-dashed rounded-lg cursor-pointer bg-muted/50 hover:bg-muted transition-colors">
                <div className="flex flex-col items-center justify-center pt-5 pb-6">
                  <Upload className="w-12 h-12 text-muted-foreground mb-3" />
                  <p className="mb-2 text-lg">
                    <span className="font-semibold">
                      {t('work_permit.file_upload')}
                    </span>
                  </p>
                  <p className="text-sm text-muted-foreground">
                    Upload PDF with QR Code
                  </p>
                </div>
                <input
                  type="file"
                  className="hidden"
                  accept=".pdf"
                  onChange={handleFileUpload}
                  disabled={isLoading}
                />
              </label>
            </div>

            {/* Hidden Canvas for QR scanning */}
            <canvas ref={canvasRef} className="hidden" />

            {/* Loading State */}
            {isLoading && (
              <Alert>
                <div className="flex items-center">
                  <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-primary ml-3"></div>
                  <AlertDescription>
                    {t('work_permit.extracting_data')}
                  </AlertDescription>
                </div>
              </Alert>
            )}

            {/* Error State */}
            {error && (
              <Alert variant="destructive">
                <AlertCircle className="h-4 w-4" />
                <AlertDescription>{error}</AlertDescription>
              </Alert>
            )}

            {/* Success State */}
            {success && (
              <Alert className="border-green-200 bg-green-50 text-green-900 flex items-center">
                <CheckCircle className="h-4 w-4 text-green-600" />
                <div className="flex flex-col">
                  <AlertDescription>
                    {t('work_permit.data_extracted_successfully')}
                  </AlertDescription>
                  {extractedUrl && (
                    <a
                      href={extractedUrl}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="text-xs text-blue-600 underline mt-1"
                    >
                      {extractedUrl}
                    </a>
                  )}
                </div>
              </Alert>
            )}

            {/* Form Fields */}
            <div className="grid sm:grid-cols-2 gap-4">
              <FormField
                control={form.control}
                name="permitNumber"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel> {t('work_permit.permit_number')}</FormLabel>
                    <FormControl>
                      <Input
                        placeholder={t('work_permit.permit_number')}
                        {...field}
                        disabled={
                          extractedFields.has('permitNumber') && !!field.value
                        }
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <FormField
                key={`project-${initialProjectName || 'no-project'}`}
                control={form.control}
                name="projectName"
                render={({ field }) => {
                  // Ensure value is set from initialProjectName if available
                  const displayValue = initialProjectName || field.value || '';
                  return (
                    <FormItem>
                      <FormLabel>{t('work_permit.project_name')} </FormLabel>
                      <Select
                        dir={dir}
                        onValueChange={field.onChange}
                        value={displayValue}
                        disabled={
                          (extractedFields.has('projectName') && !!field.value) ||
                          !!projectIdFromUrl
                        }
                      >
                        <FormControl>
                          <SelectTrigger>
                            <SelectValue
                              placeholder={t(
                                'work_permit.placeholders.select_project',
                              )}
                            />
                          </SelectTrigger>
                        </FormControl>
                        <SelectContent>
                          {projectsData?.map((project) => (
                            <SelectItem
                              key={project.id}
                              value={project.name.trim()}
                            >
                              {project.name.trim()}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                      <FormMessage />
                    </FormItem>
                  );
                }}
              />
            </div>

            <div className="grid sm:grid-cols-2 gap-4">
              <FormField
                control={form.control}
                name="serviceType"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel> {t('work_permit.service_type')}</FormLabel>
                    <Select
                      dir={dir}
                      onValueChange={field.onChange}
                      value={field.value}
                      disabled={
                        extractedFields.has('serviceType') && !!field.value
                      }
                    >
                      <FormControl>
                        <SelectTrigger>
                          <SelectValue
                            placeholder={t('work_permit.service_type')}
                          />
                        </SelectTrigger>
                      </FormControl>
                      <SelectContent>
                        {serviceTypesData?.map((service) => (
                          <SelectItem key={service.id} value={service.name}>
                            {service.name}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                    <FormMessage />
                  </FormItem>
                )}
              />

              <FormField
                control={form.control}
                name="statmentUrgencies"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>{t('work_permit.request_status')}</FormLabel>
                    <Select
                      dir={dir}
                      onValueChange={field.onChange}
                      value={field.value}
                      disabled={
                        extractedFields.has('statmentUrgencies') &&
                        !!field.value
                      }
                    >
                      <FormControl>
                        <SelectTrigger>
                          <SelectValue
                            placeholder={t(
                              'work_permit.placeholders.request_status',
                            )}
                          />
                        </SelectTrigger>
                      </FormControl>
                      <SelectContent>
                        <SelectItem value="عادي">عادي</SelectItem>
                        <SelectItem value="طارئ">طارئ</SelectItem>
                      </SelectContent>
                    </Select>
                    <FormMessage />
                  </FormItem>
                )}
              />
            </div>
            <FormField
              control={form.control}
              name="zoneName"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>{t('work_permit.zone_name')} </FormLabel>
                  <Select
                    dir={dir}
                    onValueChange={field.onChange}
                    value={field.value}
                    disabled={extractedFields.has('zoneName') && !!field.value}
                  >
                    <FormControl>
                      <SelectTrigger>
                        <SelectValue
                          placeholder={t(
                            'work_permit.placeholders.select_zone',
                          )}
                        />
                      </SelectTrigger>
                    </FormControl>
                    <SelectContent>
                      {zonesData?.map((zone) => (
                        <SelectItem key={zone.id} value={zone.name}>
                          {zone.name}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                  <FormMessage />
                </FormItem>
              )}
            />
            <div className="grid sm:grid-cols-2 gap-4">
              <FormField
                control={form.control}
                name="workStartDate"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>{t('work_permit.work_start_date')}</FormLabel>
                    <FormControl>
                      <Input
                        placeholder={t('work_permit.work_start_date')}
                        {...field}
                        disabled={
                          extractedFields.has('workStartDate') && !!field.value
                        }
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <FormField
                control={form.control}
                name="workEndDate"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>{t('work_permit.work_end_date')}</FormLabel>
                    <FormControl>
                      <Input
                        placeholder={t('work_permit.work_end_date')}
                        {...field}
                        disabled={
                          extractedFields.has('workEndDate') && !!field.value
                        }
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
            </div>

            {/* Path Codes */}
            <div className="space-y-4">
              <div className="flex items-center justify-between">
                <h3 className="text-lg font-medium">كود المسار</h3>
                {!extractedFields.has('pathCodes') && (
                  <Button
                    type="button"
                    variant="outline"
                    size="sm"
                    onClick={() =>
                      append({ route_code: '', start_point: '', end_point: '' })
                    }
                  >
                    <Plus className="w-4 h-4 mr-2" />
                    إضافة مسار
                  </Button>
                )}
              </div>
              {fields.map((field, index) => (
                <div
                  key={field.id}
                  className="border p-4 rounded-lg mb-4 space-y-4"
                >
                  <div className="flex gap-4 items-center">
                    <FormField
                      control={form.control}
                      name={`pathCodes.${index}.route_code`}
                      render={({ field }) => (
                        <FormItem className="flex-1">
                          <FormLabel>رمز المسار</FormLabel>
                          <div className="flex items-center gap-2">
                            <FormControl>
                              <Input
                                placeholder="A1"
                                {...field}
                                disabled={
                                  extractedFields.has('pathCodes') &&
                                  !!field.value
                                }
                              />
                            </FormControl>
                            {!extractedFields.has('pathCodes') && (
                              <Button
                                type="button"
                                variant="ghost"
                                size="icon"
                                onClick={() => remove(index)}
                              >
                                <Trash className="w-4 h-4 text-destructive" />
                              </Button>
                            )}
                          </div>
                          <FormMessage />
                        </FormItem>
                      )}
                    />
                  </div>

                  <div className="grid sm:grid-cols-2 gap-4">
                    <FormField
                      control={form.control}
                      name={`pathCodes.${index}.start_point`}
                      render={({ field }) => (
                        <FormItem>
                          <FormLabel>نقطة البداية (Lat, Long)</FormLabel>
                          <FormControl>
                            <Input
                              placeholder="24.7136, 46.6753"
                              {...field}
                              disabled={
                                extractedFields.has('pathCodes') &&
                                !!field.value
                              }
                            />
                          </FormControl>
                          <FormMessage />
                        </FormItem>
                      )}
                    />
                    <FormField
                      control={form.control}
                      name={`pathCodes.${index}.end_point`}
                      render={({ field }) => (
                        <FormItem>
                          <FormLabel>نقطة النهاية (Lat, Long)</FormLabel>
                          <FormControl>
                            <Input
                              placeholder="24.7136, 46.6753"
                              {...field}
                              disabled={
                                extractedFields.has('pathCodes') &&
                                !!field.value
                              }
                            />
                          </FormControl>
                          <FormMessage />
                        </FormItem>
                      )}
                    />
                  </div>
                </div>
              ))}
            </div>

            {/* Action Buttons */}
            <div className="flex gap-4">
              <Button type="submit" className="flex-1">
                {t('work_permit.buttons.saveData')}
              </Button>
            </div>
          </form>
        </Form>
      </CardContent>
    </Card>
  );
}