"use client";

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

export default function PagePage() {
  const { data, loading, error, refetch } = useAppointments();
  const [open, setOpen] = useState(false);

  return (
    <div className="space-y-4">
      <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={() => setOpen(true)} variant="primary" size="sm">新增</Button>
      </div>

      {loading ? (
        <div className="flex justify-center py-12">
          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500" />
        </div>
      ) : error ? (
        <Card className="text-center py-8">
          <p className="text-red-500 text-sm">{error}</p>
          <Button onClick={refetch} variant="secondary" size="sm" className="mt-2">重试</Button>
        </Card>
      ) : data.length === 0 ? (
        <EmptyState
          icon="📭"
          title="暂无数据"
          description="还没有任何记录，点击上方按钮开始"
          action={<Button onClick={() => setOpen(true)} variant="primary" size="sm">创建第一条</Button>}
        />
      ) : (
        <div className="space-y-3">
          {data.map((item: any) => (
            <Card key={item.id}>
              <h3 className="font-medium text-gray-800">{item.title || item.name || `Item ${item.id.slice(0, 8)}`}</h3>
              <p className="text-xs text-gray-400 mt-1">{item.createdAt || ""}</p>
            </Card>
          ))}
        </div>
      )}
    </div>
  );
}