import { METHOD_COLORS, METHOD_ICONS, METHOD_LABELS } from "../constants";

export default function BrewCard({ log, beanName }) {
  const color = METHOD_COLORS[log.method];
  const allFields = Object.entries(log)
    .filter(([k]) => !["id", "beanId", "method", "createdAt", "recipeDetails", "tasteNotes", "updatedAt", "isDeleted"].includes(k))
    .filter(([, v]) => v !== "" && v != null);
  const fieldLabels = { grindSize: "Grind", waterTemp: "Temp", beanWeight: "Weight", brewRatio: "Ratio", brewTime: "Time", numPours: "Pours", dose: "Dose", yield: "Yield", waterVolume: "Water", steepTime: "Steep" };
  return (
    <div className="relative mb-3">
      <div className="brew-method-bar" style={{ background: color }} />
      <div className="bg-white dark:bg-[#22120B] rounded-xl shadow-[0_1px_3px_rgba(44,24,16,0.06),0_4px_12px_rgba(44,24,16,0.04)] dark:shadow-[0_4px_12px_rgba(0,0,0,0.2)] p-[18px] pl-6 border border-[#E8DFD3] dark:border-[#3B2217] transition-colors duration-200">
        <div className="flex justify-between items-start">
          <div>
            <div className="text-[11px] text-[#9C8B7A] dark:text-[#C8B9A6] tracking-wide">{new Date(log.createdAt).toLocaleDateString("en-IN", { day: "numeric", month: "short", year: "numeric" })}</div>
            {beanName && <div className="text-sm font-semibold text-[#2C1810] dark:text-[#FAF6F1] mt-0.5">{beanName}</div>}
          </div>
          <div className="text-[11px] font-semibold uppercase tracking-widest" style={{ color }}>{METHOD_ICONS[log.method]} {METHOD_LABELS[log.method]}</div>
        </div>
        {allFields.length > 0 && (
          <div className="flex flex-wrap gap-3 mt-2.5">
            {allFields.map(([k, v]) => (
              <div key={k} className="text-xs">
                <div className="text-[#9C8B7A] dark:text-[#C8B9A6] text-[10px] uppercase tracking-wide">{fieldLabels[k] || k}</div>
                <div className="font-semibold mt-0.5 text-[#2C1810] dark:text-[#FAF6F1]">{v}</div>
              </div>
            ))}
          </div>
        )}
        {log.recipeDetails && <div className="text-[13px] text-[#6B5744] dark:text-[#C8B9A6] mt-2.5 italic leading-relaxed">📝 {log.recipeDetails}</div>}
        {log.tasteNotes && <div className="text-[13px] text-[#6B5744] dark:text-[#C8B9A6] mt-1.5 italic leading-relaxed">👅 {log.tasteNotes}</div>}
      </div>
    </div>
  );
}
