"use client";
import { useState } from "react";
import CommonInputField from "@/app/components/CommonInputField";
import CommonTextArea from "@/app/components/CommonTextArea";
import CommonSubmitButton from "@/app/components/CommonSubmitButton";
import CommonTable from "@/app/components/CommonTable";
import { Medicine } from "../_types";
import { createMedicine, deleteMedicine, updateMedicine } from "../_api";

const EMPTY_FORM = { name: "", generic: "", description: "" };

export default function MedicineLibrary({ organizationId, catalog, onChange }: {
  organizationId: number; catalog: Medicine[]; onChange: (next: Medicine[]) => void;
}) {
  const [form, setForm] = useState(EMPTY_FORM);
  const [editingId, setEditingId] = useState<number | null>(null);
  const [saving, setSaving] = useState(false);

  const startEdit = (m: Medicine) => { setEditingId(m.id); setForm({ name: m.name, generic: m.generic, description: m.description }); };
  const cancelEdit = () => { setEditingId(null); setForm(EMPTY_FORM); };

  const save = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!form.name.trim()) return;
    setSaving(true);
    try {
      if (editingId) {
        const updated = await updateMedicine(editingId, form);
        onChange(catalog.map((m) => (m.id === editingId ? updated : m)));
      } else {
        const created = await createMedicine({ ...form, organization: organizationId });
        onChange([...catalog, created]);
      }
      cancelEdit();
    } finally {
      setSaving(false);
    }
  };

  const remove = async (id: number) => {
    await deleteMedicine(id);
    onChange(catalog.filter((m) => m.id !== id));
  };

  const rows = catalog.map((m) => ({
    id: m.id,
    cells: [
      <span key="n" className="fw-medium">{m.name}</span>,
      m.generic,
      <span key="d" className="text-muted">{m.description}</span>,
      <div key="a" className="text-end text-nowrap">
        <button onClick={() => startEdit(m)} className="btn btn-link btn-sm">Edit</button>
        <button onClick={() => remove(m.id)} className="btn btn-link btn-sm text-danger">Delete</button>
      </div>,
    ],
  }));

  return (
    <div className="row g-3">
      <div className="col-12 col-md-4">
        <form onSubmit={save} className="border rounded p-3">
          <h6 className="small fw-semibold mb-2">{editingId ? "Edit medicine" : "Add new medicine"}</h6>
          <div className="mb-2"><CommonInputField level_name="Medicine name" value={form.name} on_change_data={(v) => setForm((p) => ({ ...p, name: v }))} placeholder="e.g. Napa 500mg" /></div>
          <div className="mb-2"><CommonInputField level_name="Generic name" value={form.generic} on_change_data={(v) => setForm((p) => ({ ...p, generic: v }))} placeholder="e.g. Paracetamol" /></div>
          <div className="mb-2"><CommonTextArea level_name="Description" rows={2} value={form.description} on_change_data={(v) => setForm((p) => ({ ...p, description: v }))} /></div>
          <div className="d-flex gap-2 mt-2">
            <CommonSubmitButton label={editingId ? "Update" : "Save"} loading={saving} />
            {editingId && <button type="button" onClick={cancelEdit} className="btn btn-outline-secondary btn-sm">Cancel</button>}
          </div>
        </form>
      </div>
      <div className="col-12 col-md-8">
        <CommonTable headers={["Name", "Generic", "Description", ""]} rows={rows} isActionButton={false} />
      </div>
    </div>
  );
}