import React from 'react';

const ServiceInfoSection = ({ formData, onInputChange }) => {
  const handleChange = (field, value) => {
    onInputChange('service', field, value);
  };

  const serviceOptions = [
    '', 'DNA Sequencing - Whole Genome', 'DNA Sequencing - Whole Exome DNA Sequencing',
    'DNA Sequencing - Amplicon Sequencing (16S/18S/ITS)', 'DNA Sequencing - Targeted Sequencing',
    'DNA Sequencing - Single Cell DNA', 'DNA Sequencing - Microbiome and Metagenomics',
    'DNA Sequencing - Whole Genome Bisulphite', 'DNA Sequencing - ChIP Sequencing',
    'DNA Sequencing - ATAC Sequencing', 'DNA Sequencing - HiC Sequencing',
    'DNA Sequencing - Optical Mapping', 'DNA Sequencing - Long Read Sequencing by Pacbio',
    'DNA Sequencing - Long Read Sequencing by Nanopore', 'DNA Sequencing - Hybrid',
    'RNA Sequencing- Total RNA', 'RNA Sequencing- mRNA', 'RNA Sequencing- Small RNA',
    'RNA Sequencing- Long Non-Coding', 'RNA Sequencing- lncRNA', 'RNA Sequencing- Metatranscriptomics',
    'RNA Sequencing- Degradome', 'RNA Sequencing- Iso Sequencing', 'RNA Sequencing- Circular RNA',
    'RNA Sequencing- Single Cell RNA', 'Genotyping- ddRAD', 'Genotyping- SNP',
    'Genotyping- Microsatellites/ STR/SSR/FLA', 'Genotyping- Sequencing based',
    'Genotyping- GWAS', 'Genotyping- DNA Fingerprinting', 'Others'
  ];

  const libraryTypeOptions = [
    '', 'Single-End Sequencing', 'Paired-End Sequencing', 'Mate-Pair Sequencing',
    'Continuous Long Read (CLR)', 'High-Fidelity (HiFi)',
    'High-throughput Chromosome Conformation Capture (HiC)', 'Optical Mapping', 'Others'
  ];

  const librarySizeOptions = [
    '', '250 bp (Illumina)', '300 bp (Illumina)', '450 bp (Illumina)', '550 bp (Illumina)',
    '800 bp (Illumina)', '1 kb (Oxford Nanopore Technologies, ONT)',
    '5 kb (Oxford Nanopore Technologies, ONT)', '7 kb (Oxford Nanopore Technologies, ONT)',
    '10 kb (Oxford Nanopore Technologies, ONT)', '1-2 kb (PacBio)', '2-3 kb (PacBio)',
    '3-6 kb (PacBio)', '5-10 kb (PacBio)', '10 kb (Continuous Long Read, CLR)',
    '20 kb CLR (Continuous Long Read, CLR)', 'Others'
  ];

  const platformOptions = [
    '', 'NovaSeq 6000/ NovaSeq X', 'NextSeq', 'MiSeq', 'Pacific Biosciences(PacBio)',
    'Oxford Nanopore Technologies (ONT)', 'NanoString', 'Saphyr System (Optical Mapping)',
    'Illumina iScan System', 'Kompetitive Allele-Specific PCR (KASPAR)', 'Others'
  ];

  const readLengthOptions = [
    '', '1X50bp (Illumina)', '1X100bp (Illumina)', '2X100bp (Illumina)',
    '2X150bp (Illumina)', '2X250bp (Illumina)', '2X125bp (Illumina)',
    '2X300bp (Illumina)', 'Others'
  ];

  return (
    <div className="bg-white mx-6 p-6 rounded-lg">
      <h2 className="text-teal-600 text-lg font-bold mb-6 border-b-2 border-teal-600 pb-1">
        Service Information
      </h2>
      
      <div className="space-y-4">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <label className="block mb-2 font-semibold text-sm text-gray-600">
              Service Requested <span className="text-red-500">*</span>
            </label>
            <select
              value={formData.Service_Requested}
              onChange={(e) => handleChange('Service_Requested', e.target.value)}
              style={{ color: '#555555' }}
              className="w-full p-2 border border-gray-300 rounded text-sm font-arial h-10 box-border"
              required
            >
              {serviceOptions.map(option => (
                <option key={option} value={option} style={{ color: '#555555' }}>
                  {option || 'Select'}
                </option>
              ))}
            </select>
          </div>
          <div>
            <label className="block mb-2 font-semibold text-sm text-gray-600">Please Specify (if Others)</label>
            <input
              type="text"
              value={formData.Service_Requested_Other}
              onChange={(e) => handleChange('Service_Requested_Other', e.target.value)}
              style={{ color: '#555555' }}
              className="w-full p-2 border border-gray-300 rounded text-sm font-arial h-10 box-border"
            />
          </div>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <label className="block mb-2 font-semibold text-sm text-gray-600">
              Type of Library <span className="text-red-500">*</span>
            </label>
            <select
              value={formData.Type_of_Library}
              onChange={(e) => handleChange('Type_of_Library', e.target.value)}
              style={{ color: '#555555' }}
              className="w-full p-2 border border-gray-300 rounded text-sm font-arial h-10 box-border"
              required
            >
              {libraryTypeOptions.map(option => (
                <option key={option} value={option} style={{ color: '#555555' }}>
                  {option || 'Select'}
                </option>
              ))}
            </select>
          </div>
          <div>
            <label className="block mb-2 font-semibold text-sm text-gray-600">Please Specify (if Others)</label>
            <input
              type="text"
              value={formData.Type_of_Library_Other}
              onChange={(e) => handleChange('Type_of_Library_Other', e.target.value)}
              style={{ color: '#555555' }}
              className="w-full p-2 border border-gray-300 rounded text-sm font-arial h-10 box-border"
            />
          </div>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <label className="block mb-2 font-semibold text-sm text-gray-600">
              Required Library Size <span className="text-red-500">*</span>
            </label>
            <select
              value={formData.Required_Library_Size}
              onChange={(e) => handleChange('Required_Library_Size', e.target.value)}
              style={{ color: '#555555' }}
              className="w-full p-2 border border-gray-300 rounded text-sm font-arial h-10 box-border"
              required
            >
              {librarySizeOptions.map(option => (
                <option key={option} value={option} style={{ color: '#555555' }}>
                  {option || 'Select'}
                </option>
              ))}
            </select>
          </div>
          <div>
            <label className="block mb-2 font-semibold text-sm text-gray-600">Please Specify (if Others)</label>
            <input
              type="text"
              value={formData.Required_Library_Size_Other}
              onChange={(e) => handleChange('Required_Library_Size_Other', e.target.value)}
              style={{ color: '#555555' }}
              className="w-full p-2 border border-gray-300 rounded text-sm font-arial h-10 box-border"
            />
          </div>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <label className="block mb-2 font-semibold text-sm text-gray-600">Index Information (only for RTRL)</label>
            <input
              type="text"
              value={formData.Index_Information}
              onChange={(e) => handleChange('Index_Information', e.target.value)}
              style={{ color: '#555555' }}
              className="w-full p-2 border border-gray-300 rounded text-sm font-arial h-10 box-border"
            />
          </div>
          <div>
            <label className="block mb-2 font-semibold text-sm text-gray-600">Kit Information (only for RTRL)</label>
            <input
              type="text"
              value={formData.Kit_Information}
              onChange={(e) => handleChange('Kit_Information', e.target.value)}
              style={{ color: '#555555' }}
              className="w-full p-2 border border-gray-300 rounded text-sm font-arial h-10 box-border"
            />
          </div>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <label className="block mb-2 font-semibold text-sm text-gray-600">
              Sequencing Platform <span className="text-red-500">*</span>
            </label>
            <select
              value={formData.Sequencing_Platform}
              onChange={(e) => handleChange('Sequencing_Platform', e.target.value)}
              style={{ color: '#555555' }}
              className="w-full p-2 border border-gray-300 rounded text-sm font-arial h-10 box-border"
              required
            >
              {platformOptions.map(option => (
                <option key={option} value={option} style={{ color: '#555555' }}>
                  {option || 'Select'}
                </option>
              ))}
            </select>
          </div>
          <div>
            <label className="block mb-2 font-semibold text-sm text-gray-600">Please Specify (if Others)</label>
            <input
              type="text"
              value={formData.Sequencing_Platform_Other}
              onChange={(e) => handleChange('Sequencing_Platform_Other', e.target.value)}
              style={{ color: '#555555' }}
              className="w-full p-2 border border-gray-300 rounded text-sm font-arial h-10 box-border"
            />
          </div>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <label className="block mb-2 font-semibold text-sm text-gray-600">
              Sequencing Read Length <span className="text-red-500">*</span>
            </label>
            <select
              value={formData.Sequencing_Read_Length}
              onChange={(e) => handleChange('Sequencing_Read_Length', e.target.value)}
              style={{ color: '#555555' }}
              className="w-full p-2 border border-gray-300 rounded text-sm font-arial h-10 box-border"
              required
            >
              {readLengthOptions.map(option => (
                <option key={option} value={option} style={{ color: '#555555' }}>
                  {option || 'Select'}
                </option>
              ))}
            </select>
          </div>
          <div>
            <label className="block mb-2 font-semibold text-sm text-gray-600">Please Specify (if Others)</label>
            <input
              type="text"
              value={formData.Sequencing_Read_Length_Other}
              onChange={(e) => handleChange('Sequencing_Read_Length_Other', e.target.value)}
              style={{ color: '#555555' }}
              className="w-full p-2 border border-gray-300 rounded text-sm font-arial h-10 box-border"
            />
          </div>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <label className="block mb-2 font-semibold text-sm text-gray-600">
              Total Data Requirement (in Million or in GB) <span className="text-red-500">*</span>
            </label>
            <input
              type="text"
              value={formData.Total_Data_Requirement}
              onChange={(e) => handleChange('Total_Data_Requirement', e.target.value)}
              style={{ color: '#555555' }}
              className="w-full p-2 border border-gray-300 rounded text-sm font-arial h-10 box-border"
              required
            />
          </div>
          <div>
            <label className="block mb-2 font-semibold text-sm text-gray-600">Remarks</label>
            <input
              type="text"
              value={formData.Service_Remarks}
              onChange={(e) => handleChange('Service_Remarks', e.target.value)}
              style={{ color: '#555555' }}
              className="w-full p-2 border border-gray-300 rounded text-sm font-arial h-10 box-border"
            />
          </div>
        </div>
      </div>
    </div>
  );
};

export default ServiceInfoSection;