'use client';

import React, { useState } from 'react';
import { zodResolver } from '@hookform/resolvers/zod';
import { AlertCircle, CheckCircle, Upload } from 'lucide-react';
import { useForm } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import pdfToText from 'react-pdftotext';
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 { PermitFormData, permitSchema } from '../form/new-permit-schema';

export default function NewWorkPermitForm() {
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState('');
  const [success, setSuccess] = useState(false);
  const [uploadedFile, setUploadedFile] = useState<File | null>(null);
  const { dir } = useLanguage();
  const { t } = useTranslation();
  const form = useForm<PermitFormData>({
    resolver: zodResolver(permitSchema(t)),
    defaultValues: {
      projectName: '',
      permitNumber: '',
      serviceType: '',
      statmentUrgencies: '',
      workStartDate: '',
      workEndDate: '',
    },
  });

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

    try {
      const text = await pdfToText(file);
      const extractedData = parseArabicPdfData(text);
      console.log('✅ Parsed data:', extractedData);

      let filledCount = 0;
      Object.entries(extractedData).forEach(([key, value]) => {
        if (typeof value === 'string' && value.trim()) {
          form.setValue(key as keyof PermitFormData, value);
          filledCount++;
        }
      });

      console.log(`🎯 Filled ${filledCount} fields`);
      setSuccess(true);
    } catch (err: any) {
      console.error('❌ Error:', err);
      setError(`فشل في استخراج البيانات: ${err.message}`);
    } finally {
      setIsLoading(false);
    }
  };

  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();

    const permitNumber = cleanText.match(/\d{12,13}/)?.[0] || '';

    let serviceType = '';
    const serviceMatch = cleanText.match(
      /تصريح\s+([\u0600-\u06FF\s]+?)(?=\s+(?:عادي|طار[ئء]))/i,
    );
    if (serviceMatch) {
      serviceType = serviceMatch[1];
    }

    let statmentUrgencies = '';
    const urgencyMatch = cleanText.match(/(عادي|طار[ئء]|طارى|طارء)/);
    if (urgencyMatch) {
      statmentUrgencies = urgencyMatch[1].replace(/طار[ءىئ]/, 'طارئ');
    }

    let workStartDate = '';
    const startDateMatch = cleanText.match(
      /تاريخ\s+بدء\s+العمل\s+\d{2}:\d{2}\s+(\d{4}\/\d{2}\/\d{2})/i,
    );
    if (startDateMatch) {
      workStartDate = startDateMatch[1];
    }

    let workEndDate = '';
    const endDateMatch = cleanText.match(
      /تاريخ\s+انتهاء\s+العمل\s+\d{2}:\d{2}\s+(\d{4}\/\d{2}\/\d{2})/i,
    );
    if (endDateMatch) {
      workEndDate = endDateMatch[1];
    }

    const data = {
      permitNumber,
      serviceType,
      statmentUrgencies,
      workStartDate,
      workEndDate,
    };

    console.log('📊 Extraction results:');
    Object.entries(data).forEach(([key, value]) => {
      if (value) {
        console.log(`  ✓ ${key}: "${value}"`);
      } else {
        console.log(`  ✗ ${key}: (not found)`);
      }
    });

    return data;
  };

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

    if (file.type === 'application/pdf') {
      setUploadedFile(file);
      extractDataFromPdf(file);
    } else {
      setError('الرجاء تحميل ملف PDF صالح');
    }
  };
  const onSubmit = async (data: PermitFormData) => {
    if (!uploadedFile) {
      alert('الرجاء تحميل ملف PDF قبل الإرسال');
      return;
    }

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

    const formData = new FormData();
    Object.entries(data).forEach(([key, value]) => {
      if (typeof value === 'string') {
        formData.append(key, value || '');
      } else if (value !== undefined && value !== null) {
        // Determine how to send complex types. For now, stringify or append indices.
        // Based on legacy behavior, we might just want to append them as JSON string
        // or handle specific keys if the backend expects them.
        // For safety to stop the crash:
        formData.append(key, JSON.stringify(value));
      }
    });
    formData.append('isUrgent', String(isUrgent));
    formData.append('pdfFile', uploadedFile);

    console.log('📦 Sending data:', Object.fromEntries(formData.entries()));

    // try {
    //   const res = await fetch('/api/permits', {
    //     method: 'POST',
    //     body: formData,
    //   });
    //   if (!res.ok) throw new Error('فشل في إرسال البيانات');
    //   alert('تم حفظ البيانات بنجاح!');
    // } catch (error) {
    //   console.error(error);
    //   alert('حدث خطأ أثناء الإرسال');
    // }
  };
  return (
    <Card>
      <CardHeader>
        <CardTitle>{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>
                </div>
                <input
                  type="file"
                  className="hidden"
                  accept=".pdf"
                  onChange={handleFileUpload}
                  disabled={isLoading}
                />
              </label>
            </div>

            {/* 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>جاري استخراج البيانات...</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">
                <CheckCircle className="h-4 w-4 text-green-600" />
                <AlertDescription>تم استخراج البيانات بنجاح!</AlertDescription>
              </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}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <FormField
                control={form.control}
                name="projectName"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>{t('work_permit.project_name')} </FormLabel>
                    <Select
                      dir={dir}
                      onValueChange={field.onChange}
                      value={field.value}
                    >
                      <FormControl>
                        <SelectTrigger>
                          <SelectValue
                            placeholder={t(
                              'work_permit.placeholders.select_project',
                            )}
                          />
                        </SelectTrigger>
                      </FormControl>
                      <SelectContent>
                        <SelectItem value="Project-A">مشروع أ</SelectItem>
                        <SelectItem value="Project-B">مشروع ب</SelectItem>
                        <SelectItem value="Project-C">مشروع ج</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>
                    <FormControl>
                      <Input
                        placeholder={t('work_permit.service_type')}
                        {...field}
                      />
                    </FormControl>
                    <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}
                    >
                      <FormControl>
                        <SelectTrigger>
                          <SelectValue
                            placeholder={t(
                              'work_permit.placeholders.request_status',
                            )}
                          />
                        </SelectTrigger>
                      </FormControl>
                      <SelectContent>
                        <SelectItem value="عادي">عادي</SelectItem>
                        <SelectItem value="طارئ">طارئ</SelectItem>
                      </SelectContent>
                    </Select>
                    <FormMessage />
                  </FormItem>
                )}
              />
            </div>
            <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}
                      />
                    </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}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
            </div>
            {/* Action Buttons */}
            <div className="flex gap-4">
              <Button type="submit" className="flex-1">
                {t('work_permit.buttons.saveData')}
              </Button>
              {/* <Button
                type="button"
                variant="outline"
                onClick={() => form.reset()}
              >
                إعادة تعيين
              </Button> */}
            </div>
          </form>
        </Form>
      </CardContent>
    </Card>
  );
}