'use client';
import React, { useEffect, useState } from 'react';
import CustomerInfoSection from './CustomerInfoSection';
import SampleInfoSection from './SampleInfoSection';
import ServiceInfoSection from './ServiceInfoSection';
import BioinformaticsSection from './BioinformaticsSection';
import SampleDetailsSection from './SampleDetailsSection';

const SampleFormContainer = () => {
  const [formData, setFormData] = useState({
    Principal_Investigator: '', Email: '', Company_Institution: '', Contact_Number: '',
    Address: '', City: '', State: '', Pin: '', Secondary_Contact: '', Secondary_Email: '',
    Secondary_Company_Institution: '', Secondary_Contact_Number: '', Project_Title: '',
    Number_of_Samples: '', Sample_Type: '', Sample_Type_Other: '', Sample_Source: '',
    Sample_Source_Other: '', Pathogenicity: '', Sample_Remarks: '', Service_Requested: '',
    Service_Requested_Other: '', Type_of_Library: '', Type_of_Library_Other: '',
    Required_Library_Size: '', Required_Library_Size_Other: '', Index_Information: '',
    Kit_Information: '', Sequencing_Platform: '', Sequencing_Platform_Other: '',
    Sequencing_Read_Length: '', Sequencing_Read_Length_Other: '', Total_Data_Requirement: '',
    Service_Remarks: '', Analysis_Requested: '', Analysis_Details: '',
    Reference_Genome_Available: '', Genome_Size: '', Special_Consideration: ''
  });

  const [sampleDetails, setSampleDetails] = useState([{
    Serial_Number: '', Sample_Name: '', Storage_Temp: '',
    Preservative_Reagent: '', Temp_Information: '', Comments: ''
  }]);

  const [isSubmitting, setIsSubmitting] = useState(false);
  const [message, setMessage] = useState('');
  const [showSuccessModal, setShowSuccessModal] = useState(false);

  useEffect(() => {
    const excelData = sessionStorage.getItem('excelData');
    const uploadedFileName = sessionStorage.getItem('uploadedFileName');

    if (excelData) {
      try {
        const jsonData = JSON.parse(excelData);
        autoFillForm(jsonData);
        sessionStorage.removeItem('excelData');
        sessionStorage.removeItem('uploadedFileName');
        setMessage(`Form auto-filled from uploaded file: ${uploadedFileName}`);
      } catch (error) {
        console.error('Error parsing Excel data:', error);
      }
    }
  }, []);

  const autoFillForm = (jsonData) => {
    if (jsonData.length === 0) return;
    const data = jsonData[0];
    const newFormData = { ...formData };
    const getValue = (key) => data[key] ? data[key].toString().trim() : '';

    newFormData.Principal_Investigator = getValue('Principal Investigator');
    newFormData.Email = getValue('Email');
    newFormData.Company_Institution = getValue('Company/Institution');
    newFormData.Contact_Number = getValue('Contact Number');
    newFormData.Address = getValue('Address');
    newFormData.City = getValue('City');
    newFormData.State = getValue('State');
    newFormData.Pin = getValue('Pin');
    newFormData.Secondary_Contact = getValue('Secondary Contact');
    newFormData.Secondary_Email = getValue('Secondary Email');
    newFormData.Secondary_Company_Institution = getValue('Secondary Company/Institution');
    newFormData.Secondary_Contact_Number = getValue('Secondary Contact Number');

    newFormData.Project_Title = getValue('Project Title');
    newFormData.Number_of_Samples = getValue('Number of Samples');
    newFormData.Sample_Type = getValue('Sample Type');
    newFormData.Sample_Type_Other = getValue('Sample Type Other');
    newFormData.Sample_Source = getValue('Sample Source');
    newFormData.Sample_Source_Other = getValue('Sample Source Other');
    newFormData.Pathogenicity = getValue('Pathogenicity');
    newFormData.Sample_Remarks = getValue('Sample Remarks');

    newFormData.Service_Requested = getValue('Service Requested');
    newFormData.Service_Requested_Other = getValue('Service Requested Other');
    newFormData.Type_of_Library = getValue('Type of Library');
    newFormData.Type_of_Library_Other = getValue('Type of Library Other');
    newFormData.Required_Library_Size = getValue('Required Library Size');
    newFormData.Required_Library_Size_Other = getValue('Required Library Size Other');
    newFormData.Index_Information = getValue('Index Information');
    newFormData.Kit_Information = getValue('Kit Information');
    newFormData.Sequencing_Platform = getValue('Sequencing Platform');
    newFormData.Sequencing_Platform_Other = getValue('Sequencing Platform Other');
    newFormData.Sequencing_Read_Length = getValue('Sequencing Read Length');
    newFormData.Sequencing_Read_Length_Other = getValue('Sequencing Read Length Other');
    newFormData.Total_Data_Requirement = getValue('Total Data Requirement');
    newFormData.Service_Remarks = getValue('Service Remarks');

    newFormData.Analysis_Requested = getValue('Analysis Requested');
    newFormData.Analysis_Details = getValue('Analysis Details');
    newFormData.Reference_Genome_Available = getValue('Reference Genome Available');
    newFormData.Genome_Size = getValue('Genome Size');
    newFormData.Special_Consideration = getValue('Special Consideration');

    setFormData(newFormData);

    const sampleDetailsData = jsonData.filter(row =>
      row['Serial Number'] || row['Sample Name'] ||
      row['Storage Temp'] || row['Preservative Reagent'] ||
      row['Temp Information'] || row['Comments']
    );

    if (sampleDetailsData.length > 0) {
      const newSampleDetails = sampleDetailsData.map(sample => ({
        Serial_Number: sample['Serial Number'] || '',
        Sample_Name: sample['Sample Name'] || '',
        Storage_Temp: sample['Storage Temp'] || '',
        Preservative_Reagent: sample['Preservative Reagent'] || '',
        Temp_Information: sample['Temp Information'] || '',
        Comments: sample['Comments'] || ''
      }));
      setSampleDetails(newSampleDetails);
    }
  };

  const handleInputChange = (section, field, value) => {
    setFormData(prev => ({
      ...prev,
      [field]: value
    }));
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    setIsSubmitting(true);
    setMessage('');
    try {
      const formDataToSend = new FormData();
      Object.keys(formData).forEach(key => {
        if (formData[key]) {
          formDataToSend.append(key, formData[key]);
        }
      });
      formDataToSend.append('sample_details', JSON.stringify(sampleDetails));
      formDataToSend.append('form_type', 'sample');

      const response = await fetch('/api/forms', {
        method: 'POST',
        body: formDataToSend,
      });

      const result = await response.json();

      if (response.ok) {
        setMessage(result.message);
        setShowSuccessModal(true); // show modal instead of green alert

        setFormData({
          Principal_Investigator: '', Email: '', Company_Institution: '', Contact_Number: '',
          Address: '', City: '', State: '', Pin: '', Secondary_Contact: '', Secondary_Email: '',
          Secondary_Company_Institution: '', Secondary_Contact_Number: '', Project_Title: '',
          Number_of_Samples: '', Sample_Type: '', Sample_Type_Other: '', Sample_Source: '',
          Sample_Source_Other: '', Pathogenicity: '', Sample_Remarks: '', Service_Requested: '',
          Service_Requested_Other: '', Type_of_Library: '', Type_of_Library_Other: '',
          Required_Library_Size: '', Required_Library_Size_Other: '', Index_Information: '',
          Kit_Information: '', Sequencing_Platform: '', Sequencing_Platform_Other: '',
          Sequencing_Read_Length: '', Sequencing_Read_Length_Other: '', Total_Data_Requirement: '',
          Service_Remarks: '', Analysis_Requested: '', Analysis_Details: '',
          Reference_Genome_Available: '', Genome_Size: '', Special_Consideration: ''
        });
        setSampleDetails([{
          Serial_Number: '', Sample_Name: '', Storage_Temp: '',
          Preservative_Reagent: '', Temp_Information: '', Comments: ''
        }]);
      } else {
        setMessage('Error: ' + (result.error || 'Form submission failed'));
      }
    } catch (error) {
      console.error('Error submitting form:', error);
      setMessage('Error: Network error. Please check your connection and try again.');
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <div className="bg-teal-50 min-h-screen py-8">
      <div className="max-w-4xl mx-auto bg-teal-50 shadow-lg border border-gray-300 font-arial text-xs">
        <form onSubmit={handleSubmit} className="space-y-6">

          {/* Only show red alert for errors */}
          {message && message.includes('Error') && (
            <div className="mx-6 mt-6">
              <div className="p-4 rounded bg-red-100 text-red-800">
                {message}
              </div>
            </div>
          )}

          <CustomerInfoSection formData={formData} onInputChange={handleInputChange} />
          <SampleInfoSection formData={formData} onInputChange={handleInputChange} />
          <ServiceInfoSection formData={formData} onInputChange={handleInputChange} />
          <BioinformaticsSection formData={formData} onInputChange={handleInputChange} />
          <SampleDetailsSection sampleDetails={sampleDetails} setSampleDetails={setSampleDetails} />

          <div className="text-center py-6">
            <button
              type="submit"
              disabled={isSubmitting}
              className="bg-teal-600 hover:bg-teal-700 text-white font-medium py-3 px-6 rounded disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
            >
              {isSubmitting ? 'Submitting...' : 'Submit Sample Form'}
            </button>
          </div>
        </form>
      </div>

      {/* Success Modal */}
      {/* Success Modal */}
      {showSuccessModal && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <div className="bg-white rounded-lg shadow-lg p-6 max-w-sm w-full text-center animate-pulse">
            {/* Animated Check Circle */}
            <div className="flex justify-center mb-4">
              <div className="relative">
                {/* Outer ring animation */}
                <div className="w-20 h-20 border-4 border-green-200 rounded-full animate-ping absolute"></div>
                <div className="w-16 h-16 bg-green-500 rounded-full flex items-center justify-center animate-bounce relative z-10">
                  {/* Checkmark */}
                  <svg
                    className="w-10 h-10 text-white animate-pulse"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth="4"
                      d="M5 13l4 4L19 7"
                    />
                  </svg>
                </div>
              </div>
            </div>

            <h2 className="text-lg font-semibold text-green-700 mb-4 animate-pulse">Submitted Successfully!</h2>
            <p className="text-gray-700 mb-6">{message}</p>
            <button
              onClick={() => setShowSuccessModal(false)}
              className="bg-teal-600 hover:bg-teal-700 text-white py-2 px-4 rounded transition-all duration-200 transform hover:scale-105"
            >
              OK
            </button>
          </div>
        </div>
      )}
    </div>
  );
};

export default SampleFormContainer;
