"use client";
import { Stethoscope, Pencil, Trash2, Plus, X } from "lucide-react";
import { useMasterDataStore } from "@/app/store/masterDataStore";
import { Diagnosis } from "@/app/types/masterData";
import PageHeader from "@/components/modals/ui/PageHeader";
import { useState, useEffect } from "react";
import { useDiagnosisStore } from "@/app/store/diagnosisStore";
import { toast } from "react-hot-toast";

import {
  AddDiagnosisPayload,
  UpdateDiagnosisPayload,
} from "@/app/types/medicalData";
import ConfirmDeleteModal from "@/components/modals/ui/ConfirmDeleteModal";

function DiagnosisModal({
  open,
  onClose,
  onSubmit,
  loading,
  initialData,
}: {
  open: boolean;
  onClose: () => void;
  onSubmit: (data: any) => void;
  loading: boolean;
  initialData?: Diagnosis | null;
}) {
  const [form, setForm] = useState({
    diagnosisDrLang: "",
    diagnosisPtLang: "",
  });

  useEffect(() => {
    if (open) {
      setForm({
        diagnosisDrLang: initialData?.diagnosisDrLang || "",
        diagnosisPtLang: initialData?.diagnosisPtLang || "",
      });
    }
  }, [open, initialData]);

  if (!open) return null;

  return (
    <div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
      <div className="absolute inset-0 bg-black/50" onClick={onClose} />

      <div className="relative bg-white w-full max-w-[600px] rounded-3xl shadow-2xl">
        <div className="flex items-center justify-between px-6 py-5 border-b border-[#f3f4f6]">
          <h2 className="text-lg font-semibold text-[#d4537e]">
            {initialData ? "Edit Diagnosis" : "Add Diagnosis"}
          </h2>

          <button
            onClick={onClose}
            className="w-9 h-9 rounded-lg flex items-center justify-center text-[#9ca3af] hover:bg-[#f7f7f8]"
          >
            <X size={20} />
          </button>
        </div>

        <div className="p-6 flex flex-col gap-6">
          <div>
            <label className="block text-sm font-medium text-[#374151] mb-2">
              Diagnosis in Doctor Language
            </label>

            <input
              value={form.diagnosisDrLang}
              onChange={(e) =>
                setForm({
                  ...form,
                  diagnosisDrLang: e.target.value,
                })
              }
              placeholder="i.e. Pneumonia"
              disabled={!!initialData}
              className="w-full bg-[#f7f7f8] rounded-xl border-none outline-none px-4 py-4 text-base text-[#111111] placeholder:text-[#9ca3af] disabled:opacity-50 disabled:cursor-not-allowed"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-[#374151] mb-2">
              Diagnosis in Patient Language
            </label>

            <input
              value={form.diagnosisPtLang}
              onChange={(e) =>
                setForm({
                  ...form,
                  diagnosisPtLang: e.target.value,
                })
              }
              placeholder="i.e. Pneumonia"
              className="w-full bg-[#f7f7f8] rounded-xl border-none outline-none px-4 py-4 text-base text-[#111111] placeholder:text-[#9ca3af]"
            />
          </div>
        </div>

        <div className="px-6 pb-6">
          <button
            disabled={loading}
            onClick={() => {
              if (!form.diagnosisPtLang.trim()) {
                toast.error("Please enter Diagnosis in Pt Language");
                return;
              }

              initialData
                ? onSubmit({
                  id: initialData.id,
                  ...form,
                })
                : onSubmit(form);
            }}
            className="w-full bg-[#d4537e] hover:bg-[#993556] text-white py-4 rounded-2xl font-semibold disabled:opacity-50"
          >
            {loading ? "Saving..." : initialData ? "Update Diagnosis" : "Save"}
          </button>
        </div>
      </div>
    </div>
  );
}

export default function SavedDiagnosesPage({
  onClose,
}: {
  onClose: () => void;
}) {
  const { masterData, fetchMasterData, loading } = useMasterDataStore();
  const {
    addDiagnosis,
    updateDiagnosis,
    removeDiagnosis,
    loading: actionLoading,
  } = useDiagnosisStore();

  const [addOpen, setAddOpen] = useState(false);

  const [editDiagnosis, setEditDiagnosis] = useState<Diagnosis | null>(null);

  const [deleteDiagnosis, setDeleteDiagnosis] = useState<Diagnosis | null>(
    null,
  );

  const handleAddDiagnosis = async (payload: AddDiagnosisPayload) => {
    const success = await addDiagnosis(payload);

    if (success) {
      setAddOpen(false);
    }
  };

  const handleUpdateDiagnosis = async (payload: UpdateDiagnosisPayload) => {
    const success = await updateDiagnosis(payload);

    if (success) {
      setEditDiagnosis(null);
    }
  };

  const handleDeleteDiagnosis = async () => {
    if (!deleteDiagnosis) return;

    const success = await removeDiagnosis(deleteDiagnosis.id);

    if (success) {
      setDeleteDiagnosis(null);
    }
  };

  useEffect(() => {
    if (!masterData) fetchMasterData();
  }, []);

  const diagnoses: Diagnosis[] = masterData?.diagnoses || [];

  if (loading && !masterData) {
    return (
      <div className="bg-[#f7f7f8]">
        <PageHeader
          icon={<Stethoscope size={20} />}
          title="Saved diagnoses"
          subtitle="View, edit, or delete previously saved diagnoses"

        />
        <div className="flex-1 flex items-center justify-center">
          <p className="text-sm text-[#9ca3af]">Loading...</p>
        </div>
      </div>
    );
  }

  return (
    <div className="bg-[#f7f7f8]">
      <PageHeader
        icon={<Stethoscope size={20} />}
        title="Saved diagnoses"
        subtitle="View, edit, or delete previously saved diagnoses"
                          onClose={onClose}

      />

      <div className="min-h-[calc(100vh-140px)] flex flex-col px-7 pt-7 pb-7 max-w-[680px] mx-auto">
        <div className="flex-1">
          {diagnoses.length === 0 ? (
            <p className="text-sm text-[#9ca3af] text-center py-10">
              No diagnoses saved yet
            </p>
          ) : (
            <div className="flex flex-col gap-3">
              {diagnoses.map((d) => (
                <div
                  key={d.id}
                  className="flex items-center justify-between gap-4 bg-white border border-[#e5e7eb] rounded-2xl px-5 py-4"
                >
                  <div className="min-w-0">
                    <p className="text-base font-semibold text-[#111111]">
                      {d.diagnosisDrLang}
                    </p>
                    {d.diagnosisPtLang &&
                      d.diagnosisPtLang == d.diagnosisDrLang && (
                        <p className="text-sm text-[#9ca3af] mt-0.5">
                          {d.diagnosisPtLang}
                        </p>
                      )}
                  </div>
                  <div className="flex items-center gap-2 flex-shrink-0">
                    <button
                      className="w-9 h-9 rounded-lg flex items-center justify-center text-[#d4537e] bg-[#fceef3] hover:bg-[#f8d9e4] border-none cursor-pointer transition-colors"
                      onClick={() => setEditDiagnosis(d)}
                    >
                      <Pencil size={16} />
                    </button>
                    <button
                      className="w-9 h-9 rounded-lg flex items-center justify-center text-[#ef4444] bg-[#fff1f1] hover:bg-[#ffe1e1] border-none cursor-pointer transition-colors"
                      onClick={() => setDeleteDiagnosis(d)}
                    >
                      <Trash2 size={16} />
                    </button>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
        <button
          className="w-full flex items-center gap-4 bg-white border border-[#e5e7eb] rounded-2xl px-6 py-4 mt-6 cursor-pointer hover:bg-[#f7f7f8] transition-colors"
          onClick={() => setAddOpen(true)}
        >
          <span className="w-10 h-10 rounded-xl bg-[#fceef3] text-[#d4537e] flex items-center justify-center flex-shrink-0">
            <Plus size={20} />
          </span>
          <div className="text-left">
            <p className="text-base font-medium text-[#111111]">
              Add new diagnosis
            </p>
            <p className="text-sm text-[#9ca3af]">
              Not listed above? Add your own
            </p>
          </div>
        </button>
      </div>
      <DiagnosisModal
        open={addOpen}
        onClose={() => setAddOpen(false)}
        onSubmit={handleAddDiagnosis}
        loading={actionLoading}
      />

      <DiagnosisModal
        open={!!editDiagnosis}
        initialData={editDiagnosis}
        onClose={() => setEditDiagnosis(null)}
        onSubmit={handleUpdateDiagnosis}
        loading={actionLoading}
      />

      <ConfirmDeleteModal
        open={!!deleteDiagnosis}
        title="Delete Diagnosis?"
        description={`Are you sure you want to remove ${deleteDiagnosis?.diagnosisDrLang}?`}
        onCancel={() => setDeleteDiagnosis(null)}
        onConfirm={handleDeleteDiagnosis}
        loading={actionLoading}
      />
    </div>
  );
}