import { X } from 'lucide-react';
import { useHealthStore } from '../store/useHealthStore';
import { formatDate, getSeverityColor, cn } from '../utils/helpers';

export function DetailPanel() {
  const detailPanelOpen = useHealthStore((state) => state.detailPanelOpen);
  const closeDetailPanel = useHealthStore((state) => state.closeDetailPanel);
  const getCurrentCondition = useHealthStore((state) => state.getCurrentCondition);
  const getRelatedAppointments = useHealthStore((state) => state.getRelatedAppointments);
  const getRelatedMedications = useHealthStore((state) => state.getRelatedMedications);

  const condition = getCurrentCondition();
  const relatedAppointments = condition ? getRelatedAppointments(condition.id) : [];
  const relatedMedications = condition ? getRelatedMedications(condition.id) : [];

  if (!detailPanelOpen || !condition) return null;

  return (
    <>
      {/* Backdrop */}
      <div
        className={cn(
          'fixed inset-0 bg-black/20 backdrop-blur-sm z-40 transition-opacity duration-300',
          detailPanelOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'
        )}
        onClick={closeDetailPanel}
      />

      {/* Panel */}
      <div
        className={cn(
          'fixed right-0 top-0 h-screen w-[480px] bg-white shadow-2xl z-50 overflow-y-auto transition-transform duration-400',
          detailPanelOpen ? 'translate-x-0' : 'translate-x-full'
        )}
      >
        {/* Header */}
        <div className="sticky top-0 bg-white border-b border-gray-200 p-8 flex justify-between items-center z-10">
          <h2 className="text-2xl font-semibold text-gray-900">Condition Details</h2>
          <button
            onClick={closeDetailPanel}
            className="w-10 h-10 rounded-full bg-gray-100 hover:bg-red-100 hover:text-red-600 flex items-center justify-center transition-all duration-300"
          >
            <X className="w-5 h-5" />
          </button>
        </div>

        {/* Content */}
        <div className="p-8 space-y-8">
          {/* Condition Info */}
          <section>
            <h3 className="text-xl font-semibold text-gray-900 mb-4">
              {condition.name}
            </h3>
            <div className="text-gray-600 mb-4">
              ICD-10: <span className="font-medium">{condition.code}</span> |
              Category: <span className="font-medium capitalize">{condition.category}</span>
            </div>

            <div className="grid grid-cols-2 gap-4">
              <div className="bg-gray-50 rounded-lg p-4">
                <div className="text-xs text-gray-500 uppercase tracking-wide mb-1">
                  Severity
                </div>
                <div className={cn('text-base font-semibold px-3 py-1 rounded-md inline-block', getSeverityColor(condition.severity))}>
                  {condition.severity.charAt(0).toUpperCase() + condition.severity.slice(1)}
                </div>
              </div>
              <div className="bg-gray-50 rounded-lg p-4">
                <div className="text-xs text-gray-500 uppercase tracking-wide mb-1">
                  Diagnosed
                </div>
                <div className="text-base font-semibold text-gray-900">
                  {formatDate(condition.diagnosedDate)}
                </div>
              </div>
            </div>
          </section>

          {/* Description */}
          <section>
            <h3 className="text-lg font-semibold text-gray-900 mb-3">
              Description
            </h3>
            <p className="text-gray-700 leading-relaxed">
              {condition.description}
            </p>
          </section>

          {/* Clinical Notes */}
          <section>
            <h3 className="text-lg font-semibold text-gray-900 mb-3">
              Clinical Notes
            </h3>
            <p className="text-gray-700 leading-relaxed">
              {condition.notes}
            </p>
          </section>

          {/* Related Appointments */}
          <section>
            <h3 className="text-lg font-semibold text-gray-900 mb-4">
              Related Appointments
            </h3>
            {relatedAppointments.length > 0 ? (
              <div className="space-y-4">
                {relatedAppointments.map((apt) => (
                  <div key={apt.id} className="bg-gray-50 rounded-lg p-4">
                    <div className="font-semibold text-gray-900 mb-2">
                      {formatDate(apt.date)} - {apt.time}
                    </div>
                    <div className="text-sm text-gray-700 space-y-1">
                      <div>
                        <span className="font-medium">{apt.doctor}</span> ({apt.specialty})
                      </div>
                      <div>{apt.reason}</div>
                      <div className="pt-2 border-t border-gray-200 mt-2">
                        <span className="font-medium">Treatment:</span> {apt.treatment}
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            ) : (
              <p className="text-gray-500 text-sm">No related appointments found.</p>
            )}
          </section>

          {/* Related Medications */}
          <section>
            <h3 className="text-lg font-semibold text-gray-900 mb-4">
              Related Medications
            </h3>
            {relatedMedications.length > 0 ? (
              <div className="space-y-4">
                {relatedMedications.map((med) => (
                  <div key={med.id} className="bg-gray-50 rounded-lg p-4">
                    <div className="font-semibold text-gray-900 mb-2">
                      {med.name} {med.dosage}
                    </div>
                    <div className="text-sm text-gray-700 space-y-1">
                      <div>{med.frequency}</div>
                      {med.indication && (
                        <div>
                          <span className="font-medium">For:</span> {med.indication}
                        </div>
                      )}
                      {med.prescribedBy && (
                        <div>
                          <span className="font-medium">Prescribed by:</span> {med.prescribedBy}
                        </div>
                      )}
                      {med.instructions && (
                        <div className="pt-2 border-t border-gray-200 mt-2">
                          <span className="font-medium">Instructions:</span> {med.instructions}
                        </div>
                      )}
                    </div>
                  </div>
                ))}
              </div>
            ) : (
              <p className="text-gray-500 text-sm">No specific medications prescribed for this condition.</p>
            )}
          </section>
        </div>
      </div>
    </>
  );
}
