import { useQueryClient } from '@tanstack/react-query';
import { toast } from 'sonner';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Card, CardAction, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
import { useCheckin } from '@/hooks/data/useCheckin';
import { useUserInfo } from '@/hooks/data/useUserInfo';

export function CheckinCard() {
  const { mutateAsync, isPending } = useCheckin();
  const { data } = useUserInfo();
  const queryClient = useQueryClient();
  return (
    <Card className="@container/card">
      <CardHeader>
        <CardDescription>签到状态</CardDescription>
        <CardTitle className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
          {data.checkin !== null ? '已签到' : '未签到'}
          {data.checkin !== null && <span className="text-sm font-medium ml-2">{`${new Date(data.checkin).toLocaleString()}`}</span>}
        </CardTitle>
        <CardAction>
          <Badge variant="outline">Day 1</Badge>
        </CardAction>
      </CardHeader>
      <CardFooter className="flex-col items-start gap-1.5 text-sm">
        <Button
          className="w-20"
          onClick={() => {
            mutateAsync().then(() => {
              toast('签到成功');
              void queryClient.invalidateQueries({ queryKey: ['userInfo'] });
            }).catch((error) => {
              console.error(error);
              toast('签到失败');
            });
          }}
          disabled={isPending || data.checkin !== null}
        >
          签到
        </Button>
      </CardFooter>
    </Card>
  );
}