CRUD UI: 목록/상세/생성/수정/삭제

// src/app/(app)/history/page.tsx
import { createClient } from '@/lib/supabase/server'
import { GenerationCard } from './generation-card'

export default async function HistoryPage() {
  const supabase = await createClient()
  const { data: gens } = await supabase
    .from('generations')
    .select('*')
    .order('created_at', { ascending: false })
    .limit(50)

  return (
    <div className="space-y-4">
      <h1 className="text-2xl font-bold">히스토리</h1>
      <div className="grid gap-3">
        {gens?.map(g => <GenerationCard key={g.id} gen={g} />)}
      </div>
    </div>
  )
}

// src/app/(app)/history/[id]/page.tsx
import { notFound } from 'next/navigation'
import { createClient } from '@/lib/supabase/server'

export default async function DetailPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params
  const supabase = await createClient()
  const { data: gen } = await supabase
    .from('generations')
    .select('*')
    .eq('id', id)
    .single()

  if (!gen) notFound()

  return (
    <article className="max-w-2xl">
      <h1 className="text-xl font-bold mb-2">{gen.prompt}</h1>
      <time className="text-sm text-muted-foreground">{gen.created_at}</time>
      <div className="mt-6 prose dark:prose-invert">{gen.result}</div>
    </article>
  )
}

// src/app/(app)/generate/actions.ts
'use server'
import { z } from 'zod'
import { revalidatePath } from 'next/cache'
import { redirect } from 'next/navigation'
import { createClient } from '@/lib/supabase/server'

const schema = z.object({ prompt: z.string().min(1).max(500) })

export async function createGeneration(formData: FormData) {
  const parsed = schema.safeParse({ prompt: formData.get('prompt') })
  if (!parsed.success) return { error: '입력값 오류' }

  const supabase = await createClient()
  const { data: { user } } = await supabase.auth.getUser()
  if (!user) return { error: '로그인 필요' }

  // AI 호출은 CH.35
  const result = await callAI(parsed.data.prompt)

  const { data, error } = await supabase
    .from('generations')
    .insert({ user_id: user.id, prompt: parsed.data.prompt, result })
    .select()
    .single()

  if (error) return { error: error.message }

  revalidatePath('/history')
  redirect(`/history/${data.id}`)
}

'use client'
import { useOptimistic } from 'react'

export function EditableTitle({ gen }: { gen: Generation }) {
  const [optimisticGen, updateOptimistic] = useOptimistic(gen)

  const handleSave = async (newPrompt: string) => {
    updateOptimistic({ ...gen, prompt: newPrompt })  // 즉시 UI 업데이트
    await updateAction(gen.id, newPrompt)             // 서버 호출
  }

  return <input defaultValue={optimisticGen.prompt} onBlur={e => handleSave(e.target.value)} />
}

'use client'
import { useTransition } from 'react'
import { Dialog, DialogContent, DialogTrigger } from '@/components/ui/dialog'
import { Trash } from 'lucide-react'
import { deleteGeneration } from './actions'

export function DeleteButton({ id }: { id: string }) {
  const [pending, startTransition] = useTransition()

  return (
    <Dialog>
      <DialogTrigger className="text-red-500"><Trash className="h-4 w-4" /></DialogTrigger>
      <DialogContent>
        <h3 className="font-semibold mb-2">정말 삭제하시겠습니까?</h3>
        <p className="text-sm text-muted-foreground mb-4">되돌릴 수 없습니다.</p>
        <div className="flex gap-2 justify-end">
          <button>취소</button>
          <button
            disabled={pending}
            onClick={() => startTransition(() => deleteGeneration(id))}
            className="bg-red-500 text-white px-3 py-1.5 rounded"
          >
            {pending ? '삭제 중...' : '삭제'}
          </button>
        </div>
      </DialogContent>
    </Dialog>
  )
}

// actions.ts
'use server'
export async function deleteGeneration(id: string) {
  const supabase = await createClient()
  await supabase.from('generations').delete().eq('id', id)
  revalidatePath('/history')
}

// src/app/(app)/history/page.tsx
const cursor = searchParams.cursor
let q = supabase.from('generations').select('*').order('created_at', { ascending: false }).limit(20)
if (cursor) q = q.lt('created_at', cursor)
const { data: gens } = await q

const nextCursor = gens?.[gens.length - 1]?.created_at