import BrewCard from "./BrewCard";

export default function BeanDetail({ bean, logs, onBack, onEdit, onDelete }) {
  const beanLogs = logs.filter(l => l.beanId === bean.id).sort((a, b) => b.createdAt - a.createdAt);
  const roastTagCls = bean.roastType?.toLowerCase().includes("dark") 
    ? "bg-[#E0D0BD] text-[#4A3520] dark:bg-[#2F1E12] dark:text-[#BCA38A]"
    : bean.roastType?.toLowerCase().includes("medium") 
      ? "bg-[#F0E0C8] text-[#6B4E2A] dark:bg-[#402A14] dark:text-[#D9AC7B]"
      : "bg-[#FFF3D6] text-[#8B6914] dark:bg-[#4A3912] dark:text-[#E6B640]";
  return (
    <div className="transition-colors duration-200">
      <button className="flex items-center gap-1.5 border-none bg-transparent text-[13px] text-[#6B5744] dark:text-[#C8B9A6] cursor-pointer p-0 mb-4" onClick={onBack}>← Back</button>
      {bean.image && <img src={bean.image} alt={bean.name} className="w-full h-44 object-cover rounded-2xl mb-4" />}
      <h2 className="font-serif text-[22px] font-semibold text-[#2C1810] dark:text-[#FAF6F1] mb-1">{bean.name}</h2>
      {bean.roastery && <div className="text-[#6B5744] dark:text-[#C8B9A6] text-sm mb-2">{bean.roastery}</div>}
      {bean.tastingNotes && <div className="text-[13px] text-[#6B5744] dark:text-[#C8B9A6] italic mt-1.5 leading-snug mb-2.5">👅 {bean.tastingNotes}</div>}
      <div className="flex gap-2 mt-2.5 flex-wrap">
        {bean.roastType && <span className={`text-[11px] px-2.5 py-1 rounded-full font-medium ${roastTagCls}`}>{bean.roastType}</span>}
        {bean.roastDate && <span className="text-[11px] px-2.5 py-1 rounded-full bg-[#F3EDE4] dark:bg-[#2C1810] text-[#6B5744] dark:text-[#C8B9A6] font-medium">Roasted {bean.roastDate}</span>}
        <span className="text-[11px] px-2.5 py-1 rounded-full bg-[#F3EDE4] dark:bg-[#2C1810] text-[#6B5744] dark:text-[#C8B9A6] font-medium">{beanLogs.length} brew{beanLogs.length !== 1 ? "s" : ""}</span>
      </div>
      <div className="flex gap-2 mt-4">
        <button className="flex-1 py-2.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] transition-colors duration-200" onClick={onEdit}>Edit</button>
        <button className="flex-1 py-2.5 border border-[#B44040] dark:border-[#E55B5B] rounded-xl text-xs font-semibold text-[#B44040] dark:text-[#E55B5B] bg-transparent cursor-pointer hover:bg-[rgba(180,64,64,0.05)] dark:hover:bg-[rgba(229,91,91,0.05)] transition-all duration-200" onClick={onDelete}>Delete</button>
      </div>
      <div className="mt-5">
        <div className="text-[13px] font-semibold text-[#6B5744] dark:text-[#C8B9A6] uppercase tracking-widest mb-3">Brew History</div>
        {beanLogs.length === 0 ? (
          <div className="text-center py-6 text-[#9C8B7A] dark:text-[#C8B9A6]"><p className="text-[13px]">No brews logged with this bean yet.</p></div>
        ) : beanLogs.map(log => <BrewCard key={log.id} log={log} beanName={bean.name} />)}
      </div>
    </div>
  );
}
