'use client';

import Link from 'next/link';
import { SpoonCard } from '@/components/spoons/spoon-card';
import { useQuery } from 'convex/react';

import { api } from '@spoon/backend/convex/_generated/api.js';
import { Button, Card, CardContent } from '@spoon/ui';

const SpoonsPage = () => {
  const spoons = useQuery(api.spoons.listMine, {}) ?? [];
  return (
    <main className='space-y-6'>
      <div className='flex flex-col justify-between gap-4 md:flex-row md:items-end'>
        <div>
          <h1 className='text-3xl font-semibold tracking-normal'>My Spoons</h1>
          <p className='text-muted-foreground mt-2'>
            Managed forks you want to keep close to their upstream projects.
          </p>
        </div>
        <Button asChild>
          <Link href='/spoons/new'>New Spoon</Link>
        </Button>
      </div>
      {spoons.length ? (
        <div className='grid gap-4 xl:grid-cols-2'>
          {spoons.map((spoon) => (
            <SpoonCard key={spoon._id} spoon={spoon} />
          ))}
        </div>
      ) : (
        <Card className='shadow-none'>
          <CardContent className='p-8'>
            <p className='text-lg font-medium'>No managed forks yet</p>
            <p className='text-muted-foreground mt-2 max-w-xl'>
              Add your first Spoon manually. Provider-backed forking can build
              on this same record later.
            </p>
            <Button className='mt-5' asChild>
              <Link href='/spoons/new'>Create Spoon</Link>
            </Button>
          </CardContent>
        </Card>
      )}
    </main>
  );
};

export default SpoonsPage;
