import { useState } from "react";
import { METHODS, METHOD_LABELS, METHOD_ICONS, METHOD_COLORS, inputCls, labelCls } from "../constants";
import Modal from "./Modal";

export default function BrewForm({ beans, onSave, onClose }) {
  const [method, setMethod] = useState("pourover");
  const [form, setForm] = useState({ beanId: beans[0]?.id || "" });
  const set = (k, v) => setForm(p => ({ ...p, [k]: v }));

  if (beans.length === 0) {
    return (
      <Modal onClose={onClose}>
        {(close) => (
          <>
            <div className="font-serif text-xl font-semibold text-[#2C1810] dark:text-[#FAF6F1] mb-5">Log a Brew</div>
            <div className="text-center py-12 text-[#9C8B7A] dark:text-[#C8B9A6]">
              <div className="text-4xl mb-3 opacity-50 dark:opacity-80">🫘</div>
              <h3 className="text-base mb-1.5 text-[#6B5744] dark:text-[#FAF6F1]">No beans yet</h3>
              <p className="text-[13px] leading-relaxed">Add a bean to your library first.</p>
            </div>
            <button className="w-full py-3.5 border border-[#E8DFD3] dark:border-[#3B2217] rounded-xl text-sm font-semibold text-[#6B5744] dark:text-[#C8B9A6] bg-transparent cursor-pointer hover:bg-[#F3EDE4] dark:hover:bg-[#2C1810]" onClick={() => close()}>Close</button>
          </>
        )}
      </Modal>
    );
  }

  const fields = {
    pourover: [
      { key: "grindSize", label: "Grind Size", placeholder: "e.g. 18 clicks", hint: "Relative to your grinder" },
      { key: "waterTemp", label: "Water Temp", placeholder: "e.g. 93°C" },
      { key: "beanWeight", label: "Bean Weight", placeholder: "e.g. 15g" },
      { key: "brewRatio", label: "Brew Ratio", placeholder: "e.g. 1:16" },
      { key: "brewTime", label: "Brew Time", placeholder: "e.g. 3:30" },
      { key: "numPours", label: "# of Pours", placeholder: "e.g. 4", type: "number" },
    ],
    espresso: [
      { key: "grindSize", label: "Grind Size", placeholder: "e.g. 8" },
      { key: "dose", label: "Dose", placeholder: "e.g. 18g" },
      { key: "yield", label: "Yield", placeholder: "e.g. 36g" },
      { key: "brewTime", label: "Brew Time", placeholder: "e.g. 28s" },
    ],
    coldbrew: [
      { key: "grindSize", label: "Grind Size", placeholder: "e.g. coarse" },
      { key: "beanWeight", label: "Bean Weight", placeholder: "e.g. 100g" },
      { key: "waterVolume", label: "Water Volume", placeholder: "e.g. 700ml" },
      { key: "steepTime", label: "Steep Time", placeholder: "e.g. 18 hours" },
    ],
  };

  return (
    <Modal onClose={onClose}>
      {(close) => (
        <>
          <div className="font-serif text-xl font-semibold text-[#2C1810] dark:text-[#FAF6F1] mb-5">Log a Brew</div>
          <div className="flex gap-1.5 mb-5">
            {METHODS.map(m => (
              <button key={m}
                className={`flex-1 py-3 px-2 border-2 bg-white dark:bg-[#22120B] rounded-xl cursor-pointer text-center text-xs font-semibold transition-all ${method === m ? "border-current" : "border-[#E8DFD3] dark:border-[#3B2217] text-[#9C8B7A] dark:text-[#C8B9A6]"}`}
                style={{ color: method === m ? METHOD_COLORS[m] : undefined }}
                onClick={() => setMethod(m)}>
                <div className="text-xl mb-1">{METHOD_ICONS[m]}</div>{METHOD_LABELS[m]}
              </button>
            ))}
          </div>
          <div className="mb-4"><label className={labelCls}>Bean *</label>
            <select className={inputCls} value={form.beanId} onChange={e => set("beanId", e.target.value)}>
              {beans.map(b => <option key={b.id} value={b.id} className="dark:bg-[#150B07]">{b.name}{b.roastery ? ` — ${b.roastery}` : ""}</option>)}
            </select></div>
          <div className="flex flex-wrap gap-2.5 mb-4">
            {fields[method].map(f => (
              <div key={f.key} className="flex-1 min-w-[45%]">
                <label className={labelCls}>{f.label}</label>
                <input className={inputCls} type={f.type || "text"} placeholder={f.placeholder}
                  value={form[f.key] || ""} onChange={e => set(f.key, e.target.value)} />
                {f.hint && <div className="text-[11px] text-[#9C8B7A] dark:text-[#C8B9A6] mt-1">{f.hint}</div>}
              </div>
            ))}
          </div>
          <div className="mb-4"><label className={labelCls}>{method === "pourover" ? "Recipe Details" : "Notes"}</label>
            <textarea className={`${inputCls} resize-y min-h-[80px]`}
              placeholder="Describe your recipe, technique, or anything notable…"
              value={form.recipeDetails || ""} onChange={e => set("recipeDetails", e.target.value)} /></div>
          <div className="mb-4"><label className={labelCls}>Taste Notes</label>
            <input className={inputCls} placeholder="e.g. citrus, chocolate, floral"
              value={form.tasteNotes || ""} onChange={e => set("tasteNotes", e.target.value)} /></div>
          <button className="w-full py-3.5 border-none rounded-xl bg-[#2C1810] dark:bg-[#FAF6F1] text-[#FAF6F1] dark:text-[#2C1810] text-sm font-semibold cursor-pointer hover:opacity-90 mt-2"
            onClick={() => close(() => onSave({ ...form, method }))}>Save Brew Log</button>
        </>
      )}
    </Modal>
  );
}
