"use client";

import { useState } from "react";
import type { Schedule } from "@/types";
import { Button } from "@/components/ui/Button";
import { ScheduleCard } from "@/components/pet/ScheduleCard";
import { Modal } from "@/components/ui/Modal";
import { Input } from "@/components/ui/Input";
import { EmptyState } from "@/components/ui/EmptyState";

const mockSchedules: Schedule[] = [
  { id: "s1", petId: "p1", type: "vaccine", title: "年度疫苗加强针", scheduledAt: "2026-07-01T09:00:00Z", completed: false },
  { id: "s2", petId: "p1", type: "deworming", title: "季度驱虫", scheduledAt: "2026-06-15T10:00:00Z", completed: false },
  { id: "s3", petId: "p1", type: "checkup", title: "半年度体检", scheduledAt: "2026-05-20T14:00:00Z", completed: true },
  { id: "s4", petId: "p1", type: "grooming", title: "美容护理", scheduledAt: "2026-06-10T11:00:00Z", completed: false },
];

export default function SchedulePage() {
  const [schedules, setSchedules] = useState<Schedule[]>(mockSchedules);
  const [showModal, setShowModal] = useState(false);

  const toggleComplete = (id: string) => {
    setSchedules(prev => prev.map(s => s.id === id ? { ...s, completed: !s.completed } : s));
  };

  const pending = schedules.filter(s => !s.completed);
  const done = schedules.filter(s => s.completed);

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-xl font-bold text-gray-800">健康日程</h1>
          <p className="text-sm text-gray-500 mt-1">管理宠物的疫苗、驱虫、体检安排</p>
        </div>
        <Button onClick={() => setShowModal(true)} variant="primary" size="sm">+ 添加日程</Button>
      </div>

      {/* Pending */}
      <section>
        <h2 className="text-sm font-semibold text-gray-500 uppercase mb-2">待完成 ({pending.length})</h2>
        <div className="space-y-2">
          {pending.length > 0 ? pending.map(s => <ScheduleCard key={s.id} schedule={s} onToggle={() => toggleComplete(s.id)} />) : <EmptyState icon="✅" title="全部完成" />}
        </div>
      </section>

      {/* Completed */}
      {done.length > 0 && (
        <section>
          <h2 className="text-sm font-semibold text-gray-500 uppercase mb-2">已完成 ({done.length})</h2>
          <div className="space-y-2">
            {done.map(s => <ScheduleCard key={s.id} schedule={s} />)}
          </div>
        </section>
      )}

      <Modal open={showModal} onClose={() => setShowModal(false)} title="添加日程">
        <div className="space-y-3">
          <Input label="标题" placeholder="如：年度疫苗" />
          <Input label="日期" type="date" />
          <div className="flex gap-2 justify-end">
            <Button variant="secondary" onClick={() => setShowModal(false)}>取消</Button>
            <Button variant="primary" onClick={() => setShowModal(false)}>保存</Button>
          </div>
        </div>
      </Modal>
    </div>
  );
}