"use client";

import { useState } from "react";
import { Card } from "@/components/ui/Card";
import { Button } from "@/components/ui/Button";
import { Input } from "@/components/ui/Input";
import { EmptyState } from "@/components/ui/EmptyState";

const CATEGORIES = [
  { key: "food", icon: "🍖", label: "饮食" },
  { key: "exercise", icon: "🏃", label: "运动" },
  { key: "excretion", icon: "💩", label: "排泄" },
  { key: "weight", icon: "⚖️", label: "体重" },
];

interface LogEntry {
  id: string;
  category: string;
  icon: string;
  value: string;
  time: string;
}

export default function DailyLogPage() {
  const [logs, setLogs] = useState<LogEntry[]>([]);
  const [category, setCategory] = useState("food");
  const [value, setValue] = useState("");

  const addLog = () => {
    if (!value.trim()) return;
    const cat = CATEGORIES.find(c => c.key === category)!;
    setLogs(prev => [{
      id: Date.now().toString(),
      category: cat.key,
      icon: cat.icon,
      value,
      time: new Date().toLocaleTimeString("zh-CN", { hour: "2-digit", minute: "2-digit" }),
    }, ...prev]);
    setValue("");
  };

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-xl font-bold text-gray-800">日常记录</h1>
        <p className="text-sm text-gray-500 mt-1">记录宠物的饮食、运动、排泄和体重变化</p>
      </div>

      {/* Quick Record */}
      <Card>
        <div className="space-y-3">
          <div className="flex gap-2">
            {CATEGORIES.map(c => (
              <button key={c.key} onClick={() => setCategory(c.key)}
                className={`flex-1 py-2 rounded-lg text-sm text-center transition-colors ${category === c.key ? "bg-blue-100 text-blue-700 font-medium" : "bg-gray-50 text-gray-500"}`}>
                {c.icon} {c.label}
              </button>
            ))}
          </div>
          <div className="flex gap-2">
            <Input placeholder="输入记录内容..." value={value} onChange={e => setValue(e.target.value)} onKeyDown={e => e.key === "Enter" && addLog()} />
            <Button onClick={addLog} size="sm">记录</Button>
          </div>
        </div>
      </Card>

      {/* Log Timeline */}
      <div className="space-y-2">
        {logs.length > 0 ? logs.map(log => (
          <div key={log.id} className="flex items-center gap-3 px-4 py-2 bg-white rounded-lg border border-gray-100">
            <span className="text-xl">{log.icon}</span>
            <span className="flex-1 text-sm text-gray-700">{log.value}</span>
            <span className="text-xs text-gray-400">{log.time}</span>
          </div>
        )) : <EmptyState icon="📝" title="暂无记录" description="使用上方表单记录宠物日常" />}
      </div>
    </div>
  );
}