'use client';

import { useState } from 'react';

export default function MedicalRecords() {
  // States to store the form input data and the records
  const [existingConditions, setExistingConditions] = useState(['Asthma', 'Diabetes Type 2']);
  const [pastSurgeries, setPastSurgeries] = useState(['Appendectomy - 2015', 'Knee Surgery - 2020']);
  const [allergies, setAllergies] = useState(['Penicillin', 'Shellfish']);
  const [medications, setMedications] = useState(['Metformin - 500mg, twice daily', 'Albuterol Inhaler - As needed']);

  // States for new input values
  const [newExistingCondition, setNewExistingCondition] = useState('');
  const [newPastSurgery, setNewPastSurgery] = useState('');
  const [newAllergy, setNewAllergy] = useState('');
  const [newMedication, setNewMedication] = useState('');

  // Handle adding a new item to a section
  const addItem = (type, value) => {
    if (value) {
      switch (type) {
        case 'existingCondition':
          setExistingConditions([...existingConditions, value]);
          setNewExistingCondition('');
          break;
        case 'pastSurgery':
          setPastSurgeries([...pastSurgeries, value]);
          setNewPastSurgery('');
          break;
        case 'allergy':
          setAllergies([...allergies, value]);
          setNewAllergy('');
          break;
        case 'medication':
          setMedications([...medications, value]);
          setNewMedication('');
          break;
        default:
          break;
      }
    }
  };

  // Handle deleting an item from a section
  const deleteItem = (type, index) => {
    switch (type) {
      case 'existingCondition':
        setExistingConditions(existingConditions.filter((_, i) => i !== index));
        break;
      case 'pastSurgery':
        setPastSurgeries(pastSurgeries.filter((_, i) => i !== index));
        break;
      case 'allergy':
        setAllergies(allergies.filter((_, i) => i !== index));
        break;
      case 'medication':
        setMedications(medications.filter((_, i) => i !== index));
        break;
      default:
        break;
    }
  };

  return (
    <div className="bg-white shadow rounded-xl p-4">
      <h2 className="text-xl font-semibold mb-4">Medical Records</h2>

      {/* Existing Conditions Section */}
      <div className="border p-4 rounded mb-6">
        <h3 className="font-semibold mb-2">Existing Conditions</h3>
        <ul className="list-disc list-inside">
          {existingConditions.map((condition, index) => (
            <li key={index} className="flex justify-between items-center">
              {condition}
              <button
                className="text-red-500 ml-4"
                onClick={() => deleteItem('existingCondition', index)}
              >
                Delete
              </button>
            </li>
          ))}
        </ul>
        <input
          type="text"
          value={newExistingCondition}
          onChange={(e) => setNewExistingCondition(e.target.value)}
          className="border rounded p-2 mt-4 w-full"
          placeholder="Add new existing condition"
        />
        <button
          className="bg-blue-500 text-white px-4 py-2 rounded mt-2"
          onClick={() => addItem('existingCondition', newExistingCondition)}
        >
          Add Condition
        </button>
      </div>

      {/* Past Surgeries Section */}
      <div className="border p-4 rounded mb-6">
        <h3 className="font-semibold mb-2">Past Surgeries</h3>
        <ul className="list-disc list-inside">
          {pastSurgeries.map((surgery, index) => (
            <li key={index} className="flex justify-between items-center">
              {surgery}
              <button
                className="text-red-500 ml-4"
                onClick={() => deleteItem('pastSurgery', index)}
              >
                Delete
              </button>
            </li>
          ))}
        </ul>
        <input
          type="text"
          value={newPastSurgery}
          onChange={(e) => setNewPastSurgery(e.target.value)}
          className="border rounded p-2 mt-4 w-full"
          placeholder="Add new past surgery"
        />
        <button
          className="bg-blue-500 text-white px-4 py-2 rounded mt-2"
          onClick={() => addItem('pastSurgery', newPastSurgery)}
        >
          Add Surgery
        </button>
      </div>

      {/* Allergies Section */}
      <div className="border p-4 rounded mb-6">
        <h3 className="font-semibold mb-2">Allergies</h3>
        <ul className="list-disc list-inside">
          {allergies.map((allergy, index) => (
            <li key={index} className="flex justify-between items-center">
              {allergy}
              <button
                className="text-red-500 ml-4"
                onClick={() => deleteItem('allergy', index)}
              >
                Delete
              </button>
            </li>
          ))}
        </ul>
        <input
          type="text"
          value={newAllergy}
          onChange={(e) => setNewAllergy(e.target.value)}
          className="border rounded p-2 mt-4 w-full"
          placeholder="Add new allergy"
        />
        <button
          className="bg-blue-500 text-white px-4 py-2 rounded mt-2"
          onClick={() => addItem('allergy', newAllergy)}
        >
          Add Allergy
        </button>
      </div>

      {/* Medications Section */}
      <div className="border p-4 rounded mb-6">
        <h3 className="font-semibold mb-2">Medications</h3>
        <ul className="list-disc list-inside">
          {medications.map((medication, index) => (
            <li key={index} className="flex justify-between items-center">
              {medication}
              <button
                className="text-red-500 ml-4"
                onClick={() => deleteItem('medication', index)}
              >
                Delete
              </button>
            </li>
          ))}
        </ul>
        <input
          type="text"
          value={newMedication}
          onChange={(e) => setNewMedication(e.target.value)}
          className="border rounded p-2 mt-4 w-full"
          placeholder="Add new medication"
        />
        <button
          className="bg-blue-500 text-white px-4 py-2 rounded mt-2"
          onClick={() => addItem('medication', newMedication)}
        >
          Add Medication
        </button>
      </div>
    </div>
  );
}
