'use client';

import { useCallback, useEffect, useState } from 'react';
import { useForm } from 'react-hook-form';
import Swal from 'sweetalert2';
import {
  getMedicalHistory,
  upsertMedicalHistory,
} from '@/lib/services/patients';
import { Loading } from '@/components/app/ui';
import { extractApiError } from '@/lib/api-client';

interface FormValues {
  allergies: string;
  chronicConditions: string;
  medications: string;
  notes: string;
}

export default function MedicalHistoryTab({
  patientId,
  canEdit,
}: {
  patientId: number;
  canEdit: boolean;
}) {
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const { register, handleSubmit, reset } = useForm<FormValues>({
    defaultValues: {
      allergies: '',
      chronicConditions: '',
      medications: '',
      notes: '',
    },
  });

  const load = useCallback(async () => {
    setLoading(true);
    setError(null);
    try {
      const history = await getMedicalHistory(patientId);
      reset({
        allergies: history?.allergies ?? '',
        chronicConditions: history?.chronicConditions ?? '',
        medications: history?.medications ?? '',
        notes: history?.notes ?? '',
      });
    } catch (err) {
      setError(extractApiError(err));
    } finally {
      setLoading(false);
    }
  }, [patientId, reset]);

  useEffect(() => {
    load();
  }, [load]);

  async function onSubmit(values: FormValues) {
    try {
      await upsertMedicalHistory(patientId, {
        allergies: values.allergies || null,
        chronicConditions: values.chronicConditions || null,
        medications: values.medications || null,
        notes: values.notes || null,
      });
      Swal.fire({
        icon: 'success',
        title: 'Histórico atualizado',
        timer: 1200,
        showConfirmButton: false,
      });
    } catch (err) {
      Swal.fire({ icon: 'error', title: 'Erro', text: extractApiError(err) });
    }
  }

  if (loading) return <Loading label="Carregando histórico clínico…" />;
  if (error) return <div className="alert alert-danger">{error}</div>;

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="card border-0 shadow-sm">
      <div className="card-header bg-white">
        <span className="fw-semibold">
          <i className="bi bi-clipboard2-pulse me-2 text-danger" />
          Histórico clínico
        </span>
        <span className="badge text-bg-warning ms-2">dado sensível</span>
      </div>
      <div className="card-body">
        <div className="alert alert-warning py-2 small" role="note">
          <i className="bi bi-lock-fill me-1" />
          Acesso restrito (admin/dentista). Conteúdo não é registrado em logs.
        </div>
        <div className="row g-3">
          <div className="col-12 col-md-6">
            <label htmlFor="allergies" className="form-label">
              Alergias
            </label>
            <textarea
              id="allergies"
              rows={3}
              className="form-control"
              disabled={!canEdit}
              {...register('allergies')}
            />
          </div>
          <div className="col-12 col-md-6">
            <label htmlFor="chronicConditions" className="form-label">
              Condições crônicas
            </label>
            <textarea
              id="chronicConditions"
              rows={3}
              className="form-control"
              disabled={!canEdit}
              {...register('chronicConditions')}
            />
          </div>
          <div className="col-12 col-md-6">
            <label htmlFor="medications" className="form-label">
              Medicamentos em uso
            </label>
            <textarea
              id="medications"
              rows={3}
              className="form-control"
              disabled={!canEdit}
              {...register('medications')}
            />
          </div>
          <div className="col-12 col-md-6">
            <label htmlFor="notes" className="form-label">
              Observações clínicas
            </label>
            <textarea
              id="notes"
              rows={3}
              className="form-control"
              disabled={!canEdit}
              {...register('notes')}
            />
          </div>
        </div>
      </div>
      {canEdit && (
        <div className="card-footer bg-white text-end">
          <button type="submit" className="btn btn-primary">
            Salvar histórico
          </button>
        </div>
      )}
    </form>
  );
}