[V0_FILE]sql:file="scripts/001_create_tables.sql" isMerged="true" -- Create profiles table for user management CREATE TABLE IF NOT EXISTS public.profiles ( id UUID PRIMARY KEY REFERENCES auth.users(id) ON DELETE CASCADE, display_name TEXT NOT NULL, bio TEXT, avatar_url TEXT, role TEXT NOT NULL DEFAULT 'reader' CHECK (role IN ('reader', 'author', 'admin')), created_at TIMESTAMPTZ NOT NULL DEFAULT NOW(), updated_at TIMESTAMPTZ NOT NULL DEFAULT NOW() ); -- Create books table CREATE TABLE IF NOT EXISTS public.books ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), title TEXT NOT NULL, author_id UUID NOT NULL REFERENCES public.profiles(id) ON DELETE CASCADE, cover_url TEXT, description TEXT, genre TEXT, status TEXT NOT NULL DEFAULT 'draft' CHECK (status IN ('draft', 'published', 'archived')), views INTEGER NOT NULL DEFAULT 0, created_at TIMESTAMPTZ NOT NULL DEFAULT NOW(), updated_at TIMESTAMPTZ NOT NULL DEFAULT NOW() ); -- Create chapters table CREATE TABLE IF NOT EXISTS public.chapters ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), book_id UUID NOT NULL REFERENCES public.books(id) ON DELETE CASCADE, title TEXT NOT NULL, content TEXT NOT NULL, chapter_number INTEGER NOT NULL, created_at TIMESTAMPTZ NOT NULL DEFAULT NOW(), updated_at TIMESTAMPTZ NOT NULL DEFAULT NOW(), UNIQUE(book_id, chapter_number) ); -- Create bookmarks table for reader progress CREATE TABLE IF NOT EXISTS public.bookmarks ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), user_id UUID NOT NULL REFERENCES public.profiles(id) ON DELETE CASCADE, book_id UUID NOT NULL REFERENCES public.books(id) ON DELETE CASCADE, chapter_id UUID REFERENCES public.chapters(id) ON DELETE CASCADE, scroll_position INTEGER NOT NULL DEFAULT 0, created_at TIMESTAMPTZ NOT NULL DEFAULT NOW(), updated_at TIMESTAMPTZ NOT NULL DEFAULT NOW(), UNIQUE(user_id, book_id) ); -- Create reader_settings table for customization CREATE TABLE IF NOT EXISTS public.reader_settings ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), user_id UUID NOT NULL REFERENCES public.profiles(id) ON DELETE CASCADE, font_family TEXT NOT NULL DEFAULT 'PT Serif', font_size INTEGER NOT NULL DEFAULT 18, line_height NUMERIC NOT NULL DEFAULT 1.8, text_align TEXT NOT NULL DEFAULT 'left', theme TEXT NOT NULL DEFAULT 'light', page_width INTEGER NOT NULL DEFAULT 800, created_at TIMESTAMPTZ NOT NULL DEFAULT NOW(), updated_at TIMESTAMPTZ NOT NULL DEFAULT NOW(), UNIQUE(user_id) ); -- Create banners table for homepage carousel CREATE TABLE IF NOT EXISTS public.banners ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), title TEXT NOT NULL, image_url TEXT NOT NULL, link_url TEXT, display_order INTEGER NOT NULL DEFAULT 0, is_active BOOLEAN NOT NULL DEFAULT true, created_at TIMESTAMPTZ NOT NULL DEFAULT NOW(), updated_at TIMESTAMPTZ NOT NULL DEFAULT NOW() ); -- Enable Row Level Security ALTER TABLE public.profiles ENABLE ROW LEVEL SECURITY; ALTER TABLE public.books ENABLE ROW LEVEL SECURITY; ALTER TABLE public.chapters ENABLE ROW LEVEL SECURITY; ALTER TABLE public.bookmarks ENABLE ROW LEVEL SECURITY; ALTER TABLE public.reader_settings ENABLE ROW LEVEL SECURITY; ALTER TABLE public.banners ENABLE ROW LEVEL SECURITY; -- Profiles policies CREATE POLICY "profiles_select_all" ON public.profiles FOR SELECT USING (true); CREATE POLICY "profiles_insert_own" ON public.profiles FOR INSERT WITH CHECK (auth.uid() = id); CREATE POLICY "profiles_update_own" ON public.profiles FOR UPDATE USING (auth.uid() = id); CREATE POLICY "profiles_delete_own" ON public.profiles FOR DELETE USING (auth.uid() = id); -- Books policies CREATE POLICY "books_select_published" ON public.books FOR SELECT USING (status = 'published' OR author_id = auth.uid()); CREATE POLICY "books_insert_own" ON public.books FOR INSERT WITH CHECK (author_id = auth.uid()); CREATE POLICY "books_update_own" ON public.books FOR UPDATE USING (author_id = auth.uid()); CREATE POLICY "books_delete_own" ON public.books FOR DELETE USING (author_id = auth.uid()); -- Chapters policies CREATE POLICY "chapters_select_published" ON public.chapters FOR SELECT USING ( EXISTS ( SELECT 1 FROM public.books WHERE books.id = chapters.book_id AND (books.status = 'published' OR books.author_id = auth.uid()) ) ); CREATE POLICY "chapters_insert_own" ON public.chapters FOR INSERT WITH CHECK ( EXISTS ( SELECT 1 FROM public.books WHERE books.id = chapters.book_id AND books.author_id = auth.uid() ) ); CREATE POLICY "chapters_update_own" ON public.chapters FOR UPDATE USING ( EXISTS ( SELECT 1 FROM public.books WHERE books.id = chapters.book_id AND books.author_id = auth.uid() ) ); CREATE POLICY "chapters_delete_own" ON public.chapters FOR DELETE USING ( EXISTS ( SELECT 1 FROM public.books WHERE books.id = chapters.book_id AND books.author_id = auth.uid() ) ); -- Bookmarks policies CREATE POLICY "bookmarks_select_own" ON public.bookmarks FOR SELECT USING (auth.uid() = user_id); CREATE POLICY "bookmarks_insert_own" ON public.bookmarks FOR INSERT WITH CHECK (auth.uid() = user_id); CREATE POLICY "bookmarks_update_own" ON public.bookmarks FOR UPDATE USING (auth.uid() = user_id); CREATE POLICY "bookmarks_delete_own" ON public.bookmarks FOR DELETE USING (auth.uid() = user_id); -- Reader settings policies CREATE POLICY "reader_settings_select_own" ON public.reader_settings FOR SELECT USING (auth.uid() = user_id); CREATE POLICY "reader_settings_insert_own" ON public.reader_settings FOR INSERT WITH CHECK (auth.uid() = user_id); CREATE POLICY "reader_settings_update_own" ON public.reader_settings FOR UPDATE USING (auth.uid() = user_id); CREATE POLICY "reader_settings_delete_own" ON public.reader_settings FOR DELETE USING (auth.uid() = user_id); -- Banners policies (public read, admin write) CREATE POLICY "banners_select_active" ON public.banners FOR SELECT USING (is_active = true); CREATE POLICY "banners_insert_admin" ON public.banners FOR INSERT WITH CHECK ( EXISTS ( SELECT 1 FROM public.profiles WHERE profiles.id = auth.uid() AND profiles.role = 'admin' ) ); CREATE POLICY "banners_update_admin" ON public.banners FOR UPDATE USING ( EXISTS ( SELECT 1 FROM public.profiles WHERE profiles.id = auth.uid() AND profiles.role = 'admin' ) ); CREATE POLICY "banners_delete_admin" ON public.banners FOR DELETE USING ( EXISTS ( SELECT 1 FROM public.profiles WHERE profiles.id = auth.uid() AND profiles.role = 'admin' ) ); -- Create indexes for better performance CREATE INDEX IF NOT EXISTS idx_books_author_id ON public.books(author_id); CREATE INDEX IF NOT EXISTS idx_books_status ON public.books(status); CREATE INDEX IF NOT EXISTS idx_chapters_book_id ON public.chapters(book_id); CREATE INDEX IF NOT EXISTS idx_bookmarks_user_id ON public.bookmarks(user_id); CREATE INDEX IF NOT EXISTS idx_bookmarks_book_id ON public.bookmarks(book_id); CREATE INDEX IF NOT EXISTS idx_banners_display_order ON public.banners(display_order); [V0_FILE]sql:file="scripts/002_create_profile_trigger.sql" isMerged="true" -- Auto-create profile on user signup CREATE OR REPLACE FUNCTION public.handle_new_user() RETURNS TRIGGER LANGUAGE plpgsql SECURITY DEFINER SET search_path = public AS $$ BEGIN INSERT INTO public.profiles (id, display_name, role) VALUES ( new.id, COALESCE(new.raw_user_meta_data ->> 'display_name', split_part(new.email, '@', 1)), 'reader' ) ON CONFLICT (id) DO NOTHING; RETURN new; END; $$; DROP TRIGGER IF EXISTS on_auth_user_created ON auth.users; CREATE TRIGGER on_auth_user_created AFTER INSERT ON auth.users FOR EACH ROW EXECUTE FUNCTION public.handle_new_user(); [V0_FILE]sql:file="scripts/003_seed_data.sql" isMerged="true" -- Seed some banner data for the homepage carousel INSERT INTO public.banners (title, image_url, link_url, display_order, is_active) VALUES ('Welcome to BookHub', '/placeholder.svg?height=400&width=1200', '/catalog', 1, true), ('Discover New Stories', '/placeholder.svg?height=400&width=1200', '/catalog', 2, true), ('Join Our Community', '/placeholder.svg?height=400&width=1200', '/auth/sign-up', 3, true) ON CONFLICT DO NOTHING; [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.10", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.76", "@supabase/ssr": "0.7.0", "@supabase/supabase-js": "2.77.0" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescript:file="middleware.ts" isMerged="true" import { updateSession } from "@/lib/supabase/middleware" import type { NextRequest } from "next/server" export async function middleware(request: NextRequest) { return await updateSession(request) } export const config = { matcher: ["/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)"], } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter, PT_Serif, Merriweather, Literata, Noto_Serif } from "next/font/google" import "./globals.css" import { ScrollToTop } from "@/components/scroll-to-top" const inter = Inter({ subsets: ["latin", "cyrillic"], variable: "--font-inter", }) const ptSerif = PT_Serif({ weight: ["400", "700"], subsets: ["latin", "cyrillic"], variable: "--font-pt-serif", }) const merriweather = Merriweather({ weight: ["400", "700"], subsets: ["latin", "cyrillic"], variable: "--font-merriweather", }) const literata = Literata({ subsets: ["latin", "cyrillic"], variable: "--font-literata", }) const notoSerif = Noto_Serif({ subsets: ["latin", "cyrillic"], variable: "--font-noto-serif", }) export const metadata: Metadata = { title: "Sözder - Онлайн кітап оқу платформасы", description: "Талантты авторлардың керемет әңгімелерін табыңыз және оқыңыз", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/footer.tsx" isEdit="true" isMerged="true" import Link from "next/link" import { BookOpen } from "lucide-react" export function Footer() { return ( ) } [V0_FILE]typescriptreact:file="components/banner-carousel.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { ChevronLeft, ChevronRight } from "lucide-react" import { Button } from "@/components/ui/button" import Image from "next/image" interface Banner { id: string title: string image_url: string link_url: string | null display_order: number } interface BannerCarouselProps { banners: Banner[] } export function BannerCarousel({ banners }: BannerCarouselProps) { const [currentIndex, setCurrentIndex] = useState(0) useEffect(() => { const timer = setInterval(() => { setCurrentIndex((prev) => (prev + 1) % banners.length) }, 5000) return () => clearInterval(timer) }, [banners.length]) const goToPrevious = () => { setCurrentIndex((prev) => (prev - 1 + banners.length) % banners.length) } const goToNext = () => { setCurrentIndex((prev) => (prev + 1) % banners.length) } if (!banners || banners.length === 0) return null return (

{banners.map((banner, index) => (

{banner.link_url ? (

{banner.title}

) : (

{banner.title}

)}

))} {/* Navigation Buttons */} {banners.length > 1 && ( <> {/* Dots Indicator */}

{banners.map((_, index) => (

)}

) } [V0_FILE]typescriptreact:file="components/book-grid.tsx" isMerged="true" import Link from "next/link" import Image from "next/image" import { Card, CardContent, CardFooter } from "@/components/ui/card" import { Eye } from "lucide-react" interface Book { id: string title: string cover_url: string | null description: string | null genre: string | null views: number profiles: { display_name: string } | null } interface BookGridProps { books: Book[] } export function BookGrid({ books }: BookGridProps) { return (

{books.map((book) => (

{book.title}

{book.profiles?.display_name || "Unknown Author"}

{book.genre && {book.genre}}

{book.views.toLocaleString()}

))}

) } [V0_FILE]typescriptreact:file="app/catalog/page.tsx" isEdit="true" isMerged="true" import { createClient } from "@/lib/supabase/server" import { Header } from "@/components/header" import { Footer } from "@/components/footer" import { CatalogFilters } from "@/components/catalog-filters" import { BookGrid } from "@/components/book-grid" interface SearchParams { search?: string genre?: string country?: string year?: string age_rating?: string book_type?: string book_status?: string min_chapters?: string max_chapters?: string sort?: string order?: string } export default async function CatalogPage({ searchParams }: { searchParams: Promise }) { const params = await searchParams const supabase = await createClient() // Build query let query = supabase .from("books") .select( ` *, profiles:author_id ( display_name ) `, ) .eq("status", "published") if (params.search) { query = query.or(`title.ilike.%${params.search}%,description.ilike.%${params.search}%`) } if (params.genre && params.genre !== "all") { query = query.eq("genre", params.genre) } if (params.country && params.country !== "all") { query = query.eq("country", params.country) } if (params.year) { query = query.eq("release_year", Number.parseInt(params.year)) } if (params.age_rating && params.age_rating !== "all") { query = query.eq("age_rating", params.age_rating) } if (params.book_type && params.book_type !== "all") { query = query.eq("book_type", params.book_type) } if (params.book_status && params.book_status !== "all") { query = query.eq("book_status", params.book_status) } if (params.min_chapters) { query = query.gte("chapter_count", Number.parseInt(params.min_chapters)) } if (params.max_chapters) { query = query.lte("chapter_count", Number.parseInt(params.max_chapters)) } const order = params.order === "asc" ? true : false switch (params.sort) { case "views": query = query.order("views", { ascending: order }) break case "trending": query = query.order("popularity_score", { ascending: order }) break case "title": query = query.order("title", { ascending: order }) break case "oldest": query = query.order("created_at", { ascending: true }) break case "date_added": query = query.order("created_at", { ascending: order }) break case "date_updated": query = query.order("updated_at", { ascending: order }) break default: query = query.order("created_at", { ascending: false }) } const { data: books } = await query const { data: allBooks } = await supabase .from("books") .select("genre, country, release_year") .eq("status", "published") const genres = Array.from(new Set(allBooks?.map((b) => b.genre).filter(Boolean) as string[])) const countries = Array.from(new Set(allBooks?.map((b) => b.country).filter(Boolean) as string[])) const years = Array.from(new Set(allBooks?.map((b) => b.release_year).filter(Boolean) as number[])).sort( (a, b) => b - a, ) return (

Кітаптар каталогы

Келесі сүйікті оқығаныңызды табыңыз

{/* Filters Sidebar */} {/* Books Grid */}

{books && books.length > 0 ? ( <>

{books.length} кітап табылды

) : (

Сіздің іздеу критерийлеріңізге сәйкес кітаптар табылмады.

Сүзгілерді тазалау

)}

) } [V0_FILE]typescriptreact:file="app/catalog/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="components/catalog-filters.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useRouter, useSearchParams } from "next/navigation" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Button } from "@/components/ui/button" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Search, X, ArrowUpDown } from "lucide-react" import { useState } from "react" interface CatalogFiltersProps { genres: string[] countries: string[] years: number[] currentParams: any } const POPULAR_GENRES = [ "Фантастика", "Роман", "Детектив", "Тарихи", "Ғылыми-фантастика", "Фэнтези", "Триллер", "Драма", "Комедия", "Поэзия", ] const COUNTRIES = [ "Қазақстан", "Ресей", "АҚШ", "Германия", "Жапония", "Түркия", "Қырғызстан", "Өзбекстан", "Әзірбайжан", "Ұлыбритания", "Франция", "Испания", "Италия", "Қытай", "Оңтүстік Корея", "Канада", "Австралия", "Бразилия", "Аргентина", "Мексика", ] export function CatalogFilters({ genres, countries, years, currentParams }: CatalogFiltersProps) { const router = useRouter() const searchParams = useSearchParams() const [searchValue, setSearchValue] = useState(searchParams.get("search") || "") const updateParams = (key: string, value: string) => { const params = new URLSearchParams(searchParams.toString()) if (value && value !== "all") { params.set(key, value) } else { params.delete(key) } router.push(`/catalog?${params.toString()}`) } const handleSearch = (e: React.FormEvent) => { e.preventDefault() updateParams("search", searchValue) } const clearFilters = () => { setSearchValue("") router.push("/catalog") } const toggleOrder = () => { const params = new URLSearchParams(searchParams.toString()) const currentOrder = params.get("order") || "desc" params.set("order", currentOrder === "desc" ? "asc" : "desc") router.push(`/catalog?${params.toString()}`) } const hasFilters = searchParams.toString().length > 0 return (

{/* Search */}

Іздеу

Жанр

Ел

Шығарылған жылы

Жас шектеуі

Кітап түрі

Мәртебесі

Тараулар саны

updateParams("min_chapters", e.target.value)} min="0" /> updateParams("max_chapters", e.target.value)} min="0" />

Сұрыптау

{/* Clear Filters */} {hasFilters && ( )}

) } [V0_FILE]typescriptreact:file="app/reader/[bookId]/page.tsx" isMerged="true" import { createClient } from "@/lib/supabase/server" import { ReaderInterface } from "@/components/reader-interface" import { notFound, redirect } from "next/navigation" export default async function ReaderPage({ params, searchParams, }: { params: Promise<{ bookId: string }> searchParams: Promise<{ chapter?: string }> }) { const { bookId } = await params const { chapter: chapterId } = await searchParams const supabase = await createClient() // Get user const { data: { user }, } = await supabase.auth.getUser() // Fetch book const { data: book } = await supabase .from("books") .select( ` *, profiles:author_id ( display_name ) `, ) .eq("id", bookId) .single() if (!book) { notFound() } // Fetch all chapters const { data: chapters } = await supabase .from("chapters") .select("*") .eq("book_id", bookId) .order("chapter_number", { ascending: true }) if (!chapters || chapters.length === 0) { redirect(`/book/${bookId}`) } // Determine current chapter let currentChapter = chapters[0] if (chapterId) { const found = chapters.find((c) => c.id === chapterId) if (found) currentChapter = found } // Get user settings if logged in let settings = null if (user) { const { data } = await supabase.from("reader_settings").select("*").eq("user_id", user.id).single() settings = data } // Get bookmark if logged in let bookmark = null if (user) { const { data } = await supabase.from("bookmarks").select("*").eq("user_id", user.id).eq("book_id", bookId).single() bookmark = data } return ( ) } [V0_FILE]typescriptreact:file="app/auth/verify-email/page.tsx" isMerged="true" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import Link from "next/link" import { BookOpen, Mail } from "lucide-react" export default function VerifyEmailPage() { return (

BookHub

Check your email We've sent you a verification link to confirm your email address.

Click the link in the email to complete your registration and start reading.

) } [V0_FILE]typescriptreact:file="app/auth/callback/route.ts" isEdit="true" isMerged="true" import { createClient } from "@/lib/supabase/server" import { NextResponse } from "next/server" export async function GET(request: Request) { const requestUrl = new URL(request.url) const code = requestUrl.searchParams.get("code") const origin = requestUrl.origin if (code) { const supabase = await createClient() const { data, error } = await supabase.auth.exchangeCodeForSession(code) if (error) { console.error("[v0] Auth callback error:", error) return NextResponse.redirect(`${origin}/auth/login?error=auth_failed`) } if (data.session) { console.log("[v0] Session created successfully for user:", data.user?.email) return NextResponse.redirect(`${origin}/`) } } return NextResponse.redirect(`${origin}/auth/login`) } [V0_FILE]typescriptreact:file="app/profile/page.tsx" isEdit="true" isMerged="true" import { createClient } from "@/lib/supabase/server" import { redirect } from "next/navigation" import { Header } from "@/components/header" import { Footer } from "@/components/footer" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { BookOpen, Settings } from "lucide-react" import Link from "next/link" import { SignOutButton } from "@/components/sign-out-button" export default async function ProfilePage() { const supabase = await createClient() const { data: { user }, } = await supabase.auth.getUser() if (!user) { redirect("/auth/login") } // Get profile const { data: profile } = await supabase.from("profiles").select("*").eq("id", user.id).single() // Get bookmarks const { data: bookmarks } = await supabase .from("bookmarks") .select( ` *, books ( id, title, cover_url, profiles:author_id ( display_name ) ) `, ) .eq("user_id", user.id) .order("updated_at", { ascending: false }) return (

{/* Profile Card */}

Профиль

Көрсетілетін аты

{profile?.display_name || "Белгісіз"}

Электрондық пошта

{user.email}

Рөл

{profile?.role === "author" ? "Автор" : profile?.role === "admin" ? "Әкімші" : "Оқырман"}

{profile?.role === "author" && ( )} {profile?.role === "admin" && ( )} {/* Reading List */} Оқуды жалғастыру {bookmarks && bookmarks.length > 0 ? (

{bookmarks.map((bookmark: any) => (

{bookmark.books?.title}

{bookmark.books?.profiles?.display_name || "Белгісіз"}

))}

) : (

Оқу тізіміңізде әлі кітаптар жоқ.{" "} Каталогты қарау

)}

) } [V0_FILE]typescriptreact:file="components/sign-out-button.tsx" isEdit="true" isMerged="true" "use client" import { createClient } from "@/lib/supabase/client" import { Button } from "@/components/ui/button" import { LogOut } from "lucide-react" import { useRouter } from "next/navigation" import { useState } from "react" export function SignOutButton() { const router = useRouter() const [isLoading, setIsLoading] = useState(false) const handleSignOut = async () => { if (isLoading) return setIsLoading(true) try { const supabase = createClient() const { error } = await supabase.auth.signOut() if (error) { console.error("[v0] Sign out error:", error) } window.location.href = "/" } catch (error) { console.error("[v0] Sign out error:", error) setIsLoading(false) } } return ( ) } [V0_FILE]typescriptreact:file="app/author/page.tsx" isMerged="true" import { createClient } from "@/lib/supabase/server" import { redirect } from "next/navigation" import { Header } from "@/components/header" import { Footer } from "@/components/footer" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Plus, BookOpen, Eye } from "lucide-react" import Link from "next/link" import Image from "next/image" export default async function AuthorDashboardPage() { const supabase = await createClient() const { data: { user }, } = await supabase.auth.getUser() if (!user) { redirect("/auth/login") } // Get profile const { data: profile } = await supabase.from("profiles").select("*").eq("id", user.id).single() // Get author's books const { data: books } = await supabase .from("books") .select( ` *, chapters:chapters(count) `, ) .eq("author_id", user.id) .order("created_at", { ascending: false }) return (

{/* Header */}

Author Dashboard

Manage your books and chapters

{/* Stats */}

Total Books

{books?.length || 0}

Published

{books?.filter((b) => b.status === "published").length || 0}

Total Views

{books?.reduce((sum, book) => sum + book.views, 0).toLocaleString() || 0}

{/* Books List */} Your Books {books && books.length > 0 ? (

{books.map((book: any) => (

{book.title}

{book.status} • {book.chapters?.[0]?.count || 0} chapters • {book.views} views

))}

) : (

You haven't created any books yet.

)}

) } [V0_FILE]typescriptreact:file="app/author/new-book/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import { createClient } from "@/lib/supabase/server" import { redirect } from "next/navigation" import { Header } from "@/components/header" import { Footer } from "@/components/footer" import { NewBookForm } from "@/components/new-book-form" export default async function NewBookPage() { const supabase = await createClient() const { data: { user }, } = await supabase.auth.getUser() if (!user) { redirect("/auth/login") } return (

Жаңа кітап қосу

Өзіңіздің кітабыңыздың деталейлерін толтырыңыз

) } [V0_FILE]typescriptreact:file="components/new-book-form.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { useRouter } from "next/navigation" import { createClient } from "@/lib/supabase/client" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Card, CardContent } from "@/components/ui/card" interface NewBookFormProps { userId: string } export function NewBookForm({ userId }: NewBookFormProps) { const router = useRouter() const [isLoading, setIsLoading] = useState(false) const [error, setError] = useState(null) const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) setError(null) const formData = new FormData(e.currentTarget) const supabase = createClient() try { const { data, error } = await supabase .from("books") .insert({ title: formData.get("title") as string, description: formData.get("description") as string, genre: formData.get("genre") as string, author_id: userId, status: "draft", moderation_status: "pending", country: formData.get("country") as string, book_type: formData.get("book_type") as string, age_rating: formData.get("age_rating") as string, release_year: Number.parseInt(formData.get("release_year") as string) || new Date().getFullYear(), }) .select() .single() if (error) throw error router.push(`/author/book/${data.id}`) } catch (err: any) { setError(err.message || "Failed to create book") } finally { setIsLoading(false) } } const currentYear = new Date().getFullYear() const years = Array.from({ length: 100 }, (_, i) => currentYear - i) return (

Кітап тақырыбы

Жанр

Елі

Кітап түрі

Шығарылған жылы

Жас рейтингі

Сипаттамасы

</div>

{error && <p className="text-sm text-destructive">{error}</p>}

<div className="flex gap-3">
            <Button type="submit" disabled={isLoading}>
              {isLoading ? "Жүктелуде..." : "Кітап қосу"}
            </Button>
            <Button type="button" variant="outline" onClick={() => router.back()}>
              Қайту
            </Button>
          </div>
        </form>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/book-status-toggle.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { createClient } from "@/lib/supabase/client"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { useRouter } from "next/navigation"

interface BookStatusToggleProps {
  bookId: string
  currentStatus: string
}

export function BookStatusToggle({ bookId, currentStatus }: BookStatusToggleProps) {
  const router = useRouter()
  const [status, setStatus] = useState(currentStatus)
  const [isLoading, setIsLoading] = useState(false)

const handleStatusChange = async (newStatus: string) => {
    setIsLoading(true)
    const supabase = createClient()

try {
      const { error } = await supabase.from("books").update({ status: newStatus }).eq("id", bookId)

if (error) throw error

setStatus(newStatus)
      router.refresh()
    } catch (error) {
      console.error("[v0] Failed to update book status:", error)
    } finally {
      setIsLoading(false)
    }
  }

return (
    <Select value={status} onValueChange={handleStatusChange} disabled={isLoading}>
      <SelectTrigger className="w-[140px]">
        <SelectValue />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="draft">Draft</SelectItem>
        <SelectItem value="published">Published</SelectItem>
        <SelectItem value="archived">Archived</SelectItem>
      </SelectContent>
    </Select>
  )
}
[V0_FILE]typescriptreact:file="components/chapters-list.tsx" isMerged="true"
"use client"

import { Button } from "@/components/ui/button"
import { Edit, Trash2 } from "lucide-react"
import Link from "next/link"
import { createClient } from "@/lib/supabase/client"
import { useRouter } from "next/navigation"

interface Chapter {
  id: string
  title: string
  chapter_number: number
}

interface ChaptersListProps {
  bookId: string
  chapters: Chapter[]
}

export function ChaptersList({ bookId, chapters }: ChaptersListProps) {
  const router = useRouter()

const handleDelete = async (chapterId: string) => {
    if (!confirm("Are you sure you want to delete this chapter?")) return

const supabase = createClient()
    const { error } = await supabase.from("chapters").delete().eq("id", chapterId)

if (error) {
      console.error("[v0] Failed to delete chapter:", error)
      return
    }

router.refresh()
  }

if (chapters.length === 0) {
    return (
      <p className="text-muted-foreground text-center py-8">No chapters yet. Add your first chapter to get started.</p>
    )
  }

return (
    <div className="space-y-2">
      {chapters.map((chapter) => (
        <div key={chapter.id} className="flex items-center justify-between p-3 rounded-lg border hover:bg-muted/50">
          <div>
            <span className="font-medium">
              Chapter {chapter.chapter_number}: {chapter.title}
            </span>
          </div>
          <div className="flex items-center gap-2">
            <Button variant="ghost" size="sm" asChild>
              <Link href={`/author/book/${bookId}/chapter/${chapter.id}`}>
                <Edit className="h-4 w-4" />
              </Link>
            </Button>
            <Button variant="ghost" size="sm" onClick={() => handleDelete(chapter.id)}>
              <Trash2 className="h-4 w-4" />
            </Button>
          </div>
        </div>
      ))}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/chapter-form.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { createClient } from "@/lib/supabase/client"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Card, CardContent } from "@/components/ui/card"

interface ChapterFormProps {
  bookId: string
  chapterNumber: number
  initialData?: {
    id: string
    title: string
    content: string
  }
}

export function ChapterForm({ bookId, chapterNumber, initialData }: ChapterFormProps) {
  const router = useRouter()
  const [isLoading, setIsLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)

const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    setIsLoading(true)
    setError(null)

const formData = new FormData(e.currentTarget)
    const supabase = createClient()

try {
      if (initialData) {
        // Update existing chapter
        const { error } = await supabase
          .from("chapters")
          .update({
            title: formData.get("title") as string,
            content: formData.get("content") as string,
          })
          .eq("id", initialData.id)

if (error) throw error
      } else {
        // Create new chapter
        const { error } = await supabase.from("chapters").insert({
          book_id: bookId,
          title: formData.get("title") as string,
          content: formData.get("content") as string,
          chapter_number: chapterNumber,
        })

if (error) throw error
      }

router.push(`/author/book/${bookId}`)
      router.refresh()
    } catch (err: any) {
      setError(err.message || "Failed to save chapter")
    } finally {
      setIsLoading(false)
    }
  }

return (
    <Card>
      <CardContent className="pt-6">
        <form onSubmit={handleSubmit} className="space-y-6">
          <div className="space-y-2">
            <Label htmlFor="title">Chapter Title</Label>
            <Input
              id="title"
              name="title"
              placeholder="Enter chapter title"
              defaultValue={initialData?.title}
              required
            />
          </div>

<div className="space-y-2">
            <Label htmlFor="content">Chapter Content</Label>
            <Textarea
              id="content"
              name="content"
              placeholder="Write your chapter content here..."
              rows={20}
              defaultValue={initialData?.content}
              required
              className="font-serif"
            />
          </div>

{error && <p className="text-sm text-destructive">{error}</p>}

<div className="flex gap-3">
            <Button type="submit" disabled={isLoading}>
              {isLoading ? "Saving..." : initialData ? "Update Chapter" : "Create Chapter"}
            </Button>
            <Button type="button" variant="outline" onClick={() => router.back()}>
              Cancel
            </Button>
          </div>
        </form>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/author/book/[bookId]/chapter/[chapterId]/page.tsx" isMerged="true"
import { createClient } from "@/lib/supabase/server"
import { redirect, notFound } from "next/navigation"
import { Header } from "@/components/header"
import { Footer } from "@/components/footer"
import { ChapterForm } from "@/components/chapter-form"

export default async function EditChapterPage({
  params,
}: {
  params: Promise<{ bookId: string; chapterId: string }>
}) {
  const { bookId, chapterId } = await params
  const supabase = await createClient()

const {
    data: { user },
  } = await supabase.auth.getUser()

if (!user) {
    redirect("/auth/login")
  }

// Verify book ownership
  const { data: book } = await supabase.from("books").select("*").eq("id", bookId).eq("author_id", user.id).single()

if (!book) {
    notFound()
  }

// Get chapter
  const { data: chapter } = await supabase
    .from("chapters")
    .select("*")
    .eq("id", chapterId)
    .eq("book_id", bookId)
    .single()

if (!chapter) {
    notFound()
  }

return (
    <div className="min-h-screen flex flex-col">
      <Header />

<main className="flex-1 container mx-auto px-4 py-8">
        <div className="max-w-4xl mx-auto">
          <h1 className="text-4xl font-bold mb-2">Edit Chapter</h1>
          <p className="text-muted-foreground mb-8">
            {book.title} - Chapter {chapter.chapter_number}
          </p>

<Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import { createClient } from "@/lib/supabase/server"
import { redirect } from "next/navigation"
import { Header } from "@/components/header"
import { Footer } from "@/components/footer"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Users, BookOpen, ImageIcon } from "lucide-react"
import Link from "next/link"

export default async function AdminDashboardPage() {
  const supabase = await createClient()

const {
    data: { user },
  } = await supabase.auth.getUser()

if (!user) {
    redirect("/auth/login")
  }

// Check if user is admin
  const { data: profile } = await supabase.from("profiles").select("*").eq("id", user.id).single()

if (!profile || profile.role !== "admin") {
    redirect("/")
  }

// Get stats
  const { count: usersCount } = await supabase.from("profiles").select("*", { count: "exact", head: true })

const { count: booksCount } = await supabase.from("books").select("*", { count: "exact", head: true })

const { count: bannersCount } = await supabase.from("banners").select("*", { count: "exact", head: true })

return (
    <div className="min-h-screen flex flex-col">
      <Header />

<main className="flex-1 container mx-auto px-4 py-8">
        <div className="max-w-6xl mx-auto space-y-6">
          <div>
            <h1 className="text-4xl font-bold mb-2">Әкімші панелі</h1>
            <p className="text-muted-foreground">Пайдаланушыларды, кітаптарды және сайт мазмұнын басқару</p>
          </div>

{/* Stats */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <Card>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Барлық пайдаланушылар</CardTitle>
                <Users className="h-4 w-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">{usersCount || 0}</div>
              </CardContent>
            </Card>

<Card>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Барлық кітаптар</CardTitle>
                <BookOpen className="h-4 w-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">{booksCount || 0}</div>
              </CardContent>
            </Card>

<Card>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Белсенді баннерлер</CardTitle>
                <ImageIcon className="h-4 w-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">{bannersCount || 0}</div>
              </CardContent>
            </Card>
          </div>

{/* Quick Actions */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <Card className="hover:shadow-lg transition-shadow">
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Users className="h-5 w-5" />
                  Пайдаланушыларды басқару
                </CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-sm text-muted-foreground mb-4">
                  Пайдаланушы аккаунттары мен рөлдерін қарау және басқару
                </p>
                <Button asChild className="w-full">
                  <Link href="/admin/users">Басқару</Link>
                </Button>
              </CardContent>
            </Card>

<Card className="hover:shadow-lg transition-shadow">
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <BookOpen className="h-5 w-5" />
                  Кітаптарды басқару
                </CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-sm text-muted-foreground mb-4">Жарияланған кітаптарды модерациялау және басқару</p>
                <Button asChild className="w-full">
                  <Link href="/admin/books">Басқару</Link>
                </Button>
              </CardContent>
            </Card>

<Card className="hover:shadow-lg transition-shadow">
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <ImageIcon className="h-5 w-5" />
                  Баннерлерді басқару
                </CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-sm text-muted-foreground mb-4">Басты бет карусель баннерлерін жаңарту</p>
                <Button asChild className="w-full">
                  <Link href="/admin/banners">Басқару</Link>
                </Button>
              </CardContent>
            </Card>
          </div>
        </div>
      </main>

<Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/users/page.tsx" isMerged="true"
import { createClient } from "@/lib/supabase/server"
import { redirect } from "next/navigation"
import { Header } from "@/components/header"
import { Footer } from "@/components/footer"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { UserRoleToggle } from "@/components/user-role-toggle"

export default async function AdminUsersPage() {
  const supabase = await createClient()

const {
    data: { user },
  } = await supabase.auth.getUser()

if (!user) {
    redirect("/auth/login")
  }

// Check if user is admin
  const { data: profile } = await supabase.from("profiles").select("*").eq("id", user.id).single()

if (!profile || profile.role !== "admin") {
    redirect("/")
  }

// Get all users
  const { data: users } = await supabase.from("profiles").select("*").order("created_at", { ascending: false })

return (
    <div className="min-h-screen flex flex-col">
      <Header />

<main className="flex-1 container mx-auto px-4 py-8">
        <div className="max-w-6xl mx-auto space-y-6">
          <div>
            <h1 className="text-4xl font-bold mb-2">Manage Users</h1>
            <p className="text-muted-foreground">View and manage user accounts and roles</p>
          </div>

<Card>
            <CardHeader>
              <CardTitle>All Users ({users?.length || 0})</CardTitle>
            </CardHeader>
            <CardContent>
              {users && users.length > 0 ? (
                <div className="space-y-3">
                  {users.map((u) => (
                    <div key={u.id} className="flex items-center justify-between p-4 rounded-lg border">
                      <div className="flex-1">
                        <p className="font-medium">{u.display_name}</p>
                        <p className="text-sm text-muted-foreground">ID: {u.id}</p>
                      </div>
                      <UserRoleToggle userId={u.id} currentRole={u.role} />
                    </div>
                  ))}
                </div>
              ) : (
                <p className="text-muted-foreground text-center py-8">No users found.</p>
              )}
            </CardContent>
          </Card>
        </div>
      </main>

<Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/user-role-toggle.tsx" isMerged="true"
"use client"

interface UserRoleToggleProps {
  userId: string
  currentRole: string
}

export function UserRoleToggle({ userId, currentRole }: UserRoleToggleProps) {
  const router = useRouter()
  const [role, setRole] = useState(currentRole)
  const [isLoading, setIsLoading] = useState(false)

const handleRoleChange = async (newRole: string) => {
    setIsLoading(true)
    const supabase = createClient()

try {
      const { error } = await supabase.from("profiles").update({ role: newRole }).eq("id", userId)

if (error) throw error

setRole(newRole)
      router.refresh()
    } catch (error) {
      console.error("[v0] Failed to update user role:", error)
    } finally {
      setIsLoading(false)
    }
  }

return (
    <Select value={role} onValueChange={handleRoleChange} disabled={isLoading}>
      <SelectTrigger className="w-[140px]">
        <SelectValue />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="reader">Reader</SelectItem>
        <SelectItem value="author">Author</SelectItem>
        <SelectItem value="admin">Admin</SelectItem>
      </SelectContent>
    </Select>
  )
}
[V0_FILE]typescriptreact:file="app/admin/books/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import { createClient } from "@/lib/supabase/server"
import { redirect } from "next/navigation"
import { Header } from "@/components/header"
import { Footer } from "@/components/footer"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import Link from "next/link"
import Image from "next/image"
import { DeleteBookButton } from "@/components/delete-book-button"

export default async function AdminBooksPage() {
  const supabase = await createClient()

const {
    data: { user },
  } = await supabase.auth.getUser()

if (!user) {
    redirect("/auth/login")
  }

// Check if user is admin
  const { data: profile } = await supabase.from("profiles").select("*").eq("id", user.id).single()

if (!profile || profile.role !== "admin") {
    redirect("/")
  }

// Get all books
  const { data: books } = await supabase
    .from("books")
    .select(
      `
      *,
      profiles:author_id (
        display_name
      )
    `,
    )
    .order("created_at", { ascending: false })

return (
    <div className="min-h-screen flex flex-col">
      <Header />

<main className="flex-1 container mx-auto px-4 py-8">
        <div className="max-w-6xl mx-auto space-y-6">
          <div>
            <h1 className="text-4xl font-bold mb-2">Кітаптарды басқару</h1>
            <p className="text-muted-foreground">Барлық жарияланған кітаптарды модерациялау және басқару</p>
          </div>

{/* Moderation Panel for Pending Books */}
          <Card>
            <CardHeader>
              <CardTitle>Модерациялау күтінген кітаптар</CardTitle>
            </CardHeader>
            <CardContent>
              {books && books.filter((b: any) => b.moderation_status === "pending").length > 0 ? (
                <div className="space-y-4">
                  {books
                    .filter((b: any) => b.moderation_status === "pending")
                    .map((book: any) => (
                      <div
                        key={book.id}
                        className="flex items-center gap-4 p-4 rounded-lg border border-yellow-500/30 bg-yellow-500/5"
                      >
                        <div className="relative h-20 w-14 bg-muted rounded overflow-hidden flex-shrink-0">
                          <Image
                            src={
                              book.cover_url || `/placeholder.svg?height=120&width=80&query=book cover ${book.title}`
                            }
                            alt={book.title}
                            fill
                            className="object-cover"
                          />
                        </div>

<div className="flex-1 min-w-0">
                          <h3 className="font-semibold line-clamp-1">{book.title}</h3>
                          <div className="flex items-center gap-3 mt-1 text-sm text-muted-foreground">
                            <span>{book.profiles?.display_name || "Белгісіз"}</span>
                            <span>•</span>
                            <span className="text-yellow-600">Күтінген</span>
                          </div>
                        </div>

<div className="flex items-center gap-2">
                          <Button variant="outline" size="sm" asChild>
                            <Link href={`/book/${book.id}`}>Қарау</Link>
                          </Button>
                          <Button variant="default" size="sm" className="bg-green-600 hover:bg-green-700" asChild>
                            <Link href={`/admin/books/${book.id}/approve`}>Мақұлдау</Link>
                          </Button>
                          <Button variant="destructive" size="sm" asChild>
                            <Link href={`/admin/books/${book.id}/reject`}>Қабылдамау</Link>
                          </Button>
                        </div>
                      </div>
                    ))}
                </div>
              ) : (
                <p className="text-muted-foreground text-center py-8">Модерациялау күтінген кітаптар жоқ.</p>
              )}
            </CardContent>
          </Card>

{/* Approved Books Section */}
          <Card>
            <CardHeader>
              <CardTitle>Барлық кітаптар ({books?.length || 0})</CardTitle>
            </CardHeader>
            <CardContent>
              {books && books.length > 0 ? (
                <div className="space-y-4">
                  {books.map((book: any) => (
                    <div key={book.id} className="flex items-center gap-4 p-4 rounded-lg border">
                      <div className="relative h-20 w-14 bg-muted rounded overflow-hidden flex-shrink-0">
                        <Image
                          src={book.cover_url || `/placeholder.svg?height=120&width=80&query=book cover ${book.title}`}
                          alt={book.title}
                          fill
                          className="object-cover"
                        />
                      </div>

<div className="flex-1 min-w-0">
                        <h3 className="font-semibold line-clamp-1">{book.title}</h3>
                        <div className="flex items-center gap-3 mt-1 text-sm text-muted-foreground">
                          <span>{book.profiles?.display_name || "Белгісіз"}</span>
                          <span>•</span>
                          <span className="capitalize">{book.status}</span>
                          <span>•</span>
                          <span>{book.views} көрініс</span>
                        </div>
                      </div>

<div className="flex items-center gap-2">
                        <Button variant="outline" size="sm" asChild>
                          <Link href={`/book/${book.id}`}>Қарау</Link>
                        </Button>
                        <Button variant="outline" size="sm" asChild>
                          <Link href={`/admin/books/${book.id}/edit`}>Өңдеу</Link>
                        </Button>
                        <DeleteBookButton bookId={book.id} />
                      </div>
                    </div>
                  ))}
                </div>
              ) : (
                <p className="text-muted-foreground text-center py-8">Кітаптар табылмады.</p>
              )}
            </CardContent>
          </Card>
        </div>
      </main>

<Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/delete-book-button.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { createClient } from "@/lib/supabase/client"
import { Button } from "@/components/ui/button"
import { Trash2 } from "lucide-react"
import { useRouter } from "next/navigation"

interface DeleteBookButtonProps {
  bookId: string
}

export function DeleteBookButton({ bookId }: DeleteBookButtonProps) {
  const router = useRouter()
  const [isLoading, setIsLoading] = useState(false)

const handleDelete = async () => {
    if (!confirm("Are you sure you want to delete this book? This action cannot be undone.")) return

setIsLoading(true)
    const supabase = createClient()

try {
      const { error } = await supabase.from("books").delete().eq("id", bookId)

if (error) throw error

router.refresh()
    } catch (error) {
      console.error("[v0] Failed to delete book:", error)
      alert("Failed to delete book")
    } finally {
      setIsLoading(false)
    }
  }

return (
    <Button variant="outline" size="sm" onClick={handleDelete} disabled={isLoading}>
      <Trash2 className="h-4 w-4" />
    </Button>
  )
}
[V0_FILE]typescriptreact:file="app/admin/banners/page.tsx" isMerged="true"
import { createClient } from "@/lib/supabase/server"
import { redirect } from "next/navigation"
import { Header } from "@/components/header"
import { Footer } from "@/components/footer"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Plus } from "lucide-react"
import { BannersList } from "@/components/banners-list"

export default async function AdminBannersPage() {
  const supabase = await createClient()

const {
    data: { user },
  } = await supabase.auth.getUser()

if (!user) {
    redirect("/auth/login")
  }

// Check if user is admin
  const { data: profile } = await supabase.from("profiles").select("*").eq("id", user.id).single()

if (!profile || profile.role !== "admin") {
    redirect("/")
  }

// Get all banners
  const { data: banners } = await supabase.from("banners").select("*").order("display_order", { ascending: true })

return (
    <div className="min-h-screen flex flex-col">
      <Header />

<main className="flex-1 container mx-auto px-4 py-8">
        <div className="max-w-4xl mx-auto space-y-6">
          <div className="flex items-center justify-between">
            <div>
              <h1 className="text-4xl font-bold mb-2">Manage Banners</h1>
              <p className="text-muted-foreground">Update homepage carousel banners</p>
            </div>
            <Button>
              <Plus className="mr-2 h-4 w-4" />
              Add Banner
            </Button>
          </div>

<Card>
            <CardHeader>
              <CardTitle>Homepage Banners</CardTitle>
            </CardHeader>
            <CardContent>
              <BannersList banners={banners || []} />
            </CardContent>
          </Card>
        </div>
      </main>

<Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/banners-list.tsx" isMerged="true"
"use client"

import { Button } from "@/components/ui/button"
import { Switch } from "@/components/ui/switch"
import { Trash2 } from "lucide-react"
import { createClient } from "@/lib/supabase/client"
import { useRouter } from "next/navigation"
import Image from "next/image"

interface Banner {
  id: string
  title: string
  image_url: string
  link_url: string | null
  display_order: number
  is_active: boolean
}

interface BannersListProps {
  banners: Banner[]
}

export function BannersList({ banners }: BannersListProps) {
  const router = useRouter()

const handleToggleActive = async (bannerId: string, isActive: boolean) => {
    const supabase = createClient()
    const { error } = await supabase.from("banners").update({ is_active: !isActive }).eq("id", bannerId)

if (error) {
      console.error("[v0] Failed to toggle banner:", error)
      return
    }

router.refresh()
  }

const handleDelete = async (bannerId: string) => {
    if (!confirm("Are you sure you want to delete this banner?")) return

const supabase = createClient()
    const { error } = await supabase.from("banners").delete().eq("id", bannerId)

if (error) {
      console.error("[v0] Failed to delete banner:", error)
      return
    }

router.refresh()
  }

if (banners.length === 0) {
    return <p className="text-muted-foreground text-center py-8">No banners yet. Add your first banner.</p>
  }

return (
    <div className="space-y-4">
      {banners.map((banner) => (
        <div key={banner.id} className="flex items-center gap-4 p-4 rounded-lg border">
          <div className="relative h-16 w-28 bg-muted rounded overflow-hidden flex-shrink-0">
            <Image src={banner.image_url || "/placeholder.svg"} alt={banner.title} fill className="object-cover" />
          </div>

<div className="flex-1 min-w-0">
            <h3 className="font-semibold line-clamp-1">{banner.title}</h3>
            <p className="text-sm text-muted-foreground">Order: {banner.display_order}</p>
          </div>

<div className="flex items-center gap-3">
            <div className="flex items-center gap-2">
              <Switch
                checked={banner.is_active}
                onCheckedChange={() => handleToggleActive(banner.id, banner.is_active)}
              />
              <span className="text-sm">{banner.is_active ? "Active" : "Inactive"}</span>
            </div>
            <Button variant="ghost" size="sm" onClick={() => handleDelete(banner.id)}>
              <Trash2 className="h-4 w-4" />
            </Button>
          </div>
        </div>
      ))}
    </div>
  )
}
[V0_FILE]sql:file="scripts/004_add_book_fields.sql" isMerged="true"
-- Add new fields to books table
ALTER TABLE books
ADD COLUMN IF NOT EXISTS country TEXT,
ADD COLUMN IF NOT EXISTS release_year INTEGER,
ADD COLUMN IF NOT EXISTS age_rating TEXT CHECK (age_rating IN ('0+', '6+', '12+', '16+', '18+')),
ADD COLUMN IF NOT EXISTS book_type TEXT CHECK (book_type IN ('prose', 'poetry', 'drama', 'essay')),
ADD COLUMN IF NOT EXISTS book_status TEXT CHECK (book_status IN ('completed', 'ongoing', 'announced', 'discontinued', 'on_hold')) DEFAULT 'ongoing',
ADD COLUMN IF NOT EXISTS chapter_count INTEGER DEFAULT 0,
ADD COLUMN IF NOT EXISTS updated_at TIMESTAMPTZ DEFAULT NOW();

-- Create index for better query performance
CREATE INDEX IF NOT EXISTS idx_books_country ON books(country);
CREATE INDEX IF NOT EXISTS idx_books_release_year ON books(release_year);
CREATE INDEX IF NOT EXISTS idx_books_age_rating ON books(age_rating);
CREATE INDEX IF NOT EXISTS idx_books_book_type ON books(book_type);
CREATE INDEX IF NOT EXISTS idx_books_book_status ON books(book_status);
CREATE INDEX IF NOT EXISTS idx_books_updated_at ON books(updated_at);

-- Add popularity score for trending calculation
ALTER TABLE books
ADD COLUMN IF NOT EXISTS popularity_score FLOAT DEFAULT 0;

-- Create function to update book's updated_at timestamp
CREATE OR REPLACE FUNCTION update_book_updated_at()
RETURNS TRIGGER AS $$
BEGIN
  NEW.updated_at = NOW();
  RETURN NEW;
END;
$$ LANGUAGE plpgsql;

-- Create trigger to auto-update updated_at
DROP TRIGGER IF EXISTS trigger_update_book_timestamp ON books;
CREATE TRIGGER trigger_update_book_timestamp
BEFORE UPDATE ON books
FOR EACH ROW
EXECUTE FUNCTION update_book_updated_at();

-- Create function to update chapter count
CREATE OR REPLACE FUNCTION update_book_chapter_count()
RETURNS TRIGGER AS $$
BEGIN
  UPDATE books
  SET chapter_count = (
    SELECT COUNT(*) FROM chapters WHERE book_id = NEW.book_id
  )
  WHERE id = NEW.book_id;
  RETURN NEW;
END;
$$ LANGUAGE plpgsql;

-- Create trigger to auto-update chapter count
DROP TRIGGER IF EXISTS trigger_update_chapter_count ON chapters;
CREATE TRIGGER trigger_update_chapter_count
AFTER INSERT OR DELETE ON chapters
FOR EACH ROW
EXECUTE FUNCTION update_book_chapter_count();
[V0_FILE]typescriptreact:file="components/theme-switcher.tsx" isEdit="true" isMerged="true"
"use client"

import { Moon, Sun } from "lucide-react"
import { useEffect, useState } from "react"
import { Button } from "@/components/ui/button"

export function ThemeSwitcher() {
  const [theme, setTheme] = useState<"light" | "dark">("light")
  const [mounted, setMounted] = useState(false)

useEffect(() => {
    setMounted(true)
    // Check for saved theme preference or default to light
    const savedTheme = localStorage.getItem("theme") as "light" | "dark" | null
    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches

const initialTheme = savedTheme || (prefersDark ? "dark" : "light")
    setTheme(initialTheme)
    document.documentElement.classList.toggle("dark", initialTheme === "dark")
    document.body.classList.toggle("dark", initialTheme === "dark")
  }, [])

const toggleTheme = () => {
    const newTheme = theme === "light" ? "dark" : "light"
    setTheme(newTheme)
    localStorage.setItem("theme", newTheme)
    document.documentElement.classList.toggle("dark", newTheme === "dark")
    document.body.classList.toggle("dark", newTheme === "dark")
  }

// Prevent hydration mismatch
  if (!mounted) {
    return (
      <Button variant="ghost" size="icon" aria-label="Тақырыпты ауыстыру">
        <Sun className="h-5 w-5" />
      </Button>
    )
  }

return (
    <Button variant="ghost" size="icon" onClick={toggleTheme} aria-label="Тақырыпты ауыстыру">
      {theme === "light" ? <Moon className="h-5 w-5" /> : <Sun className="h-5 w-5" />}
    </Button>
  )
}
[V0_FILE]typescriptreact:file="app/support/help/page.tsx" isMerged="true"
import { Header } from "@/components/header"
import { Footer } from "@/components/footer"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"

export default function HelpPage() {
  return (
    <div className="min-h-screen flex flex-col">
      <Header />

<main className="flex-1 container mx-auto px-4 py-12">
        <div className="max-w-3xl mx-auto">
          <h1 className="text-4xl font-bold mb-4">Анықтама орталығы</h1>
          <p className="text-muted-foreground mb-8">
            Sözder платформасын пайдалану бойынша жиі қойылатын сұрақтар мен жауаптар
          </p>

<div className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle>Жалпы сұрақтар</CardTitle>
                <CardDescription>Платформа туралы негізгі ақпарат</CardDescription>
              </CardHeader>
              <CardContent>
                <Accordion type="single" collapsible className="w-full">
                  <AccordionItem value="item-1">
                    <AccordionTrigger>Sözder дегеніміз не?</AccordionTrigger>
                    <AccordionContent>
                      Sözder - қазақ тіліндегі кітаптар мен әдебиеттерді оқуға арналған онлайн платформа. Біз авторларға
                      өз шығармаларын жариялауға және оқырмандарға қазақ тіліндегі әдебиеттерді оқуға мүмкіндік береміз.
                    </AccordionContent>
                  </AccordionItem>
                  <AccordionItem value="item-2">
                    <AccordionTrigger>Платформа тегін ме?</AccordionTrigger>
                    <AccordionContent>
                      Иә, Sözder платформасы толығымен тегін. Сіз тіркелгіден өтіп, кітаптарды оқи аласыз.
                    </AccordionContent>
                  </AccordionItem>
                  <AccordionItem value="item-3">
                    <AccordionTrigger>Қалай тіркелуге болады?</AccordionTrigger>
                    <AccordionContent>
                      Тіркелу үшін жоғарғы оң жақ бұрыштағы "Тіркелу" батырмасын басып, электрондық поштаңыз бен құпия
                      сөзіңізді енгізіңіз. Тіркелгеннен кейін электрондық поштаңызға растау хаты келеді.
                    </AccordionContent>
                  </AccordionItem>
                </Accordion>
              </CardContent>
            </Card>

<Card>
              <CardHeader>
                <CardTitle>Оқырмандарға</CardTitle>
                <CardDescription>Кітаптарды оқу және іздеу</CardDescription>
              </CardHeader>
              <CardContent>
                <Accordion type="single" collapsible className="w-full">
                  <AccordionItem value="item-1">
                    <AccordionTrigger>Кітаптарды қалай іздеуге болады?</AccordionTrigger>
                    <AccordionContent>
                      Каталог бетіне өтіп, сүзгілерді пайдаланыңыз. Сіз жанр, ел, шығарылған жыл, жас шектеуі және басқа
                      параметрлер бойынша іздей аласыз.
                    </AccordionContent>
                  </AccordionItem>
                  <AccordionItem value="item-2">
                    <AccordionTrigger>Оқу параметрлерін қалай өзгертуге болады?</AccordionTrigger>
                    <AccordionContent>
                      Кітапты оқып жатқанда, оң жақ жоғарғы бұрыштағы параметрлер батырмасын басыңыз. Сіз қаріп түрін,
                      өлшемін, жол аралығын, беттің енін және тақырыпты өзгерте аласыз.
                    </AccordionContent>
                  </AccordionItem>
                  <AccordionItem value="item-3">
                    <AccordionTrigger>Оқу прогресі сақталады ма?</AccordionTrigger>
                    <AccordionContent>
                      Иә, сіздің оқу прогресіңіз автоматты түрде сақталады. Кез келген уақытта қайта оралып, қалған
                      жерден жалғастыра аласыз.
                    </AccordionContent>
                  </AccordionItem>
                </Accordion>
              </CardContent>
            </Card>

<Card>
              <CardHeader>
                <CardTitle>Авторларға</CardTitle>
                <CardDescription>Кітаптарды жариялау және басқару</CardDescription>
              </CardHeader>
              <CardContent>
                <Accordion type="single" collapsible className="w-full">
                  <AccordionItem value="item-1">
                    <AccordionTrigger>Кітапты қалай жариялауға болады?</AccordionTrigger>
                    <AccordionContent>
                      Тіркелгеннен кейін "Автор панелі" бөліміне өтіп, "Жаңа кітап" батырмасын басыңыз. Кітап туралы
                      ақпаратты толтырып, тараулар қосыңыз.
                    </AccordionContent>
                  </AccordionItem>
                  <AccordionItem value="item-2">
                    <AccordionTrigger>Кітапты өңдеуге бола ма?</AccordionTrigger>
                    <AccordionContent>
                      Иә, автор панелінде өз кітаптарыңызды басқара аласыз. Сіз кітап ақпаратын өзгерте, тараулар қоса
                      және өңдей аласыз.
                    </AccordionContent>
                  </AccordionItem>
                  <AccordionItem value="item-3">
                    <AccordionTrigger>Кітап мәртебесі дегеніміз не?</AccordionTrigger>
                    <AccordionContent>
                      Кітап мәртебесі оқырмандарға кітаптың қазіргі жағдайын көрсетеді: аяқталған, жалғасуда,
                      жарияланған, тоқтатылған немесе кідіртілген.
                    </AccordionContent>
                  </AccordionItem>
                </Accordion>
              </CardContent>
            </Card>
          </div>
        </div>
      </main>

<Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/support/contact/page.tsx" isMerged="true"
import { Header } from "@/components/header"
import { Footer } from "@/components/footer"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Mail, MessageSquare } from "lucide-react"

export default function ContactPage() {
  return (
    <div className="min-h-screen flex flex-col">
      <Header />

<main className="flex-1 container mx-auto px-4 py-12">
        <div className="max-w-3xl mx-auto">
          <h1 className="text-4xl font-bold mb-4">Байланыс</h1>
          <p className="text-muted-foreground mb-8">Бізбен байланысыңыз. Сұрақтарыңызға жауап беруге қуаныштымыз.</p>

<div className="grid gap-6 md:grid-cols-2 mb-8">
            <Card>
              <CardHeader>
                <Mail className="h-8 w-8 text-primary mb-2" />
                <CardTitle>Электрондық пошта</CardTitle>
                <CardDescription>Бізге хат жазыңыз</CardDescription>
              </CardHeader>
              <CardContent>
                <a href="mailto:support@sozder.kz" className="text-primary hover:underline">
                  support@sozder.kz
                </a>
              </CardContent>
            </Card>

<Card>
              <CardHeader>
                <MessageSquare className="h-8 w-8 text-primary mb-2" />
                <CardTitle>Әлеуметтік желілер</CardTitle>
                <CardDescription>Бізді әлеуметтік желілерде іздеңіз</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="space-y-2">
                  <a href="#" className="block text-primary hover:underline">
                    Instagram
                  </a>
                  <a href="#" className="block text-primary hover:underline">
                    Facebook
                  </a>
                  <a href="#" className="block text-primary hover:underline">
                    Telegram
                  </a>
                </div>
              </CardContent>
            </Card>
          </div>

<Card>
            <CardHeader>
              <CardTitle>Жиі қойылатын сұрақтар</CardTitle>
              <CardDescription>Бізге хат жазар алдында анықтама орталығын қараңыз</CardDescription>
            </CardHeader>
            <CardContent>
              <p className="text-muted-foreground mb-4">
                Көптеген сұрақтарға жауаптарды біздің анықтама орталығында таба аласыз.
              </p>
              <a href="/support/help" className="text-primary hover:underline font-medium">
                Анықтама орталығына өту →
              </a>
            </CardContent>
          </Card>
        </div>
      </main>

<Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/support/terms/page.tsx" isMerged="true"
import { Header } from "@/components/header"
import { Footer } from "@/components/footer"

export default function TermsPage() {
  return (
    <div className="min-h-screen flex flex-col">
      <Header />

<main className="flex-1 container mx-auto px-4 py-12">
        <div className="max-w-3xl mx-auto prose prose-slate dark:prose-invert">
          <h1>Қолдану шарттары</h1>
          <p className="text-muted-foreground">Соңғы жаңарту: {new Date().toLocaleDateString("kk-KZ")}</p>

<h2>1. Шарттарды қабылдау</h2>
          <p>
            Sözder платформасын пайдалану арқылы сіз осы қолдану шарттарын толық қабылдайсыз. Егер сіз осы шарттармен
            келіспесеңіз, платформаны пайдаланбаңыз.
          </p>

<h2>2. Пайдаланушы аккаунттары</h2>
          <p>
            Платформаның кейбір функцияларын пайдалану үшін аккаунт жасау қажет. Сіз өз аккаунтыңыздың қауіпсіздігіне
            жауапты боласыз және құпия сөзіңізді басқаларға бермеуіңіз керек.
          </p>

<h2>3. Мазмұн</h2>
          <p>
            Платформадағы барлық мазмұн авторлық құқықпен қорғалған. Авторлардың рұқсатынсыз мазмұнды көшіруге, таратуға
            немесе коммерциялық мақсатта пайдалануға тыйым салынады.
          </p>

<h2>4. Авторлардың жауапкершілігі</h2>
          <p>
            Авторлар өздері жариялаған мазмұнға толық жауапты. Мазмұн заңға қайшы келмеуі, басқалардың құқықтарын
            бұзбауы және этикалық нормаларға сәйкес болуы керек.
          </p>

<h2>5. Тыйым салынған әрекеттер</h2>
          <p>Платформада келесі әрекеттер тыйым салынады:</p>
          <ul>
            <li>Заңға қайшы мазмұн жариялау</li>
            <li>Басқа пайдаланушыларды қорлау немесе қорқыту</li>
            <li>Спам немесе жарнама жіберу</li>
            <li>Платформаның қауіпсіздігін бұзуға әрекет жасау</li>
            <li>Басқа пайдаланушылардың аккаунттарына рұқсатсыз кіру</li>
          </ul>

<h2>6. Жауапкершіліктен бас тарту</h2>
          <p>
            Sözder платформасы пайдаланушылар жариялаған мазмұнға жауапты емес. Біз мазмұнның дұрыстығына, толықтығына
            немесе сапасына кепілдік бермейміз.
          </p>

<h2>7. Шарттарды өзгерту</h2>
          <p>
            Біз қолдану шарттарын кез келген уақытта өзгерте аламыз. Өзгерістер платформада жарияланған сәттен бастап
            күшіне енеді.
          </p>

<h2>8. Байланыс</h2>
          <p>
            Қолдану шарттары туралы сұрақтарыңыз болса, бізбен байланысыңыз:{" "}
            <a href="mailto:support@sozder.kz">support@sozder.kz</a>
          </p>
        </div>
      </main>

<Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/support/privacy/page.tsx" isMerged="true"
import { Header } from "@/components/header"
import { Footer } from "@/components/footer"

export default function PrivacyPage() {
  return (
    <div className="min-h-screen flex flex-col">
      <Header />

<main className="flex-1 container mx-auto px-4 py-12">
        <div className="max-w-3xl mx-auto prose prose-slate dark:prose-invert">
          <h1>Құпиялылық саясаты</h1>
          <p className="text-muted-foreground">Соңғы жаңарту: {new Date().toLocaleDateString("kk-KZ")}</p>

<h2>1. Жиналатын ақпарат</h2>
          <p>Біз келесі ақпаратты жинаймыз:</p>
          <ul>
            <li>Тіркелу кезінде берген жеке ақпарат (электрондық пошта, аты-жөні)</li>
            <li>Платформаны пайдалану туралы ақпарат (оқылған кітаптар, оқу прогресі)</li>
            <li>Техникалық ақпарат (IP мекенжайы, браузер түрі, құрылғы ақпараты)</li>
          </ul>

<h2>2. Ақпаратты пайдалану</h2>
          <p>Жиналған ақпарат келесі мақсаттарда пайдаланылады:</p>
          <ul>
            <li>Платформаның қызметтерін ұсыну</li>
            <li>Пайдаланушы тәжірибесін жақсарту</li>
            <li>Техникалық қолдау көрсету</li>
            <li>Платформаны жетілдіру және дамыту</li>
          </ul>

<h2>3. Ақпаратты қорғау</h2>
          <p>
            Біз сіздің жеке ақпаратыңызды қорғау үшін заманауи қауіпсіздік шараларын қолданамыз. Ақпарат шифрланған
            түрде сақталады және рұқсатсыз қолжетімділіктен қорғалған.
          </p>

<h2>4. Cookies файлдары</h2>
          <p>
            Біз платформаның жұмысын жақсарту үшін cookies файлдарын пайдаланамыз. Сіз браузер параметрлерінде cookies
            файлдарын өшіре аласыз, бірақ бұл платформаның кейбір функцияларының жұмысына әсер етуі мүмкін.
          </p>

<h2>5. Үшінші тараптар</h2>
          <p>
            Біз сіздің жеке ақпаратыңызды үшінші тараптарға сатпаймыз, жалға бермейміз немесе бермейміз. Ақпарат тек
            заңды талаптар бойынша немесе сіздің рұқсатыңызбен бөлісілуі мүмкін.
          </p>

<h2>6. Балалардың құпиялылығы</h2>
          <p>
            Біздің платформа 13 жастан кіші балаларға арналмаған. Егер сіз 13 жастан кіші баланың ақпаратын жариялағанын
            байқасаңыз, бізге хабарласыңыз.
          </p>

<h2>7. Саясатты өзгерту</h2>
          <p>
            Біз құпиялылық саясатын кез келген уақытта өзгерте аламыз. Өзгерістер осы бетте жарияланады және жарияланған
            сәттен бастап күшіне енеді.
          </p>

<h2>8. Байланыс</h2>
          <p>
            Құпиялылық саясаты туралы сұрақтарыңыз болса, бізбен байланысыңыз:{" "}
            <a href="mailto:support@sozder.kz">support@sozder.kz</a>
          </p>
        </div>
      </main>

<Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/book/[id]/page.tsx" isEdit="true" isMerged="true"
import { createClient } from "@/lib/supabase/server"
import { Header } from "@/components/header"
import { Footer } from "@/components/footer"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { BookOpen, Eye, Calendar, Globe, Tag } from "lucide-react"
import Image from "next/image"
import Link from "next/link"
import { notFound } from "next/navigation"

export default async function BookDetailPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params
  const supabase = await createClient()

const { data: book } = await supabase
    .from("books")
    .select(
      `
      *,
      profiles:author_id (
        id,
        display_name,
        bio,
        avatar_url
      )
    `,
    )
    .eq("id", id)
    .single()

if (!book) {
    notFound()
  }

const { data: chapters } = await supabase
    .from("chapters")
    .select("id, title, chapter_number")
    .eq("book_id", id)
    .order("chapter_number", { ascending: true })

await supabase
    .from("books")
    .update({ views: book.views + 1 })
    .eq("id", id)

const {
    data: { user },
  } = await supabase.auth.getUser()

let bookmark = null
  if (user) {
    const { data } = await supabase.from("bookmarks").select("*").eq("user_id", user.id).eq("book_id", id).single()
    bookmark = data
  }

const getStatusLabel = (status: string) => {
    const statusMap: Record<string, string> = {
      completed: "Аяқталған",
      ongoing: "Жалғасуда",
      announced: "Жарияланған",
      discontinued: "Тоқтатылған",
      on_hold: "Кідіртілген",
    }
    return statusMap[status] || status
  }

const getTypeLabel = (type: string) => {
    const typeMap: Record<string, string> = {
      prose: "Проза",
      poetry: "Поэзия",
      drama: "Драма",
      essay: "Эссе",
    }
    return typeMap[type] || type
  }

return (
    <div className="min-h-screen flex flex-col">
      <Header />

<div className="space-y-4">
                  <Button className="w-full" size="lg" asChild>
                    <Link href={`/reader/${id}${bookmark?.chapter_id ? `?chapter=${bookmark.chapter_id}` : ""}`}>
                      <BookOpen className="mr-2 h-5 w-5" />
                      {bookmark ? "Оқуды жалғастыру" : "Оқуды бастау"}
                    </Link>
                  </Button>

<div className="space-y-3 text-sm">
                    <div className="flex items-center justify-between text-muted-foreground">
                      <div className="flex items-center gap-1">
                        <Eye className="h-4 w-4" />
                        <span>{book.views.toLocaleString()} көрініс</span>
                      </div>
                      {book.chapter_count > 0 && (
                        <div className="flex items-center gap-1">
                          <BookOpen className="h-4 w-4" />
                          <span>{book.chapter_count} тарау</span>
                        </div>
                      )}
                    </div>

{book.book_status && (
                      <div className="flex items-center justify-between">
                        <span className="text-muted-foreground">Мәртебесі:</span>
                        <Badge variant="secondary">{getStatusLabel(book.book_status)}</Badge>
                      </div>
                    )}

{book.country && (
                      <div className="flex items-center justify-between">
                        <span className="text-muted-foreground flex items-center gap-1">
                          <Globe className="h-4 w-4" />
                          Ел:
                        </span>
                        <span className="font-medium">{book.country}</span>
                      </div>
                    )}

{book.release_year && (
                      <div className="flex items-center justify-between">
                        <span className="text-muted-foreground flex items-center gap-1">
                          <Calendar className="h-4 w-4" />
                          Шығарылған жылы:
                        </span>
                        <span className="font-medium">{book.release_year}</span>
                      </div>
                    )}

{book.age_rating && (
                      <div className="flex items-center justify-between">
                        <span className="text-muted-foreground">Жас шектеуі:</span>
                        <Badge variant="outline">{book.age_rating}</Badge>
                      </div>
                    )}

{book.book_type && (
                      <div className="flex items-center justify-between">
                        <span className="text-muted-foreground flex items-center gap-1">
                          <Tag className="h-4 w-4" />
                          Түрі:
                        </span>
                        <span className="font-medium">{getTypeLabel(book.book_type)}</span>
                      </div>
                    )}
                  </div>
                </div>
              </CardContent>
            </Card>

{book.profiles && (
              <Card className="mt-4">
                <CardContent className="p-6">
                  <h3 className="font-semibold mb-3">Автор туралы</h3>
                  <div className="flex items-start gap-3">
                    <div className="relative h-12 w-12 rounded-full bg-muted flex-shrink-0 overflow-hidden">
                      {book.profiles.avatar_url ? (
                        <Image
                          src={book.profiles.avatar_url || "/placeholder.svg"}
                          alt={book.profiles.display_name}
                          fill
                          className="object-cover"
                        />
                      ) : (
                        <div className="h-full w-full flex items-center justify-center text-lg font-semibold">
                          {book.profiles.display_name[0].toUpperCase()}
                        </div>
                      )}
                    </div>
                    <div className="flex-1 min-w-0">
                      <Link href={`/author/${book.profiles.id}`} className="font-medium hover:text-primary">
                        {book.profiles.display_name}
                      </Link>
                      {book.profiles.bio && (
                        <p className="text-sm text-muted-foreground mt-1 line-clamp-3">{book.profiles.bio}</p>
                      )}
                    </div>
                  </div>
                </CardContent>
              </Card>
            )}
          </div>

<div className="lg:col-span-2 space-y-6">
            <div>
              <h1 className="text-4xl font-bold mb-2 text-balance">{book.title}</h1>
              <div className="flex items-center gap-3 text-muted-foreground">
                <span>{book.profiles?.display_name || "Белгісіз автор"}</span>
                {book.genre && (
                  <>
                    <span>•</span>
                    <span className="text-primary">{book.genre}</span>
                  </>
                )}
              </div>
            </div>

{book.description && (
              <Card>
                <CardContent className="p-6">
                  <h2 className="text-xl font-semibold mb-3">Сипаттама</h2>
                  <p className="text-muted-foreground leading-relaxed whitespace-pre-wrap">{book.description}</p>
                </CardContent>
              </Card>
            )}

{chapters && chapters.length > 0 && (
              <Card>
                <CardContent className="p-6">
                  <h2 className="text-xl font-semibold mb-4">Тараулар ({chapters.length})</h2>
                  <div className="space-y-2">
                    {chapters.map((chapter) => (
                      <Link
                        key={chapter.id}
                        href={`/reader/${id}?chapter=${chapter.id}`}
                        className="block p-3 rounded-lg hover:bg-muted transition-colors"
                      >
                        <div className="flex items-center justify-between">
                          <span className="font-medium">
                            {chapter.chapter_number}-тарау: {chapter.title}
                          </span>
                          <BookOpen className="h-4 w-4 text-muted-foreground" />
                        </div>
                      </Link>
                    ))}
                  </div>
                </CardContent>
              </Card>
            )}
          </div>
        </div>
      </main>

<Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/scroll-to-top.tsx" isMerged="true"
"use client"

import { useEffect } from "react"
import { usePathname } from "next/navigation"

export function ScrollToTop() {
  const pathname = usePathname()

useEffect(() => {
    // Scroll to top when pathname changes
    window.scrollTo(0, 0)
  }, [pathname])

return null
}
[V0_FILE]typescriptreact:file="app/support/faq/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
import { Header } from "@/components/header"
import { Footer } from "@/components/footer"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"

export default function FAQPage() {
  return (
    <div className="min-h-screen flex flex-col">
      <Header />

<main className="flex-1 container mx-auto px-4 py-12 max-w-4xl">
        <h1 className="text-4xl font-bold mb-2">Жиі қойылатын сұрақтар</h1>
        <p className="text-muted-foreground mb-8">Sözder платформасы туралы жиі қойылатын сұрақтарға жауаптар</p>

<Accordion type="single" collapsible className="w-full space-y-4">
          <AccordionItem value="item-1">
            <AccordionTrigger>Sözder дегеніміз не?</AccordionTrigger>
            <AccordionContent>
              Sözder - бұл авторлар өз кітаптарын жариялай алатын және оқырмандар оларды тегін оқи алатын онлайн кітап
              оқу платформасы. Біз қазақ тілінде және басқа тілдерде әдебиет жасауды және оқуды жеңілдетуге тырысамыз.
            </AccordionContent>
          </AccordionItem>

<AccordionItem value="item-2">
            <AccordionTrigger>Платформаны қалай пайдалануға болады?</AccordionTrigger>
            <AccordionContent>
              Платформаны пайдалану өте оңай. Тіркелу үшін электрондық поштаңызды енгізіп, құпия сөз жасаңыз. Содан
              кейін каталогтан кітаптарды іздеп, оқи бастай аласыз. Егер сіз автор болсаңыз, өз кітаптарыңызды жариялау
              үшін автор панеліне кіре аласыз.
            </AccordionContent>
          </AccordionItem>

<AccordionItem value="item-3">
            <AccordionTrigger>Кітаптарды қалай оқуға болады?</AccordionTrigger>
            <AccordionContent>
              Кітапты оқу үшін каталогтан немесе басты беттен кітапты таңдап, оның бетіне өтіңіз. Содан кейін "Оқуды
              бастау" батырмасын басыңыз. Оқу интерфейсінде қаріп өлшемін, қаріп түрін, жол аралығын және тақырыпты
              өзгерте аласыз.
            </AccordionContent>
          </AccordionItem>

<AccordionItem value="item-4">
            <AccordionTrigger>Автор болу үшін не істеу керек?</AccordionTrigger>
            <AccordionContent>
              Автор болу үшін алдымен платформаға тіркелу керек. Содан кейін автор панеліне өтіп, өз кітаптарыңызды
              жасай бастай аласыз. Кітап жасау үшін атауын, сипаттамасын, мұқабасын және басқа мәліметтерді енгізіңіз.
              Содан кейін тараулар қосып, мазмұнды жаза бастай аласыз.
            </AccordionContent>
          </AccordionItem>

<AccordionItem value="item-5">
            <AccordionTrigger>Кітаптарды қалай іздеуге болады?</AccordionTrigger>
            <AccordionContent>
              Каталог бетінде іздеу жолағын пайдаланып, кітап атауы немесе автор аты бойынша іздей аласыз. Сондай-ақ
              жанр, ел, шығарылған жыл, жас рейтингі, кітап түрі, мәртебе және тарау саны бойынша сүзгілеуге болады.
              Нәтижелерді қосылған немесе жаңартылған күні бойынша сұрыптауға болады.
            </AccordionContent>
          </AccordionItem>

<AccordionItem value="item-6">
            <AccordionTrigger>Оқу интерфейсін қалай теңшеуге болады?</AccordionTrigger>
            <AccordionContent>
              Оқу интерфейсінде оң жақ жоғарғы бұрышта параметрлер батырмасы бар. Онда қаріп өлшемін (12px-дан 24px-ке
              дейін), қаріп түрін (PT Serif, Merriweather, Literata, Noto Serif), жол аралығын (1.5-тен 2.5-ке дейін)
              және тақырыпты (ашық/қараңғы) өзгерте аласыз.
            </AccordionContent>
          </AccordionItem>

<AccordionItem value="item-7">
            <AccordionTrigger>Платформа тегін бе?</AccordionTrigger>
            <AccordionContent>
              Иә, Sözder платформасы толығымен тегін. Оқырмандар кітаптарды тегін оқи алады, ал авторлар өз кітаптарын
              тегін жариялай алады. Біздің мақсатымыз - әдебиетті барлығына қолжетімді ету.
            </AccordionContent>
          </AccordionItem>

<AccordionItem value="item-8">
            <AccordionTrigger>Кітаптарды қалай жариялауға болады?</AccordionTrigger>
            <AccordionContent>
              Кітап жариялау үшін автор панеліне өтіп, "Жаңа кітап" батырмасын басыңыз. Кітап туралы барлық қажетті
              мәліметтерді толтырып, мұқаба суретін жүктеңіз. Содан кейін тараулар қосып, мазмұнды жазыңыз. Кітапты
              жариялау үшін оның мәртебесін "Жарияланған" деп белгілеңіз.
            </AccordionContent>
          </AccordionItem>

<AccordionItem value="item-9">
            <AccordionTrigger>Қолдау қызметіне қалай хабарласуға болады?</AccordionTrigger>
            <AccordionContent>
              Егер сізде сұрақтар немесе мәселелер болса, "Байланыс" бетіне өтіп, хабарлама жібере аласыз. Біз
              мүмкіндігінше тезірек жауап беруге тырысамыз. Сондай-ақ көмек орталығында көптеген пайдалы мақалалар бар.
            </AccordionContent>
          </AccordionItem>

<AccordionItem value="item-10">
            <AccordionTrigger>Құпия сөзімді қалай өзгертуге болады?</AccordionTrigger>
            <AccordionContent>
              Құпия сөзді өзгерту үшін профиль бетіне өтіп, "Құпия сөзді өзгерту" бөлімін табыңыз. Ескі құпия сөзді
              енгізіп, жаңа құпия сөз жасаңыз. Өзгерістерді сақтау үшін "Сақтау" батырмасын басыңыз.
            </AccordionContent>
          </AccordionItem>
        </Accordion>
      </main>

<Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/auth/login/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="components/header-client.tsx" isMerged="true"
"use client"

import Link from "next/link"
import { Button } from "@/components/ui/button"
import { BookOpen, User } from "lucide-react"
import { createClient } from "@/lib/supabase/client"
import { ThemeSwitcher } from "@/components/theme-switcher"
import { useEffect, useState } from "react"
import type { User as SupabaseUser } from "@supabase/supabase-js"

export function HeaderClient() {
  const [user, setUser] = useState<SupabaseUser | null>(null)
  const [mounted, setMounted] = useState(false)

useEffect(() => {
    setMounted(true)
    const supabase = createClient()

// Get initial user
    supabase.auth.getUser().then(({ data: { user } }) => {
      setUser(user)
    })

// Listen for auth changes
    const {
      data: { subscription },
    } = supabase.auth.onAuthStateChange((_event, session) => {
      setUser(session?.user ?? null)
    })

return () => {
      subscription.unsubscribe()
    }
  }, [])

if (!mounted) {
    return (
      <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
        <div className="container mx-auto flex h-16 items-center justify-between px-4">
          <Link href="/" className="flex items-center gap-2 font-bold text-xl">
            <BookOpen className="h-6 w-6 text-primary" />
            <span>Sözder</span>
          </Link>
          <div className="h-10 w-32 bg-muted animate-pulse rounded" />
        </div>
      </header>
    )
  }

return (
    <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
      <div className="container mx-auto flex h-16 items-center justify-between px-4">
        <Link href="/" className="flex items-center gap-2 font-bold text-xl">
          <BookOpen className="h-6 w-6 text-primary" />
          <span>Sözder</span>
        </Link>

<nav className="hidden md:flex items-center gap-6">
          <Link href="/catalog" className="text-sm font-medium hover:text-primary transition-colors">
            Каталог
          </Link>
          <Link href="/support/faq" className="text-sm font-medium hover:text-primary transition-colors">
            Жиі қойылатын сұрақтар
          </Link>
          {user && (
            <Link href="/author" className="text-sm font-medium hover:text-primary transition-colors">
              Автор панелі
            </Link>
          )}
        </nav>

{user ? (
            <Button variant="ghost" size="icon" asChild>
              <Link href="/profile">
                <User className="h-5 w-5" />
                <span className="sr-only">Профиль</span>
              </Link>
            </Button>
          ) : (
            <div className="flex items-center gap-2">
              <Button variant="ghost" size="sm" asChild>
                <Link href="/auth/login">Кіру</Link>
              </Button>
              <Button size="sm" asChild>
                <Link href="/auth/sign-up">Тіркелу</Link>
              </Button>
            </div>
          )}
        </div>
      </div>
    </header>
  )
}
[V0_FILE]typescriptreact:file="app/admin/books/[id]/edit/page.tsx" isMerged="true"
import { createClient } from "@/lib/supabase/server"
import { redirect } from "next/navigation"
import { Header } from "@/components/header"
import { Footer } from "@/components/footer"
import { EditBookForm } from "@/components/edit-book-form"

export default async function EditBookPage({ params }: { params: { id: string } }) {
  const supabase = await createClient()

const {
    data: { user },
  } = await supabase.auth.getUser()

if (!user) {
    redirect("/auth/login")
  }

// Check if user is admin
  const { data: profile } = await supabase.from("profiles").select("*").eq("id", user.id).single()

if (!profile || profile.role !== "admin") {
    redirect("/")
  }

// Get book details
  const { data: book } = await supabase
    .from("books")
    .select(
      `
      *,
      profiles:author_id (
        display_name
      )
    `,
    )
    .eq("id", params.id)
    .single()

if (!book) {
    redirect("/admin/books")
  }

return (
    <div className="min-h-screen flex flex-col">
      <Header />

<main className="flex-1 container mx-auto px-4 py-8">
        <div className="max-w-4xl mx-auto">
          <h1 className="text-4xl font-bold mb-6">Кітапты өңдеу</h1>
          <EditBookForm book={book} />
        </div>
      </main>

<Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/edit-book-form.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { createBrowserClient } from "@/lib/supabase/client"

interface EditBookFormProps {
  book: any
}

export function EditBookForm({ book }: EditBookFormProps) {
  const router = useRouter()
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState("")
  const [success, setSuccess] = useState("")

const [formData, setFormData] = useState({
    title: book.title || "",
    description: book.description || "",
    genre: book.genre || "",
    cover_url: book.cover_url || "",
    status: book.status || "ongoing",
    country: book.country || "",
    release_year: book.release_year || new Date().getFullYear(),
    age_rating: book.age_rating || "12+",
    book_type: book.book_type || "Роман",
  })

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoading(true)
    setError("")
    setSuccess("")

try {
      const supabase = createBrowserClient()

const { error: updateError } = await supabase
        .from("books")
        .update({
          title: formData.title,
          description: formData.description,
          genre: formData.genre,
          cover_url: formData.cover_url,
          status: formData.status,
          country: formData.country,
          release_year: formData.release_year,
          age_rating: formData.age_rating,
          book_type: formData.book_type,
        })
        .eq("id", book.id)

if (updateError) throw updateError

setSuccess("Кітап сәтті жаңартылды!")
      setTimeout(() => {
        router.push("/admin/books")
        router.refresh()
      }, 1500)
    } catch (err: any) {
      setError(err.message || "Қате орын алды")
    } finally {
      setLoading(false)
    }
  }

return (
    <Card>
      <CardHeader>
        <CardTitle>Кітап ақпаратын өңдеу</CardTitle>
      </CardHeader>
      <CardContent>
        <form onSubmit={handleSubmit} className="space-y-4">
          {error && (
            <Alert variant="destructive">
              <AlertDescription>{error}</AlertDescription>
            </Alert>
          )}

{success && (
            <Alert>
              <AlertDescription>{success}</AlertDescription>
            </Alert>
          )}

<div className="space-y-2">
            <Label htmlFor="title">Атауы *</Label>
            <Input
              id="title"
              value={formData.title}
              onChange={(e) => setFormData({ ...formData, title: e.target.value })}
              required
            />
          </div>

<div className="space-y-2">
            <Label htmlFor="description">Сипаттама *</Label>
            <Textarea
              id="description"
              value={formData.description}
              onChange={(e) => setFormData({ ...formData, description: e.target.value })}
              rows={4}
              required
            />
          </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label htmlFor="genre">Жанр *</Label>
              <Input
                id="genre"
                value={formData.genre}
                onChange={(e) => setFormData({ ...formData, genre: e.target.value })}
                required
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="country">Ел</Label>
              <Select value={formData.country} onValueChange={(value) => setFormData({ ...formData, country: value })}>
                <SelectTrigger>
                  <SelectValue placeholder="Елді таңдаңыз" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="Қазақстан">Қазақстан</SelectItem>
                  <SelectItem value="Ресей">Ресей</SelectItem>
                  <SelectItem value="АҚШ">АҚШ</SelectItem>
                  <SelectItem value="Ұлыбритания">Ұлыбритания</SelectItem>
                  <SelectItem value="Германия">Германия</SelectItem>
                  <SelectItem value="Франция">Франция</SelectItem>
                  <SelectItem value="Жапония">Жапония</SelectItem>
                  <SelectItem value="Түркия">Түркия</SelectItem>
                  <SelectItem value="Қырғызстан">Қырғызстан</SelectItem>
                  <SelectItem value="Өзбекстан">Өзбекстан</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div className="space-y-2">
              <Label htmlFor="release_year">Шыққан жылы</Label>
              <Input
                id="release_year"
                type="number"
                value={formData.release_year}
                onChange={(e) => setFormData({ ...formData, release_year: Number.parseInt(e.target.value) })}
                min="1800"
                max={new Date().getFullYear()}
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="age_rating">Жас шектеуі</Label>
              <Select
                value={formData.age_rating}
                onValueChange={(value) => setFormData({ ...formData, age_rating: value })}
              >
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="0+">0+</SelectItem>
                  <SelectItem value="6+">6+</SelectItem>
                  <SelectItem value="12+">12+</SelectItem>
                  <SelectItem value="16+">16+</SelectItem>
                  <SelectItem value="18+">18+</SelectItem>
                </SelectContent>
              </Select>
            </div>

<div className="space-y-2">
              <Label htmlFor="book_type">Кітап түрі</Label>
              <Select
                value={formData.book_type}
                onValueChange={(value) => setFormData({ ...formData, book_type: value })}
              >
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="Роман">Роман</SelectItem>
                  <SelectItem value="Повесть">Повесть</SelectItem>
                  <SelectItem value="Әңгіме">Әңгіме</SelectItem>
                  <SelectItem value="Фанфик">Фанфик</SelectItem>
                  <SelectItem value="Өлең">Өлең</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>

<div className="space-y-2">
            <Label htmlFor="status">Статус</Label>
            <Select value={formData.status} onValueChange={(value) => setFormData({ ...formData, status: value })}>
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="ongoing">Жазылуда</SelectItem>
                <SelectItem value="completed">Аяқталған</SelectItem>
                <SelectItem value="hiatus">Үзілісте</SelectItem>
              </SelectContent>
            </Select>
          </div>

<div className="space-y-2">
            <Label htmlFor="cover_url">Мұқаба URL</Label>
            <Input
              id="cover_url"
              value={formData.cover_url}
              onChange={(e) => setFormData({ ...formData, cover_url: e.target.value })}
              placeholder="/abstract-book-cover.png"
            />
          </div>

<div className="flex gap-4">
            <Button type="submit" disabled={loading} className="flex-1">
              {loading ? "Сақталуда..." : "Өзгерістерді сақтау"}
            </Button>
            <Button type="button" variant="outline" onClick={() => router.back()} disabled={loading}>
              Болдырмау
            </Button>
          </div>
        </form>
      </CardContent>
    </Card>
  )
}
[V0_FILE]png:file="public/abstract-book-cover.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/abstract-book-cover-gLV2O3gpssmbez7nThaV0upytW5bYg.png" isMerged="true"
[V0_FILE]sql:file="scripts/005_add_security_constraints.sql" isEdit="true" isMerged="true"
-- Removed email constraint since profiles table doesn't have email column
-- Add index on user authentication lookups
CREATE INDEX IF NOT EXISTS idx_profiles_id ON profiles(id);

-- Update RLS policies to be more secure
-- Ensure users can only read their own profile
DROP POLICY IF EXISTS "Users can view their own profile" ON profiles;
CREATE POLICY "Users can view their own profile"
  ON profiles FOR SELECT
  USING (auth.uid() = id);

-- Ensure users can only update their own profile
DROP POLICY IF EXISTS "Users can update their own profile" ON profiles;
CREATE POLICY "Users can update their own profile"
  ON profiles FOR UPDATE
  USING (auth.uid() = id);

-- Add policy for public profile viewing (display names, etc.)
DROP POLICY IF EXISTS "Public profiles are viewable by everyone" ON profiles;
CREATE POLICY "Public profiles are viewable by everyone"
  ON profiles FOR SELECT
  USING (true);

-- Add check constraint for valid roles
ALTER TABLE profiles
DROP CONSTRAINT IF EXISTS valid_role;

ALTER TABLE profiles
ADD CONSTRAINT valid_role 
CHECK (role IN ('reader', 'author', 'admin'));

-- Add check constraint for display name length
ALTER TABLE profiles
DROP CONSTRAINT IF EXISTS valid_display_name;

ALTER TABLE profiles
ADD CONSTRAINT valid_display_name 
CHECK (length(trim(display_name)) >= 2);
[V0_FILE]sql:file="scripts/006_create_test_data.sql" isEdit="true" isMerged="true"
-- Create test book from Public Domain
-- "The Adventures of Sherlock Holmes" by Arthur Conan Doyle (translated to Kazakh)
-- Note: First register an account through /auth/sign-up, then this book will be assigned to the first user

DO $$
DECLARE
  first_user_id UUID;
  new_book_id UUID;
BEGIN
  -- Get the first user (you need to register first)
  SELECT id INTO first_user_id FROM profiles ORDER BY created_at LIMIT 1;
  
  -- Only proceed if a user exists
  IF first_user_id IS NOT NULL THEN
    -- Removed email reference, using first user by creation date
    -- Insert test book
    INSERT INTO books (
      title,
      description,
      author_id,
      genre,
      cover_url,
      status,
      views,
      country,
      release_year,
      age_rating,
      book_type,
      book_status,
      chapter_count
    ) VALUES (
      'Шерлок Холмстың шытырман оқиғалары',
      'Артур Конан Дойлдың атақты детективтік шығармасы. Шерлок Холмс пен доктор Ватсонның алғашқы оқиғалары жинағы. Бұл кітапта танымал детективтің ең үздік істері жазылған.',
      first_user_id,
      'Детектив',
      '/placeholder.svg?height=400&width=300',
      'published',
      0,
      'Ұлыбритания',
      1892,
      '12+',
      'prose',
      'completed',
      3
    ) RETURNING id INTO new_book_id;
    
    -- Insert chapters
    INSERT INTO chapters (
      book_id,
      title,
      content,
      chapter_number
    ) VALUES 
    (
      new_book_id,
      'Бірінші тарау: Богемиялық скандал',
      '<p>Шерлок Холмс үшін ол әрқашан <em>сол әйел</em> болды. Мен оның басқа атпен атағанын сирек естідім. Оның көзінде ол барлық жынысын көлеңкелейді және басым болады. Бұл ол Ирен Адлерге махаббат сезімін сезді дегенді білдірмейді.</p><p>Барлық эмоциялар, әсіресе махаббат, оның суық, дәл, бірақ керемет реттелген ақыл-ойына жат болды. Ол, менің ойымша, барлық ойлау машиналарының ең керемет және тиімдісі болды; бірақ ол ғашық ретінде өзін ешқашан орналастырмады.</p>',
      1
    ),
    (
      new_book_id,
      'Екінші тарау: Қызыл шаштылар лигасы',
      '<p>Бір күз күні өткен жылы мен досым мистер Шерлок Холмсты Бейкер-стритте, 221Б-де баруға шақырдым. Мен оны екі адаммен әңгімелесіп отырғанын таптым, біреуі өте семіз, қызыл бетті, қызыл шашты адам, екіншісі - жас, әдемі әйел.</p>',
      2
    ),
    (
      new_book_id,
      'Үшінші тарау: Жеке іс',
      '<p>Таңертең сағат сегізде мен Бейкер-стритке келдім және Шерлок Холмсты таңғы асын ішіп отырғанын таптым. Ол маған отыруға және бір кесе кофе құюға шақырды.</p>',
      3
    );
    
    -- Add test banner
    INSERT INTO banners (
      title,
      image_url,
      link_url,
      is_active,
      display_order
    ) VALUES (
      'Шерлок Холмсты оқыңыз',
      '/placeholder.svg?height=400&width=1200',
      '/catalog',
      true,
      1
    );
  END IF;
END $$;
[V0_FILE]sql:file="scripts/007_add_test_books.sql" isEdit="true" isMerged="true"
-- Add more test books with full content for testing the reader

DO $$
DECLARE
  first_user_id UUID;
  book1_id UUID;
  book2_id UUID;
  book3_id UUID;
BEGIN
  -- Get the first user
  SELECT id INTO first_user_id FROM profiles ORDER BY created_at LIMIT 1;
  
  IF first_user_id IS NOT NULL THEN
    -- Book 1: Абай жолы
    INSERT INTO books (
      title,
      description,
      author_id,
      genre,
      cover_url,
      status,
      country,
      release_year,
      age_rating,
      book_type,
      book_status,
      views,
      chapter_count
    ) VALUES (
      'Абай жолы',
      'Мұхтар Әуезовтің атақты романы. Абай Құнанбаевтың өмірі мен шығармашылығы туралы эпопея. Қазақ халқының тарихы мен мәдениетін көрсететін керемет шығарма.',
      first_user_id,
      'Классикалық әдебиет',
      '/placeholder.svg?height=400&width=300',
      'published',
      'Қазақстан',
      1942,
      '12+',
      'prose',
      'completed',
      1250,
      3
    ) RETURNING id INTO book1_id;

-- Chapters for Абай жолы
    INSERT INTO chapters (book_id, chapter_number, title, content) VALUES
    (
      book1_id,
      1,
      'Бірінші тарау: Жастық шақ',
      '<p>Абай он сегіз жасында еді. Ол әкесі Құнанбайдың үлкен ауылында тұрды. Құнанбай - Тобықты руының басы, билері мен биліктілерінің бірі.</p><p>Абай бала кезінен ақылды, зерек бала болды. Ол кітап оқуды, ғылым үйренуді жақсы көрді. Әкесі оны медреседе оқытты, бірақ Абайдың жүрегі өлеңге, ақындыққа тартты.</p><p>Бір күні Абай ауылдың сыртына шықты. Ол таудың басына шығып, алыс жерлерді қарады. Көкте бұлттар жүзіп жүрді, жел желпіп тұрды.</p>'
    ),
    (
      book1_id,
      2,
      'Екінші тарау: Білім іздеу',
      '<p>Абай жиырма жасқа келді. Ол енді жас жігіт, білімді де, ақылды да адам болды. Бірақ оның жүрегінде үлкен мақсат жатты - халқын оятып, білімге жетелеу.</p><p>Сол кезде қазақ даласында надандық көп болды. Адамдар оқымады, жазбады. Олар тек мал бағып, жайлауда жүрді.</p>'
    ),
    (
      book1_id,
      3,
      'Үшінші тарау: Қара сөз',
      '<p>Абай отыз жасқа келді. Ол енді жетілген ақын, білімді адам болды. Оның өлеңдері халық арасында таралды.</p><p>Бірақ Абай тек өлең жазумен шектелмеді. Ол қара сөз жазды - философиялық ойлар, насихаттар.</p>'
    );

-- Changed book_type from 'Поэма' to 'poetry' to match check constraint
    -- Book 2: Қозы Көрпеш - Баян Сұлу
    INSERT INTO books (
      title,
      description,
      author_id,
      genre,
      cover_url,
      status,
      country,
      release_year,
      age_rating,
      book_type,
      book_status,
      views,
      chapter_count
    ) VALUES (
      'Қозы Көрпеш - Баян Сұлу',
      'Қазақтың ежелгі лиро-эпикалық жыры. Махаббат пен адалдық туралы керемет аңыз. Қозы мен Баянның трагедиялық сүйіспеншілік тарихы.',
      first_user_id,
      'Фольклор',
      '/placeholder.svg?height=400&width=300',
      'published',
      'Қазақстан',
      1800,
      '16+',
      'poetry',
      'completed',
      2100,
      3
    ) RETURNING id INTO book2_id;

-- Chapters for Қозы Көрпеш
    INSERT INTO chapters (book_id, chapter_number, title, content) VALUES
    (
      book2_id,
      1,
      'Бірінші бөлім: Туылуы',
      '<p>Ертеде, ерте заманда, Қаратау жақта екі дос болыпты. Бірінің аты Қарабай, екіншісінің аты Сарыбай екен.</p><p>Қарабай мен Сарыбай бір-біріне ант беріпті: "Егер бізге ұл туса, дос боламыз. Егер қыз туса, қыз алысамыз" деп.</p>'
    ),
    (
      book2_id,
      2,
      'Екінші бөлім: Қиындықтар',
      '<p>Сарыбай Баянды басқа жерге беруді шешті. Ол оны бай Қодардың ұлы Қожанға беруді ойлады.</p><p>Қожан жаман адам болды. Ол қатыгез болды, өсекші болды. Бірақ оның әкесі бай болды.</p>'
    ),
    (
      book2_id,
      3,
      'Үшінші бөлім: Соңы',
      '<p>Баян Қозының денесінің үстінде жылады. Оның жасы жерге тамды.</p><p>Халық Қозы мен Баянды бір жерге жерледі. Олардың қабірінің үстінде екі ағаш өсті.</p>'
    );

-- Book 3: Қыз Жібек
    INSERT INTO books (
      title,
      description,
      author_id,
      genre,
      cover_url,
      status,
      country,
      release_year,
      age_rating,
      book_type,
      book_status,
      views,
      chapter_count
    ) VALUES (
      'Қыз Жібек',
      'Қазақтың тағы бір атақты эпосы. Төлеген мен Жібектің махаббат тарихы. Қазақ халқының салт-дәстүрі мен мәдениетін көрсететін керемет жыр.',
      first_user_id,
      'Фольклор',
      '/placeholder.svg?height=400&width=300',
      'published',
      'Қазақстан',
      1850,
      '12+',
      'poetry',
      'ongoing',
      1800,
      2
    ) RETURNING id INTO book3_id;

-- Chapters for Қыз Жібек
    INSERT INTO chapters (book_id, chapter_number, title, content) VALUES
    (
      book3_id,
      1,
      'Бірінші бөлім: Жібектің сұлулығы',
      '<p>Сырдария жағалауында Ақжол деген бай болыпты. Оның Жібек деген қызы болды.</p><p>Жібек өте әдемі қыз болды. Оның сұлулығы туралы аңыз бар далаға таралды.</p>'
    ),
    (
      book3_id,
      2,
      'Екінші бөлім: Кездесу',
      '<p>Төлеген Жібекке жақындады. "Сәлем, әдемі қыз" деді ол. "Сенің атың кім?"</p><p>"Менің атым Жібек" деді қыз. "Ал сенің атың кім?"</p>'
    );
  END IF;
END $$;
[V0_FILE]typescript:file="lib/supabase/middleware.ts" isEdit="true" isQuickEdit="true" isMerged="true"
import { createServerClient } from "@supabase/ssr"
import { NextResponse, type NextRequest } from "next/server"

export async function updateSession(request: NextRequest) {
  const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL || process.env.SUPABASE_URL
  const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY || process.env.SUPABASE_ANON_KEY

// If Supabase is not configured, skip auth checks for now
  if (!supabaseUrl || !supabaseAnonKey) {
    console.warn("[v0] Supabase environment variables not configured")
    return NextResponse.next({
      request,
    })
  }

let supabaseResponse = NextResponse.next({
    request,
  })

const supabase = createServerClient(supabaseUrl, supabaseAnonKey, {
    cookies: {
      getAll() {
        return request.cookies.getAll()
      },
      setAll(cookiesToSet) {
        cookiesToSet.forEach(({ name, value }) => request.cookies.set(name, value))
        supabaseResponse = NextResponse.next({
          request,
        })
        cookiesToSet.forEach(({ name, value, options }) => supabaseResponse.cookies.set(name, value, options))
      },
    },
  })

const {
    data: { user },
  } = await supabase.auth.getUser()

// Redirect unauthenticated users trying to access protected routes
  if (
    !user &&
    (request.nextUrl.pathname.startsWith("/author") ||
      request.nextUrl.pathname.startsWith("/admin") ||
      request.nextUrl.pathname.startsWith("/profile"))
  ) {
    const url = request.nextUrl.clone()
    url.pathname = "/auth/login"
    return NextResponse.redirect(url)
  }

return supabaseResponse
}
[V0_FILE]sql:file="scripts/008_allow_public_reading.sql" isMerged="true"
-- Allow public read access to published books and chapters
-- This enables reading without authentication

-- Drop existing restrictive policies
DROP POLICY IF EXISTS "books_select_published" ON public.books;
DROP POLICY IF EXISTS "chapters_select_published" ON public.chapters;

-- Create new policies that allow public read access to published content
-- Books: Anyone can view published books (no auth required)
CREATE POLICY "books_select_published" ON public.books 
  FOR SELECT 
  USING (
    status = 'published' 
    OR author_id = auth.uid()
  );

-- Chapters: Anyone can view chapters of published books (no auth required)
CREATE POLICY "chapters_select_published" ON public.chapters 
  FOR SELECT 
  USING (
    EXISTS (
      SELECT 1 FROM public.books 
      WHERE books.id = chapters.book_id 
      AND (books.status = 'published' OR books.author_id = auth.uid())
    )
  );

-- Note: The policies now work for both authenticated and unauthenticated users
-- auth.uid() returns NULL for unauthenticated users, but the OR condition
-- with status = 'published' allows public access to published content
[V0_FILE]sql:file="scripts/009_add_more_chapters.sql" isMerged="true"
-- Add more chapters to existing books for testing pagination

-- Add more chapters to "Шерлок Холмстың шытырман оқиғалары"
INSERT INTO chapters (book_id, chapter_number, title, content, created_at, updated_at)
SELECT 
  id,
  4,
  'Жасырын белгі',
  '<p>Шерлок Холмс терезе алдында тұрып, Лондонның сұр көшелерін қарап тұрды. Таңғы тұман қаланы жауып, адамдар мен көліктер елес сияқты көрінді.</p>

<p>— Уотсон, — деді ол кенеттен, — бүгін бізге қызықты іс келеді деп ойлаймын.</p>

<p>Мен газетімнен көз алмай:</p>

<p>— Қайдан білесіз? — деп сұрадым.</p>

<p>— Көшеде бір әйел тұр. Ол үш рет біздің үйдің алдынан өтті, бірақ кіруге батылы жетпей жатыр. Міне, ол тағы да қайтып келді. Енді ол кіреді.</p>

<p>Шынында да, бірнеше минуттан кейін есік қағылды. Миссис Хадсон жас әйелді ертіп кірді. Әйел толқыған көрінді.</p>

<p>— Мырза Холмс, — деді ол дірілдеген дауыспен, — маған көмектесіңіз. Менің күйеуім жоғалып кетті!</p>

<p>Холмс оны отырғызып, шай ұсынды.</p>

<p>— Баяндаңыз, — деді ол жұмсақ дауыспен. — Барлық егжей-тегжайды айтыңыз.</p>

<p>Әйел әңгімесін бастады. Оның күйеуі — банк қызметкері — үш күн бұрын жұмысқа кетіп, қайтып келмепті. Полиция іздеу жүргізіп жатыр, бірақ ешқандай із жоқ.</p>

<p>— Ол соңғы уақытта қандай болды? — сұрады Холмс.</p>

<p>— Алаңдаған сияқты еді. Бір күні үйге келгенде, қолында жасырын хат бар еді. Оны оқып болғаннан кейін, бет-әлпеті өзгерді.</p>

<p>— Сол хатты көрдіңіз бе?</p>

<p>— Жоқ, ол оны жағып жіберді. Бірақ конвертте қызыл мөр бар еді.</p>

<p>Холмстың көздері жарқырады.</p>

<p>— Қызыл мөр! Бұл өте қызықты. Сол мөрдің суретін сала аласыз ба?</p>

<p>Әйел қағазға кішкентай белгі салды. Холмс оны мұқият қарады.</p>

<p>— Уотсон, біз дереу банкіге баруымыз керек. Бұл іс ойлағаннан да қауіпті болуы мүмкін!</p>',
  NOW(),
  NOW()
FROM books WHERE title = 'Шерлок Холмстың шытырман оқиғалары';

INSERT INTO chapters (book_id, chapter_number, title, content, created_at, updated_at)
SELECT 
  id,
  5,
  'Банктегі құпия',
  '<p>Біз банкіге жеткенде, директор бізді дереу қабылдады. Ол мазасыз көрінді.</p>

<p>— Мырза Холмс, — деді ол, — сіз Джонсон туралы сұрауға келдіңіз бе? Ол біздің ең сенімді қызметкерлеріміздің бірі еді.</p>

<p>— "Еді" деп айтасыз? — Холмс назар аударды.</p>

<p>— Иә, өйткені біз оның қылмыскер екенін білдік. Ол банктен үлкен сома ақша ұрлады!</p>

<p>Бұл жаңалық мені таңғалдырды, бірақ Холмс тыныш қалды.</p>

<p>— Қызықты, — деді ол. — Ақша қашан жоғалды?</p>

<p>— Үш күн бұрын, Джонсон жоғалған күні.</p>

<p>— Ал қызыл мөрлі хат туралы не білесіз?</p>

<p>Директордың беті ағарды.</p>

<p>— Қайдан білдіңіз? Бұл құпия ұйым! Олар біздің банкіден ақша талап етті. Біз төлемесек, олар бізді жария етеді деп қорқытты.</p>

<p>— Сіз төледіңіз бе?</p>

<p>— Жоқ! Біз полицияға хабарладық. Бірақ Джонсон...</p>

<p>— Джонсон сізге опасыздық жасамады, — Холмс кесіп тастады. — Ол құрбан. Оны ұрлап кеткен.</p>

<p>— Бірақ ақша...</p>

<p>— Ақшаны олар алды, Джонсонды кінәлі етіп көрсету үшін. Уотсон, бізде уақыт жоқ. Джонсонды тірі табу үшін асығуымыз керек!</p>',
  NOW(),
  NOW()
FROM books WHERE title = 'Шерлок Холмстың шытырман оқиғалары';

-- Add more chapters to "Абай жолы"
INSERT INTO chapters (book_id, chapter_number, title, content, created_at, updated_at)
SELECT 
  id,
  4,
  'Ұстаз',
  '<p>Абай он төрт жасында Семейдегі медреседе оқып жүрді. Ол араб, парсы тілдерін үйренді, классикалық поэзияны оқыды. Бірақ оның жүрегі басқа білімге құмар еді.</p>

<p>Бір күні ол кітапханада орыс тілінде жазылған кітап тапты. Бұл Пушкиннің өлеңдері еді. Абай орысша білмесе де, кітаптың әсемдігі оны таңғалдырды.</p>

<p>— Бұл не? — деп сұрады ол кітапханашыдан.</p>

<p>— Бұл орыс поэзиясы, — жауап берді қария. — Пушкин — олардың ұлы ақыны.</p>

<p>Сол күннен бастап Абай орыс тілін үйренуге кірісті. Ол түнде шам жағып, сөздікпен отырып, әр жолды аударуға тырысты.</p>

<p>Медреседе оның бұл әрекеті ұнамады. Молдалар оны шақырып:</p>

<p>— Сен неге кәпір тілін үйреніп жүрсің? — деп ұрсысты.</p>

<p>Абай батыл жауап берді:</p>

<p>— Білім — қайдан болса да білім. Біз өзге халықтардың білімін үйренбесек, артта қаламыз.</p>

<p>Бұл сөздер үшін оны жазалағысы келді, бірақ Абайдың әкесі Құнанбай — беделді адам болғандықтан, ешкім батылдық жасай алмады.</p>

<p>Абай үйіне қайтқанда, әкесі оны шақырды:</p>

<p>— Ұлым, — деді Құнанбай, — сен медреседе дау туғыздың екенсің. Неге?</p>

<p>— Әке, мен тек білім іздеп жүрмін. Біздің халқымыз надан. Біз өзгелерден үйренуіміз керек.</p>

<p>Құнанбай ұзақ ойланды, содан кейін:</p>

<p>— Дұрыс айтасың, ұлым. Бірақ сақ бол. Көптеген адамдар өзгерісті қаламайды.</p>',
  NOW(),
  NOW()
FROM books WHERE title = 'Абай жолы';

INSERT INTO chapters (book_id, chapter_number, title, content, created_at, updated_at)
SELECT 
  id,
  5,
  'Махаббат',
  '<p>Абай жиырма жасында Тоғжан деген қызды көрді. Ол ауылдағы ең ақылды, әдемі қыз еді. Тоғжан да кітап оқуды жақсы көретін.</p>

<p>Олар алғаш рет той жиынында кездесті. Абай өлең оқып тұрғанда, Тоғжан мұқият тыңдады. Өлең біткен соң, ол жақындап:</p>

<p>— Сіздің өлеңіңіз өте әдемі, — деді. — Бірақ бір жерінде қате бар сияқты.</p>

<p>Абай таңданды. Ешкім оның өлеңіне ескерту жасамаған еді.</p>

<p>— Қандай қате? — сұрады ол қызығып.</p>

<p>Тоғжан өлеңнің бір жолын түзетті. Абай ойланып қарады — қыз дұрыс айтқан еді!</p>

<p>— Сіз өте зерек екенсіз, — деді Абай күлімсіреп. — Мұндай ақылды қызды бұрын көрген емеспін.</p>

<p>Содан бастап олар жиі кездесіп, әңгімелесетін болды. Тоғжан Абайға өз ойларын, арман-тілектерін айтты. Ол да қыздар сияқты тек үйде отырып, ер азаматқа тиюді қаламайтын.</p>

<p>— Мен де оқығым келеді, — деді ол. — Мен де халқыма пайдалы болғым келеді. Бірақ қыз баламын деп, маған мүмкіндік бермейді.</p>

<p>Абай оның сөзін түсінді. Ол өз өлеңдерінде әйелдердің құқығы туралы жазуға кірісті.</p>

<p>Бірақ олардың махаббаты оңай болмады. Тоғжанның әкесі оны басқа біреуге беруді қалады. Абай мен Тоғжан қашып кетуді ойластырды.</p>

<p>— Біз бірге болсақ, — деді Абай, — ешкім бізді бөле алмайды. Мен сені қорғаймын.</p>

<p>Тоғжан келісті. Олар түнде қашып, алыс ауылға кетті. Бұл оқиға Абайдың өміріндегі ең батыл қадамдарының бірі болды.</p>',
  NOW(),
  NOW()
FROM books WHERE title = 'Абай жолы';

-- Add more chapters to "Қозы Көрпеш - Баян Сұлу"
INSERT INTO chapters (book_id, chapter_number, title, content, created_at, updated_at)
SELECT 
  id,
  4,
  'Соңғы кездесу',
  '<p>Қодар Баянды алып кеткеннен кейін, Қозы оны іздеуге кірісті. Ол күндіз-түні жол жүрді, әр ауылда Баян туралы сұрады.</p>

<p>Ақыры ол Қодардың ауылына жетті. Бірақ Қодар өте күшті, көп жауынгері бар еді. Қозы жалғыз адам ретінде оларға қарсы тұра алмайтын.</p>

<p>Ол түнде Қодардың үйіне жасырын кірді. Баян терезе алдында отырып, жылап жатыр екен.</p>

<p>— Баян! — деп шақырды Қозы тыныш дауыспен.</p>

<p>Баян бұрылып қарады. Қозыны көргенде, оның көзі жасқа толды.</p>

<p>— Қозы! Сен қалай келдің? Қодар сені өлтіреді!</p>

<p>— Мен сені алып кетуге келдім. Біз қашып кетеміз.</p>

<p>— Жоқ, Қозы. Қодар бізді қуып жетеді. Ол мені өзіне әйел етуге мәжбүрлейді. Ертең той болады.</p>

<p>Қозының жүрегі жарылғандай болды.</p>

<p>— Онда мен Қодармен жекпе-жекке шығамын. Егер мен жеңсем, сен менікі боласың.</p>

<p>— Ал егер жеңілсең?</p>

<p>— Онда мен өлемін. Бірақ сенсіз өмір сүргенше, өлген артық.</p>

<p>Баян оның қолынан ұстады:</p>

<p>— Қозы, мен де сенсіз өмір сүре алмаймын. Егер сен өлсең, мен де өлемін.</p>

<p>Олар бір-біріне құшақтасты. Бұл олардың соңғы кездесуі болуы мүмкін еді.</p>',
  NOW(),
  NOW()
FROM books WHERE title = 'Қозы Көрпеш - Баян Сұлу';
[V0_FILE]typescriptreact:file="app/authors/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import { createClient } from "@/lib/supabase/server"
import { HeaderClient } from "@/components/header-client"
import { Footer } from "@/components/footer"
import Link from "next/link"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { BookOpen } from "lucide-react"

export default async function AuthorsPage() {
  const supabase = await createClient()

// Get all authors with their book counts
  const { data: authors } = await supabase
    .from("profiles")
    .select(
      `
      id,
      display_name,
      bio,
      avatar_url,
      books:books(count)
    `,
    )
    .eq("role", "author")
    .order("display_name")

return (
    <div className="min-h-screen flex flex-col">
      <HeaderClient />

<main className="flex-1 container mx-auto px-4 py-8">
        <div className="max-w-6xl mx-auto">
          <div className="mb-8">
            <h1 className="text-4xl font-bold mb-2">Авторлар</h1>
            <p className="text-muted-foreground">Біздің платформадағы барлық авторлар</p>
          </div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {authors?.map((author) => {
              const bookCount = author.books?.[0]?.count || 0
              const initials = author.display_name
                .split(" ")
                .map((n) => n[0])
                .join("")
                .toUpperCase()

return (
                <Link key={author.id} href={`/catalog?author=${author.id}`}>
                  <Card className="h-full hover:shadow-lg transition-shadow">
                    <CardHeader>
                      <div className="flex items-center gap-4">
                        <Avatar className="h-16 w-16">
                          <AvatarImage src={author.avatar_url || undefined} alt={author.display_name} />
                          <AvatarFallback>{initials}</AvatarFallback>
                        </Avatar>
                        <div className="flex-1">
                          <CardTitle className="text-xl">{author.display_name}</CardTitle>
                          <CardDescription className="flex items-center gap-1 mt-1">
                            <BookOpen className="h-4 w-4" />
                            {bookCount} кітап
                          </CardDescription>
                        </div>
                      </div>
                    </CardHeader>
                    {author.bio && (
                      <CardContent>
                        <p className="text-sm text-muted-foreground line-clamp-3">{author.bio}</p>
                      </CardContent>
                    )}
                  </Card>
                </Link>
              )
            })}
          </div>

{(!authors || authors.length === 0) && (
            <div className="text-center py-12">
              <p className="text-muted-foreground">Әзірге авторлар жоқ</p>
            </div>
          )}
        </div>
      </main>

<Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/reader-settings.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Slider } from "@/components/ui/slider"
import { Button } from "@/components/ui/button"
import { Sun, Moon } from "lucide-react"

interface ReaderSettings {
  font_family: string
  font_size: number
  line_height: number
  text_align: string
  theme: string
  page_width: number
  reading_mode?: string
}

interface ReaderSettingsProps {
  settings: ReaderSettings
  onSettingsChange: (settings: ReaderSettings) => void
}

export function ReaderSettings({ settings, onSettingsChange }: ReaderSettingsProps) {
  const updateSetting = <K extends keyof ReaderSettings>(key: K, value: ReaderSettings[K]) => {
    onSettingsChange({ ...settings, [key]: value })
  }

return (
    <div className="p-6 space-y-6">
      <div>
        <h2 className="text-lg font-semibold mb-4">Оқу параметрлері</h2>
        <p className="text-sm text-muted-foreground">Оқу тәжірибеңізді реттеңіз</p>
      </div>

{/* Theme Toggle */}
      <div className="space-y-2">
        <Label>Тақырып</Label>
        <div className="flex gap-2">
          <Button
            variant={settings.theme === "light" ? "default" : "outline"}
            className="flex-1"
            onClick={() => updateSetting("theme", "light")}
          >
            <Sun className="mr-2 h-4 w-4" />
            Ашық
          </Button>
          <Button
            variant={settings.theme === "dark" ? "default" : "outline"}
            className="flex-1"
            onClick={() => updateSetting("theme", "dark")}
          >
            <Moon className="mr-2 h-4 w-4" />
            Қараңғы
          </Button>
        </div>
      </div>

{/* Reading Mode */}
      <div className="space-y-2">
        <Label>Оқу режимі</Label>
        <Select
          value={settings.reading_mode || "scroll"}
          onValueChange={(value) => updateSetting("reading_mode", value)}
        >
          <SelectTrigger>
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="scroll">Айналдыру</SelectItem>
            <SelectItem value="pagination">Беттер бойынша</SelectItem>
          </SelectContent>
        </Select>
      </div>

{/* Font Family */}
      <div className="space-y-2">
        <Label>Қаріп түрі</Label>
        <Select value={settings.font_family} onValueChange={(value) => updateSetting("font_family", value)}>
          <SelectTrigger>
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="PT Serif">PT Serif</SelectItem>
            <SelectItem value="Merriweather">Merriweather</SelectItem>
            <SelectItem value="Literata">Literata</SelectItem>
            <SelectItem value="Noto Serif">Noto Serif</SelectItem>
          </SelectContent>
        </Select>
      </div>

{/* Font Size */}
      <div className="space-y-2">
        <div className="flex items-center justify-between">
          <Label>Қаріп өлшемі</Label>
          <span className="text-sm text-muted-foreground">{settings.font_size}px</span>
        </div>
        <Slider
          value={[settings.font_size]}
          onValueChange={([value]) => updateSetting("font_size", value)}
          min={14}
          max={28}
          step={1}
        />
      </div>

{/* Line Height */}
      <div className="space-y-2">
        <div className="flex items-center justify-between">
          <Label>Жол биіктігі</Label>
          <span className="text-sm text-muted-foreground">{settings.line_height.toFixed(1)}</span>
        </div>
        <Slider
          value={[settings.line_height]}
          onValueChange={([value]) => updateSetting("line_height", value)}
          min={1.2}
          max={2.5}
          step={0.1}
        />
      </div>

{/* Text Align */}
      <div className="space-y-2">
        <Label>Мәтінді туралау</Label>
        <Select value={settings.text_align} onValueChange={(value) => updateSetting("text_align", value)}>
          <SelectTrigger>
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="left">Сол жаққа</SelectItem>
            <SelectItem value="justify">Ені бойынша</SelectItem>
            <SelectItem value="center">Ортаға</SelectItem>
            <SelectItem value="right">Оң жаққа</SelectItem>
          </SelectContent>
        </Select>
      </div>

{/* Page Width */}
      <div className="space-y-2">
        <div className="flex items-center justify-between">
          <Label>Бет ені</Label>
          <span className="text-sm text-muted-foreground">{settings.page_width}px</span>
        </div>
        <Slider
          value={[settings.page_width]}
          onValueChange={([value]) => updateSetting("page_width", value)}
          min={600}
          max={1200}
          step={50}
        />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/auth/login/page.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import { createClient } from "@/lib/supabase/client"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import Link from "next/link"
import { useRouter, useSearchParams } from "next/navigation"
import { useState, useEffect } from "react"
import { HeaderClient } from "@/components/header-client"
import { Footer } from "@/components/footer"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { AlertCircle } from "lucide-react"

export default function LoginPage() {
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [error, setError] = useState<string | null>(null)
  const [isLoading, setIsLoading] = useState(false)
  const router = useRouter()
  const searchParams = useSearchParams()

useEffect(() => {
    const errorParam = searchParams.get("error")
    if (errorParam === "auth_failed") {
      setError("Аутентификация сәтсіз аяқталды. Қайталап көріңіз.")
    }
  }, [searchParams])

const validateForm = () => {
    if (!email || !email.includes("@")) {
      setError("Жарамды электрондық пошта мекенжайын енгізіңіз")
      return false
    }
    if (!password || password.length < 6) {
      setError("Құпия сөз кемінде 6 таңбадан тұруы керек")
      return false
    }
    return true
  }

const handleLogin = async (e: React.FormEvent) => {
    e.preventDefault()

if (isLoading) return

setError(null)

if (!validateForm()) {
      return
    }

setIsLoading(true)

try {
      const supabase = createClient()

const { data, error: signInError } = await supabase.auth.signInWithPassword({
        email,
        password,
      })

if (signInError) {
        if (signInError.message.includes("Invalid login credentials")) {
          throw new Error("Электрондық пошта немесе құпия сөз қате")
        } else if (signInError.message.includes("Email not confirmed")) {
          throw new Error("Электрондық поштаңызды растаңыз. Растау хатын тексеріңіз.")
        } else {
          throw signInError
        }
      }

if (!data.user || !data.session) {
        throw new Error("Кіру сәтсіз аяқталды. Қайталап көріңіз.")
      }

window.location.href = "/"
    } catch (error: unknown) {
      console.error("[v0] Login error:", error)
      setError(error instanceof Error ? error.message : "Қате орын алды. Қайталап көріңіз.")
      setIsLoading(false)
    }
  }

return (
    <div className="min-h-screen flex flex-col">
      <HeaderClient />

<main className="flex-1 flex items-center justify-center p-6 md:p-10">
        <div className="w-full max-w-sm">
          <Card>
            <CardHeader>
              <CardTitle className="text-2xl">Кіру</CardTitle>
              <CardDescription>Аккаунтқа кіру үшін электрондық поштаңызды енгізіңіз</CardDescription>
            </CardHeader>
            <CardContent>
              <form onSubmit={handleLogin}>
                <div className="flex flex-col gap-6">
                  <div className="grid gap-2">
                    <Label htmlFor="email">Электрондық пошта</Label>
                    <Input
                      id="email"
                      type="email"
                      placeholder="m@example.com"
                      required
                      value={email}
                      onChange={(e) => {
                        setEmail(e.target.value)
                        setError(null)
                      }}
                      disabled={isLoading}
                    />
                  </div>
                  <div className="grid gap-2">
                    <Label htmlFor="password">Құпия сөз</Label>
                    <Input
                      id="password"
                      type="password"
                      required
                      minLength={6}
                      value={password}
                      onChange={(e) => {
                        setPassword(e.target.value)
                        setError(null)
                      }}
                      disabled={isLoading}
                    />
                  </div>
                  {error && (
                    <Alert variant="destructive">
                      <AlertCircle className="h-4 w-4" />
                      <AlertDescription>{error}</AlertDescription>
                    </Alert>
                  )}
                  <Button type="submit" className="w-full" disabled={isLoading}>
                    {isLoading ? "Кіру..." : "Кіру"}
                  </Button>
                </div>
                <div className="mt-4 text-center text-sm">
                  Аккаунтыңыз жоқ па?{" "}
                  <Link href="/auth/sign-up" className="underline underline-offset-4 text-primary">
                    Тіркелу
                  </Link>
                </div>
              </form>
            </CardContent>
          </Card>
        </div>
      </main>

<Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/header.tsx" isEdit="true" isMerged="true"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { BookOpen, Bell, User, Search } from "lucide-react"
import { createClient } from "@/lib/supabase/server"
import { ThemeSwitcher } from "@/components/theme-switcher"
import { Input } from "@/components/ui/input"

export async function Header() {
  const supabase = await createClient()
  const {
    data: { user },
  } = await supabase.auth.getUser()

return (
    <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
      <div className="container mx-auto flex h-14 items-center justify-between px-4 gap-4">
        <Link href="/" className="flex items-center gap-2 font-bold text-lg flex-shrink-0">
          <div className="h-7 w-7 bg-[#ffa500] rounded flex items-center justify-center">
            <BookOpen className="h-4 w-4 text-white" />
          </div>
          <span>Sozder</span>
        </Link>

<nav className="flex items-center gap-4">
          <Link href="/catalog" className="hidden md:block text-sm font-medium hover:text-primary transition-colors">
            Каталог
          </Link>
          <Link
            href="/support/faq"
            className="hidden md:block text-sm font-medium hover:text-primary transition-colors"
          >
            F.A.Q.
          </Link>

{user ? (
            <>
              <Button variant="ghost" size="icon" className="hidden md:flex">
                <Bell className="h-5 w-5" />
                <span className="sr-only">Хабарламалар</span>
              </Button>
              <Button variant="ghost" size="icon" asChild>
                <Link href="/profile">
                  <User className="h-5 w-5" />
                  <span className="sr-only">Профиль</span>
                </Link>
              </Button>
            </>
          ) : (
            <Button size="sm" className="bg-[#ffa500] hover:bg-[#ff8c00] text-white font-medium" asChild>
              <Link href="/auth/login">Кіру</Link>
            </Button>
          )}
        </nav>
      </div>
    </header>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true"
import { createClient } from "@/lib/supabase/server"
import { BannerCarousel } from "@/components/banner-carousel"
import { BookCarousel } from "@/components/book-carousel"
import { Header } from "@/components/header"
import { Footer } from "@/components/footer"
import { Button } from "@/components/ui/button"
import { BookOpen } from "lucide-react"
import Link from "next/link"

export default async function HomePage() {
  const supabase = await createClient()

const { data: banners } = await supabase
    .from("banners")
    .select("*")
    .eq("is_active", true)
    .order("display_order", { ascending: true })

const { data: popularBooks } = await supabase
    .from("books")
    .select(`*, profiles:author_id (display_name)`)
    .eq("status", "published")
    .order("views", { ascending: false })
    .limit(12)

const { data: recommendedBooks } = await supabase
    .from("books")
    .select(`*, profiles:author_id (display_name)`)
    .eq("status", "published")
    .order("popularity_score", { ascending: false })
    .limit(12)

const { data: latestUpdates } = await supabase
    .from("books")
    .select(`*, profiles:author_id (display_name)`)
    .eq("status", "published")
    .order("updated_at", { ascending: false })
    .limit(12)

const { data: recentlyAdded } = await supabase
    .from("books")
    .select(`*, profiles:author_id (display_name)`)
    .eq("status", "published")
    .order("created_at", { ascending: false })
    .limit(12)

return (
    <div className="min-h-screen flex flex-col bg-background">
      <Header />

<main className="flex-1">
        {banners && banners.length > 0 && <BannerCarousel banners={banners} />}

<section className="container mx-auto px-4 py-8">
          <div className="flex items-center justify-between mb-6">
            <div className="flex items-center gap-2">
              <div className="h-6 w-6 bg-[#ffa500] rounded flex items-center justify-center flex-shrink-0">
                <span className="text-white text-sm">⭐</span>
              </div>
              <h2 className="text-xl md:text-2xl font-bold">Танымал</h2>
              <span className="text-sm text-muted-foreground hidden md:inline">Кез келген жанрдан хиттер</span>
            </div>
            <Link
              href="/catalog?sort=popular"
              className="text-sm text-[#ffa500] hover:underline flex items-center gap-1"
            >
              Толығырақ →
            </Link>
          </div>
          {popularBooks && popularBooks.length > 0 && <BookCarousel books={popularBooks} />}
        </section>

<section className="container mx-auto px-4 py-8">
          <div className="flex items-center justify-between mb-6">
            <div className="flex items-center gap-2">
              <div className="h-6 w-6 bg-[#ffa500] rounded flex items-center justify-center flex-shrink-0">
                <span className="text-white text-sm">👍</span>
              </div>
              <h2 className="text-xl md:text-2xl font-bold">Біз ұсынамыз</h2>
              <span className="text-sm text-muted-foreground hidden md:inline">Редакциядан таңдау</span>
            </div>
            <Link
              href="/catalog?sort=recommended"
              className="text-sm text-[#ffa500] hover:underline flex items-center gap-1"
            >
              Толығырақ →
            </Link>
          </div>
          {recommendedBooks && recommendedBooks.length > 0 && <BookCarousel books={recommendedBooks} />}
        </section>

<section className="container mx-auto px-4 py-8">
          <div className="flex items-center justify-between mb-6">
            <div className="flex items-center gap-2">
              <div className="h-6 w-6 bg-[#ffa500] rounded flex items-center justify-center flex-shrink-0">
                <span className="text-white text-sm">🔄</span>
              </div>
              <h2 className="text-xl md:text-2xl font-bold">Соңғы жаңартулар</h2>
              <span className="text-sm text-muted-foreground hidden md:inline">Жаңа тараулар жоқ</span>
            </div>
            <Link
              href="/catalog?sort=updated"
              className="text-sm text-[#ffa500] hover:underline flex items-center gap-1"
            >
              Толығырақ →
            </Link>
          </div>
          {latestUpdates && latestUpdates.length > 0 && <BookCarousel books={latestUpdates} />}
        </section>

<section className="container mx-auto px-4 py-8">
          <div className="flex items-center justify-between mb-6">
            <div className="flex items-center gap-2">
              <div className="h-6 w-6 bg-[#ffa500] rounded flex items-center justify-center flex-shrink-0">
                <span className="text-white text-sm">✨</span>
              </div>
              <h2 className="text-xl md:text-2xl font-bold">Жақында қосылған</h2>
              <span className="text-sm text-muted-foreground hidden md:inline">Жаңа кітаптар дүкеніміз</span>
            </div>
            <Link
              href="/catalog?sort=newest"
              className="text-sm text-[#ffa500] hover:underline flex items-center gap-1"
            >
              Толығырақ →
            </Link>
          </div>
          {recentlyAdded && recentlyAdded.length > 0 && <BookCarousel books={recentlyAdded} />}
        </section>

<section className="container mx-auto px-4 py-16">
          <div className="bg-gradient-to-br from-[#ffa500] to-[#ff8c00] rounded-2xl p-8 md:p-12 text-white text-center">
            <div className="max-w-2xl mx-auto space-y-6">
              <div className="inline-flex items-center justify-center w-16 h-16 bg-white/20 rounded-full mb-4">
                <BookOpen className="h-8 w-8" />
              </div>
              <h2 className="text-3xl md:text-4xl font-bold text-balance">Өз шығармаңызды бүгін жариялаңыз!</h2>
              <p className="text-lg text-white/90">Мыңдаған оқырмандармен бөлісіңіз және мақтау алыңыз</p>
              <Button
                size="lg"
                className="bg-white text-[#ffa500] hover:bg-white/90 font-semibold text-base h-12 px-8"
                asChild
              >
                <Link href="/support/selfpublishing">Жариялауды бастау</Link>
              </Button>
            </div>
          </div>
        </section>
      </main>

<Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/book-carousel.tsx" isMerged="true"
"use client"

import { useRef } from "react"
import Link from "next/link"
import Image from "next/image"
import { ChevronLeft, ChevronRight, Star } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"

interface Book {
  id: string
  title: string
  cover_url: string | null
  genre: string | null
  profiles: {
    display_name: string
  } | null
  rating?: number
}

interface BookCarouselProps {
  books: Book[]
}

export function BookCarousel({ books }: BookCarouselProps) {
  const scrollRef = useRef<HTMLDivElement>(null)

const scroll = (direction: "left" | "right") => {
    if (scrollRef.current) {
      const scrollAmount = 300
      scrollRef.current.scrollBy({
        left: direction === "left" ? -scrollAmount : scrollAmount,
        behavior: "smooth",
      })
    }
  }

return (
    <div className="relative group">
      <Button
        variant="ghost"
        size="icon"
        className="absolute left-0 top-1/2 -translate-y-1/2 z-10 bg-background/80 backdrop-blur-sm shadow-lg opacity-0 group-hover:opacity-100 transition-opacity"
        onClick={() => scroll("left")}
      >
        <ChevronLeft className="h-6 w-6" />
      </Button>

<div
        ref={scrollRef}
        className="flex gap-4 overflow-x-auto scrollbar-hide scroll-smooth pb-4"
        style={{ scrollbarWidth: "none", msOverflowStyle: "none" }}
      >
        {books.map((book) => (
          <Link key={book.id} href={`/book/${book.id}`} className="flex-shrink-0 w-[140px] md:w-[160px] group/card">
            <Card className="overflow-hidden hover:shadow-xl transition-all duration-300 border-0">
              <div className="relative aspect-[2/3] bg-muted overflow-hidden">
                <Image
                  src={book.cover_url || `/placeholder.svg?height=400&width=300&query=book ${book.title}`}
                  alt={book.title}
                  fill
                  className="object-cover group-hover/card:scale-105 transition-transform duration-300"
                />
                {book.rating && (
                  <div className="absolute top-2 right-2 bg-black/70 text-white text-xs font-bold px-2 py-1 rounded flex items-center gap-1">
                    <Star className="h-3 w-3 fill-yellow-400 text-yellow-400" />
                    {book.rating.toFixed(1)}
                  </div>
                )}
              </div>
              <div className="p-3 space-y-1">
                <h3 className="font-semibold text-sm line-clamp-2 leading-tight">{book.title}</h3>
                <p className="text-xs text-muted-foreground line-clamp-1">{book.profiles?.display_name || "Unknown"}</p>
                {book.genre && <p className="text-xs text-[#ffa500] font-medium">{book.genre}</p>}
              </div>
            </Card>
          </Link>
        ))}
      </div>

<Button
        variant="ghost"
        size="icon"
        className="absolute right-0 top-1/2 -translate-y-1/2 z-10 bg-background/80 backdrop-blur-sm shadow-lg opacity-0 group-hover:opacity-100 transition-opacity"
        onClick={() => scroll("right")}
      >
        <ChevronRight className="h-6 w-6" />
      </Button>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/support/selfpublishing/page.tsx" isMerged="true"
import { Header } from "@/components/header"
import { Footer } from "@/components/footer"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { BookOpen, Users, Shield, CheckCircle2 } from "lucide-react"
import Link from "next/link"

export default function SelfPublishingPage() {
  return (
    <div className="min-h-screen flex flex-col bg-background">
      <Header />

<main className="flex-1">
        <section className="bg-gradient-to-br from-gray-900 to-black text-white py-20">
          <div className="container mx-auto px-4 text-center">
            <div className="inline-flex items-center justify-center w-20 h-20 bg-[#ffa500]/20 rounded-2xl mb-6">
              <BookOpen className="h-10 w-10 text-[#ffa500]" />
            </div>
            <h1 className="text-4xl md:text-5xl font-bold mb-4">Өзіңіз жариялаңыз</h1>
            <p className="text-xl text-gray-300 max-w-2xl mx-auto">
              Өз шығармаларыңызды Sozder платформасында жариялаңыз
            </p>
          </div>
        </section>

<section className="container mx-auto px-4 py-16">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            <Card className="border-2 hover:border-[#ffa500] transition-colors">
              <CardContent className="p-8 text-center">
                <div className="inline-flex items-center justify-center w-16 h-16 bg-[#ffa500]/10 rounded-full mb-4">
                  <BookOpen className="h-8 w-8 text-[#ffa500]" />
                </div>
                <h3 className="text-xl font-bold mb-3">Оңай жүктеу</h3>
                <p className="text-muted-foreground">Шығармаларыңызды бірнеше қадамда жүктеңіз, жариялаңыз</p>
              </CardContent>
            </Card>

<Card className="border-2 hover:border-[#ffa500] transition-colors">
              <CardContent className="p-8 text-center">
                <div className="inline-flex items-center justify-center w-16 h-16 bg-[#ffa500]/10 rounded-full mb-4">
                  <Users className="h-8 w-8 text-[#ffa500]" />
                </div>
                <h3 className="text-xl font-bold mb-3">Кең аудитория</h3>
                <p className="text-muted-foreground">Мыңдаған оқырмандарға жетіңіз</p>
              </CardContent>
            </Card>

<Card className="border-2 hover:border-[#ffa500] transition-colors">
              <CardContent className="p-8 text-center">
                <div className="inline-flex items-center justify-center w-16 h-16 bg-[#ffa500]/10 rounded-full mb-4">
                  <Shield className="h-8 w-8 text-[#ffa500]" />
                </div>
                <h3 className="text-xl font-bold mb-3">Қауіпсіз</h3>
                <p className="text-muted-foreground">Авторлық құқықтарыңыз қорғалған</p>
              </CardContent>
            </Card>
          </div>
        </section>

<section className="container mx-auto px-4 py-12">
          <Card className="bg-card">
            <CardContent className="p-8">
              <h2 className="text-2xl font-bold mb-6">Жариялау шарттары</h2>
              <div className="space-y-4">
                {[
                  {
                    title: "1. Авторлық құқықтар",
                    desc: "Жариялайтын шығарма сіздің өз авторлығыңызда немесе заңды түрде жариялануға құқығыңыз болуы керек. Басқа адамдардың біліктерін плагиат жасау қатаң түрде жариялануға құқықсыз болып саналады.",
                  },
                  {
                    title: "2. Мазмұн сапасы",
                    desc: "Шығарма әдеби нормаларға сәйкес, оқуға жарамды болуы керек. Грамматикалық қателері көп мәтіндер модерациядан өтпеуі мүмкін.",
                  },
                  {
                    title: "3. Жас шектеуі",
                    desc: "Шығармаға дұрыс жас рейтингін қолдануыңыз (0+, 6+, 12+, 16+, 18+) қажет. 18+ мазмұны қатаң түрде белгіленуі қажет.",
                  },
                  {
                    title: "4. Тыйым салынған мазмұн",
                    desc: "Экстремизмге, насихат, жалған-заңды, заңсыз, жоғары-дәрежелі немесе заңға қайшы әрекеттерге нәсілдік мазмұнды жариялауға тыйым салынады.",
                  },
                  {
                    title: "5. Модерация процесі",
                    desc: "Барлық жариялаулар модерациядан өтеді. Әдетте 24-48 сағат ішінде шығармаңыз тексерілетін болады. Модераторлар шығармаңыз қабылданусөзден немесе қайтарылысуын мұғалімдерге хабарлайды.",
                  },
                  {
                    title: "6. Өңдеу және жаңарту",
                    desc: "Жариялаңаннан шығармаңызда кез келген уақытта әңдей алуқта. Жаңа тараулар қосқанда, оқырмандарға жаңарту көрсетіледі.",
                  },
                ].map((rule, idx) => (
                  <div key={idx} className="flex gap-4">
                    <div className="flex-shrink-0 mt-1">
                      <CheckCircle2 className="h-5 w-5 text-[#ffa500]" />
                    </div>
                    <div>
                      <h3 className="font-semibold mb-1">{rule.title}</h3>
                      <p className="text-sm text-muted-foreground leading-relaxed">{rule.desc}</p>
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        </section>

<section className="container mx-auto px-4 py-12">
          <Card className="bg-muted/30">
            <CardContent className="p-8">
              <h2 className="text-2xl font-bold mb-6 flex items-center gap-2">
                <BookOpen className="h-6 w-6 text-[#ffa500]" />
                Қалай жариялау керек?
              </h2>
              <div className="space-y-6">
                {[
                  {
                    num: 1,
                    title: "Тіркелуіңіз немесе кіріңіз",
                    desc: "Sozder платформасында тіркелген болуыңыз керек",
                  },
                  {
                    num: 2,
                    title: '"Кітап қосу" батырмасын басыңыз',
                    desc: "Шығарма түрлін анықтаңыз: атауы, автор, сипаттама, жанр",
                  },
                  { num: 3, title: "Тараулар қосыңыз", desc: "Әр тарау үшін атауы мен мазмұнын енгізіңіз" },
                  {
                    num: 4,
                    title: "Модерацияға жіберіңіз",
                    desc: '"Модерацияға жіберу" батырмасын басыңыз. Текстіңіз күтулге жіберіледі',
                  },
                ].map((step) => (
                  <div key={step.num} className="flex gap-4">
                    <div className="flex-shrink-0">
                      <div className="w-10 h-10 rounded-full bg-[#ffa500] text-white flex items-center justify-center font-bold">
                        {step.num}
                      </div>
                    </div>
                    <div className="flex-1">
                      <h3 className="font-semibold mb-1">{step.title}</h3>
                      <p className="text-sm text-muted-foreground">{step.desc}</p>
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        </section>

<section className="container mx-auto px-4 py-16">
          <div className="bg-gradient-to-br from-[#ffa500] to-[#ff8c00] rounded-2xl p-12 text-white text-center">
            <h2 className="text-3xl font-bold mb-4">Өз шығармаңызды бүгін жариялаңыз!</h2>
            <p className="text-lg mb-8 text-white/90">Мыңдаған оқырмандармен бөлісіңіз</p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Button size="lg" className="bg-white text-[#ffa500] hover:bg-white/90 font-semibold" asChild>
                <Link href="/auth/sign-up">Жариялауды бастау</Link>
              </Button>
            </div>
            <p className="mt-6 text-sm text-white/70">
              Сұрақтарыңыз бар ма?{" "}
              <Link href="/support/contact" className="text-white underline hover:no-underline">
                Қолдау қызметіне хабарласыңыз
              </Link>
            </p>
          </div>
        </section>
      </main>

<Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/author/book/[bookId]/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import { createClient } from "@/lib/supabase/server"
import { redirect, notFound } from "next/navigation"
import { Header } from "@/components/header"
import { Footer } from "@/components/footer"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Plus } from "lucide-react"
import Link from "next/link"
import { BookStatusToggle } from "@/components/book-status-toggle"
import { ChaptersList } from "@/components/chapters-list"

export default async function EditBookPage({ params }: { params: Promise<{ bookId: string }> }) {
  const { bookId } = await params
  const supabase = await createClient()

const {
    data: { user },
  } = await supabase.auth.getUser()

if (!user) {
    redirect("/auth/login")
  }

// Get book
  const { data: book } = await supabase.from("books").select("*").eq("id", bookId).eq("author_id", user.id).single()

if (!book) {
    notFound()
  }

// Get chapters
  const { data: chapters } = await supabase
    .from("chapters")
    .select("*")
    .eq("book_id", bookId)
    .order("chapter_number", { ascending: true })

return (
    <div className="min-h-screen flex flex-col">
      <Header />

<main className="flex-1 container mx-auto px-4 py-8">
        <div className="max-w-4xl mx-auto space-y-6">
          {/* Book Info */}
          <div className="flex items-start justify-between">
            <div>
              <h1 className="text-4xl font-bold mb-2">{book.title}</h1>
              <p className="text-muted-foreground">{book.genre}</p>
            </div>
            <BookStatusToggle bookId={book.id} currentStatus={book.status} />
          </div>

{/* Description */}
          <Card>
            <CardHeader>
              <CardTitle>Description</CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-muted-foreground whitespace-pre-wrap">{book.description}</p>
            </CardContent>
          </Card>

{/* Chapters */}
          <Card>
            <CardHeader>
              <div className="flex items-center justify-between">
                <CardTitle>Chapters ({chapters?.length || 0})</CardTitle>
                <Button size="sm" asChild>
                  <Link href={`/author/book/${bookId}/new-chapter`}>
                    <Plus className="mr-2 h-4 w-4" />
                    Add Chapter
                  </Link>
                </Button>
              </div>
            </CardHeader>
            <CardContent>
              <ChaptersList bookId={bookId} chapters={chapters || []} />
            </CardContent>
          </Card>
        </div>
      </main>

<Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/author/book/[bookId]/new-chapter/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import { createClient } from "@/lib/supabase/server"
import { redirect, notFound } from "next/navigation"
import { Header } from "@/components/header"
import { Footer } from "@/components/footer"
import { ChapterForm } from "@/components/chapter-form"

export default async function NewChapterPage({ params }: { params: Promise<{ bookId: string }> }) {
  const { bookId } = await params
  const supabase = await createClient()

const {
    data: { user },
  } = await supabase.auth.getUser()

if (!user) {
    redirect("/auth/login")
  }

// Verify book ownership
  const { data: book } = await supabase.from("books").select("*").eq("id", bookId).eq("author_id", user.id).single()

if (!book) {
    notFound()
  }

// Get next chapter number
  const { data: chapters } = await supabase.from("chapters").select("chapter_number").eq("book_id", bookId)

const nextChapterNumber = chapters && chapters.length > 0 ? Math.max(...chapters.map((c) => c.chapter_number)) + 1 : 1

return (
    <div className="min-h-screen flex flex-col">
      <Header />

<main className="flex-1 container mx-auto px-4 py-8">
        <div className="max-w-4xl mx-auto">
          <h1 className="text-4xl font-bold mb-2">Add New Chapter</h1>
          <p className="text-muted-foreground mb-8">{book.title}</p>

<Footer />
    </div>
  )
}
[V0_FILE]css:file="app/globals.css" isEdit="true" isQuickEdit="true" isMerged="true"
@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

:root {
  --background: #ffffff;
  --foreground: #0a0a0a;
  --card: #ffffff;
  --card-foreground: #0a0a0a;
  --popover: #ffffff;
  --popover-foreground: #0a0a0a;
  --primary: #ffa500;
  --primary-foreground: #ffffff;
  --secondary: #f5f5f5;
  --secondary-foreground: #171717;
  --muted: #f5f5f5;
  --muted-foreground: #737373;
  --accent: #ffa500;
  --accent-foreground: #ffffff;
  --destructive: #ef4444;
  --destructive-foreground: #fef2f2;
  --border: #e5e5e5;
  --input: #e5e5e5;
  --ring: #ffa500;
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --radius: 0.625rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}

.dark {
  --background: #0a0a0a;
  --foreground: #fafafa;
  --card: #0a0a0a;
  --card-foreground: #fafafa;
  --popover: #0a0a0a;
  --popover-foreground: #fafafa;
  --primary: #ffa500;
  --primary-foreground: #ffffff;
  --secondary: #262626;
  --secondary-foreground: #fafafa;
  --muted: #262626;
  --muted-foreground: #a3a3a3;
  --accent: #ffa500;
  --accent-foreground: #ffffff;
  --destructive: #7f1d1d;
  --destructive-foreground: #fca5a5;
  --border: #262626;
  --input: #262626;
  --ring: #ffa500;
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(0.269 0 0);
  --sidebar-ring: oklch(0.439 0 0);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground font-sans;
  }

/* Add proper paragraph spacing for reader content */
  .prose p {
    margin: 1em 0;
    text-wrap: wrap;
  }

.prose > div p {
    margin: 1em 0;
    text-wrap: wrap;
  }

/* Ensure consistent spacing in HTML content */
  article div p {
    margin-top: 1em;
    margin-bottom: 1em;
  }

article div > * + * {
    margin-top: 1em;
  }
}
[V0_FILE]png:file="public/images/xmzkot1qefcwbgjcrbeabw.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/xmZkot1qEfCwBgJCrBEABw-Wn08fm8ZuYgDJBi2V1odVzjT0INNQq.png" isMerged="true"
[V0_FILE]png:file="public/images/tuyurt1qefc-4ajcrbeaaw.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/TUyuRt1qEfC_4AJCrBEAAw-ZJsfqyPQ8z0HUItP3PbfMk5ni0ehEs.png" isMerged="true"
[V0_FILE]typescript:file="lib/supabase/server.ts" isEdit="true" isMerged="true"
import { createServerClient } from "@supabase/ssr"
import { cookies } from "next/headers"

export async function createClient() {
  const cookieStore = await cookies()

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL || process.env.SUPABASE_URL
  const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY || process.env.SUPABASE_ANON_KEY

if (!supabaseUrl || !supabaseAnonKey) {
    throw new Error(
      "Supabase environment variables not configured. Check your environment variables in the Vercel dashboard.",
    )
  }

return createServerClient(supabaseUrl, supabaseAnonKey, {
    cookies: {
      getAll() {
        return cookieStore.getAll()
      },
      setAll(cookiesToSet) {
        try {
          cookiesToSet.forEach(({ name, value, options }) => cookieStore.set(name, value, options))
        } catch {
          // The "setAll" method was called from a Server Component.
          // This can be ignored if you have middleware refreshing
          // user sessions.
        }
      },
    },
  })
}
[V0_FILE]typescript:file="lib/supabase/client.ts" isEdit="true" isQuickEdit="true" isMerged="true"
import { createBrowserClient as createSupabaseBrowserClient } from "@supabase/ssr"

export function createBrowserClient() {
  const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL
  const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY

if (!supabaseUrl || !supabaseAnonKey) {
    console.error("[v0] Supabase environment variables missing:", {
      NEXT_PUBLIC_SUPABASE_URL: !!supabaseUrl,
      NEXT_PUBLIC_SUPABASE_ANON_KEY: !!supabaseAnonKey,
    })
    return null as any
  }

return createSupabaseBrowserClient(supabaseUrl, supabaseAnonKey)
}

export function createClient() {
  return createBrowserClient()
}
[V0_FILE]typescriptreact:file="app/auth/sign-up/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { createClient } from "@/lib/supabase/client"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import Link from "next/link"
import { useRouter } from "next/navigation"
import { useState } from "react"
import { HeaderClient } from "@/components/header-client"
import { Footer } from "@/components/footer"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { AlertCircle, CheckCircle2 } from "lucide-react"

export default function SignUpPage() {
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [displayName, setDisplayName] = useState("")
  const [repeatPassword, setRepeatPassword] = useState("")
  const [error, setError] = useState<string | null>(null)
  const [success, setSuccess] = useState(false)
  const [isLoading, setIsLoading] = useState(false)
  const router = useRouter()

const validateForm = () => {
    if (!displayName || displayName.trim().length < 2) {
      setError("Көрсетілетін аты кемінде 2 таңбадан тұруы керек")
      return false
    }
    if (!email || !email.includes("@")) {
      setError("Жарамды электрондық пошта мекенжайын енгізіңіз")
      return false
    }
    if (!password || password.length < 6) {
      setError("Құпия сөз кемінде 6 таңбадан тұруы керек")
      return false
    }
    if (password !== repeatPassword) {
      setError("Құпия сөздер сәйкес келмейді")
      return false
    }
    return true
  }

const handleSignUp = async (e: React.FormEvent) => {
    e.preventDefault()

if (isLoading) return

setError(null)
    setSuccess(false)

if (!validateForm()) {
      return
    }

setIsLoading(true)

try {
      const supabase = createClient()

if (!supabase) {
        throw new Error(
          "Supabase қосылымы орнатылмаған. Басқару тақтасынан Supabase интеграциясын ауыстырыңыз және NEXT_PUBLIC_SUPABASE_URL, NEXT_PUBLIC_SUPABASE_ANON_KEY айнымалыларын қосыңыз.",
        )
      }

console.log("[v0] Starting sign up process")

const { data, error: signUpError } = await supabase.auth.signUp({
        email,
        password,
        options: {
          emailRedirectTo:
            process.env.NEXT_PUBLIC_DEV_SUPABASE_REDIRECT_URL || `${window.location.origin}/auth/callback`,
          data: {
            display_name: displayName.trim(),
          },
        },
      })

console.log("[v0] Sign up response:", { data, error: signUpError })

if (signUpError) {
        if (signUpError.message.includes("already registered")) {
          throw new Error("Бұл электрондық пошта тіркелген. Кіру бетіне өтіңіз.")
        } else {
          throw signUpError
        }
      }

if (data.user) {
        setSuccess(true)
        console.log("[v0] Sign up successful, redirecting to verification page")

setTimeout(() => {
          router.push("/auth/verify-email")
        }, 2000)
      }
    } catch (error: unknown) {
      console.error("[v0] Sign up error:", error)
      setError(error instanceof Error ? error.message : "Қате орын алды. Қайталап көріңіз.")
    } finally {
      setIsLoading(false)
    }
  }

return (
    <div className="min-h-screen flex flex-col">
      <HeaderClient />

<main className="flex-1 flex items-center justify-center p-6 md:p-10">
        <div className="w-full max-w-sm">
          <Card>
            <CardHeader>
              <CardTitle className="text-2xl">Тіркелу</CardTitle>
              <CardDescription>Оқуды бастау үшін жаңа аккаунт жасаңыз</CardDescription>
            </CardHeader>
            <CardContent>
              <form onSubmit={handleSignUp}>
                <div className="flex flex-col gap-6">
                  <div className="grid gap-2">
                    <Label htmlFor="display-name">Көрсетілетін аты</Label>
                    <Input
                      id="display-name"
                      type="text"
                      placeholder="Аты-жөніңіз"
                      required
                      minLength={2}
                      value={displayName}
                      onChange={(e) => {
                        setDisplayName(e.target.value)
                        setError(null)
                      }}
                      disabled={isLoading || success}
                    />
                  </div>
                  <div className="grid gap-2">
                    <Label htmlFor="email">Электрондық пошта</Label>
                    <Input
                      id="email"
                      type="email"
                      placeholder="m@example.com"
                      required
                      value={email}
                      onChange={(e) => {
                        setEmail(e.target.value)
                        setError(null)
                      }}
                      disabled={isLoading || success}
                    />
                  </div>
                  <div className="grid gap-2">
                    <Label htmlFor="password">Құпия сөз (кемінде 6 таңба)</Label>
                    <Input
                      id="password"
                      type="password"
                      required
                      minLength={6}
                      value={password}
                      onChange={(e) => {
                        setPassword(e.target.value)
                        setError(null)
                      }}
                      disabled={isLoading || success}
                    />
                  </div>
                  <div className="grid gap-2">
                    <Label htmlFor="repeat-password">Құпия сөзді қайталаңыз</Label>
                    <Input
                      id="repeat-password"
                      type="password"
                      required
                      minLength={6}
                      value={repeatPassword}
                      onChange={(e) => {
                        setRepeatPassword(e.target.value)
                        setError(null)
                      }}
                      disabled={isLoading || success}
                    />
                  </div>
                  {error && (
                    <Alert variant="destructive">
                      <AlertCircle className="h-4 w-4" />
                      <AlertDescription>{error}</AlertDescription>
                    </Alert>
                  )}
                  {success && (
                    <Alert className="border-green-500 text-green-700 dark:text-green-400">
                      <CheckCircle2 className="h-4 w-4" />
                      <AlertDescription>
                        Тіркелу сәтті аяқталды! Растау хаты жіберілді. Электрондық поштаңызды тексеріңіз.
                      </AlertDescription>
                    </Alert>
                  )}
                  <Button type="submit" className="w-full" disabled={isLoading || success}>
                    {isLoading ? "Аккаунт жасалуда..." : success ? "Сәтті тіркелді!" : "Тіркелу"}
                  </Button>
                </div>
                <div className="mt-4 text-center text-sm">
                  Аккаунтыңыз бар ма?{" "}
                  <Link href="/auth/login" className="underline underline-offset-4 text-primary">
                    Кіру
                  </Link>
                </div>
              </form>
            </CardContent>
          </Card>
        </div>
      </main>

<Footer />
    </div>
  )
}
[V0_FILE]sql:file="scripts/010_add_sample_books.sql" isEdit="true" isQuickEdit="true" isMerged="true"
-- Simplified script to add sample books without requiring pre-existing authors
-- Using UUID for author_id to ensure consistency with Supabase auth system

-- Создание авторов в таблице profiles
-- ВАЖНО: Эти авторы могут быть вымышленными для демонстрации
INSERT INTO profiles (id, display_name, role, created_at)
VALUES
  ('00000000-0000-0000-0000-000000000001'::uuid, 'Мұхтар Әуезов', 'author', NOW()),
  ('00000000-0000-0000-0000-000000000002'::uuid, 'Ілья Жансүгіров', 'author', NOW()),
  ('00000000-0000-0000-0000-000000000003'::uuid, 'Салихитдің аңызы', 'author', NOW())
ON CONFLICT (id) DO NOTHING;

-- Книга 1: Бақытсыз Жамал
INSERT INTO books (
  title,
  description,
  genre,
  cover_url,
  author_id,
  status,
  country,
  release_year,
  age_rating,
  book_type,
  book_status,
  views,
  popularity_score
) VALUES (
  'Бақытсыз Жамал',
  'Мұхтар Әуезовтің классикалық романы — қазақ әдебиетінде көркем прозаның үлгісін жасаған. Бұл роман қазақ қоғамының өткенінің қайшылықтарын және адам махаббатының трагедиясын өнегелі өнектерінде ұсынады.',
  'Роман',
  '/images/xmzkot1qefcwbgjcrbeabw.png',
  '00000000-0000-0000-0000-000000000001'::uuid,
  'published',
  'Қазақстан',
  1910,
  '18+',
  'prose',
  'completed',
  18000,
  10.0
)
ON CONFLICT (title) DO NOTHING;

INSERT INTO chapters (book_id, title, content, chapter_number, word_count)
SELECT 
  (SELECT id FROM books WHERE title = 'Бақытсыз Жамал' LIMIT 1),
  'Сез басы',
  '<p>«Бақытсыз Жамал» романы — қазақ әдебиетінде көркем прозаның үлгісін жасаған түрлі романдармен. Бұл роман тек жарлысың жылын көкірек, форма жаңалығын да бірегі дүниелерге сара жол болғанда азық.</p><p>«Бақытсыз Жамал» романды соң мейірдегі тарих-әлеуметтік шығысты шынайды да көркем бейнелеумен, авторлық идеялық амбициялар айқындырмегі өзінің жөніп қазақ прозасының өркендеуіне дәстүрі жол көрсетті, үргі болды.</p>',
  1,
  150
UNION ALL
SELECT 
  (SELECT id FROM books WHERE title = 'Бақытсыз Жамал' LIMIT 1),
  'I',
  '<p>Жамал — әдемі, ақылды да білімді қыз. Оның ата-анасы — байлар. Алайда байлығы мен зайыбымен қоса, Жамалдың жүрегінде жастық арманы, махаббат тіледі. Ол бір кездері ауылдағы жас жігіт Ғаббасқа ғашық болады.</p>',
  2,
  180
UNION ALL
SELECT 
  (SELECT id FROM books WHERE title = 'Бақытсыз Жамал' LIMIT 1),
  'II',
  '<p>Жамалдың үйлену тойы жақындая түседі. Қыздың жүрегі өкініш пен қайғыға толы. Ол өз тағдырын өзгерте алмайтынын түсінеді.</p>',
  3,
  160
UNION ALL
SELECT 
  (SELECT id FROM books WHERE title = 'Бақытсыз Жамал' LIMIT 1),
  'III',
  '<p>Той болып, Жамал Айтқұлға тиеді. Бірақ оның жүрегі әлі де Ғаббаста. Жаңа отбасында Жамал бақытты емес. Ол үнемі өз ойларында Ғаббасты еске алады.</p>',
  4,
  170
UNION ALL
SELECT 
  (SELECT id FROM books WHERE title = 'Бақытсыз Жамал' LIMIT 1),
  'IV',
  '<p>Уақыт өтіп, Жамал мен Ғаббас бір-бірін ұмытуға тырысады. Бірақ олардың махаббаты әлі де күшті. Олар кейде кездесіп қалады, бірақ бұл кездесулер тек қайғы әкеледі.</p>',
  5,
  165
UNION ALL
SELECT 
  (SELECT id FROM books WHERE title = 'Бақытсыз Жамал' LIMIT 1),
  'V',
  '<p>Жылдар өтеді. Жамал мен Ғаббас әлі де бір-бірін жақсы көреді, бірақ олар ешқашан бірге бола алмайды. Олардың өмірі трагедияға айналады.</p>',
  6,
  155
UNION ALL
SELECT 
  (SELECT id FROM books WHERE title = 'Бақытсыз Жамал' LIMIT 1),
  'Эпилог',
  '<p>«Бақытсыз Жамал» романы қазақ әдебиетінде маңызды орын алады. Бұл шығарма адам бақытының әлеуметтік жағдайға байланыстылығын көрсетеді.</p>',
  7,
  120;

UPDATE books SET chapter_count = 7 WHERE title = 'Бақытсыз Жамал';

-- Книга 2: Құлагер
INSERT INTO books (
  title,
  description,
  genre,
  cover_url,
  author_id,
  status,
  country,
  release_year,
  age_rating,
  book_type,
  book_status,
  views,
  popularity_score
) VALUES (
  'Құлагер',
  'Илья Жансүгіровтің атақты поэмасы — қазақ әдебиетіндегі көркем шығармалардың бірі. Поэмада автор халықтық мифология мен аңыздарды пайдаланып, ерлік пен батырлық туралы айтады.',
  'Поэзия',
  '/images/tuyurt1qefc-4ajcrbeaaw.png',
  '00000000-0000-0000-0000-000000000002'::uuid,
  'published',
  'Қазақстан',
  1936,
  '12+',
  'poetry',
  'completed',
  12500,
  9.5
)
ON CONFLICT (title) DO NOTHING;

INSERT INTO chapters (book_id, title, content, chapter_number, word_count)
SELECT 
  (SELECT id FROM books WHERE title = 'Құлагер' LIMIT 1),
  'Бірінші үн',
  '<p><strong>Ерте заманда, ескі дәуірде,<br/>Жайлаған екен біздің ата-баба өз жерінде.</strong></p><p>Сол заманның батыры бар еді, атын айтар Құлагер деп халық әрқашан. Оның қолында семсер бар еді, оның артында халық бар еді.</p>',
  1,
  120
UNION ALL
SELECT 
  (SELECT id FROM books WHERE title = 'Құлагер' LIMIT 1),
  'Екінші үн',
  '<p><strong>Бір күні жау шапты ел үстіне,<br/>Халық жиналды Құлагердің төңірегіне.</strong></p><p>Құлагер атқа қонды жеңіл, қолына алды семсерін. Жүрді жауға қарсы ерлікпен, жеңді жауды өз күшімен.</p>',
  2,
  110
UNION ALL
SELECT 
  (SELECT id FROM books WHERE title = 'Құлагер' LIMIT 1),
  'Үшінші үн',
  '<p><strong>Жеңіс келді, жау қашты алыс,<br/>Халық қуанды, той жасады.</strong></p><p>Құлагерді мақтады әрқашан, оның атын жырлады ұрпақтар. Бірақ батыр демалмады, ол білді — жау қайта келеді.</p>',
  3,
  115
UNION ALL
SELECT 
  (SELECT id FROM books WHERE title = 'Құлагер' LIMIT 1),
  'Төртінші үн',
  '<p><strong>Жылдар өтті, Құлагер қартайды,<br/>Бірақ оның рухы әлі де жас еді.</strong></p><p>Ол жас ұрпаққа үйретті, қалай сүй өз еліңді. Құлагер өмір сүрді ұзақ, оның атын ұмытпады халық.</p>',
  4,
  125;

UPDATE books SET chapter_count = 4 WHERE title = 'Құлагер';

-- Книга 3: Еңлік-Кебек
INSERT INTO books (
  title,
  description,
  genre,
  cover_url,
  author_id,
  status,
  country,
  release_year,
  age_rating,
  book_type,
  book_status,
  views,
  popularity_score
) VALUES (
  'Еңлік-Кебек',
  'Қазақтың атақты аңызы — махаббат туралы трагедиялық әңгіме. Еңлік пен Кебектің махаббаты — қазақ әдебиетінің классикасы, адамдарға махаббаттың күшін өнегелі танытады.',
  'Аңыз',
  '/placeholder.svg?height=600&width=400',
  '00000000-0000-0000-0000-000000000003'::uuid,
  'published',
  'Қазақстан',
  1800,
  '12+',
  'prose',
  'completed',
  15000,
  9.8
)
ON CONFLICT (title) DO NOTHING;

INSERT INTO chapters (book_id, title, content, chapter_number, word_count)
SELECT 
  (SELECT id FROM books WHERE title = 'Еңлік-Кебек' LIMIT 1),
  'Кездесу',
  '<p>Ерте заманда, қазақ даласында Еңлік атты әдемі қыз өмір сүрді. Оның сұлулығы мен ақылдылығы туралы аңыз барлық жерде таралған еді. Бір күні Еңлік Кебек атты жас жігітпен кездесті. Кебек — батыр жігіт, ержүрек те білімді. Олар бір-бірін көрген сәтте-ақ ғашық болды.</p>',
  1,
  130
UNION ALL
SELECT 
  (SELECT id FROM books WHERE title = 'Еңлік-Кебек' LIMIT 1),
  'Қиындық',
  '<p>Бірақ олардың махаббатында бір үлкен кедергі бар еді. Еңліктің ата-анасы оны басқа біреуге беруге ниет еткен еді. Еңлік пен Кебек өз махаббатын жасыруға мәжбүр болды. Олар тек жасырын кездесе алатын.</p>',
  2,
  140
UNION ALL
SELECT 
  (SELECT id FROM books WHERE title = 'Еңлік-Кебек' LIMIT 1),
  'Қашу',
  '<p>Еңлік пен Кебек қашуға шешім қабылдады. Олар бір түнде кездесіп, алыс жерге кетуге ниет етті. Бірақ олардың жоспары ашылды. Еңліктің ата-анасы оларды қуып жетті.</p>',
  3,
  135
UNION ALL
SELECT 
  (SELECT id FROM books WHERE title = 'Еңлік-Кебек' LIMIT 1),
  'Трагедия',
  '<p>Кебекті өлтірді. Еңлік өз сүйіктісін жоғалтқан кезде, оның жүрегі жарылды. Ол өмірді одан әрі жалғастыра алмады. Еңлік Кебектің қасына барып, оның денесін құшақтады. Ол өзін өлтірді. Олар бірге қалды — өлімде де.</p>',
  4,
  120
UNION ALL
SELECT 
  (SELECT id FROM books WHERE title = 'Еңлік-Кебек' LIMIT 1),
  'Аңыз',
  '<p>Еңлік пен Кебектің махаббаты туралы аңыз халық арасында таралды. Олар махаббаттың символына айналды. Адамдар олардың әңгімесін айтып, жырлады. Еңлік пен Кебек — бұл қазақ әдебиетінің классикасы.</p>',
  5,
  125;

UPDATE books SET chapter_count = 5 WHERE title = 'Еңлік-Кебек';

-- Добавление баннера для промоции
INSERT INTO banners (title, description, image_url, link_url, is_active, display_order)
VALUES (
  'Аштық ойындары. Азаттық құсы',
  'Окуға арналған жаңа серия',
  '/images/tuyurt1qefc-4ajcrbeaaw.png',
  '/catalog',
  true,
  1
) ON CONFLICT DO NOTHING;
[V0_FILE]sql:file="scripts/011_add_book_moderation.sql" isMerged="true"
-- Add moderation_status column and improve book status tracking
ALTER TABLE books ADD COLUMN IF NOT EXISTS moderation_status text DEFAULT 'pending' CHECK (moderation_status IN ('pending', 'approved', 'rejected'));
ALTER TABLE books ADD COLUMN IF NOT EXISTS moderation_notes text;
ALTER TABLE books ADD COLUMN IF NOT EXISTS moderation_date timestamp with time zone;
ALTER TABLE books ADD COLUMN IF NOT EXISTS moderated_by uuid REFERENCES profiles(id);

-- Create view for pending moderation
CREATE OR REPLACE VIEW pending_books AS
SELECT * FROM books WHERE moderation_status = 'pending' ORDER BY created_at DESC;

-- Grant admin access to moderation columns
CREATE POLICY "admins_can_moderate" ON books
  FOR UPDATE USING (
    auth.uid() IN (
      SELECT id FROM profiles WHERE role = 'admin'
    )
  )
  WITH CHECK (
    auth.uid() IN (
      SELECT id FROM profiles WHERE role = 'admin'
    )
  );
[V0_FILE]typescriptreact:file="app/admin/books/[id]/approve/page.tsx" isMerged="true"
import { createClient } from "@/lib/supabase/server"
import { redirect } from "next/navigation"
import { Button } from "@/components/ui/button"
import Link from "next/link"

export default async function ApproveBooksPage({ params }: { params: { id: string } }) {
  const supabase = await createClient()

const {
    data: { user },
  } = await supabase.auth.getUser()

if (!user) {
    redirect("/auth/login")
  }

// Check if user is admin
  const { data: profile } = await supabase.from("profiles").select("*").eq("id", user.id).single()

if (!profile || profile.role !== "admin") {
    redirect("/")
  }

// Approve the book
  const { error } = await supabase
    .from("books")
    .update({
      moderation_status: "approved",
      moderated_by: user.id,
      moderation_date: new Date().toISOString(),
      status: "published",
    })
    .eq("id", params.id)

if (error) {
    return (
      <div className="min-h-screen flex flex-col items-center justify-center gap-4">
        <h1 className="text-2xl font-bold">Қалдарма ойнаулау сәтсіз</h1>
        <p className="text-muted-foreground">{error.message}</p>
        <Button asChild>
          <Link href="/admin/books">Админ панельге оралу</Link>
        </Button>
      </div>
    )
  }

return (
    <div className="min-h-screen flex flex-col items-center justify-center gap-4">
      <h1 className="text-2xl font-bold">Кітап мақұлданды!</h1>
      <p className="text-muted-foreground">Кітап сәтті мақұлданып, жарияланды.</p>
      <Button asChild>
        <Link href="/admin/books">Админ панельге оралу</Link>
      </Button>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/books/[id]/reject/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { createClient } from "@/lib/supabase/client"
import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"
import { Label } from "@/components/ui/label"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"

export default function RejectBookPage({ params }: { params: { id: string } }) {
  const router = useRouter()
  const [isLoading, setIsLoading] = useState(false)
  const [notes, setNotes] = useState("")

const handleReject = async () => {
    setIsLoading(true)
    const supabase = createClient()

try {
      const { error } = await supabase
        .from("books")
        .update({
          moderation_status: "rejected",
          moderation_notes: notes,
          moderation_date: new Date().toISOString(),
        })
        .eq("id", params.id)

if (error) throw error

router.push("/admin/books")
    } catch (err: any) {
      console.error(err)
    } finally {
      setIsLoading(false)
    }
  }

return (
    <div className="min-h-screen flex flex-col items-center justify-center p-4">
      <Card className="w-full max-w-md">
        <CardHeader>
          <CardTitle>Кітапты қабылдамау</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="notes">Қабылдамау себебі</Label>
            <Textarea
              id="notes"
              placeholder="Авторға жіберу үшін қабылдамау себебін жазыңыз..."
              value={notes}
              onChange={(e) => setNotes(e.target.value)}
              rows={5}
            />
          </div>

<div className="flex gap-3">
            <Button onClick={handleReject} disabled={isLoading} className="flex-1 bg-red-600 hover:bg-red-700">
              {isLoading ? "Жүктелуде..." : "Қабылдамау"}
            </Button>
            <Button variant="outline" onClick={() => router.back()} disabled={isLoading} className="flex-1">
              Қайту
            </Button>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]javascript:file="next.config.mjs" isMerged="true"
/** @type {import('next').NextConfig} */
const nextConfig = {
  typescript: {
    ignoreBuildErrors: true,
  },
  images: {
    unoptimized: true,
  },
  async headers() {
    return [
      {
        source: '/:path*',
        headers: [
          {
            key: 'Strict-Transport-Security',
            value: 'max-age=31536000; includeSubDomains',
          },
          {
            key: 'X-Content-Type-Options',
            value: 'nosniff',
          },
          {
            key: 'X-Frame-Options',
            value: 'SAMEORIGIN',
          },
          {
            key: 'X-XSS-Protection',
            value: '1; mode=block',
          },
        ],
      },
    ]
  },
}

export default nextConfig
[V0_FILE]typescriptreact:file="components/reader-interface.tsx" isEdit="true" isQuickEdit="true"
"use client"

import { useState, useEffect, useRef } from "react"
import { Button } from "@/components/ui/button"
import { ReaderSettings as ReaderSettingsComponent } from "@/components/reader-settings"
import { ChevronLeft, ChevronRight, Settings, X } from "lucide-react"
import Link from "next/link"
import { useRouter } from "next/navigation"
import { createClient } from "@/lib/supabase/client"

interface Chapter {
  id: string
  title: string
  content: string
  chapter_number: number
}

interface Book {
  id: string
  title: string
  profiles: {
    display_name: string
  } | null
}

interface ReaderSettings {
  font_family: string
  font_size: number
  line_height: number
  text_align: string
  theme: string
  page_width: number
  reading_mode?: string
}

interface ReaderInterfaceProps {
  book: Book
  chapters: Chapter[]
  currentChapter: Chapter
  initialSettings: ReaderSettings | null
  initialBookmark: { chapter_id: string; scroll_position: number } | null
  userId?: string
}

const DEFAULT_SETTINGS: ReaderSettings = {
  font_family: "PT Serif",
  font_size: 18,
  line_height: 1.8,
  text_align: "left",
  theme: "light",
  page_width: 800,
  reading_mode: "scroll",
}

export function ReaderInterface({
  book,
  chapters,
  currentChapter: initialChapter,
  initialSettings,
  initialBookmark,
  userId,
}: ReaderInterfaceProps) {
  const router = useRouter()
  const [currentChapter, setCurrentChapter] = useState(initialChapter)
  const [settings, setSettings] = useState<ReaderSettings>(initialSettings || DEFAULT_SETTINGS)
  const [showSettings, setShowSettings] = useState(false)
  const [scrollPosition, setScrollPosition] = useState(0)
  const [currentPage, setCurrentPage] = useState(0)
  const [totalPages, setTotalPages] = useState(1)
  const contentRef = useRef<HTMLDivElement>(null)

const currentIndex = chapters.findIndex((c) => c.id === currentChapter.id)
  const hasPrevious = currentIndex > 0
  const hasNext = currentIndex < chapters.length - 1

// Apply theme only to the reader container, not the whole document
  useEffect(() => {
    const readerContainer = contentRef.current?.closest(".reader-container")
    if (!readerContainer) return

if (settings.theme === "dark") {
      readerContainer.classList.add("dark")
    } else {
      readerContainer.classList.remove("dark")
    }
  }, [settings.theme])

useEffect(() => {
    if (settings.reading_mode === "pagination" && contentRef.current) {
      const calculatePages = () => {
        const element = contentRef.current
        if (!element) return

const contentHeight = element.scrollHeight
        const viewportHeight = window.innerHeight - 200 // Account for header/footer
        const pages = Math.ceil(contentHeight / viewportHeight)
        setTotalPages(pages)
      }

// Recalculate on settings change
      setTimeout(calculatePages, 100)
      window.addEventListener("resize", calculatePages)
      return () => window.removeEventListener("resize", calculatePages)
    }
  }, [settings, currentChapter, settings.reading_mode])

// Restore scroll position from bookmark
  useEffect(() => {
    if (settings.reading_mode === "scroll" && initialBookmark && initialBookmark.chapter_id === currentChapter.id) {
      window.scrollTo(0, initialBookmark.scroll_position)
    }
  }, [initialBookmark, currentChapter.id, settings.reading_mode])

// Track scroll position
  useEffect(() => {
    if (settings.reading_mode !== "scroll") return

const handleScroll = () => {
      setScrollPosition(window.scrollY)
    }
    window.addEventListener("scroll", handleScroll)
    return () => window.removeEventListener("scroll", handleScroll)
  }, [settings.reading_mode])

// Save bookmark periodically
  useEffect(() => {
    if (!userId) return

const saveBookmark = async () => {
      const supabase = createClient()
      await supabase.from("bookmarks").upsert({
        user_id: userId,
        book_id: book.id,
        chapter_id: currentChapter.id,
        scroll_position: settings.reading_mode === "scroll" ? scrollPosition : currentPage,
      })
    }

const interval = setInterval(saveBookmark, 10000)
    return () => clearInterval(interval)
  }, [userId, book.id, currentChapter.id, scrollPosition, currentPage, settings.reading_mode])

useEffect(() => {
    if (settings.reading_mode !== "pagination") return

const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === "ArrowLeft" && currentPage > 0) {
        setCurrentPage((p) => p - 1)
      } else if (e.key === "ArrowRight" && currentPage < totalPages - 1) {
        setCurrentPage((p) => p + 1)
      }
    }

window.addEventListener("keydown", handleKeyDown)
    return () => window.removeEventListener("keydown", handleKeyDown)
  }, [settings.reading_mode, currentPage, totalPages])

const goToPrevious = () => {
    if (hasPrevious) {
      const prevChapter = chapters[currentIndex - 1]
      setCurrentChapter(prevChapter)
      setCurrentPage(0)
      router.push(`/reader/${book.id}?chapter=${prevChapter.id}`)
      window.scrollTo(0, 0)
    }
  }

const goToNext = () => {
    if (hasNext) {
      const nextChapter = chapters[currentIndex + 1]
      setCurrentChapter(nextChapter)
      setCurrentPage(0)
      router.push(`/reader/${book.id}?chapter=${nextChapter.id}`)
      window.scrollTo(0, 0)
    }
  }

const handleSettingsChange = async (newSettings: ReaderSettings) => {
    setSettings(newSettings)
    setCurrentPage(0)

if (userId) {
      const supabase = createClient()
      await supabase.from("reader_settings").upsert({
        user_id: userId,
        ...newSettings,
      })
    }
  }

const getFontClass = () => {
    switch (settings.font_family) {
      case "Merriweather":
        return "font-[family-name:var(--font-merriweather)]"
      case "Literata":
        return "font-[family-name:var(--font-literata)]"
      case "Noto Serif":
        return "font-[family-name:var(--font-noto-serif)]"
      default:
        return "font-[family-name:var(--font-pt-serif)]"
    }
  }

const pageOffset = settings.reading_mode === "pagination" ? -(currentPage * (window.innerHeight - 200)) : 0

return (
    <div className="reader-container min-h-screen bg-background">
      {/* Reader Header */}
      <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
        <div className="container mx-auto flex h-14 items-center justify-between px-4">
          <div className="flex items-center gap-3">
            <Button variant="ghost" size="icon" asChild>
              <Link href={`/book/${book.id}`}>
                <X className="h-5 w-5" />
                <span className="sr-only">Close reader</span>
              </Link>
            </Button>
            <div className="hidden sm:block">
              <div className="font-semibold text-sm line-clamp-1">{book.title}</div>
              <div className="text-xs text-muted-foreground">
                {currentChapter.chapter_number}-тарау: {currentChapter.title}
              </div>
            </div>
          </div>

<div className="flex items-center gap-2">
            {settings.reading_mode === "pagination" && (
              <span className="text-sm text-muted-foreground">
                {currentPage + 1} / {totalPages}
              </span>
            )}
            <Button variant="ghost" size="icon" onClick={() => setShowSettings(!showSettings)}>
              <Settings className="h-5 w-5" />
              <span className="sr-only">Reader settings</span>
            </Button>
          </div>
        </div>
      </header>

{/* Settings Panel */}
      {showSettings && (
        <div className="fixed inset-0 z-40 bg-black/50" onClick={() => setShowSettings(false)}>
          <div
            className="absolute right-0 top-14 bottom-0 w-full max-w-sm bg-background border-l overflow-y-auto"
            onClick={(e) => e.stopPropagation()}
          >
            <ReaderSettingsComponent settings={settings} onSettingsChange={handleSettingsChange} />
          </div>
        </div>
      )}

{/* Reader Content */}
      <main className="container mx-auto px-4 py-8">
        <div
          className={settings.reading_mode === "pagination" ? "overflow-hidden" : ""}
          style={{
            ...(settings.reading_mode === "pagination" ? { height: `${window.innerHeight - 200}px` } : {}),
            backgroundColor: settings.theme === "dark" ? "#1a1a1a" : "#ffffff",
            color: settings.theme === "dark" ? "#ffffff" : "#000000",
            transition: "background-color 0.3s ease, color 0.3s ease",
          }}
        >
          <article
            ref={contentRef}
            className={`mx-auto prose dark:prose-invert ${getFontClass()}`}
            style={{
              maxWidth: `${settings.page_width}px`,
              fontSize: `${settings.font_size}px`,
              lineHeight: settings.line_height,
              textAlign: settings.text_align as any,
              wordWrap: "break-word",
              overflowWrap: "break-word",
              hyphens: "auto",
              transform: settings.reading_mode === "pagination" ? `translateY(${pageOffset}px)` : undefined,
              transition: settings.reading_mode === "pagination" ? "transform 0.3s ease" : undefined,
            }}
          >
            <h1 className="text-balance">
              {currentChapter.chapter_number}-тарау: {currentChapter.title}
            </h1>
            <div
              dangerouslySetInnerHTML={{ __html: currentChapter.content }}
              style={{
                wordWrap: "break-word",
                overflowWrap: "break-word",
                hyphens: "auto",
              }}
            />
          </article>
        </div>

{settings.reading_mode === "pagination" ? (
          <div
            className="mx-auto mt-8 flex items-center justify-between gap-4"
            style={{ maxWidth: `${settings.page_width}px` }}
          >
            <Button
              variant="outline"
              onClick={() => {
                if (currentPage > 0) {
                  setCurrentPage((p) => p - 1)
                } else {
                  goToPrevious()
                }
              }}
              disabled={currentPage === 0 && !hasPrevious}
              className="flex-1"
            >
              <ChevronLeft className="mr-2 h-4 w-4" />
              {currentPage > 0 ? "Алдыңғы бет" : "Алдыңғы тарау"}
            </Button>
            <div className="flex-1 flex items-center gap-2">
              <div className="h-1 flex-1 bg-muted rounded-full overflow-hidden">
                <div
                  className="h-full bg-primary transition-all duration-300"
                  style={{ width: `${((currentPage + 1) / totalPages) * 100}%` }}
                />
              </div>
              <span className="text-xs text-muted-foreground whitespace-nowrap">
                {currentPage + 1}/{totalPages}
              </span>
            </div>
            <Button
              variant="outline"
              onClick={() => {
                if (currentPage < totalPages - 1) {
                  setCurrentPage((p) => p + 1)
                } else {
                  goToNext()
                }
              }}
              disabled={currentPage === totalPages - 1 && !hasNext}
              className="flex-1"
            >
              {currentPage < totalPages - 1 ? "Келесі бет" : "Келесі тарау"}
              <ChevronRight className="ml-2 h-4 w-4" />
            </Button>
          </div>
        ) : (
          <div
            className="mx-auto mt-12 flex items-center justify-between gap-4"
            style={{ maxWidth: `${settings.page_width}px` }}
          >
            <Button variant="outline" onClick={goToPrevious} disabled={!hasPrevious} className="flex-1 bg-transparent">
              <ChevronLeft className="mr-2 h-4 w-4" />
              Алдыңғы тарау
            </Button>
            <Button variant="outline" onClick={goToNext} disabled={!hasNext} className="flex-1 bg-transparent">
              Келесі тарау
              <ChevronRight className="ml-2 h-4 w-4" />
            </Button>
          </div>
        )}
      </main>
    </div>
  )
}</article></body></html>