import { Leaf, CheckCircle2, XCircle, Info } from "lucide-react";

// Standar gizi per porsi makan siang anak sekolah (Permenkes)
const STANDAR = { kalori: 400, protein: 15, karbohidrat: 60, lemak: 15 };

export default function GiziStandard({ menu = null, editable = false, onChange }) {
  const gizi = menu?.gizi || { kalori: 0, protein: 0, karbohidrat: 0, lemak: 0 };

  const checkItem = (key) => {
    const val = gizi[key] || 0;
    const std = STANDAR[key];
    if (val === 0) return "empty";
    if (val >= std * 0.9 && val <= std * 1.2) return "ok";
    return "warn";
  };

  const items = [
    { key: "kalori", label: "Kalori", unit: "kkal", color: "text-amber-600", bg: "bg-amber-50 border-amber-200" },
    { key: "protein", label: "Protein", unit: "g", color: "text-blue-600", bg: "bg-blue-50 border-blue-200" },
    { key: "karbohidrat", label: "Karbohidrat", unit: "g", color: "text-emerald-600", bg: "bg-emerald-50 border-emerald-200" },
    { key: "lemak", label: "Lemak", unit: "g", color: "text-purple-600", bg: "bg-purple-50 border-purple-200" },
  ];

  return (
    <div className="bg-card rounded-xl border border-border p-5 sm:p-6">
      <div className="flex items-center gap-2 mb-4">
        <Leaf className="w-5 h-5 text-emerald-500" />
        <h3 className="font-bold text-foreground">Standar Gizi Per Porsi</h3>
      </div>

      <div className="grid grid-cols-2 gap-3 mb-4">
        {items.map(({ key, label, unit, color, bg }) => {
          const val = gizi[key] || 0;
          const std = STANDAR[key];
          const pct = Math.min((val / std) * 100, 120);
          const status = checkItem(key);

          return (
            <div key={key} className={`rounded-xl border p-3 ${bg}`}>
              <div className="flex items-center justify-between mb-1">
                <span className={`text-xs font-semibold ${color}`}>{label}</span>
                {status === "ok" && <CheckCircle2 className="w-3.5 h-3.5 text-emerald-500" />}
                {status === "warn" && <XCircle className="w-3.5 h-3.5 text-red-400" />}
                {status === "empty" && <Info className="w-3.5 h-3.5 text-muted-foreground" />}
              </div>
              {editable ? (
                <input
                  type="number"
                  min={0}
                  value={val}
                  onChange={(e) => onChange?.({ ...gizi, [key]: +e.target.value })}
                  className={`w-full text-sm font-bold bg-transparent border-b border-dashed ${color} focus:outline-none`}
                />
              ) : (
                <p className={`text-lg font-black ${color}`}>{val}<span className="text-xs font-medium ml-1">{unit}</span></p>
              )}
              <div className="mt-2 bg-white/50 rounded-full h-1.5">
                <div
                  className={`h-1.5 rounded-full transition-all ${status === "ok" ? "bg-emerald-400" : status === "warn" ? "bg-red-400" : "bg-muted"}`}
                  style={{ width: `${pct}%` }}
                />
              </div>
              <p className="text-xs text-muted-foreground mt-1">Standar: {std}{unit}</p>
            </div>
          );
        })}
      </div>

      <div className="bg-muted/50 rounded-lg p-3 flex items-start gap-2">
        <Info className="w-3.5 h-3.5 text-muted-foreground flex-shrink-0 mt-0.5" />
        <p className="text-xs text-muted-foreground">Berdasarkan Permenkes RI standar gizi anak sekolah per porsi makan siang.</p>
      </div>
    </div>
  );
}