import { useState } from "react";
import { ROAST_TYPES, inputCls, labelCls } from "../constants";
import Modal from "./Modal";

export default function BeanForm({ onSave, onClose, initial }) {
  const [form, setForm] = useState(initial || { name: "", roastery: "", roastDate: "", roastType: "", image: "", tastingNotes: "" });
  const set = (k, v) => setForm(p => ({ ...p, [k]: v }));
  const canSave = form.name.trim().length > 0;

  const handleImage = (e) => {
    const file = e.target.files?.[0];
    if (!file) return;
    if (file.size > 2 * 1024 * 1024) { alert("Image must be under 2 MB"); return; }
    const reader = new FileReader();
    reader.onload = () => set("image", reader.result);
    reader.readAsDataURL(file);
  };

  return (
    <Modal onClose={onClose}>
      {(close) => (
        <>
          <div className="font-serif text-xl font-semibold text-[#2C1810] dark:text-[#FAF6F1] mb-5">{initial ? "Edit Bean" : "Add Bean"}</div>
          <div className="mb-4"><label className={labelCls}>Bean Name *</label>
            <input className={inputCls} placeholder="e.g. Ethiopia Yirgacheffe" value={form.name} onChange={e => set("name", e.target.value)} /></div>
          <div className="mb-4"><label className={labelCls}>Roastery</label>
            <input className={inputCls} placeholder="e.g. Blue Tokai" value={form.roastery} onChange={e => set("roastery", e.target.value)} /></div>
          <div className="flex gap-2.5 mb-4">
            <div className="flex-1"><label className={labelCls}>Roast Date</label>
              <input className={inputCls} type="date" value={form.roastDate} onChange={e => set("roastDate", e.target.value)} /></div>
            <div className="flex-1"><label className={labelCls}>Roast Type</label>
              <select className={inputCls} value={form.roastType} onChange={e => set("roastType", e.target.value)}>
                <option value="">Select…</option>
                {ROAST_TYPES.map(r => <option key={r} value={r}>{r}</option>)}
              </select></div>
          </div>
          <div className="mb-4">
            <label className={labelCls}>Bean Photo</label>
            <div className={`relative border-2 rounded-lg text-center cursor-pointer transition-all overflow-hidden ${form.image ? "border-[#E8DFD3] dark:border-[#3B2217] p-0" : "border-dashed border-[#E8DFD3] dark:border-[#3B2217] p-5 hover:border-[#8B6914] dark:hover:border-[#D4A325]"}`}>
              {form.image ? (
                <><img src={form.image} alt="Bean" className="w-full h-40 object-cover rounded-lg block" />
                  <button className="absolute top-2 right-2 w-7 h-7 rounded-full bg-[rgba(44,24,16,0.7)] dark:bg-[rgba(250,246,241,0.8)] text-white dark:text-[#2C1810] border-none text-sm cursor-pointer flex items-center justify-center font-bold"
                    onClick={(e) => { e.stopPropagation(); set("image", ""); }} type="button">×</button></>
              ) : (<><div className="text-3xl mb-1.5 opacity-40 dark:opacity-75">📷</div><div className="text-xs text-[#9C8B7A] dark:text-[#C8B9A6]">Tap to upload a photo</div></>)}
              <input type="file" accept="image/*" onChange={handleImage} className="absolute inset-0 opacity-0 cursor-pointer" />
            </div>
            <div className="text-[11px] text-[#9C8B7A] dark:text-[#C8B9A6] mt-1">Max 2 MB · JPG, PNG, or WebP</div>
          </div>
          <div className="mb-4"><label className={labelCls}>Tasting Notes</label>
            <textarea className={`${inputCls} resize-y min-h-[80px]`} placeholder="e.g. Citrus, dark chocolate, floral…" value={form.tastingNotes || ""} onChange={e => set("tastingNotes", e.target.value)} />
            <div className="text-[11px] text-[#9C8B7A] dark:text-[#C8B9A6] mt-1">Flavour profile from the bag or your own impressions</div></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 mt-2"
            style={{ opacity: canSave ? 1 : 0.4, cursor: canSave ? "pointer" : "not-allowed" }} disabled={!canSave}
            onClick={() => { if (canSave) close(() => onSave(form)); }}>
            {initial ? "Save Changes" : "Add to Library"}
          </button>
        </>
      )}
    </Modal>
  );
}
