"use client";
import { useState } from "react";
import { Field, TextArea, TextInput } from "../ui";
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 () => {
    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));
  };

  return (
    <div className="row g-3">
      <div className="col-12 col-md-4">
        <div className="border rounded p-3">
          <h6 className="small fw-semibold mb-2">{editingId ? "Edit medicine" : "Add new medicine"}</h6>
          <div className="mb-2"><Field label="Medicine name"><TextInput value={form.name} onChange={(e) => setForm((p) => ({ ...p, name: e.target.value }))} placeholder="e.g. Napa 500mg" /></Field></div>
          <div className="mb-2"><Field label="Generic name"><TextInput value={form.generic} onChange={(e) => setForm((p) => ({ ...p, generic: e.target.value }))} placeholder="e.g. Paracetamol" /></Field></div>
          <div className="mb-2"><Field label="Description"><TextArea rows={2} value={form.description} onChange={(e) => setForm((p) => ({ ...p, description: e.target.value }))} placeholder="What it's used for" /></Field></div>
          <div className="d-flex gap-2 mt-2">
            <button onClick={save} disabled={saving} className="btn btn-primary btn-sm flex-fill">{editingId ? "Update" : "Save"}</button>
            {editingId && <button onClick={cancelEdit} className="btn btn-outline-secondary btn-sm">Cancel</button>}
          </div>
        </div>
      </div>
      <div className="col-12 col-md-8">
        <div className="table-responsive border rounded">
          <table className="table table-sm mb-0">
            <thead><tr><th>Name</th><th>Generic</th><th>Description</th><th className="text-end">Action</th></tr></thead>
            <tbody>
              {catalog.map((m) => (
                <tr key={m.id}>
                  <td className="fw-medium">{m.name}</td>
                  <td>{m.generic}</td>
                  <td className="text-muted">{m.description}</td>
                  <td 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>
                  </td>
                </tr>
              ))}
              {catalog.length === 0 && <tr><td colSpan={4} className="text-center text-muted py-3">No medicines yet.</td></tr>}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}