"use client";

import { useState, useEffect } from "react";
import { useParams } from "next/navigation";
import type { Pet, Schedule } from "@/types";
import { Card } from "@/components/ui/Card";
import { Button } from "@/components/ui/Button";
import { PetCard } from "@/components/pet/PetCard";
import { ScheduleCard } from "@/components/pet/ScheduleCard";
import { EmptyState } from "@/components/ui/EmptyState";

export default function PetDetailPage() {
  const params = useParams();
  const [pet, setPet] = useState<Pet | null>(null);
  const [schedules, setSchedules] = useState<Schedule[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // TODO: Replace with actual API call
    const loadData = async () => {
      setLoading(true);
      // Simulated data
      setPet({
        id: params.id as string,
        ownerId: "u1",
        name: "毛球",
        species: "猫",
        breed: "英短",
        birthDate: "2023-03-15",
        weightKg: 4.5,
        avatarUrl: "",
        createdAt: new Date().toISOString(),
      });
      setSchedules([
        { id: "s1", petId: params.id as string, type: "vaccine", title: "年度疫苗", scheduledAt: "2026-07-01T09:00:00Z", completed: false },
        { id: "s2", petId: params.id as string, type: "deworming", title: "季度驱虫", scheduledAt: "2026-06-15T10:00:00Z", completed: false },
        { id: "s3", petId: params.id as string, type: "checkup", title: "体检", scheduledAt: "2026-05-20T14:00:00Z", completed: true },
      ]);
      setLoading(false);
    };
    loadData();
  }, [params.id]);

  if (loading) return <div className="flex justify-center py-16"><div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500" /></div>;
  if (!pet) return <EmptyState icon="🐾" title="未找到宠物" description="该宠物可能已被删除" />;

  return (
    <div className="space-y-6">
      {/* Pet Profile */}
      <div className="bg-gradient-to-br from-amber-100 to-orange-100 rounded-2xl p-6 text-center">
        <div className="w-24 h-24 mx-auto rounded-full bg-white shadow flex items-center justify-center text-5xl">
          {pet.avatarUrl ? <img src={pet.avatarUrl} alt={pet.name} className="w-full h-full rounded-full object-cover" /> : "🐱"}
        </div>
        <h1 className="text-2xl font-bold text-gray-800 mt-3">{pet.name}</h1>
        <p className="text-sm text-gray-500">{pet.breed} · {pet.weightKg}kg · {pet.species}</p>
      </div>

      {/* Health Schedule */}
      <section>
        <h2 className="text-lg font-semibold text-gray-800 mb-3">健康日程</h2>
        <div className="space-y-2">
          {schedules.length > 0 ? schedules.map(s => <ScheduleCard key={s.id} schedule={s} />) : <EmptyState icon="📅" title="暂无日程" />}
        </div>
      </section>

      {/* Quick Info */}
      <div className="grid grid-cols-2 gap-3">
        <Card className="text-center">
          <p className="text-2xl font-bold text-gray-800">{pet.weightKg}</p>
          <p className="text-xs text-gray-500">体重 (kg)</p>
        </Card>
        <Card className="text-center">
          <p className="text-2xl font-bold text-gray-800">{new Date().getFullYear() - new Date(pet.birthDate).getFullYear()}岁</p>
          <p className="text-xs text-gray-500">年龄</p>
        </Card>
      </div>
    </div>
  );
}