[V0_FILE]sql:file="scripts/001_create_tables.sql" isMerged="true" -- HTF Database Schema -- Tables for Liên đoàn Taekwondo TP.HCM website -- 1. News/Articles table for homepage and admin management CREATE TABLE IF NOT EXISTS news ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), title TEXT NOT NULL, slug TEXT UNIQUE NOT NULL, excerpt TEXT, content TEXT NOT NULL, image_url TEXT, category TEXT DEFAULT 'general', is_featured BOOLEAN DEFAULT false, is_published BOOLEAN DEFAULT false, published_at TIMESTAMPTZ, created_at TIMESTAMPTZ DEFAULT NOW(), updated_at TIMESTAMPTZ DEFAULT NOW(), author_id UUID REFERENCES auth.users(id) ON DELETE SET NULL ); -- 2. Events table for activities and competitions CREATE TABLE IF NOT EXISTS events ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), title TEXT NOT NULL, slug TEXT UNIQUE NOT NULL, description TEXT, location TEXT, event_type TEXT NOT NULL, -- 'competition', 'training', 'exam', 'meeting' start_date TIMESTAMPTZ NOT NULL, end_date TIMESTAMPTZ, registration_deadline TIMESTAMPTZ, is_featured BOOLEAN DEFAULT false, is_published BOOLEAN DEFAULT false, created_at TIMESTAMPTZ DEFAULT NOW(), updated_at TIMESTAMPTZ DEFAULT NOW() ); -- 3. Documents table for downloadable files CREATE TABLE IF NOT EXISTS documents ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), title TEXT NOT NULL, description TEXT, file_url TEXT NOT NULL, file_type TEXT, -- 'pdf', 'docx', 'xlsx' file_size INTEGER, -- in bytes category TEXT NOT NULL, -- 'regulation', 'form', 'circular', 'guideline' document_number TEXT, -- official document number issued_date DATE, download_count INTEGER DEFAULT 0, is_published BOOLEAN DEFAULT true, created_at TIMESTAMPTZ DEFAULT NOW(), updated_at TIMESTAMPTZ DEFAULT NOW() ); -- 4. Contact submissions table CREATE TABLE IF NOT EXISTS contact_submissions ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), full_name TEXT NOT NULL, email TEXT NOT NULL, phone TEXT, subject TEXT NOT NULL, message TEXT NOT NULL, is_read BOOLEAN DEFAULT false, created_at TIMESTAMPTZ DEFAULT NOW() ); -- 5. Event registrations table CREATE TABLE IF NOT EXISTS event_registrations ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), event_id UUID REFERENCES events(id) ON DELETE CASCADE, full_name TEXT NOT NULL, email TEXT NOT NULL, phone TEXT NOT NULL, club_name TEXT, current_rank TEXT, -- current belt/dan level notes TEXT, status TEXT DEFAULT 'pending', -- 'pending', 'approved', 'rejected' created_at TIMESTAMPTZ DEFAULT NOW() ); -- 6. Organization members table for About page CREATE TABLE IF NOT EXISTS organization_members ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), full_name TEXT NOT NULL, position TEXT NOT NULL, title TEXT, -- academic/professional title image_url TEXT, display_order INTEGER DEFAULT 0, term TEXT DEFAULT '2026-2031', is_active BOOLEAN DEFAULT true, created_at TIMESTAMPTZ DEFAULT NOW() ); -- 7. Site settings for general configuration CREATE TABLE IF NOT EXISTS site_settings ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), key TEXT UNIQUE NOT NULL, value TEXT, updated_at TIMESTAMPTZ DEFAULT NOW() ); -- Create indexes for better query performance CREATE INDEX IF NOT EXISTS idx_news_published ON news(is_published, published_at DESC); CREATE INDEX IF NOT EXISTS idx_news_category ON news(category); CREATE INDEX IF NOT EXISTS idx_events_date ON events(start_date); CREATE INDEX IF NOT EXISTS idx_events_type ON events(event_type); CREATE INDEX IF NOT EXISTS idx_documents_category ON documents(category); CREATE INDEX IF NOT EXISTS idx_contact_unread ON contact_submissions(is_read, created_at DESC); -- Enable Row Level Security ALTER TABLE news ENABLE ROW LEVEL SECURITY; ALTER TABLE events ENABLE ROW LEVEL SECURITY; ALTER TABLE documents ENABLE ROW LEVEL SECURITY; ALTER TABLE contact_submissions ENABLE ROW LEVEL SECURITY; ALTER TABLE event_registrations ENABLE ROW LEVEL SECURITY; ALTER TABLE organization_members ENABLE ROW LEVEL SECURITY; ALTER TABLE site_settings ENABLE ROW LEVEL SECURITY; [V0_FILE]sql:file="scripts/002_rls_policies.sql" isMerged="true" -- RLS Policies for HTF Database -- NEWS: Public can read published news, authenticated admins can manage all CREATE POLICY "Anyone can view published news" ON news FOR SELECT USING (is_published = true); CREATE POLICY "Authenticated users can insert news" ON news FOR INSERT TO authenticated WITH CHECK (true); CREATE POLICY "Authenticated users can update news" ON news FOR UPDATE TO authenticated USING (true); CREATE POLICY "Authenticated users can delete news" ON news FOR DELETE TO authenticated USING (true); -- EVENTS: Public can read published events, authenticated admins can manage all CREATE POLICY "Anyone can view published events" ON events FOR SELECT USING (is_published = true); CREATE POLICY "Authenticated users can insert events" ON events FOR INSERT TO authenticated WITH CHECK (true); CREATE POLICY "Authenticated users can update events" ON events FOR UPDATE TO authenticated USING (true); CREATE POLICY "Authenticated users can delete events" ON events FOR DELETE TO authenticated USING (true); -- DOCUMENTS: Public can read published documents, authenticated admins can manage all CREATE POLICY "Anyone can view published documents" ON documents FOR SELECT USING (is_published = true); CREATE POLICY "Authenticated users can insert documents" ON documents FOR INSERT TO authenticated WITH CHECK (true); CREATE POLICY "Authenticated users can update documents" ON documents FOR UPDATE TO authenticated USING (true); CREATE POLICY "Authenticated users can delete documents" ON documents FOR DELETE TO authenticated USING (true); -- CONTACT SUBMISSIONS: Anyone can submit, only authenticated can read CREATE POLICY "Anyone can submit contact form" ON contact_submissions FOR INSERT WITH CHECK (true); CREATE POLICY "Authenticated users can view contact submissions" ON contact_submissions FOR SELECT TO authenticated USING (true); CREATE POLICY "Authenticated users can update contact submissions" ON contact_submissions FOR UPDATE TO authenticated USING (true); CREATE POLICY "Authenticated users can delete contact submissions" ON contact_submissions FOR DELETE TO authenticated USING (true); -- EVENT REGISTRATIONS: Anyone can register, only authenticated can manage CREATE POLICY "Anyone can register for events" ON event_registrations FOR INSERT WITH CHECK (true); CREATE POLICY "Authenticated users can view registrations" ON event_registrations FOR SELECT TO authenticated USING (true); CREATE POLICY "Authenticated users can update registrations" ON event_registrations FOR UPDATE TO authenticated USING (true); CREATE POLICY "Authenticated users can delete registrations" ON event_registrations FOR DELETE TO authenticated USING (true); -- ORGANIZATION MEMBERS: Public can read active members, authenticated can manage CREATE POLICY "Anyone can view active organization members" ON organization_members FOR SELECT USING (is_active = true); CREATE POLICY "Authenticated users can insert organization members" ON organization_members FOR INSERT TO authenticated WITH CHECK (true); CREATE POLICY "Authenticated users can update organization members" ON organization_members FOR UPDATE TO authenticated USING (true); CREATE POLICY "Authenticated users can delete organization members" ON organization_members FOR DELETE TO authenticated USING (true); -- SITE SETTINGS: Public can read, only authenticated can manage CREATE POLICY "Anyone can view site settings" ON site_settings FOR SELECT USING (true); CREATE POLICY "Authenticated users can insert site settings" ON site_settings FOR INSERT TO authenticated WITH CHECK (true); CREATE POLICY "Authenticated users can update site settings" ON site_settings FOR UPDATE TO authenticated USING (true); [V0_FILE]sql:file="scripts/003_seed_data.sql" isMerged="true" -- Seed data for HTF website -- Insert sample events (based on provided schedule) INSERT INTO events (title, slug, description, location, event_type, start_date, end_date, registration_deadline, is_featured, is_published) VALUES ( 'Đại hội Đại biểu Liên đoàn Taekwondo TP.HCM Nhiệm kỳ I (2026 - 2031)', 'dai-hoi-dai-bieu-2026', 'Đại hội Đại biểu Liên đoàn Taekwondo Thành phố Hồ Chí Minh Nhiệm kỳ I (2026 - 2031) - Sự kiện quan trọng đánh dấu bước phát triển mới của Taekwondo TP.HCM', 'Thành phố Hồ Chí Minh', 'meeting', '2026-01-30 08:00:00+07', '2026-01-30 17:00:00+07', '2026-01-25 23:59:59+07', true, true ), ( 'Khóa Đào tạo - Bồi dưỡng Trọng tài Taekwondo quốc gia năm 2026', 'khoa-dao-tao-trong-tai-2026', 'Khóa đào tạo và bồi dưỡng trọng tài Taekwondo cấp quốc gia, nâng cao năng lực chuyên môn cho đội ngũ trọng tài', 'Khách sạn Đệ Nhất - Thành phố Hồ Chí Minh', 'training', '2026-02-24 08:00:00+07', '2026-02-26 17:00:00+07', '2026-02-20 23:59:59+07', true, true ), ( 'Lớp Tập huấn Chuyên môn và Kỳ thi thăng đẳng Taekwondo quốc gia Khu vực miền Nam', 'tap-huan-thi-thang-dang-mien-nam-2026', 'Lớp tập huấn chuyên môn kết hợp kỳ thi thăng đẳng Taekwondo quốc gia dành cho khu vực miền Nam', 'An Giang', 'exam', '2026-03-05 08:00:00+07', '2026-03-08 17:00:00+07', '2026-02-28 23:59:59+07', true, true ); -- Insert sample documents (placeholder data) INSERT INTO documents (title, description, file_url, file_type, category, document_number, issued_date, is_published) VALUES ( 'Điều lệ Liên đoàn Taekwondo TP.HCM', 'Điều lệ hoạt động của Liên đoàn Taekwondo Thành phố Hồ Chí Minh nhiệm kỳ 2026-2031', '/documents/dieu-le-htf-2026.pdf', 'pdf', 'regulation', 'ĐL-01/HTF-2026', '2026-01-30', true ), ( 'Quy chế thi thăng đẳng Taekwondo', 'Quy chế và tiêu chuẩn thi thăng đẳng Taekwondo áp dụng cho các CLB thành viên', '/documents/quy-che-thi-thang-dang.pdf', 'pdf', 'regulation', 'QC-02/HTF-2026', '2026-01-15', true ), ( 'Mẫu đơn đăng ký thi thăng đẳng', 'Mẫu đơn đăng ký dự thi thăng đẳng Taekwondo dành cho võ sinh', '/documents/mau-don-dang-ky-thi.docx', 'docx', 'form', 'MD-01/HTF-2026', '2026-01-10', true ), ( 'Mẫu đơn gia nhập Câu lạc bộ', 'Mẫu đơn đăng ký gia nhập Câu lạc bộ Taekwondo thành viên', '/documents/mau-don-gia-nhap-clb.docx', 'docx', 'form', 'MD-02/HTF-2026', '2026-01-10', true ), ( 'Thông báo lịch hoạt động năm 2026', 'Thông báo lịch hoạt động và các sự kiện chính của Liên đoàn trong năm 2026', '/documents/lich-hoat-dong-2026.pdf', 'pdf', 'circular', 'TB-01/HTF-2026', '2026-01-05', true ); -- Insert sample news INSERT INTO news (title, slug, excerpt, content, category, is_featured, is_published, published_at) VALUES ( 'Chuẩn bị Đại hội Đại biểu Liên đoàn Taekwondo TP.HCM Nhiệm kỳ I', 'chuan-bi-dai-hoi-nhiem-ky-1', 'Liên đoàn Taekwondo TP.HCM đang tích cực chuẩn bị cho Đại hội Đại biểu Nhiệm kỳ I (2026-2031), sự kiện quan trọng đánh dấu bước phát triển mới.', '

Liên đoàn Taekwondo Thành phố Hồ Chí Minh đang tích cực chuẩn bị cho Đại hội Đại biểu Nhiệm kỳ I (2026-2031), dự kiến diễn ra vào ngày 30/01/2026.

Đây là sự kiện quan trọng đánh dấu bước phát triển mới của phong trào Taekwondo tại TP.HCM, với mục tiêu xây dựng tổ chức vững mạnh, nâng cao chất lượng đào tạo và phát triển phong trào võ thuật trong cộng đồng.

', 'announcement', true, true, NOW() ), ( 'Thông báo Khóa Đào tạo Trọng tài Taekwondo quốc gia 2026', 'thong-bao-khoa-dao-tao-trong-tai-2026', 'Khóa đào tạo và bồi dưỡng trọng tài Taekwondo cấp quốc gia sẽ diễn ra từ ngày 24-26/02/2026 tại Khách sạn Đệ Nhất.', '

Liên đoàn Taekwondo Việt Nam phối hợp với Liên đoàn Taekwondo TP.HCM tổ chức Khóa Đào tạo - Bồi dưỡng Trọng tài Taekwondo quốc gia năm 2026.

Thời gian: 24-26/02/2026
Địa điểm: Khách sạn Đệ Nhất - TP.HCM

Đề nghị các Câu lạc bộ thành viên cử trọng tài tham dự để nâng cao năng lực chuyên môn.

', 'training', false, true, NOW() ); -- Insert site settings INSERT INTO site_settings (key, value) VALUES ('site_name', 'Liên đoàn Taekwondo TP.HCM'), ('site_description', 'Website chính thức của Liên đoàn Taekwondo Thành phố Hồ Chí Minh'), ('contact_address', 'Số 02 Lê Đại Hành, Phường Phú Thọ, Thành phố Hồ Chí Minh'), ('contact_phone', '0833567890'), ('contact_email', 'hcmctkd2015@gmail.com'), ('facebook_url', 'https://www.facebook.com/hcmctaekwondo'), ('member_lookup_url', 'https://tkdvn1996.info/hoivien'), ('total_clubs', '200'), ('total_practitioners', '50000'); [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": "^1.1.2", "zod": "3.25.76", "@supabase/ssr": "0.8.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]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Be_Vietnam_Pro } from "next/font/google" import { Analytics } from "@vercel/analytics/next" import "./globals.css" const beVietnamPro = Be_Vietnam_Pro({ subsets: ["vietnamese", "latin"], weight: ["400", "500", "600", "700"], variable: "--font-sans", }) export const metadata: Metadata = { title: "Liên đoàn Taekwondo TP.HCM | HTF", description: "Website chính thức của Liên đoàn Taekwondo Thành phố Hồ Chí Minh - Ho Chi Minh City Taekwondo Federation", keywords: ["Taekwondo", "HTF", "TP.HCM", "võ thuật", "thể thao", "Liên đoàn"], generator: "v0.app", icons: { icon: [ { url: "/icon-light-32x32.png", media: "(prefers-color-scheme: light)", }, { url: "/icon-dark-32x32.png", media: "(prefers-color-scheme: dark)", }, { url: "/icon.svg", type: "image/svg+xml", }, ], apple: "/apple-icon.png", }, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="lib/supabase/client.ts" isMerged="true" import { createBrowserClient } from "@supabase/ssr" export function createClient() { return createBrowserClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!) } [V0_FILE]typescriptreact:file="lib/supabase/server.ts" isMerged="true" import { createServerClient } from "@supabase/ssr" import { cookies } from "next/headers" export async function createClient() { const cookieStore = await cookies() return createServerClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!, { 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. } }, }, }) } [V0_FILE]typescriptreact:file="components/home/hero-section.tsx" isMerged="true" import Link from "next/link" import { Button } from "@/components/ui/button" import { ArrowRight, Search } from "lucide-react" export function HeroSection() { return (

{/* Content */}

Nhiệm kỳ I (2026-2031)

Liên đoàn Taekwondo TP. Hồ Chí Minh

Phát triển phong trào Taekwondo, nâng cao thành tích thi đấu, góp phần xây dựng nền thể thao thành phố vững mạnh.

{/* Hero Image */}

{/* Decorative elements */}

) } [V0_FILE]typescriptreact:file="components/home/stats-section.tsx" isMerged="true" import { Users, Building2, Trophy, Calendar } from "lucide-react" const stats = [ { icon: Building2, value: "200+", label: "Câu lạc bộ thành viên", }, { icon: Users, value: "50,000+", label: "Người tập luyện", }, { icon: Trophy, value: "30+", label: "Năm phát triển", }, { icon: Calendar, value: "50+", label: "Sự kiện mỗi năm", }, ] export function StatsSection() { return (

{stats.map((stat, index) => (

{stat.value}

{stat.label}

))}

) } [V0_FILE]typescriptreact:file="components/home/cta-section.tsx" isMerged="true" import Link from "next/link" import { Button } from "@/components/ui/button" import { ExternalLink, FileText, Users } from "lucide-react" export function CTASection() { return (

{/* Tra cứu hội viên */}

Tra cứu mã hội viên

Tra cứu thông tin hội viên và đẳng cấp trên hệ thống của Liên đoàn Taekwondo Việt Nam.

{/* Văn bản biểu mẫu */}

Văn bản - Biểu mẫu

Tải về các văn bản, quy định, biểu mẫu và hướng dẫn chính thức của Liên đoàn.

{/* Liên hệ */}

Liên hệ

Liên hệ với Liên đoàn Taekwondo TP.HCM để được hỗ trợ và giải đáp thắc mắc.

) } [V0_FILE]jpg:file="public/taekwondo-martial-arts-training-kick-action.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/taekwondo-martial-arts-training-kick-action-lSSGG6uUBbxJj4JlmJbuKiobC6TpUb.jpg" isMerged="true" [V0_FILE]typescriptreact:file="components/activities/event-registration-form.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" 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 { CheckCircle, Loader2 } from "lucide-react" import { createClient } from "@/lib/supabase/client" import type { Event } from "@/lib/types" interface EventRegistrationFormProps { event: Event } export function EventRegistrationForm({ event }: EventRegistrationFormProps) { const [isSubmitting, setIsSubmitting] = useState(false) const [isSuccess, setIsSuccess] = useState(false) const [error, setError] = useState(null) async function handleSubmit(e: React.FormEvent) { e.preventDefault() setIsSubmitting(true) setError(null) const formData = new FormData(e.currentTarget) const data = { event_id: event.id, full_name: formData.get("full_name") as string, email: formData.get("email") as string, phone: formData.get("phone") as string, club_name: (formData.get("club_name") as string) || null, current_rank: (formData.get("current_rank") as string) || null, notes: (formData.get("notes") as string) || null, } try { const supabase = createClient() const { error: insertError } = await supabase.from("event_registrations").insert(data) if (insertError) throw insertError setIsSuccess(true) } catch (err) { console.error("Registration error:", err) setError("Có lỗi xảy ra. Vui lòng thử lại sau.") } finally { setIsSubmitting(false) } } if (isSuccess) { return (

Đăng ký thành công!

Cảm ơn bạn đã đăng ký tham gia. Chúng tôi sẽ liên hệ với bạn qua email để xác nhận.

) } return ( Đăng ký tham gia

Họ và tên *

Email *

Số điện thoại *

Câu lạc bộ

Đẳng cấp hiện tại

Ghi chú

</div>

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

<Button type="submit" className="w-full" disabled={isSubmitting}>
            {isSubmitting ? (
              <>
                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                Đang gửi...
              </>
            ) : (
              "Gửi đăng ký"
            )}
          </Button>
        </form>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/van-ban/page.tsx" isMerged="true"
import { createClient } from "@/lib/supabase/server"
import { Header } from "@/components/layout/header"
import { Footer } from "@/components/layout/footer"
import { DocumentCard } from "@/components/documents/document-card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Input } from "@/components/ui/input"
import { Search } from "lucide-react"
import type { Document } from "@/lib/types"

export const metadata = {
  title: "Văn bản - Biểu mẫu | Liên đoàn Taekwondo TP.HCM",
  description: "Tải về các văn bản, quy định, biểu mẫu và hướng dẫn chính thức của Liên đoàn Taekwondo TP. Hồ Chí Minh",
}

const categoryLabels: Record<string, string> = {
  regulation: "Quy định - Điều lệ",
  form: "Biểu mẫu",
  guide: "Hướng dẫn",
  announcement: "Thông báo",
  other: "Khác",
}

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

const { data: documents } = await supabase
    .from("documents")
    .select("*")
    .eq("is_published", true)
    .order("issued_date", { ascending: false })

const docs = (documents as Document[]) || []

// Group by category
  const regulations = docs.filter((d) => d.category === "regulation")
  const forms = docs.filter((d) => d.category === "form")
  const guides = docs.filter((d) => d.category === "guide")
  const announcements = docs.filter((d) => d.category === "announcement")

return (
    <div className="flex min-h-screen flex-col">
      <Header />
      <main className="flex-1">
        {/* Hero Section */}
        <section className="bg-primary py-16 text-primary-foreground">
          <div className="container mx-auto px-4 text-center">
            <h1 className="text-4xl font-bold md:text-5xl">Văn bản - Biểu mẫu</h1>
            <p className="mx-auto mt-4 max-w-2xl text-primary-foreground/80">
              Tải về các văn bản, quy định, biểu mẫu và hướng dẫn chính thức của Liên đoàn
            </p>
          </div>
        </section>

{/* Search */}
        <section className="border-b bg-muted/30 py-6">
          <div className="container mx-auto px-4">
            <div className="relative mx-auto max-w-md">
              <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
              <Input placeholder="Tìm kiếm văn bản..." className="pl-10 bg-background" />
            </div>
          </div>
        </section>

{/* Documents List */}
        <section className="py-16">
          <div className="container mx-auto px-4">
            <Tabs defaultValue="all" className="w-full">
              <TabsList className="mb-8 flex h-auto flex-wrap justify-start gap-2 bg-transparent p-0">
                <TabsTrigger
                  value="all"
                  className="rounded-full border data-[state=active]:bg-primary data-[state=active]:text-primary-foreground"
                >
                  Tất cả ({docs.length})
                </TabsTrigger>
                <TabsTrigger
                  value="regulation"
                  className="rounded-full border data-[state=active]:bg-primary data-[state=active]:text-primary-foreground"
                >
                  Quy định ({regulations.length})
                </TabsTrigger>
                <TabsTrigger
                  value="form"
                  className="rounded-full border data-[state=active]:bg-primary data-[state=active]:text-primary-foreground"
                >
                  Biểu mẫu ({forms.length})
                </TabsTrigger>
                <TabsTrigger
                  value="guide"
                  className="rounded-full border data-[state=active]:bg-primary data-[state=active]:text-primary-foreground"
                >
                  Hướng dẫn ({guides.length})
                </TabsTrigger>
                <TabsTrigger
                  value="announcement"
                  className="rounded-full border data-[state=active]:bg-primary data-[state=active]:text-primary-foreground"
                >
                  Thông báo ({announcements.length})
                </TabsTrigger>
              </TabsList>

<TabsContent value="announcement">
                <DocumentsList documents={announcements} emptyMessage="Chưa có thông báo nào." />
              </TabsContent>
            </Tabs>
          </div>
        </section>
      </main>
      <Footer />
    </div>
  )
}

function DocumentsList({
  documents,
  emptyMessage = "Chưa có văn bản nào.",
}: { documents: Document[]; emptyMessage?: string }) {
  if (documents.length === 0) {
    return (
      <div className="rounded-lg bg-muted/30 py-12 text-center">
        <p className="text-muted-foreground">{emptyMessage}</p>
      </div>
    )
  }

return (
    <div className="space-y-4">
      {documents.map((doc) => (
        <DocumentCard key={doc.id} document={doc} />
      ))}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/van-ban/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="lib/supabase/proxy.ts" isMerged="true"
import { createServerClient } from "@supabase/ssr"
import { NextResponse, type NextRequest } from "next/server"

export async function updateSession(request: NextRequest) {
  let supabaseResponse = NextResponse.next({
    request,
  })

const supabase = createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      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()

// Protect admin routes
  if (request.nextUrl.pathname.startsWith("/admin") && !request.nextUrl.pathname.startsWith("/admin/login") && !user) {
    const url = request.nextUrl.clone()
    url.pathname = "/admin/login"
    return NextResponse.redirect(url)
  }

return supabaseResponse
}
[V0_FILE]typescriptreact:file="proxy.ts" isMerged="true"
import { updateSession } from "@/lib/supabase/proxy"
import type { NextRequest } from "next/server"

export async function proxy(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/admin/layout.tsx" isMerged="true"
import type React from "react"
import { createClient } from "@/lib/supabase/server"
import { AdminSidebar } from "@/components/admin/admin-sidebar"
import { AdminHeader } from "@/components/admin/admin-header"

export const metadata = {
  title: "Admin | Liên đoàn Taekwondo TP.HCM",
  description: "Trang quản trị website Liên đoàn Taekwondo TP. Hồ Chí Minh",
}

export default async function AdminLayout({
  children,
}: {
  children: React.ReactNode
}) {
  const supabase = await createClient()
  const {
    data: { user },
  } = await supabase.auth.getUser()

// Allow login page without auth
  return (
    <div className="flex min-h-screen">
      {user && <AdminSidebar />}
      <div className="flex flex-1 flex-col">
        {user && <AdminHeader user={user} />}
        <main className={user ? "flex-1 overflow-auto bg-muted/30 p-6" : "flex-1"}>{children}</main>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/admin/admin-header.tsx" isMerged="true"
"use client"

import { createClient } from "@/lib/supabase/client"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Menu, User, LogOut } from "lucide-react"
import type { User as SupabaseUser } from "@supabase/supabase-js"

interface AdminHeaderProps {
  user: SupabaseUser
}

export function AdminHeader({ user }: AdminHeaderProps) {
  const router = useRouter()

async function handleSignOut() {
    const supabase = createClient()
    await supabase.auth.signOut()
    router.push("/admin/login")
    router.refresh()
  }

return (
    <header className="flex h-16 items-center justify-between border-b bg-card px-6">
      <div className="flex items-center gap-4">
        <Button variant="ghost" size="icon" className="lg:hidden">
          <Menu className="h-5 w-5" />
        </Button>
        <h1 className="text-lg font-semibold">Quản trị website</h1>
      </div>

<DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button variant="ghost" className="gap-2">
            <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary">
              <User className="h-4 w-4 text-primary-foreground" />
            </div>
            <span className="hidden sm:inline">{user.email}</span>
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="end">
          <DropdownMenuItem disabled>
            <span className="text-muted-foreground">{user.email}</span>
          </DropdownMenuItem>
          <DropdownMenuSeparator />
          <DropdownMenuItem onClick={handleSignOut} className="text-destructive">
            <LogOut className="mr-2 h-4 w-4" />
            Đăng xuất
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </header>
  )
}
[V0_FILE]typescriptreact:file="app/admin/page.tsx" isEdit="true" isMerged="true"
import { createClient } from "@/lib/supabase/server"
import { redirect } from "next/navigation"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Calendar, FileText, Newspaper, MessageSquare, Users } 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("/admin/login")
  }

const [eventsResult, newsResult, documentsResult, contactsResult, registrationsResult] = await Promise.all([
    supabase.from("events").select("id", { count: "exact", head: true }),
    supabase.from("news").select("id", { count: "exact", head: true }),
    supabase.from("documents").select("id", { count: "exact", head: true }),
    supabase.from("contact_submissions").select("id", { count: "exact", head: true }).eq("is_read", false),
    supabase.from("event_registrations").select("id", { count: "exact", head: true }).eq("status", "pending"),
  ])

const stats = [
    {
      title: "Sự kiện",
      value: eventsResult.count || 0,
      icon: Calendar,
      href: "/admin/events",
      color: "text-primary",
    },
    {
      title: "Tin tức",
      value: newsResult.count || 0,
      icon: Newspaper,
      href: "/admin/news",
      color: "text-secondary",
    },
    {
      title: "Văn bản",
      value: documentsResult.count || 0,
      icon: FileText,
      href: "/admin/documents",
      color: "text-chart-3",
    },
    {
      title: "Liên hệ chưa đọc",
      value: contactsResult.count || 0,
      icon: MessageSquare,
      href: "/admin/contacts",
      color: "text-chart-4",
    },
    {
      title: "Đăng ký chờ duyệt",
      value: registrationsResult.count || 0,
      icon: Users,
      href: "/admin/registrations",
      color: "text-chart-5",
    },
  ]

const { data: recentContacts } = await supabase
    .from("contact_submissions")
    .select("*")
    .order("created_at", { ascending: false })
    .limit(5)

const { data: recentRegistrations } = await supabase
    .from("event_registrations")
    .select("*, events(title)")
    .order("created_at", { ascending: false })
    .limit(5)

return (
    <div className="space-y-6">
      <div>
        <h2 className="text-2xl font-bold text-foreground">Dashboard</h2>
        <p className="text-muted-foreground">Tổng quan về hoạt động website</p>
      </div>

<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-5">
        {stats.map((stat) => (
          <Link key={stat.title} href={stat.href}>
            <Card className="transition-shadow hover:shadow-md">
              <CardHeader className="flex flex-row items-center justify-between pb-2">
                <CardTitle className="text-sm font-medium text-muted-foreground">{stat.title}</CardTitle>
                <stat.icon className={`h-5 w-5 ${stat.color}`} />
              </CardHeader>
              <CardContent>
                <div className="text-3xl font-bold">{stat.value}</div>
              </CardContent>
            </Card>
          </Link>
        ))}
      </div>

<div className="grid gap-6 lg:grid-cols-2">
        {/* Recent Contacts - Fix: use is_read instead of status */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <MessageSquare className="h-5 w-5" />
              Liên hệ gần đây
            </CardTitle>
          </CardHeader>
          <CardContent>
            {recentContacts && recentContacts.length > 0 ? (
              <div className="space-y-4">
                {recentContacts.map(
                  (contact: {
                    id: string
                    full_name: string
                    subject: string
                    created_at: string
                    is_read: boolean
                  }) => (
                    <div key={contact.id} className="flex items-start justify-between border-b pb-3 last:border-0">
                      <div>
                        <p className="font-medium">{contact.full_name}</p>
                        <p className="text-sm text-muted-foreground">{contact.subject}</p>
                      </div>
                      <div className="text-right">
                        <span
                          className={`inline-block rounded-full px-2 py-0.5 text-xs ${!contact.is_read ? "bg-yellow-100 text-yellow-800" : "bg-green-100 text-green-800"}`}
                        >
                          {!contact.is_read ? "Chưa đọc" : "Đã đọc"}
                        </span>
                        <p className="mt-1 text-xs text-muted-foreground">
                          {new Date(contact.created_at).toLocaleDateString("vi-VN")}
                        </p>
                      </div>
                    </div>
                  ),
                )}
              </div>
            ) : (
              <p className="text-muted-foreground">Chưa có liên hệ nào.</p>
            )}
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Users className="h-5 w-5" />
              Đăng ký gần đây
            </CardTitle>
          </CardHeader>
          <CardContent>
            {recentRegistrations && recentRegistrations.length > 0 ? (
              <div className="space-y-4">
                {recentRegistrations.map(
                  (reg: {
                    id: string
                    full_name: string
                    events: { title: string } | null
                    created_at: string
                    status: string
                  }) => (
                    <div key={reg.id} className="flex items-start justify-between border-b pb-3 last:border-0">
                      <div>
                        <p className="font-medium">{reg.full_name}</p>
                        <p className="text-sm text-muted-foreground">{reg.events?.title || "N/A"}</p>
                      </div>
                      <div className="text-right">
                        <span
                          className={`inline-block rounded-full px-2 py-0.5 text-xs ${reg.status === "pending" ? "bg-yellow-100 text-yellow-800" : reg.status === "approved" ? "bg-green-100 text-green-800" : "bg-red-100 text-red-800"}`}
                        >
                          {reg.status === "pending" ? "Chờ duyệt" : reg.status === "approved" ? "Đã duyệt" : "Từ chối"}
                        </span>
                        <p className="mt-1 text-xs text-muted-foreground">
                          {new Date(reg.created_at).toLocaleDateString("vi-VN")}
                        </p>
                      </div>
                    </div>
                  ),
                )}
              </div>
            ) : (
              <p className="text-muted-foreground">Chưa có đăng ký nào.</p>
            )}
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/news/page.tsx" isMerged="true"
import { createClient } from "@/lib/supabase/server"
import { redirect } from "next/navigation"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Plus, Edit, Eye, Newspaper } from "lucide-react"
import Link from "next/link"
import type { News } from "@/lib/types"

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

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

const { data: news } = await supabase.from("news").select("*").order("created_at", { ascending: false })

return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-2xl font-bold text-foreground">Quản lý tin tức</h2>
          <p className="text-muted-foreground">Quản lý các bài viết tin tức</p>
        </div>
        <Button asChild className="gap-2">
          <Link href="/admin/news/new">
            <Plus className="h-4 w-4" />
            Thêm tin tức
          </Link>
        </Button>
      </div>

<Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Newspaper className="h-5 w-5" />
            Danh sách tin tức
          </CardTitle>
        </CardHeader>
        <CardContent>
          {news && news.length > 0 ? (
            <div className="overflow-x-auto">
              <table className="w-full">
                <thead>
                  <tr className="border-b text-left text-sm text-muted-foreground">
                    <th className="pb-3 font-medium">Tiêu đề</th>
                    <th className="pb-3 font-medium">Danh mục</th>
                    <th className="pb-3 font-medium">Ngày đăng</th>
                    <th className="pb-3 font-medium">Trạng thái</th>
                    <th className="pb-3 font-medium text-right">Thao tác</th>
                  </tr>
                </thead>
                <tbody>
                  {(news as News[]).map((item) => (
                    <tr key={item.id} className="border-b last:border-0">
                      <td className="py-3">
                        <div className="font-medium line-clamp-1">{item.title}</div>
                      </td>
                      <td className="py-3">
                        <Badge variant="outline">{item.category || "Chung"}</Badge>
                      </td>
                      <td className="py-3 text-sm">
                        {item.published_at ? new Date(item.published_at).toLocaleDateString("vi-VN") : "-"}
                      </td>
                      <td className="py-3">
                        <Badge variant={item.is_published ? "default" : "secondary"}>
                          {item.is_published ? "Đã đăng" : "Nháp"}
                        </Badge>
                      </td>
                      <td className="py-3">
                        <div className="flex justify-end gap-2">
                          <Button asChild variant="ghost" size="icon">
                            <Link href={`/tin-tuc/${item.slug}`} target="_blank">
                              <Eye className="h-4 w-4" />
                            </Link>
                          </Button>
                          <Button asChild variant="ghost" size="icon">
                            <Link href={`/admin/news/${item.id}`}>
                              <Edit className="h-4 w-4" />
                            </Link>
                          </Button>
                        </div>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          ) : (
            <p className="text-center text-muted-foreground py-8">Chưa có tin tức nào.</p>
          )}
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/documents/page.tsx" isMerged="true"
import { createClient } from "@/lib/supabase/server"
import { redirect } from "next/navigation"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Plus, Edit, Eye, FileText, Download } from "lucide-react"
import Link from "next/link"
import type { Document } from "@/lib/types"

const categoryLabels: Record<string, string> = {
  regulation: "Quy định",
  form: "Biểu mẫu",
  guide: "Hướng dẫn",
  announcement: "Thông báo",
  other: "Khác",
}

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

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

const { data: documents } = await supabase.from("documents").select("*").order("created_at", { ascending: false })

return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-2xl font-bold text-foreground">Quản lý văn bản</h2>
          <p className="text-muted-foreground">Quản lý các văn bản, biểu mẫu</p>
        </div>
        <Button asChild className="gap-2">
          <Link href="/admin/documents/new">
            <Plus className="h-4 w-4" />
            Thêm văn bản
          </Link>
        </Button>
      </div>

<Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <FileText className="h-5 w-5" />
            Danh sách văn bản
          </CardTitle>
        </CardHeader>
        <CardContent>
          {documents && documents.length > 0 ? (
            <div className="overflow-x-auto">
              <table className="w-full">
                <thead>
                  <tr className="border-b text-left text-sm text-muted-foreground">
                    <th className="pb-3 font-medium">Tiêu đề</th>
                    <th className="pb-3 font-medium">Loại</th>
                    <th className="pb-3 font-medium">Lượt tải</th>
                    <th className="pb-3 font-medium">Trạng thái</th>
                    <th className="pb-3 font-medium text-right">Thao tác</th>
                  </tr>
                </thead>
                <tbody>
                  {(documents as Document[]).map((doc) => (
                    <tr key={doc.id} className="border-b last:border-0">
                      <td className="py-3">
                        <div className="font-medium line-clamp-1">{doc.title}</div>
                        {doc.document_number && (
                          <div className="text-sm text-muted-foreground">Số: {doc.document_number}</div>
                        )}
                      </td>
                      <td className="py-3">
                        <Badge variant="outline">{categoryLabels[doc.category]}</Badge>
                      </td>
                      <td className="py-3">
                        <div className="flex items-center gap-1 text-sm">
                          <Download className="h-3 w-3" />
                          {doc.download_count}
                        </div>
                      </td>
                      <td className="py-3">
                        <Badge variant={doc.is_published ? "default" : "secondary"}>
                          {doc.is_published ? "Đã đăng" : "Nháp"}
                        </Badge>
                      </td>
                      <td className="py-3">
                        <div className="flex justify-end gap-2">
                          <Button asChild variant="ghost" size="icon">
                            <a href={doc.file_url} target="_blank" rel="noopener noreferrer">
                              <Eye className="h-4 w-4" />
                            </a>
                          </Button>
                          <Button asChild variant="ghost" size="icon">
                            <Link href={`/admin/documents/${doc.id}`}>
                              <Edit className="h-4 w-4" />
                            </Link>
                          </Button>
                        </div>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          ) : (
            <p className="text-center text-muted-foreground py-8">Chưa có văn bản nào.</p>
          )}
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/settings/page.tsx" isMerged="true"
import { createClient } from "@/lib/supabase/server"
import { redirect } from "next/navigation"
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
import { Settings } from "lucide-react"

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

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

return (
    <div className="space-y-6">
      <div>
        <h2 className="text-2xl font-bold text-foreground">Cài đặt</h2>
        <p className="text-muted-foreground">Quản lý cài đặt website</p>
      </div>

<div className="grid gap-6 lg:grid-cols-2">
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Settings className="h-5 w-5" />
              Thông tin website
            </CardTitle>
            <CardDescription>Cài đặt thông tin chung của website</CardDescription>
          </CardHeader>
          <CardContent>
            <p className="text-muted-foreground">Tính năng đang được phát triển.</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle>Tài khoản Admin</CardTitle>
            <CardDescription>Thông tin tài khoản quản trị</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-2">
              <p className="text-sm">
                <span className="text-muted-foreground">Email:</span> {user.email}
              </p>
              <p className="text-sm">
                <span className="text-muted-foreground">ID:</span> {user.id}
              </p>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="lib/types.ts" isEdit="true" isMerged="true"
export interface Event {
  id: string
  title: string
  slug: string
  description: string | null
  content: string | null
  start_date: string
  end_date: string | null
  registration_deadline: string | null
  location: string | null
  event_type: "competition" | "training" | "exam" | "meeting" | "other"
  image_url: string | null
  is_featured: boolean
  is_published: boolean
  created_at: string
  updated_at: string
}

export interface News {
  id: string
  title: string
  slug: string
  excerpt: string | null
  content: string | null
  image_url: string | null
  category: string | null
  is_featured: boolean
  is_published: boolean
  published_at: string | null
  created_at: string
  updated_at: string
}

export interface Document {
  id: string
  title: string
  description: string | null
  file_url: string
  file_type: string | null
  file_size: number | null
  category: "regulation" | "form" | "guide" | "announcement" | "other"
  document_number: string | null
  issued_date: string | null
  download_count: number
  is_published: boolean
  created_at: string
  updated_at: string
}

export interface OrganizationMember {
  id: string
  full_name: string
  position: string
  title: string | null
  image_url: string | null
  display_order: number
  term: string
  is_active: boolean
  created_at: string
}

export interface ContactSubmission {
  id: string
  full_name: string
  email: string
  phone: string | null
  subject: string
  message: string
  is_read: boolean
  created_at: string
}

export interface EventRegistration {
  id: string
  event_id: string
  full_name: string
  email: string
  phone: string
  club_name: string | null
  current_rank: string | null
  notes: string | null
  status: "pending" | "approved" | "rejected"
  created_at: string
}
[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true"
import { createClient } from "@/lib/supabase/server"
import { Header } from "@/components/layout/header"
import { Footer } from "@/components/layout/footer"
import { HeroSection } from "@/components/home/hero-section"
import { StatsSection } from "@/components/home/stats-section"
import { CountdownSection } from "@/components/home/countdown-section"
import { EventsSection } from "@/components/home/events-section"
import { NewsSection } from "@/components/home/news-section"
import { CTASection } from "@/components/home/cta-section"
import type { Event, News } from "@/lib/types"

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

// Fetch featured event for countdown
  const { data: featuredEvent } = await supabase
    .from("events")
    .select("*")
    .eq("is_published", true)
    .eq("is_featured", true)
    .gte("start_date", new Date().toISOString())
    .order("start_date", { ascending: true })
    .limit(1)
    .single()

// Fetch upcoming events
  const { data: events } = await supabase
    .from("events")
    .select("*")
    .eq("is_published", true)
    .gte("start_date", new Date().toISOString())
    .order("start_date", { ascending: true })
    .limit(3)

// Fetch latest news
  const { data: news } = await supabase
    .from("news")
    .select("*")
    .eq("is_published", true)
    .order("published_at", { ascending: false })
    .limit(3)

return (
    <div className="flex min-h-screen flex-col">
      <Header />
      <main className="flex-1">
        <HeroSection />
        <StatsSection />
        <CountdownSection event={featuredEvent as Event | null} />
        <EventsSection events={(events as Event[]) || []} />
        <NewsSection news={(news as News[]) || []} />
        <CTASection />
      </main>
      <Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/home/countdown-section.tsx" isEdit="true" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { Button } from "@/components/ui/button"
import { Calendar, MapPin, ArrowRight } from "lucide-react"
import Link from "next/link"
import type { Event } from "@/lib/types"

interface CountdownSectionProps {
  event: Event | null
}

interface TimeLeft {
  days: number
  hours: number
  minutes: number
  seconds: number
}

function calculateTimeLeft(targetDate: string): TimeLeft {
  const difference = new Date(targetDate).getTime() - new Date().getTime()

if (difference <= 0) {
    return { days: 0, hours: 0, minutes: 0, seconds: 0 }
  }

return {
    days: Math.floor(difference / (1000 * 60 * 60 * 24)),
    hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
    minutes: Math.floor((difference / 1000 / 60) % 60),
    seconds: Math.floor((difference / 1000) % 60),
  }
}

export function CountdownSection({ event }: CountdownSectionProps) {
  const [timeLeft, setTimeLeft] = useState<TimeLeft>({ days: 0, hours: 0, minutes: 0, seconds: 0 })
  const [mounted, setMounted] = useState(false)

useEffect(() => {
    setMounted(true)
    if (!event) return

const timer = setInterval(() => {
      setTimeLeft(calculateTimeLeft(event.start_date))
    }, 1000)

setTimeLeft(calculateTimeLeft(event.start_date))

return () => clearInterval(timer)
  }, [event])

if (!event || !mounted) return null

const timeUnits = [
    { value: timeLeft.days, label: "Ngày" },
    { value: timeLeft.hours, label: "Giờ" },
    { value: timeLeft.minutes, label: "Phút" },
    { value: timeLeft.seconds, label: "Giây" },
  ]

return (
    <section className="py-16 bg-primary text-primary-foreground">
      <div className="container mx-auto px-4">
        <div className="mx-auto max-w-4xl text-center">
          <span className="mb-4 inline-block rounded-full bg-primary-foreground/20 px-4 py-1 text-sm font-medium">
            Sự kiện sắp diễn ra
          </span>

<h2 className="mb-4 text-3xl font-bold md:text-4xl text-balance">{event.title}</h2>

<div className="mb-8 flex flex-wrap items-center justify-center gap-4 text-primary-foreground/80">
            <div className="flex items-center gap-2">
              <Calendar className="h-5 w-5" />
              <span>
                {new Date(event.start_date).toLocaleDateString("vi-VN", {
                  weekday: "long",
                  day: "numeric",
                  month: "long",
                  year: "numeric",
                })}
              </span>
            </div>
            {event.location && (
              <div className="flex items-center gap-2">
                <MapPin className="h-5 w-5" />
                <span>{event.location}</span>
              </div>
            )}
          </div>

{/* Countdown Timer */}
          <div className="mb-8 grid grid-cols-4 gap-3 md:gap-6">
            {timeUnits.map((unit, index) => (
              <div key={index} className="rounded-lg bg-primary-foreground/10 p-4 backdrop-blur">
                <div className="text-3xl font-bold md:text-5xl">{String(unit.value).padStart(2, "0")}</div>
                <div className="mt-1 text-sm text-primary-foreground/80">{unit.label}</div>
              </div>
            ))}
          </div>

<Button asChild size="lg" variant="secondary" className="gap-2">
            <Link href={`/hoat-dong/${event.slug}`}>
              Xem chi tiết
              <ArrowRight className="h-4 w-4" />
            </Link>
          </Button>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/activities/countdown-banner.tsx" isEdit="true" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Calendar, MapPin, ArrowRight } from "lucide-react"
import type { Event } from "@/lib/types"

interface CountdownBannerProps {
  event: Event
}

interface TimeLeft {
  days: number
  hours: number
  minutes: number
  seconds: number
}

function calculateTimeLeft(targetDate: string): TimeLeft {
  const difference = new Date(targetDate).getTime() - new Date().getTime()

if (difference <= 0) {
    return { days: 0, hours: 0, minutes: 0, seconds: 0 }
  }

export function CountdownBanner({ event }: CountdownBannerProps) {
  const [timeLeft, setTimeLeft] = useState<TimeLeft>({ days: 0, hours: 0, minutes: 0, seconds: 0 })
  const [mounted, setMounted] = useState(false)

useEffect(() => {
    setMounted(true)
    const timer = setInterval(() => {
      setTimeLeft(calculateTimeLeft(event.start_date))
    }, 1000)

setTimeLeft(calculateTimeLeft(event.start_date))

return () => clearInterval(timer)
  }, [event.start_date])

if (!mounted) return null

return (
    <section className="border-b bg-secondary/10 py-8">
      <div className="container mx-auto px-4">
        <div className="flex flex-col items-center gap-6 lg:flex-row lg:justify-between">
          <div className="text-center lg:text-left">
            <span className="mb-2 inline-block rounded-full bg-secondary px-3 py-1 text-xs font-medium text-secondary-foreground">
              Sự kiện nổi bật
            </span>
            <h2 className="text-xl font-bold text-foreground md:text-2xl">{event.title}</h2>
            <div className="mt-2 flex flex-wrap items-center justify-center gap-4 text-sm text-muted-foreground lg:justify-start">
              <div className="flex items-center gap-1">
                <Calendar className="h-4 w-4" />
                <span>
                  {new Date(event.start_date).toLocaleDateString("vi-VN", {
                    day: "numeric",
                    month: "long",
                    year: "numeric",
                  })}
                </span>
              </div>
              {event.location && (
                <div className="flex items-center gap-1">
                  <MapPin className="h-4 w-4" />
                  <span>{event.location}</span>
                </div>
              )}
            </div>
          </div>

<div className="flex items-center gap-4">
            <div className="flex gap-2">
              {timeUnits.map((unit, index) => (
                <div key={index} className="rounded-lg bg-primary px-3 py-2 text-center text-primary-foreground">
                  <div className="text-xl font-bold md:text-2xl">{String(unit.value).padStart(2, "0")}</div>
                  <div className="text-xs">{unit.label}</div>
                </div>
              ))}
            </div>
            <Button asChild size="sm" variant="outline" className="hidden gap-1 bg-transparent sm:inline-flex">
              <Link href={`/hoat-dong/${event.slug}`}>
                Chi tiết
                <ArrowRight className="h-3 w-3" />
              </Link>
            </Button>
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="app/admin/events/page.tsx" isEdit="true" isMerged="true"
import { createClient } from "@/lib/supabase/server"
import { redirect } from "next/navigation"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Plus, Edit, Eye, Calendar } from "lucide-react"
import Link from "next/link"
import type { Event } from "@/lib/types"

const eventTypeLabels: Record<string, string> = {
  competition: "Giải đấu",
  training: "Tập huấn",
  exam: "Thi đẳng",
  meeting: "Hội nghị",
  other: "Khác",
}

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

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

const { data: events } = await supabase.from("events").select("*").order("start_date", { ascending: false })

return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-2xl font-bold text-foreground">Quản lý sự kiện</h2>
          <p className="text-muted-foreground">Quản lý các sự kiện, giải đấu, tập huấn</p>
        </div>
        <Button asChild className="gap-2">
          <Link href="/admin/events/new">
            <Plus className="h-4 w-4" />
            Thêm sự kiện
          </Link>
        </Button>
      </div>

<Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Calendar className="h-5 w-5" />
            Danh sách sự kiện
          </CardTitle>
        </CardHeader>
        <CardContent>
          {events && events.length > 0 ? (
            <div className="overflow-x-auto">
              <table className="w-full">
                <thead>
                  <tr className="border-b text-left text-sm text-muted-foreground">
                    <th className="pb-3 font-medium">Tiêu đề</th>
                    <th className="pb-3 font-medium">Loại</th>
                    <th className="pb-3 font-medium">Ngày</th>
                    <th className="pb-3 font-medium">Trạng thái</th>
                    <th className="pb-3 font-medium text-right">Thao tác</th>
                  </tr>
                </thead>
                <tbody>
                  {(events as Event[]).map((event) => (
                    <tr key={event.id} className="border-b last:border-0">
                      <td className="py-3">
                        <div className="font-medium">{event.title}</div>
                        <div className="text-sm text-muted-foreground">{event.location}</div>
                      </td>
                      <td className="py-3">
                        <Badge variant="outline">{eventTypeLabels[event.event_type]}</Badge>
                      </td>
                      <td className="py-3 text-sm">{new Date(event.start_date).toLocaleDateString("vi-VN")}</td>
                      <td className="py-3">
                        <Badge variant={event.is_published ? "default" : "secondary"}>
                          {event.is_published ? "Đã đăng" : "Nháp"}
                        </Badge>
                      </td>
                      <td className="py-3">
                        <div className="flex justify-end gap-2">
                          <Button asChild variant="ghost" size="icon">
                            <Link href={`/hoat-dong/${event.slug}`} target="_blank">
                              <Eye className="h-4 w-4" />
                            </Link>
                          </Button>
                          <Button asChild variant="ghost" size="icon">
                            <Link href={`/admin/events/${event.id}`}>
                              <Edit className="h-4 w-4" />
                            </Link>
                          </Button>
                        </div>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          ) : (
            <p className="text-center text-muted-foreground py-8">Chưa có sự kiện nào.</p>
          )}
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/members/page.tsx" isEdit="true" isMerged="true"
import { createClient } from "@/lib/supabase/server"
import { redirect } from "next/navigation"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Plus, Edit, Users } from "lucide-react"
import Link from "next/link"
import type { OrganizationMember } from "@/lib/types"

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

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

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

return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-2xl font-bold text-foreground">Quản lý thành viên</h2>
          <p className="text-muted-foreground">Quản lý Ban Chấp hành và thành viên tổ chức</p>
        </div>
        <Button asChild className="gap-2">
          <Link href="/admin/members/new">
            <Plus className="h-4 w-4" />
            Thêm thành viên
          </Link>
        </Button>
      </div>

<Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Users className="h-5 w-5" />
            Danh sách thành viên
          </CardTitle>
        </CardHeader>
        <CardContent>
          {members && members.length > 0 ? (
            <div className="overflow-x-auto">
              <table className="w-full">
                <thead>
                  <tr className="border-b text-left text-sm text-muted-foreground">
                    <th className="pb-3 font-medium">Thành viên</th>
                    <th className="pb-3 font-medium">Chức vụ</th>
                    <th className="pb-3 font-medium">Nhiệm kỳ</th>
                    <th className="pb-3 font-medium">Trạng thái</th>
                    <th className="pb-3 font-medium text-right">Thao tác</th>
                  </tr>
                </thead>
                <tbody>
                  {(members as OrganizationMember[]).map((member) => (
                    <tr key={member.id} className="border-b last:border-0">
                      <td className="py-3">
                        <div className="flex items-center gap-3">
                          <div className="h-10 w-10 overflow-hidden rounded-full bg-muted">
                            <img
                              src={member.image_url || "/placeholder.svg?height=40&width=40&query=person"}
                              alt={member.full_name}
                              className="h-full w-full object-cover"
                            />
                          </div>
                          <div>
                            <div className="font-medium">{member.full_name}</div>
                            {member.title && <div className="text-sm text-muted-foreground">{member.title}</div>}
                          </div>
                        </div>
                      </td>
                      <td className="py-3">{member.position}</td>
                      <td className="py-3">
                        <Badge variant="outline">{member.term}</Badge>
                      </td>
                      <td className="py-3">
                        <Badge variant={member.is_active ? "default" : "secondary"}>
                          {member.is_active ? "Hoạt động" : "Không hoạt động"}
                        </Badge>
                      </td>
                      <td className="py-3">
                        <div className="flex justify-end">
                          <Button asChild variant="ghost" size="icon">
                            <Link href={`/admin/members/${member.id}`}>
                              <Edit className="h-4 w-4" />
                            </Link>
                          </Button>
                        </div>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          ) : (
            <p className="text-center text-muted-foreground py-8">Chưa có thành viên nào.</p>
          )}
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/contacts/page.tsx" isEdit="true" isMerged="true"
import { createClient } from "@/lib/supabase/server"
import { redirect } from "next/navigation"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { MessageSquare, CheckCircle } from "lucide-react"
import type { ContactSubmission } from "@/lib/types"

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

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

const { data: contacts } = await supabase
    .from("contact_submissions")
    .select("*")
    .order("created_at", { ascending: false })

async function markAsRead(id: string) {
    "use server"
    const supabase = await createClient()
    await supabase.from("contact_submissions").update({ is_read: true }).eq("id", id)
  }

return (
    <div className="space-y-6">
      <div>
        <h2 className="text-2xl font-bold text-foreground">Quản lý liên hệ</h2>
        <p className="text-muted-foreground">Xem và phản hồi các liên hệ từ người dùng</p>
      </div>

<Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <MessageSquare className="h-5 w-5" />
            Danh sách liên hệ
          </CardTitle>
        </CardHeader>
        <CardContent>
          {contacts && contacts.length > 0 ? (
            <div className="space-y-4">
              {(contacts as ContactSubmission[]).map((contact) => (
                <div key={contact.id} className="rounded-lg border p-4">
                  <div className="flex items-start justify-between">
                    <div>
                      <h3 className="font-semibold">{contact.full_name}</h3>
                      <p className="text-sm text-muted-foreground">{contact.email}</p>
                      {contact.phone && <p className="text-sm text-muted-foreground">{contact.phone}</p>}
                    </div>
                    <div className="text-right">
                      <Badge variant={contact.is_read ? "outline" : "secondary"}>
                        {contact.is_read ? "Đã đọc" : "Chưa đọc"}
                      </Badge>
                      <p className="mt-1 text-xs text-muted-foreground">
                        {new Date(contact.created_at).toLocaleDateString("vi-VN", {
                          day: "numeric",
                          month: "long",
                          year: "numeric",
                          hour: "2-digit",
                          minute: "2-digit",
                        })}
                      </p>
                    </div>
                  </div>
                  <div className="mt-3">
                    <p className="text-sm font-medium text-primary">{contact.subject}</p>
                    <p className="mt-1 text-sm text-muted-foreground whitespace-pre-wrap">{contact.message}</p>
                  </div>
                  {!contact.is_read && (
                    <form action={markAsRead.bind(null, contact.id)} className="mt-3">
                      <Button type="submit" variant="outline" size="sm" className="gap-2 bg-transparent">
                        <CheckCircle className="h-4 w-4" />
                        Đánh dấu đã đọc
                      </Button>
                    </form>
                  )}
                </div>
              ))}
            </div>
          ) : (
            <p className="text-center text-muted-foreground py-8">Chưa có liên hệ nào.</p>
          )}
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/tin-tuc/page.tsx" isMerged="true"
import { createClient } from "@/lib/supabase/server"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Clock, ArrowLeft } from "lucide-react"
import Link from "next/link"
import type { News } from "@/lib/types"

const categoryLabels: Record<string, string> = {
  announcement: "Chuẩn bị",
  training: "Thông báo",
  event: "Sự kiện",
  achievement: "Thành tích",
  other: "Khác",
}

export const metadata = {
  title: "Tin tức | Liên đoàn Taekwondo TP.HCM",
  description: "Cập nhật tin tức mới nhất từ Liên đoàn Taekwondo Thành phố Hồ Chí Minh",
}

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

const { data: news } = await supabase
    .from("news")
    .select("*")
    .eq("is_published", true)
    .order("published_at", { ascending: false })

return (
    <main className="min-h-screen bg-background">
      {/* Hero */}
      <section className="bg-primary py-16 text-primary-foreground">
        <div className="container mx-auto px-4">
          <Button
            asChild
            variant="ghost"
            size="sm"
            className="mb-4 text-primary-foreground/80 hover:text-primary-foreground hover:bg-primary-foreground/10"
          >
            <Link href="/">
              <ArrowLeft className="mr-2 h-4 w-4" />
              Trở về trang chủ
            </Link>
          </Button>
          <h1 className="text-4xl font-bold">Tin tức</h1>
          <p className="mt-2 text-primary-foreground/80">Cập nhật thông tin mới nhất từ Liên đoàn Taekwondo TP.HCM</p>
        </div>
      </section>

{/* News List */}
      <section className="py-12">
        <div className="container mx-auto px-4">
          {news && news.length > 0 ? (
            <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
              {(news as News[]).map((item) => (
                <Link key={item.id} href={`/tin-tuc/${item.slug}`}>
                  <Card className="group h-full overflow-hidden transition-shadow hover:shadow-lg">
                    <div className="aspect-[16/9] overflow-hidden bg-muted">
                      <img
                        src={item.image_url || "/placeholder.svg?height=300&width=500&query=taekwondo news"}
                        alt={item.title}
                        className="h-full w-full object-cover transition-transform group-hover:scale-105"
                      />
                    </div>
                    <CardContent className="p-5">
                      <div className="mb-3 flex items-center gap-3">
                        {item.category && (
                          <Badge variant="secondary" className="text-xs">
                            {categoryLabels[item.category] || item.category}
                          </Badge>
                        )}
                        <div className="flex items-center gap-1 text-xs text-muted-foreground">
                          <Clock className="h-3 w-3" />
                          <span>
                            {new Date(item.published_at || item.created_at).toLocaleDateString("vi-VN", {
                              day: "numeric",
                              month: "long",
                              year: "numeric",
                            })}
                          </span>
                        </div>
                      </div>
                      <h3 className="mb-2 font-bold text-foreground group-hover:text-primary transition-colors line-clamp-2">
                        {item.title}
                      </h3>
                      <p className="text-sm text-muted-foreground line-clamp-2">{item.excerpt}</p>
                    </CardContent>
                  </Card>
                </Link>
              ))}
            </div>
          ) : (
            <div className="py-16 text-center">
              <p className="text-muted-foreground">Chưa có tin tức nào.</p>
            </div>
          )}
        </div>
      </section>
    </main>
  )
}
[V0_FILE]typescriptreact:file="app/admin/registrations/page.tsx" isMerged="true"
import { createClient } from "@/lib/supabase/server"
import { redirect } from "next/navigation"
import { revalidatePath } from "next/cache"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Users, Check, X } from "lucide-react"

async function updateRegistrationStatus(formData: FormData) {
  "use server"
  const supabase = await createClient()
  const id = formData.get("id") as string
  const status = formData.get("status") as string

await supabase.from("event_registrations").update({ status }).eq("id", id)
  revalidatePath("/admin/registrations")
}

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

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

const { data: registrations } = await supabase
    .from("event_registrations")
    .select("*, events(title)")
    .order("created_at", { ascending: false })

return (
    <div className="space-y-6">
      <div>
        <h2 className="text-2xl font-bold text-foreground">Quản lý đăng ký</h2>
        <p className="text-muted-foreground">Xem và duyệt đăng ký tham gia sự kiện</p>
      </div>

<Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Users className="h-5 w-5" />
            Danh sách đăng ký
          </CardTitle>
        </CardHeader>
        <CardContent>
          {registrations && registrations.length > 0 ? (
            <div className="overflow-x-auto">
              <table className="w-full">
                <thead>
                  <tr className="border-b text-left text-sm text-muted-foreground">
                    <th className="pb-3 font-medium">Họ tên</th>
                    <th className="pb-3 font-medium">Email</th>
                    <th className="pb-3 font-medium">Điện thoại</th>
                    <th className="pb-3 font-medium">Sự kiện</th>
                    <th className="pb-3 font-medium">CLB</th>
                    <th className="pb-3 font-medium">Ngày đăng ký</th>
                    <th className="pb-3 font-medium">Trạng thái</th>
                    <th className="pb-3 font-medium text-right">Thao tác</th>
                  </tr>
                </thead>
                <tbody>
                  {registrations.map(
                    (reg: {
                      id: string
                      full_name: string
                      email: string
                      phone: string
                      club_name: string | null
                      created_at: string
                      status: string
                      events: { title: string } | null
                    }) => (
                      <tr key={reg.id} className="border-b last:border-0">
                        <td className="py-3 font-medium">{reg.full_name}</td>
                        <td className="py-3 text-sm">{reg.email}</td>
                        <td className="py-3 text-sm">{reg.phone}</td>
                        <td className="py-3 text-sm">{reg.events?.title || "N/A"}</td>
                        <td className="py-3 text-sm">{reg.club_name || "-"}</td>
                        <td className="py-3 text-sm">{new Date(reg.created_at).toLocaleDateString("vi-VN")}</td>
                        <td className="py-3">
                          <Badge
                            variant={
                              reg.status === "approved"
                                ? "default"
                                : reg.status === "rejected"
                                  ? "destructive"
                                  : "secondary"
                            }
                          >
                            {reg.status === "pending"
                              ? "Chờ duyệt"
                              : reg.status === "approved"
                                ? "Đã duyệt"
                                : "Từ chối"}
                          </Badge>
                        </td>
                        <td className="py-3">
                          {reg.status === "pending" && (
                            <div className="flex justify-end gap-2">
                              <form action={updateRegistrationStatus}>
                                <input type="hidden" name="id" value={reg.id} />
                                <input type="hidden" name="status" value="approved" />
                                <Button
                                  type="submit"
                                  variant="ghost"
                                  size="icon"
                                  className="text-green-600 hover:text-green-700"
                                >
                                  <Check className="h-4 w-4" />
                                </Button>
                              </form>
                              <form action={updateRegistrationStatus}>
                                <input type="hidden" name="id" value={reg.id} />
                                <input type="hidden" name="status" value="rejected" />
                                <Button
                                  type="submit"
                                  variant="ghost"
                                  size="icon"
                                  className="text-red-600 hover:text-red-700"
                                >
                                  <X className="h-4 w-4" />
                                </Button>
                              </form>
                            </div>
                          )}
                        </td>
                      </tr>
                    ),
                  )}
                </tbody>
              </table>
            </div>
          ) : (
            <p className="text-center text-muted-foreground py-8">Chưa có đăng ký nào.</p>
          )}
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/events/new/page.tsx" isMerged="true"
import { createClient } from "@/lib/supabase/server"
import { redirect } from "next/navigation"
import { revalidatePath } from "next/cache"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
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 { Switch } from "@/components/ui/switch"
import { ArrowLeft, Calendar } from "lucide-react"
import Link from "next/link"

function generateSlug(title: string): string {
  return title
    .toLowerCase()
    .normalize("NFD")
    .replace(/[\u0300-\u036f]/g, "")
    .replace(/đ/g, "d")
    .replace(/Đ/g, "D")
    .replace(/[^a-z0-9\s-]/g, "")
    .replace(/\s+/g, "-")
    .replace(/-+/g, "-")
    .trim()
}

async function createEvent(formData: FormData) {
  "use server"
  const supabase = await createClient()

const title = formData.get("title") as string
  const slug = generateSlug(title) + "-" + Date.now()
  const description = formData.get("description") as string
  const content = formData.get("content") as string
  const start_date = formData.get("start_date") as string
  const end_date = (formData.get("end_date") as string) || null
  const registration_deadline = (formData.get("registration_deadline") as string) || null
  const location = formData.get("location") as string
  const event_type = formData.get("event_type") as string
  const is_featured = formData.get("is_featured") === "on"
  const is_published = formData.get("is_published") === "on"

const { error } = await supabase.from("events").insert({
    title,
    slug,
    description,
    content,
    start_date,
    end_date,
    registration_deadline,
    location,
    event_type,
    is_featured,
    is_published,
  })

if (!error) {
    revalidatePath("/admin/events")
    redirect("/admin/events")
  }
}

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

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

return (
    <div className="space-y-6">
      <div className="flex items-center gap-4">
        <Button asChild variant="ghost" size="icon">
          <Link href="/admin/events">
            <ArrowLeft className="h-4 w-4" />
          </Link>
        </Button>
        <div>
          <h2 className="text-2xl font-bold text-foreground">Thêm sự kiện mới</h2>
          <p className="text-muted-foreground">Tạo sự kiện, giải đấu hoặc tập huấn mới</p>
        </div>
      </div>

<Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Calendar className="h-5 w-5" />
            Thông tin sự kiện
          </CardTitle>
        </CardHeader>
        <CardContent>
          <form action={createEvent} className="space-y-6">
            <div className="grid gap-4 md:grid-cols-2">
              <div className="space-y-2 md:col-span-2">
                <Label htmlFor="title">Tiêu đề *</Label>
                <Input id="title" name="title" required placeholder="Nhập tiêu đề sự kiện" />
              </div>

<div className="flex justify-end gap-4">
              <Button asChild variant="outline" className="bg-transparent">
                <Link href="/admin/events">Hủy</Link>
              </Button>
              <Button type="submit">Tạo sự kiện</Button>
            </div>
          </form>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/events/[id]/page.tsx" isMerged="true"
import { createClient } from "@/lib/supabase/server"
import { redirect, notFound } from "next/navigation"
import { revalidatePath } from "next/cache"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
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 { Switch } from "@/components/ui/switch"
import { ArrowLeft, Calendar, Trash2 } from "lucide-react"
import Link from "next/link"
import type { Event } from "@/lib/types"

interface Props {
  params: Promise<{ id: string }>
}

async function updateEvent(formData: FormData) {
  "use server"
  const supabase = await createClient()

const id = formData.get("id") as string
  const title = formData.get("title") as string
  const description = formData.get("description") as string
  const content = formData.get("content") as string
  const start_date = formData.get("start_date") as string
  const end_date = (formData.get("end_date") as string) || null
  const registration_deadline = (formData.get("registration_deadline") as string) || null
  const location = formData.get("location") as string
  const event_type = formData.get("event_type") as string
  const is_featured = formData.get("is_featured") === "on"
  const is_published = formData.get("is_published") === "on"

const { error } = await supabase
    .from("events")
    .update({
      title,
      description,
      content,
      start_date,
      end_date,
      registration_deadline,
      location,
      event_type,
      is_featured,
      is_published,
      updated_at: new Date().toISOString(),
    })
    .eq("id", id)

if (!error) {
    revalidatePath("/admin/events")
    redirect("/admin/events")
  }
}

async function deleteEvent(formData: FormData) {
  "use server"
  const supabase = await createClient()
  const id = formData.get("id") as string

await supabase.from("events").delete().eq("id", id)
  revalidatePath("/admin/events")
  redirect("/admin/events")
}

export default async function EditEventPage({ params }: Props) {
  const { id } = await params
  const supabase = await createClient()
  const {
    data: { user },
  } = await supabase.auth.getUser()

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

const { data: event } = await supabase.from("events").select("*").eq("id", id).single()

if (!event) {
    notFound()
  }

const eventData = event as Event

return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-4">
          <Button asChild variant="ghost" size="icon">
            <Link href="/admin/events">
              <ArrowLeft className="h-4 w-4" />
            </Link>
          </Button>
          <div>
            <h2 className="text-2xl font-bold text-foreground">Chỉnh sửa sự kiện</h2>
            <p className="text-muted-foreground">{eventData.title}</p>
          </div>
        </div>
        <form action={deleteEvent}>
          <input type="hidden" name="id" value={eventData.id} />
          <Button type="submit" variant="destructive" size="sm" className="gap-2">
            <Trash2 className="h-4 w-4" />
            Xóa
          </Button>
        </form>
      </div>

<div className="flex justify-end gap-4">
              <Button asChild variant="outline" className="bg-transparent">
                <Link href="/admin/events">Hủy</Link>
              </Button>
              <Button type="submit">Lưu thay đổi</Button>
            </div>
          </form>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/news/new/page.tsx" isMerged="true"
import { createClient } from "@/lib/supabase/server"
import { redirect } from "next/navigation"
import { revalidatePath } from "next/cache"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
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 { Switch } from "@/components/ui/switch"
import { ArrowLeft, Newspaper } from "lucide-react"
import Link from "next/link"

async function createNews(formData: FormData) {
  "use server"
  const supabase = await createClient()

const title = formData.get("title") as string
  const slug = generateSlug(title) + "-" + Date.now()
  const excerpt = formData.get("excerpt") as string
  const content = formData.get("content") as string
  const category = formData.get("category") as string
  const image_url = (formData.get("image_url") as string) || null
  const is_featured = formData.get("is_featured") === "on"
  const is_published = formData.get("is_published") === "on"

const { error } = await supabase.from("news").insert({
    title,
    slug,
    excerpt,
    content,
    category,
    image_url,
    is_featured,
    is_published,
    published_at: is_published ? new Date().toISOString() : null,
  })

if (!error) {
    revalidatePath("/admin/news")
    redirect("/admin/news")
  }
}

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

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

return (
    <div className="space-y-6">
      <div className="flex items-center gap-4">
        <Button asChild variant="ghost" size="icon">
          <Link href="/admin/news">
            <ArrowLeft className="h-4 w-4" />
          </Link>
        </Button>
        <div>
          <h2 className="text-2xl font-bold text-foreground">Thêm tin tức mới</h2>
          <p className="text-muted-foreground">Tạo bài viết tin tức mới</p>
        </div>
      </div>

<Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Newspaper className="h-5 w-5" />
            Thông tin bài viết
          </CardTitle>
        </CardHeader>
        <CardContent>
          <form action={createNews} className="space-y-6">
            <div className="grid gap-4 md:grid-cols-2">
              <div className="space-y-2 md:col-span-2">
                <Label htmlFor="title">Tiêu đề *</Label>
                <Input id="title" name="title" required placeholder="Nhập tiêu đề bài viết" />
              </div>

<div className="flex justify-end gap-4">
              <Button asChild variant="outline" className="bg-transparent">
                <Link href="/admin/news">Hủy</Link>
              </Button>
              <Button type="submit">Tạo bài viết</Button>
            </div>
          </form>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/news/[id]/page.tsx" isMerged="true"
import { createClient } from "@/lib/supabase/server"
import { redirect, notFound } from "next/navigation"
import { revalidatePath } from "next/cache"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
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 { Switch } from "@/components/ui/switch"
import { ArrowLeft, Newspaper, Trash2 } from "lucide-react"
import Link from "next/link"
import type { News } from "@/lib/types"

interface Props {
  params: Promise<{ id: string }>
}

async function updateNews(formData: FormData) {
  "use server"
  const supabase = await createClient()

const id = formData.get("id") as string
  const title = formData.get("title") as string
  const excerpt = formData.get("excerpt") as string
  const content = formData.get("content") as string
  const category = formData.get("category") as string
  const image_url = (formData.get("image_url") as string) || null
  const is_featured = formData.get("is_featured") === "on"
  const is_published = formData.get("is_published") === "on"
  const was_published = formData.get("was_published") === "true"

const updateData: Record<string, unknown> = {
    title,
    excerpt,
    content,
    category,
    image_url,
    is_featured,
    is_published,
    updated_at: new Date().toISOString(),
  }

if (is_published && !was_published) {
    updateData.published_at = new Date().toISOString()
  }

const { error } = await supabase.from("news").update(updateData).eq("id", id)

if (!error) {
    revalidatePath("/admin/news")
    redirect("/admin/news")
  }
}

async function deleteNews(formData: FormData) {
  "use server"
  const supabase = await createClient()
  const id = formData.get("id") as string

await supabase.from("news").delete().eq("id", id)
  revalidatePath("/admin/news")
  redirect("/admin/news")
}

export default async function EditNewsPage({ params }: Props) {
  const { id } = await params
  const supabase = await createClient()
  const {
    data: { user },
  } = await supabase.auth.getUser()

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

const { data: news } = await supabase.from("news").select("*").eq("id", id).single()

if (!news) {
    notFound()
  }

const newsData = news as News

return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-4">
          <Button asChild variant="ghost" size="icon">
            <Link href="/admin/news">
              <ArrowLeft className="h-4 w-4" />
            </Link>
          </Button>
          <div>
            <h2 className="text-2xl font-bold text-foreground">Chỉnh sửa tin tức</h2>
            <p className="text-muted-foreground line-clamp-1">{newsData.title}</p>
          </div>
        </div>
        <form action={deleteNews}>
          <input type="hidden" name="id" value={newsData.id} />
          <Button type="submit" variant="destructive" size="sm" className="gap-2">
            <Trash2 className="h-4 w-4" />
            Xóa
          </Button>
        </form>
      </div>

<Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Newspaper className="h-5 w-5" />
            Thông tin bài viết
          </CardTitle>
        </CardHeader>
        <CardContent>
          <form action={updateNews} className="space-y-6">
            <input type="hidden" name="id" value={newsData.id} />
            <input type="hidden" name="was_published" value={newsData.is_published.toString()} />

<div className="flex justify-end gap-4">
              <Button asChild variant="outline" className="bg-transparent">
                <Link href="/admin/news">Hủy</Link>
              </Button>
              <Button type="submit">Lưu thay đổi</Button>
            </div>
          </form>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/documents/new/page.tsx" isMerged="true"
import { createClient } from "@/lib/supabase/server"
import { redirect } from "next/navigation"
import { revalidatePath } from "next/cache"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
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 { Switch } from "@/components/ui/switch"
import { ArrowLeft, FileText } from "lucide-react"
import Link from "next/link"

async function createDocument(formData: FormData) {
  "use server"
  const supabase = await createClient()

const title = formData.get("title") as string
  const description = formData.get("description") as string
  const file_url = formData.get("file_url") as string
  const file_type = formData.get("file_type") as string
  const category = formData.get("category") as string
  const document_number = (formData.get("document_number") as string) || null
  const issued_date = (formData.get("issued_date") as string) || null
  const is_published = formData.get("is_published") === "on"

const { error } = await supabase.from("documents").insert({
    title,
    description,
    file_url,
    file_type,
    category,
    document_number,
    issued_date,
    is_published,
  })

if (!error) {
    revalidatePath("/admin/documents")
    redirect("/admin/documents")
  }
}

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

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

return (
    <div className="space-y-6">
      <div className="flex items-center gap-4">
        <Button asChild variant="ghost" size="icon">
          <Link href="/admin/documents">
            <ArrowLeft className="h-4 w-4" />
          </Link>
        </Button>
        <div>
          <h2 className="text-2xl font-bold text-foreground">Thêm văn bản mới</h2>
          <p className="text-muted-foreground">Tải lên văn bản, biểu mẫu mới</p>
        </div>
      </div>

<Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <FileText className="h-5 w-5" />
            Thông tin văn bản
          </CardTitle>
        </CardHeader>
        <CardContent>
          <form action={createDocument} className="space-y-6">
            <div className="grid gap-4 md:grid-cols-2">
              <div className="space-y-2 md:col-span-2">
                <Label htmlFor="title">Tên văn bản *</Label>
                <Input id="title" name="title" required placeholder="Nhập tên văn bản" />
              </div>

<div className="space-y-2">
                <Label htmlFor="category">Danh mục *</Label>
                <Select name="category" defaultValue="regulation">
                  <SelectTrigger>
                    <SelectValue placeholder="Chọn danh mục" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="regulation">Điều lệ - Quy chế</SelectItem>
                    <SelectItem value="form">Biểu mẫu</SelectItem>
                    <SelectItem value="guide">Hướng dẫn</SelectItem>
                    <SelectItem value="announcement">Thông báo</SelectItem>
                    <SelectItem value="other">Khác</SelectItem>
                  </SelectContent>
                </Select>
              </div>

<div className="space-y-2">
                <Label htmlFor="file_type">Loại file</Label>
                <Select name="file_type" defaultValue="pdf">
                  <SelectTrigger>
                    <SelectValue placeholder="Chọn loại file" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="pdf">PDF</SelectItem>
                    <SelectItem value="doc">Word (DOC/DOCX)</SelectItem>
                    <SelectItem value="xls">Excel (XLS/XLSX)</SelectItem>
                    <SelectItem value="other">Khác</SelectItem>
                  </SelectContent>
                </Select>
              </div>

<div className="space-y-2 md:col-span-2">
                <Label htmlFor="file_url">URL file *</Label>
                <Input id="file_url" name="file_url" required placeholder="https://..." />
                <p className="text-xs text-muted-foreground">
                  Tải file lên dịch vụ lưu trữ (Google Drive, Dropbox...) và dán link vào đây
                </p>
              </div>

<div className="flex justify-end gap-4">
              <Button asChild variant="outline" className="bg-transparent">
                <Link href="/admin/documents">Hủy</Link>
              </Button>
              <Button type="submit">Tạo văn bản</Button>
            </div>
          </form>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/documents/[id]/page.tsx" isMerged="true"
import { createClient } from "@/lib/supabase/server"
import { redirect, notFound } from "next/navigation"
import { revalidatePath } from "next/cache"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
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 { Switch } from "@/components/ui/switch"
import { ArrowLeft, FileText, Trash2 } from "lucide-react"
import Link from "next/link"
import type { Document } from "@/lib/types"

interface Props {
  params: Promise<{ id: string }>
}

async function updateDocument(formData: FormData) {
  "use server"
  const supabase = await createClient()

const id = formData.get("id") as string
  const title = formData.get("title") as string
  const description = formData.get("description") as string
  const file_url = formData.get("file_url") as string
  const file_type = formData.get("file_type") as string
  const category = formData.get("category") as string
  const document_number = (formData.get("document_number") as string) || null
  const issued_date = (formData.get("issued_date") as string) || null
  const is_published = formData.get("is_published") === "on"

const { error } = await supabase
    .from("documents")
    .update({
      title,
      description,
      file_url,
      file_type,
      category,
      document_number,
      issued_date,
      is_published,
      updated_at: new Date().toISOString(),
    })
    .eq("id", id)

if (!error) {
    revalidatePath("/admin/documents")
    redirect("/admin/documents")
  }
}

async function deleteDocument(formData: FormData) {
  "use server"
  const supabase = await createClient()
  const id = formData.get("id") as string

await supabase.from("documents").delete().eq("id", id)
  revalidatePath("/admin/documents")
  redirect("/admin/documents")
}

export default async function EditDocumentPage({ params }: Props) {
  const { id } = await params
  const supabase = await createClient()
  const {
    data: { user },
  } = await supabase.auth.getUser()

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

const { data: document } = await supabase.from("documents").select("*").eq("id", id).single()

if (!document) {
    notFound()
  }

const docData = document as Document

return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-4">
          <Button asChild variant="ghost" size="icon">
            <Link href="/admin/documents">
              <ArrowLeft className="h-4 w-4" />
            </Link>
          </Button>
          <div>
            <h2 className="text-2xl font-bold text-foreground">Chỉnh sửa văn bản</h2>
            <p className="text-muted-foreground line-clamp-1">{docData.title}</p>
          </div>
        </div>
        <form action={deleteDocument}>
          <input type="hidden" name="id" value={docData.id} />
          <Button type="submit" variant="destructive" size="sm" className="gap-2">
            <Trash2 className="h-4 w-4" />
            Xóa
          </Button>
        </form>
      </div>

<div className="space-y-2">
                <Label htmlFor="category">Danh mục *</Label>
                <Select name="category" defaultValue={docData.category}>
                  <SelectTrigger>
                    <SelectValue placeholder="Chọn danh mục" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="regulation">Điều lệ - Quy chế</SelectItem>
                    <SelectItem value="form">Biểu mẫu</SelectItem>
                    <SelectItem value="guide">Hướng dẫn</SelectItem>
                    <SelectItem value="announcement">Thông báo</SelectItem>
                    <SelectItem value="other">Khác</SelectItem>
                  </SelectContent>
                </Select>
              </div>

<div className="space-y-2">
                <Label htmlFor="file_type">Loại file</Label>
                <Select name="file_type" defaultValue={docData.file_type || "pdf"}>
                  <SelectTrigger>
                    <SelectValue placeholder="Chọn loại file" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="pdf">PDF</SelectItem>
                    <SelectItem value="doc">Word (DOC/DOCX)</SelectItem>
                    <SelectItem value="xls">Excel (XLS/XLSX)</SelectItem>
                    <SelectItem value="other">Khác</SelectItem>
                  </SelectContent>
                </Select>
              </div>

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 { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { useRouter } from "next/navigation"
import { useState } from "react"
import Link from "next/link"

export default function AdminLoginPage() {
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [confirmPassword, setConfirmPassword] = useState("")
  const [error, setError] = useState<string | null>(null)
  const [success, setSuccess] = useState<string | null>(null)
  const [isLoading, setIsLoading] = useState(false)
  const router = useRouter()

const handleLogin = async (e: React.FormEvent) => {
    e.preventDefault()
    const supabase = createClient()
    setIsLoading(true)
    setError(null)

try {
      const { error } = await supabase.auth.signInWithPassword({
        email,
        password,
      })
      if (error) throw error
      router.push("/admin")
      router.refresh()
    } catch (error: unknown) {
      setError(error instanceof Error ? error.message : "Đã xảy ra lỗi")
    } finally {
      setIsLoading(false)
    }
  }

const handleSignup = async (e: React.FormEvent) => {
    e.preventDefault()
    const supabase = createClient()
    setIsLoading(true)
    setError(null)
    setSuccess(null)

if (password !== confirmPassword) {
      setError("Mật khẩu xác nhận không khớp")
      setIsLoading(false)
      return
    }

if (password.length < 6) {
      setError("Mật khẩu phải có ít nhất 6 ký tự")
      setIsLoading(false)
      return
    }

try {
      const { error } = await supabase.auth.signUp({
        email,
        password,
        options: {
          emailRedirectTo: process.env.NEXT_PUBLIC_DEV_SUPABASE_REDIRECT_URL || `${window.location.origin}/admin`,
        },
      })
      if (error) throw error
      setSuccess("Đăng ký thành công! Vui lòng kiểm tra email để xác nhận tài khoản.")
      setEmail("")
      setPassword("")
      setConfirmPassword("")
    } catch (error: unknown) {
      setError(error instanceof Error ? error.message : "Đã xảy ra lỗi")
    } finally {
      setIsLoading(false)
    }
  }

return (
    <div className="flex min-h-screen w-full items-center justify-center bg-muted/30 p-6">
      <div className="w-full max-w-sm">
        <div className="mb-8 text-center">
          <Link href="/" className="inline-flex items-center gap-2">
            <div className="flex h-10 w-10 items-center justify-center rounded-full bg-primary">
              <span className="text-lg font-bold text-primary-foreground">HTF</span>
            </div>
            <span className="text-lg font-bold">Admin Panel</span>
          </Link>
        </div>
        <Card>
          <CardHeader>
            <CardTitle className="text-2xl">Quản trị viên</CardTitle>
            <CardDescription>Đăng nhập hoặc đăng ký tài khoản quản trị</CardDescription>
          </CardHeader>
          <CardContent>
            <Tabs defaultValue="login">
              <TabsList className="grid w-full grid-cols-2 mb-4">
                <TabsTrigger value="login">Đăng nhập</TabsTrigger>
                <TabsTrigger value="signup">Đăng ký</TabsTrigger>
              </TabsList>

<TabsContent value="login">
                <form onSubmit={handleLogin}>
                  <div className="flex flex-col gap-4">
                    <div className="space-y-2">
                      <Label htmlFor="login-email">Email</Label>
                      <Input
                        id="login-email"
                        type="email"
                        placeholder="admin@htf.vn"
                        required
                        value={email}
                        onChange={(e) => setEmail(e.target.value)}
                      />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="login-password">Mật khẩu</Label>
                      <Input
                        id="login-password"
                        type="password"
                        required
                        value={password}
                        onChange={(e) => setPassword(e.target.value)}
                      />
                    </div>
                    {error && <p className="text-sm text-destructive">{error}</p>}
                    <Button type="submit" className="w-full" disabled={isLoading}>
                      {isLoading ? "Đang đăng nhập..." : "Đăng nhập"}
                    </Button>
                  </div>
                </form>
              </TabsContent>

<TabsContent value="signup">
                <form onSubmit={handleSignup}>
                  <div className="flex flex-col gap-4">
                    <div className="space-y-2">
                      <Label htmlFor="signup-email">Email</Label>
                      <Input
                        id="signup-email"
                        type="email"
                        placeholder="admin@htf.vn"
                        required
                        value={email}
                        onChange={(e) => setEmail(e.target.value)}
                      />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="signup-password">Mật khẩu</Label>
                      <Input
                        id="signup-password"
                        type="password"
                        placeholder="Ít nhất 6 ký tự"
                        required
                        value={password}
                        onChange={(e) => setPassword(e.target.value)}
                      />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="confirm-password">Xác nhận mật khẩu</Label>
                      <Input
                        id="confirm-password"
                        type="password"
                        required
                        value={confirmPassword}
                        onChange={(e) => setConfirmPassword(e.target.value)}
                      />
                    </div>
                    {error && <p className="text-sm text-destructive">{error}</p>}
                    {success && <p className="text-sm text-green-600">{success}</p>}
                    <Button type="submit" className="w-full" disabled={isLoading}>
                      {isLoading ? "Đang đăng ký..." : "Đăng ký tài khoản"}
                    </Button>
                  </div>
                </form>
              </TabsContent>
            </Tabs>
          </CardContent>
        </Card>
        <p className="mt-4 text-center text-sm text-muted-foreground">
          <Link href="/" className="hover:underline">
            Quay về trang chủ
          </Link>
        </p>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/content/page.tsx" isMerged="true"
import { createClient } from "@/lib/supabase/server"
import { redirect } from "next/navigation"
import { ContentManagement } from "@/components/admin/content-management"

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

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

// Fetch events
  const { data: events } = await supabase.from("events").select("*").order("start_date", { ascending: false })

// Fetch documents
  const { data: documents } = await supabase.from("documents").select("*").order("created_at", { ascending: false })

return <ContentManagement initialEvents={events || []} initialDocuments={documents || []} />
}
[V0_FILE]typescriptreact:file="components/admin/content-management.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
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 { Switch } from "@/components/ui/switch"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
import { Calendar, FileText, Plus, Edit, Eye, Trash2, Download, Search } from "lucide-react"
import Link from "next/link"
import { createClient } from "@/lib/supabase/client"
import { useRouter } from "next/navigation"
import type { Event, Document } from "@/lib/types"

const eventTypeLabels: Record<string, string> = {
  competition: "Giải đấu",
  training: "Tập huấn",
  exam: "Thi đẳng",
  meeting: "Hội nghị",
  other: "Khác",
}

const categoryLabels: Record<string, string> = {
  regulation: "Điều lệ - Quy chế",
  form: "Biểu mẫu",
  guide: "Hướng dẫn",
  announcement: "Thông báo",
  other: "Khác",
}

interface ContentManagementProps {
  initialEvents: Event[]
  initialDocuments: Document[]
}

export function ContentManagement({ initialEvents, initialDocuments }: ContentManagementProps) {
  const router = useRouter()
  const supabase = createClient()

const [events, setEvents] = useState<Event[]>(initialEvents)
  const [documents, setDocuments] = useState<Document[]>(initialDocuments)
  const [eventSearch, setEventSearch] = useState("")
  const [documentSearch, setDocumentSearch] = useState("")
  const [isEventDialogOpen, setIsEventDialogOpen] = useState(false)
  const [isDocumentDialogOpen, setIsDocumentDialogOpen] = useState(false)
  const [editingEvent, setEditingEvent] = useState<Event | null>(null)
  const [editingDocument, setEditingDocument] = useState<Document | null>(null)
  const [isSubmitting, setIsSubmitting] = useState(false)

// Filter events
  const filteredEvents = events.filter(
    (event) =>
      event.title.toLowerCase().includes(eventSearch.toLowerCase()) ||
      event.location?.toLowerCase().includes(eventSearch.toLowerCase()),
  )

// Filter documents
  const filteredDocuments = documents.filter(
    (doc) =>
      doc.title.toLowerCase().includes(documentSearch.toLowerCase()) ||
      doc.document_number?.toLowerCase().includes(documentSearch.toLowerCase()),
  )

// Handle Event Submit
  async function handleEventSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault()
    setIsSubmitting(true)

const formData = new FormData(e.currentTarget)
    const title = formData.get("title") as string
    const slug = editingEvent?.slug || generateSlug(title) + "-" + Date.now()

const eventData = {
      title,
      slug,
      description: formData.get("description") as string,
      content: formData.get("content") as string,
      start_date: formData.get("start_date") as string,
      end_date: (formData.get("end_date") as string) || null,
      registration_deadline: (formData.get("registration_deadline") as string) || null,
      location: formData.get("location") as string,
      event_type: formData.get("event_type") as string,
      is_featured: formData.get("is_featured") === "on",
      is_published: formData.get("is_published") === "on",
    }

if (editingEvent) {
      const { data, error } = await supabase
        .from("events")
        .update(eventData)
        .eq("id", editingEvent.id)
        .select()
        .single()

if (!error && data) {
        setEvents(events.map((e) => (e.id === editingEvent.id ? data : e)))
      }
    } else {
      const { data, error } = await supabase.from("events").insert(eventData).select().single()

if (!error && data) {
        setEvents([data, ...events])
      }
    }

setIsSubmitting(false)
    setIsEventDialogOpen(false)
    setEditingEvent(null)
    router.refresh()
  }

// Handle Document Submit
  async function handleDocumentSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault()
    setIsSubmitting(true)

const formData = new FormData(e.currentTarget)

const documentData = {
      title: formData.get("title") as string,
      description: formData.get("description") as string,
      file_url: formData.get("file_url") as string,
      file_type: formData.get("file_type") as string,
      category: formData.get("category") as string,
      document_number: (formData.get("document_number") as string) || null,
      issued_date: (formData.get("issued_date") as string) || null,
      is_published: formData.get("is_published") === "on",
    }

if (editingDocument) {
      const { data, error } = await supabase
        .from("documents")
        .update(documentData)
        .eq("id", editingDocument.id)
        .select()
        .single()

if (!error && data) {
        setDocuments(documents.map((d) => (d.id === editingDocument.id ? data : d)))
      }
    } else {
      const { data, error } = await supabase.from("documents").insert(documentData).select().single()

if (!error && data) {
        setDocuments([data, ...documents])
      }
    }

setIsSubmitting(false)
    setIsDocumentDialogOpen(false)
    setEditingDocument(null)
    router.refresh()
  }

// Delete Event
  async function deleteEvent(id: string) {
    const { error } = await supabase.from("events").delete().eq("id", id)
    if (!error) {
      setEvents(events.filter((e) => e.id !== id))
      router.refresh()
    }
  }

// Delete Document
  async function deleteDocument(id: string) {
    const { error } = await supabase.from("documents").delete().eq("id", id)
    if (!error) {
      setDocuments(documents.filter((d) => d.id !== id))
      router.refresh()
    }
  }

return (
    <div className="space-y-6">
      <div>
        <h2 className="text-2xl font-bold text-foreground">Quản lý Nội dung</h2>
        <p className="text-muted-foreground">Quản lý hoạt động chuyên môn và văn bản</p>
      </div>

<Tabs defaultValue="events" className="space-y-6">
        <TabsList className="grid w-full grid-cols-2 lg:w-[400px]">
          <TabsTrigger value="events" className="gap-2">
            <Calendar className="h-4 w-4" />
            Hoạt động Chuyên môn
          </TabsTrigger>
          <TabsTrigger value="documents" className="gap-2">
            <FileText className="h-4 w-4" />
            Download Văn bản
          </TabsTrigger>
        </TabsList>

{/* Events Tab */}
        <TabsContent value="events" className="space-y-4">
          <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
            <div className="relative w-full sm:w-72">
              <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
              <Input
                placeholder="Tìm kiếm sự kiện..."
                value={eventSearch}
                onChange={(e) => setEventSearch(e.target.value)}
                className="pl-9"
              />
            </div>
            <Dialog
              open={isEventDialogOpen}
              onOpenChange={(open) => {
                setIsEventDialogOpen(open)
                if (!open) setEditingEvent(null)
              }}
            >
              <DialogTrigger asChild>
                <Button className="gap-2">
                  <Plus className="h-4 w-4" />
                  Thêm sự kiện
                </Button>
              </DialogTrigger>
              <DialogContent className="max-h-[90vh] overflow-y-auto sm:max-w-2xl">
                <DialogHeader>
                  <DialogTitle>{editingEvent ? "Chỉnh sửa sự kiện" : "Thêm sự kiện mới"}</DialogTitle>
                </DialogHeader>
                <form onSubmit={handleEventSubmit} className="space-y-4">
                  <div className="grid gap-4 md:grid-cols-2">
                    <div className="space-y-2 md:col-span-2">
                      <Label htmlFor="title">Tiêu đề *</Label>
                      <Input
                        id="title"
                        name="title"
                        required
                        defaultValue={editingEvent?.title}
                        placeholder="Nhập tiêu đề sự kiện"
                      />
                    </div>

<div className="flex justify-end gap-3 pt-4">
                    <Button
                      type="button"
                      variant="outline"
                      onClick={() => {
                        setIsEventDialogOpen(false)
                        setEditingEvent(null)
                      }}
                    >
                      Hủy
                    </Button>
                    <Button type="submit" disabled={isSubmitting}>
                      {isSubmitting ? "Đang lưu..." : editingEvent ? "Cập nhật" : "Tạo sự kiện"}
                    </Button>
                  </div>
                </form>
              </DialogContent>
            </Dialog>
          </div>

<Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Calendar className="h-5 w-5" />
                Danh sách sự kiện ({filteredEvents.length})
              </CardTitle>
            </CardHeader>
            <CardContent>
              {filteredEvents.length > 0 ? (
                <div className="overflow-x-auto">
                  <table className="w-full">
                    <thead>
                      <tr className="border-b text-left text-sm text-muted-foreground">
                        <th className="pb-3 font-medium">Tiêu đề</th>
                        <th className="pb-3 font-medium">Loại</th>
                        <th className="pb-3 font-medium">Ngày</th>
                        <th className="pb-3 font-medium">Trạng thái</th>
                        <th className="pb-3 font-medium text-right">Thao tác</th>
                      </tr>
                    </thead>
                    <tbody>
                      {filteredEvents.map((event) => (
                        <tr key={event.id} className="border-b last:border-0">
                          <td className="py-3">
                            <div className="font-medium">{event.title}</div>
                            <div className="text-sm text-muted-foreground">{event.location}</div>
                          </td>
                          <td className="py-3">
                            <Badge variant="outline">{eventTypeLabels[event.event_type]}</Badge>
                          </td>
                          <td className="py-3 text-sm">{new Date(event.start_date).toLocaleDateString("vi-VN")}</td>
                          <td className="py-3">
                            <div className="flex gap-1">
                              {event.is_featured && (
                                <Badge variant="secondary" className="text-xs">
                                  Nổi bật
                                </Badge>
                              )}
                              <Badge variant={event.is_published ? "default" : "outline"}>
                                {event.is_published ? "Đã đăng" : "Nháp"}
                              </Badge>
                            </div>
                          </td>
                          <td className="py-3">
                            <div className="flex justify-end gap-1">
                              <Button asChild variant="ghost" size="icon">
                                <Link href={`/hoat-dong/${event.slug}`} target="_blank">
                                  <Eye className="h-4 w-4" />
                                </Link>
                              </Button>
                              <Button
                                variant="ghost"
                                size="icon"
                                onClick={() => {
                                  setEditingEvent(event)
                                  setIsEventDialogOpen(true)
                                }}
                              >
                                <Edit className="h-4 w-4" />
                              </Button>
                              <AlertDialog>
                                <AlertDialogTrigger asChild>
                                  <Button
                                    variant="ghost"
                                    size="icon"
                                    className="text-destructive hover:text-destructive"
                                  >
                                    <Trash2 className="h-4 w-4" />
                                  </Button>
                                </AlertDialogTrigger>
                                <AlertDialogContent>
                                  <AlertDialogHeader>
                                    <AlertDialogTitle>Xác nhận xóa?</AlertDialogTitle>
                                    <AlertDialogDescription>
                                      Bạn có chắc muốn xóa sự kiện "{event.title}"? Hành động này không thể hoàn tác.
                                    </AlertDialogDescription>
                                  </AlertDialogHeader>
                                  <AlertDialogFooter>
                                    <AlertDialogCancel>Hủy</AlertDialogCancel>
                                    <AlertDialogAction
                                      onClick={() => deleteEvent(event.id)}
                                      className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
                                    >
                                      Xóa
                                    </AlertDialogAction>
                                  </AlertDialogFooter>
                                </AlertDialogContent>
                              </AlertDialog>
                            </div>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              ) : (
                <p className="py-8 text-center text-muted-foreground">
                  {eventSearch ? "Không tìm thấy sự kiện nào." : "Chưa có sự kiện nào."}
                </p>
              )}
            </CardContent>
          </Card>
        </TabsContent>

{/* Documents Tab */}
        <TabsContent value="documents" className="space-y-4">
          <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
            <div className="relative w-full sm:w-72">
              <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
              <Input
                placeholder="Tìm kiếm văn bản..."
                value={documentSearch}
                onChange={(e) => setDocumentSearch(e.target.value)}
                className="pl-9"
              />
            </div>
            <Dialog
              open={isDocumentDialogOpen}
              onOpenChange={(open) => {
                setIsDocumentDialogOpen(open)
                if (!open) setEditingDocument(null)
              }}
            >
              <DialogTrigger asChild>
                <Button className="gap-2">
                  <Plus className="h-4 w-4" />
                  Thêm văn bản
                </Button>
              </DialogTrigger>
              <DialogContent className="max-h-[90vh] overflow-y-auto sm:max-w-2xl">
                <DialogHeader>
                  <DialogTitle>{editingDocument ? "Chỉnh sửa văn bản" : "Thêm văn bản mới"}</DialogTitle>
                </DialogHeader>
                <form onSubmit={handleDocumentSubmit} className="space-y-4">
                  <div className="grid gap-4 md:grid-cols-2">
                    <div className="space-y-2 md:col-span-2">
                      <Label htmlFor="doc_title">Tên văn bản *</Label>
                      <Input
                        id="doc_title"
                        name="title"
                        required
                        defaultValue={editingDocument?.title}
                        placeholder="Nhập tên văn bản"
                      />
                    </div>

<div className="space-y-2">
                      <Label htmlFor="category">Danh mục *</Label>
                      <Select name="category" defaultValue={editingDocument?.category || "regulation"}>
                        <SelectTrigger>
                          <SelectValue placeholder="Chọn danh mục" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="regulation">Điều lệ - Quy chế</SelectItem>
                          <SelectItem value="form">Biểu mẫu</SelectItem>
                          <SelectItem value="guide">Hướng dẫn</SelectItem>
                          <SelectItem value="announcement">Thông báo</SelectItem>
                          <SelectItem value="other">Khác</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>

<div className="space-y-2">
                      <Label htmlFor="file_type">Loại file</Label>
                      <Select name="file_type" defaultValue={editingDocument?.file_type || "pdf"}>
                        <SelectTrigger>
                          <SelectValue placeholder="Chọn loại file" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="pdf">PDF</SelectItem>
                          <SelectItem value="doc">Word (DOC/DOCX)</SelectItem>
                          <SelectItem value="xls">Excel (XLS/XLSX)</SelectItem>
                          <SelectItem value="other">Khác</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>

<div className="space-y-2 md:col-span-2">
                      <Label htmlFor="file_url">URL file *</Label>
                      <Input
                        id="file_url"
                        name="file_url"
                        required
                        defaultValue={editingDocument?.file_url}
                        placeholder="https://..."
                      />
                      <p className="text-xs text-muted-foreground">
                        Tải file lên dịch vụ lưu trữ (Google Drive, Dropbox...) và dán link vào đây
                      </p>
                    </div>

<div className="flex justify-end gap-3 pt-4">
                    <Button
                      type="button"
                      variant="outline"
                      onClick={() => {
                        setIsDocumentDialogOpen(false)
                        setEditingDocument(null)
                      }}
                    >
                      Hủy
                    </Button>
                    <Button type="submit" disabled={isSubmitting}>
                      {isSubmitting ? "Đang lưu..." : editingDocument ? "Cập nhật" : "Tạo văn bản"}
                    </Button>
                  </div>
                </form>
              </DialogContent>
            </Dialog>
          </div>

<Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <FileText className="h-5 w-5" />
                Danh sách văn bản ({filteredDocuments.length})
              </CardTitle>
            </CardHeader>
            <CardContent>
              {filteredDocuments.length > 0 ? (
                <div className="overflow-x-auto">
                  <table className="w-full">
                    <thead>
                      <tr className="border-b text-left text-sm text-muted-foreground">
                        <th className="pb-3 font-medium">Tên văn bản</th>
                        <th className="pb-3 font-medium">Danh mục</th>
                        <th className="pb-3 font-medium">Lượt tải</th>
                        <th className="pb-3 font-medium">Trạng thái</th>
                        <th className="pb-3 font-medium text-right">Thao tác</th>
                      </tr>
                    </thead>
                    <tbody>
                      {filteredDocuments.map((doc) => (
                        <tr key={doc.id} className="border-b last:border-0">
                          <td className="py-3">
                            <div className="font-medium line-clamp-1">{doc.title}</div>
                            {doc.document_number && (
                              <div className="text-sm text-muted-foreground">Số: {doc.document_number}</div>
                            )}
                          </td>
                          <td className="py-3">
                            <Badge variant="outline">{categoryLabels[doc.category]}</Badge>
                          </td>
                          <td className="py-3">
                            <div className="flex items-center gap-1 text-sm">
                              <Download className="h-3 w-3" />
                              {doc.download_count}
                            </div>
                          </td>
                          <td className="py-3">
                            <Badge variant={doc.is_published ? "default" : "outline"}>
                              {doc.is_published ? "Đã đăng" : "Nháp"}
                            </Badge>
                          </td>
                          <td className="py-3">
                            <div className="flex justify-end gap-1">
                              <Button asChild variant="ghost" size="icon">
                                <a href={doc.file_url} target="_blank" rel="noopener noreferrer">
                                  <Eye className="h-4 w-4" />
                                </a>
                              </Button>
                              <Button
                                variant="ghost"
                                size="icon"
                                onClick={() => {
                                  setEditingDocument(doc)
                                  setIsDocumentDialogOpen(true)
                                }}
                              >
                                <Edit className="h-4 w-4" />
                              </Button>
                              <AlertDialog>
                                <AlertDialogTrigger asChild>
                                  <Button
                                    variant="ghost"
                                    size="icon"
                                    className="text-destructive hover:text-destructive"
                                  >
                                    <Trash2 className="h-4 w-4" />
                                  </Button>
                                </AlertDialogTrigger>
                                <AlertDialogContent>
                                  <AlertDialogHeader>
                                    <AlertDialogTitle>Xác nhận xóa?</AlertDialogTitle>
                                    <AlertDialogDescription>
                                      Bạn có chắc muốn xóa văn bản "{doc.title}"? Hành động này không thể hoàn tác.
                                    </AlertDialogDescription>
                                  </AlertDialogHeader>
                                  <AlertDialogFooter>
                                    <AlertDialogCancel>Hủy</AlertDialogCancel>
                                    <AlertDialogAction
                                      onClick={() => deleteDocument(doc.id)}
                                      className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
                                    >
                                      Xóa
                                    </AlertDialogAction>
                                  </AlertDialogFooter>
                                </AlertDialogContent>
                              </AlertDialog>
                            </div>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              ) : (
                <p className="py-8 text-center text-muted-foreground">
                  {documentSearch ? "Không tìm thấy văn bản nào." : "Chưa có văn bản nào."}
                </p>
              )}
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/admin/admin-sidebar.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import Link from "next/link"
import { usePathname } from "next/navigation"
import {
  LayoutDashboard,
  Calendar,
  FileText,
  Newspaper,
  Users,
  MessageSquare,
  Settings,
  Home,
  UserCheck,
  FolderOpen,
} from "lucide-react"
import { cn } from "@/lib/utils"

const navigation = [
  { name: "Dashboard", href: "/admin", icon: LayoutDashboard },
  { name: "Quản lý Nội dung", href: "/admin/content", icon: FolderOpen },
  { name: "Sự kiện", href: "/admin/events", icon: Calendar },
  { name: "Tin tức", href: "/admin/news", icon: Newspaper },
  { name: "Văn bản", href: "/admin/documents", icon: FileText },
  { name: "Đăng ký", href: "/admin/registrations", icon: UserCheck },
  { name: "Thành viên BCH", href: "/admin/members", icon: Users },
  { name: "Liên hệ", href: "/admin/contacts", icon: MessageSquare },
  { name: "Cài đặt", href: "/admin/settings", icon: Settings },
]

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

return (
    <aside className="hidden w-64 flex-col border-r bg-card lg:flex">
      {/* Logo */}
      <div className="flex h-16 items-center gap-2 border-b px-6">
        <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary">
          <span className="text-sm font-bold text-primary-foreground">HTF</span>
        </div>
        <span className="font-semibold">Admin Panel</span>
      </div>

{/* Navigation */}
      <nav className="flex-1 space-y-1 p-4">
        {navigation.map((item) => {
          const isActive = pathname === item.href || (item.href !== "/admin" && pathname.startsWith(item.href))
          return (
            <Link
              key={item.name}
              href={item.href}
              className={cn(
                "flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors",
                isActive
                  ? "bg-primary text-primary-foreground"
                  : "text-muted-foreground hover:bg-muted hover:text-foreground",
              )}
            >
              <item.icon className="h-5 w-5" />
              {item.name}
            </Link>
          )
        })}
      </nav>

{/* Back to site */}
      <div className="border-t p-4">
        <Link
          href="/"
          className="flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
        >
          <Home className="h-5 w-5" />
          Về trang chủ
        </Link>
      </div>
    </aside>
  )
}
[V0_FILE]png:file="public/images/logo-htf.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Logo%20HTF-dFA2teykK6XZmTGpUlf6wS9tW7JhQW.png" isMerged="true"
[V0_FILE]typescriptreact:file="components/layout/header.tsx" isEdit="true" isMerged="true"
"use client"

import Link from "next/link"
import Image from "next/image"
import { useState } from "react"
import { Menu, X } from "lucide-react"
import { Button } from "@/components/ui/button"

const navigation = [
  { name: "Trang chủ", href: "/" },
  { name: "Giới thiệu", href: "/gioi-thieu" },
  { name: "Hoạt động", href: "/hoat-dong" },
  { name: "Văn bản", href: "/van-ban" },
  { name: "Liên hệ", href: "/lien-he" },
]

export function Header() {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)

return (
    <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
      <nav className="container mx-auto flex h-16 items-center justify-between px-4">
        <Link href="/" className="flex items-center">
          <Image
            src="/images/logo-htf.png"
            alt="Liên đoàn Taekwondo TP. Hồ Chí Minh"
            width={180}
            height={60}
            className="h-12 w-auto"
            priority
          />
        </Link>

{/* Desktop Navigation */}
        <div className="hidden items-center gap-1 md:flex">
          {navigation.map((item) => (
            <Link
              key={item.name}
              href={item.href}
              className="rounded-md px-3 py-2 text-sm font-medium text-foreground transition-colors hover:bg-muted hover:text-primary"
            >
              {item.name}
            </Link>
          ))}
        </div>

{/* Mobile Menu Button */}
        <Button variant="ghost" size="icon" className="md:hidden" onClick={() => setMobileMenuOpen(!mobileMenuOpen)}>
          {mobileMenuOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
        </Button>
      </nav>

{/* Mobile Navigation */}
      {mobileMenuOpen && (
        <div className="border-t bg-background md:hidden">
          <div className="container mx-auto space-y-1 px-4 py-3">
            {navigation.map((item) => (
              <Link
                key={item.name}
                href={item.href}
                className="block rounded-md px-3 py-2 text-base font-medium text-foreground hover:bg-muted"
                onClick={() => setMobileMenuOpen(false)}
              >
                {item.name}
              </Link>
            ))}
          </div>
        </div>
      )}
    </header>
  )
}
[V0_FILE]typescriptreact:file="components/layout/footer.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import Link from "next/link"
import Image from "next/image"
import { Facebook, Mail, Phone, MapPin } from "lucide-react"

export function Footer() {
  return (
    <footer className="border-t bg-muted/30">
      <div className="container mx-auto px-4 py-12">
        <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-4">
          {/* Logo & Description */}
          <div className="space-y-4">
            <Link href="/" className="inline-block">
              <Image
                src="/images/logo-htf.png"
                alt="Liên đoàn Taekwondo TP. Hồ Chí Minh"
                width={160}
                height={53}
                className="h-10 w-auto"
              />
            </Link>
            <p className="text-sm text-muted-foreground leading-relaxed">
              Tổ chức xã hội - nghề nghiệp về Taekwondo tại Thành phố Hồ Chí Minh, hoạt động dưới sự quản lý của Sở Văn
              hóa và Thể thao TP.HCM.
            </p>
          </div>

{/* Quick Links */}
          <div>
            <h3 className="mb-4 text-sm font-semibold uppercase tracking-wider">Liên kết nhanh</h3>
            <ul className="space-y-2 text-sm">
              <li>
                <Link href="/gioi-thieu" className="text-muted-foreground hover:text-primary transition-colors">
                  Giới thiệu
                </Link>
              </li>
              <li>
                <Link href="/hoat-dong" className="text-muted-foreground hover:text-primary transition-colors">
                  Hoạt động chuyên môn
                </Link>
              </li>
              <li>
                <Link href="/van-ban" className="text-muted-foreground hover:text-primary transition-colors">
                  Văn bản - Biểu mẫu
                </Link>
              </li>
              <li>
                <Link href="/lien-he" className="text-muted-foreground hover:text-primary transition-colors">
                  Liên hệ
                </Link>
              </li>
            </ul>
          </div>

{/* Contact Info */}
          <div>
            <h3 className="mb-4 text-sm font-semibold uppercase tracking-wider">Liên hệ</h3>
            <ul className="space-y-3 text-sm">
              <li className="flex items-start gap-2">
                <MapPin className="mt-0.5 h-4 w-4 shrink-0 text-primary" />
                <span className="text-muted-foreground">Số 02 Lê Đại Hành, Phường Phú Thọ, TP. Hồ Chí Minh</span>
              </li>
              <li className="flex items-center gap-2">
                <Phone className="h-4 w-4 text-primary" />
                <a href="tel:0833567890" className="text-muted-foreground hover:text-primary transition-colors">
                  0833 567 890
                </a>
              </li>
              <li className="flex items-center gap-2">
                <Mail className="h-4 w-4 text-primary" />
                <a
                  href="mailto:hcmctkd2015@gmail.com"
                  className="text-muted-foreground hover:text-primary transition-colors"
                >
                  hcmctkd2015@gmail.com
                </a>
              </li>
            </ul>
          </div>

{/* Social Links - Removed "Tra cứu mã hội viên" button */}
          <div>
            <h3 className="mb-4 text-sm font-semibold uppercase tracking-wider">Kết nối</h3>
            <div className="flex gap-3">
              <a
                href="https://www.facebook.com/hcmctaekwondo"
                target="_blank"
                rel="noopener noreferrer"
                className="flex h-10 w-10 items-center justify-center rounded-full bg-primary text-primary-foreground transition-transform hover:scale-110"
              >
                <Facebook className="h-5 w-5" />
              </a>
            </div>
          </div>
        </div>

{/* Copyright */}
        <div className="mt-8 border-t pt-8 text-center">
          <p className="text-sm text-muted-foreground">
            © {new Date().getFullYear()} Liên đoàn Taekwondo TP. Hồ Chí Minh. All rights reserved.
          </p>
        </div>
      </div>
    </footer>
  )
}
[V0_FILE]typescriptreact:file="components/contact/contact-form.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
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 { CheckCircle, Loader2 } from "lucide-react"

const subjects = [
  { value: "Thi thăng đẳng", label: "Thi thăng đẳng" },
  { value: "Tập huấn trọng tài", label: "Tập huấn trọng tài" },
  { value: "Đào tạo HLV", label: "Đào tạo HLV" },
  { value: "Hợp tác sự kiện", label: "Hợp tác sự kiện" },
  { value: "Khác", label: "Khác" },
]

const APPS_SCRIPT_WEB_APP_URL =
  "https://script.google.com/macros/s/AKfycbzmCtNy3AIgZkhCK85fO_bv87d1UkFLM6TzjbcDMbfWFuPj3B9blyI_DMuuCp8gZ12cfg/exec"

interface ContactFormProps {
  eventSlug?: string
  eventTitle?: string
}

export function ContactForm({ eventSlug, eventTitle }: ContactFormProps) {
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [isSuccess, setIsSuccess] = useState(false)
  const [error, setError] = useState<string | null>(null)

const [selectedSubject, setSelectedSubject] = useState(eventSlug ? "Hợp tác sự kiện" : "")

async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault()
    setIsSubmitting(true)
    setError(null)

const formData = new FormData(e.currentTarget)

let message = formData.get("message") as string
    if (eventTitle) {
      message = `[Đăng ký sự kiện: ${eventTitle}]\n\n${message}`
    }

const data = {
      name: formData.get("full_name") as string,
      phone: formData.get("phone") as string,
      email: formData.get("email") as string,
      company: (formData.get("club") as string) || "",
      services: formData.get("subject") as string,
      message: message,
    }

try {
      await fetch(APPS_SCRIPT_WEB_APP_URL, {
        method: "POST",
        mode: "no-cors",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(data),
      })

// no-cors => không thể đọc response; giả định thành công
      setIsSuccess(true)
    } catch (err) {
      console.error("Contact form error:", err)
      setError("Có lỗi kết nối. Vui lòng thử lại sau.")
    } finally {
      setIsSubmitting(false)
    }
  }

if (isSuccess) {
    return (
      <div className="rounded-lg bg-green-50 p-8 text-center">
        <CheckCircle className="mx-auto mb-4 h-16 w-16 text-green-500" />
        <h3 className="mb-2 text-xl font-semibold text-green-800">
          {eventTitle ? "Đăng ký thành công!" : "Gửi tin nhắn thành công!"}
        </h3>
        <p className="text-green-700">
          {eventTitle
            ? "Cảm ơn bạn đã đăng ký. Chúng tôi sẽ liên hệ xác nhận trong thời gian sớm nhất."
            : "Cảm ơn bạn đã liên hệ. Chúng tôi sẽ phản hồi trong thời gian sớm nhất."}
        </p>
      </div>
    )
  }

return (
    <form onSubmit={handleSubmit} className="space-y-4">
      <div className="grid gap-4 sm:grid-cols-2">
        <div className="space-y-2">
          <Label htmlFor="full_name">Họ và tên *</Label>
          <Input id="full_name" name="full_name" required placeholder="Nguyễn Văn A" />
        </div>

<div className="space-y-2">
          <Label htmlFor="email">Email *</Label>
          <Input id="email" name="email" type="email" required placeholder="email@example.com" />
        </div>
      </div>

<div className="grid gap-4 sm:grid-cols-2">
        <div className="space-y-2">
          <Label htmlFor="phone">Số điện thoại *</Label>
          <Input id="phone" name="phone" type="tel" required placeholder="0901234567" />
        </div>

<div className="space-y-2">
          <Label htmlFor="subject">Dịch vụ quan tâm *</Label>
          <Select name="subject" required value={selectedSubject} onValueChange={setSelectedSubject}>
            <SelectTrigger id="subject">
              <SelectValue placeholder="-- Chọn dịch vụ --" />
            </SelectTrigger>
            <SelectContent>
              {subjects.map((subject) => (
                <SelectItem key={subject.value} value={subject.value}>
                  {subject.label}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>
      </div>

<div className="space-y-2">
        <Label htmlFor="message">{eventTitle ? "Ghi chú / Thông tin bổ sung" : "Nội dung"} *</Label>
        <Textarea
          id="message"
          name="message"
          required
          placeholder={
            eventTitle
              ? "Nhập số lượng VĐV đăng ký, nội dung thi đấu, hoặc thông tin khác..."
              : "Nhập nội dung tin nhắn..."
          }
          rows={5}
        />
      </div>

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

<Button type="submit" className="w-full" disabled={isSubmitting}>
        {isSubmitting ? (
          <>
            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
            Đang gửi...
          </>
        ) : eventTitle ? (
          "Gửi đăng ký"
        ) : (
          "Gửi tin nhắn"
        )}
      </Button>
    </form>
  )
}
[V0_FILE]typescriptreact:file="unavailable@/@v0/app/gioi-thieu/page.tsx" isMerged="true"
Năm 2026 đánh dấu mốc quan trọng với việc tổ chức Đại hội Đại biểu Nhiệm kỳ I (2026 - 2031) sáp n, mở ra một giai đoạn phát triển mới với cơ cấu tổ chức hoàn thiện và định hướng chiến lược rõ ràng.
[V0_FILE]typescriptreact:file="app/lien-he/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import { Header } from "@/components/layout/header"
import { Footer } from "@/components/layout/footer"
import { ContactForm } from "@/components/contact/contact-form"
import { Card, CardContent } from "@/components/ui/card"
import { MapPin, Phone, Mail, Clock, Facebook } from "lucide-react"

export const metadata = {
  title: "Liên hệ | Liên đoàn Taekwondo TP.HCM",
  description: "Liên hệ với Liên đoàn Taekwondo Thành phố Hồ Chí Minh để được hỗ trợ và giải đáp thắc mắc",
}

const contactInfo = [
  {
    icon: MapPin,
    title: "Địa chỉ",
    content: "Số 02 Lê Đại Hành, Phường Phú Thọ, TP. Hồ Chí Minh",
    link: "https://maps.google.com/?q=2+Le+Dai+Hanh,+Phu+Tho,+Ho+Chi+Minh",
  },
  {
    icon: Phone,
    title: "Điện thoại",
    content: "0833 567 890",
    link: "tel:0833567890",
  },
  {
    icon: Mail,
    title: "Email",
    content: "hcmctkd2015@gmail.com",
    link: "mailto:hcmctkd2015@gmail.com",
  },
  {
    icon: Clock,
    title: "Giờ làm việc",
    content: "Thứ 2 - Thứ 6: 8:00 - 17:00",
    link: null,
  },
]

export default async function ContactPage({
  searchParams,
}: {
  searchParams: Promise<{ event?: string; eventTitle?: string }>
}) {
  const { event, eventTitle } = await searchParams

return (
    <div className="flex min-h-screen flex-col">
      <Header />
      <main className="flex-1">
        {/* Hero Section */}
        <section className="bg-primary py-16 text-primary-foreground">
          <div className="container mx-auto px-4 text-center">
            <h1 className="text-4xl font-bold md:text-5xl">Liên hệ</h1>
            <p className="mx-auto mt-4 max-w-2xl text-primary-foreground/80">
              Liên hệ với chúng tôi để được hỗ trợ và giải đáp mọi thắc mắc
            </p>
          </div>
        </section>

{/* Contact Section */}
        <section className="py-16" id="form">
          <div className="container mx-auto px-4">
            <div className="grid gap-8 lg:grid-cols-2">
              {/* Contact Info */}
              <div className="space-y-6">
                <div>
                  <h2 className="text-2xl font-bold text-foreground">Thông tin liên hệ</h2>
                  <p className="mt-2 text-muted-foreground">
                    Liên đoàn Taekwondo TP. Hồ Chí Minh luôn sẵn sàng hỗ trợ và giải đáp mọi thắc mắc của bạn.
                  </p>
                </div>

<div className="grid gap-4 sm:grid-cols-2">
                  {contactInfo.map((item, index) => (
                    <Card key={index}>
                      <CardContent className="flex items-start gap-3 p-4">
                        <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary/10">
                          <item.icon className="h-5 w-5 text-primary" />
                        </div>
                        <div>
                          <h3 className="font-semibold text-foreground">{item.title}</h3>
                          {item.link ? (
                            <a
                              href={item.link}
                              target={item.link.startsWith("http") ? "_blank" : undefined}
                              rel={item.link.startsWith("http") ? "noopener noreferrer" : undefined}
                              className="text-sm text-muted-foreground hover:text-primary transition-colors"
                            >
                              {item.content}
                            </a>
                          ) : (
                            <p className="text-sm text-muted-foreground">{item.content}</p>
                          )}
                        </div>
                      </CardContent>
                    </Card>
                  ))}
                </div>

{/* Social Links */}
                <div className="pt-4">
                  <h3 className="mb-4 font-semibold text-foreground">Kết nối với chúng tôi</h3>
                  <div className="flex gap-3">
                    <a
                      href="https://www.facebook.com/hcmctaekwondo"
                      target="_blank"
                      rel="noopener noreferrer"
                      className="flex h-12 w-12 items-center justify-center rounded-full bg-primary text-primary-foreground transition-transform hover:scale-110"
                    >
                      <Facebook className="h-6 w-6" />
                    </a>
                  </div>
                </div>

{/* Map Placeholder */}
                <div className="mt-6">
                  <div className="aspect-[4/3] overflow-hidden rounded-lg bg-muted">
                    <iframe
                      src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3919.5023!2d106.6654!3d10.7721!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMTDCsDQ2JzE5LjYiTiAxMDbCsDM5JzU1LjQiRQ!5e0!3m2!1svi!2s!4v1234567890"
                      width="100%"
                      height="100%"
                      style={{ border: 0 }}
                      allowFullScreen
                      loading="lazy"
                      referrerPolicy="no-referrer-when-downgrade"
                      title="Bản đồ Liên đoàn Taekwondo TP.HCM"
                    />
                  </div>
                </div>
              </div>

{/* Contact Form */}
              <div>
                <Card>
                  <CardContent className="p-6">
                    {eventTitle && (
                      <div className="mb-6 rounded-lg bg-primary/10 p-4">
                        <p className="text-sm font-medium text-primary">Đăng ký tham gia sự kiện:</p>
                        <p className="mt-1 font-semibold text-foreground">{decodeURIComponent(eventTitle)}</p>
                      </div>
                    )}
                    <h2 className="mb-6 text-2xl font-bold text-foreground">
                      {eventTitle ? "Đăng ký tham gia" : "Gửi tin nhắn"}
                    </h2>
                    <ContactForm
                      eventSlug={event}
                      eventTitle={eventTitle ? decodeURIComponent(eventTitle) : undefined}
                    />
                  </CardContent>
                </Card>
              </div>
            </div>
          </div>
        </section>
      </main>
      <Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/home/news-section.tsx" isMerged="true"
import Link from "next/link"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { ArrowRight, Clock } from "lucide-react"
import type { News } from "@/lib/types"

interface NewsSectionProps {
  news: News[]
}

export function NewsSection({ news }: NewsSectionProps) {
  if (news.length === 0) return null

// Get first 2 news items for featured display
  const featuredNews = news.slice(0, 2)
  const otherNews = news.slice(2)

return (
    <section className="bg-muted/30 py-16">
      <div className="container mx-auto px-4">
        <div className="mb-10 flex items-end justify-between">
          <div>
            <h2 className="text-3xl font-bold text-foreground">Tin tức</h2>
            <p className="mt-2 text-muted-foreground">Cập nhật thông tin mới nhất từ Liên đoàn Taekwondo Việt Nam </p>
          </div>
          <Button asChild variant="outline" className="hidden gap-2 md:inline-flex bg-transparent">
            <Link href="/tin-tuc">
              Xem tất cả
              <ArrowRight className="h-4 w-4" />
            </Link>
          </Button>
        </div>

{/* Two Featured News Cards - Same Size */}
        <div className="grid gap-6 md:grid-cols-2">
          {featuredNews.map((item) => (
            <Card key={item.id} className="group overflow-hidden">
              <div className="aspect-[16/9] overflow-hidden bg-muted">
                <img
                  src={item.image_url || "/placeholder.svg?height=400&width=600&query=taekwondo news event"}
                  alt={item.title}
                  className="h-full w-full object-cover transition-transform group-hover:scale-105"
                />
              </div>
              <CardContent className="p-6">
                <div className="mb-3 flex items-center gap-2 text-sm text-muted-foreground">
                  <Clock className="h-4 w-4" />
                  <span>
                    {new Date(item.published_at || item.created_at).toLocaleDateString("vi-VN", {
                      day: "numeric",
                      month: "long",
                      year: "numeric",
                    })}
                  </span>
                </div>
                <h3 className="mb-2 text-xl font-bold text-foreground group-hover:text-primary transition-colors line-clamp-2">
                  {item.title}
                </h3>
                <p className="mb-4 text-muted-foreground line-clamp-2">{item.excerpt}</p>
                <Link
                  href={`/tin-tuc/${item.slug}`}
                  className="inline-flex items-center gap-1 font-medium text-primary hover:underline"
                >
                  Đọc tiếp
                  <ArrowRight className="h-4 w-4" />
                </Link>
              </CardContent>
            </Card>
          ))}
        </div>

{/* Other News - Smaller Cards */}
        {otherNews.length > 0 && (
          <div className="mt-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
            {otherNews.map((item) => (
              <Card key={item.id} className="group flex overflow-hidden">
                <div className="h-24 w-24 shrink-0 overflow-hidden bg-muted sm:h-28 sm:w-28">
                  <img
                    src={item.image_url || "/placeholder.svg?height=200&width=200&query=taekwondo"}
                    alt={item.title}
                    className="h-full w-full object-cover transition-transform group-hover:scale-105"
                  />
                </div>
                <CardContent className="flex flex-col justify-center p-4">
                  <div className="mb-1 text-xs text-muted-foreground">
                    {new Date(item.published_at || item.created_at).toLocaleDateString("vi-VN", {
                      day: "numeric",
                      month: "short",
                      year: "numeric",
                    })}
                  </div>
                  <h3 className="font-semibold text-foreground group-hover:text-primary transition-colors line-clamp-2 text-sm">
                    {item.title}
                  </h3>
                </CardContent>
              </Card>
            ))}
          </div>
        )}

<div className="mt-8 text-center md:hidden">
          <Button asChild variant="outline" className="gap-2 bg-transparent">
            <Link href="/tin-tuc">
              Xem tất cả tin tức
              <ArrowRight className="h-4 w-4" />
            </Link>
          </Button>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="app/dai-hoi/page.tsx" isMerged="true"
"use client"

import Link from "next/link"
import Image from "next/image"
import { FileSignature, ListOrdered, FileText, Baseline as ChartLine, Users, Search, Coins, Book, UserCheck, Vote, FileCheck, MessageSquare, Phone, ChevronRight } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { useSearchParams } from 'next/navigation';
import { Suspense } from 'react';

const documents = [
  {
    id: "sec-cong-van",
    title: "1. Công văn cho phép tổ chức",
    icon: FileSignature,
    description: "Văn bản chấp thuận chủ trương tổ chức Đại hội của Sở Nội vụ Thành phố Hồ Chí Minh.",
    viewLink: "https://drive.google.com/file/d/1QIR4zLVxMCzQsMWOwnBX-ziEWvd2jZWU/view?usp=sharing",
  },
  {
    id: "sec-chuong-trinh",
    title: "2. Chương trình Đại hội",
    icon: ListOrdered,
    description: "Khung thời gian làm việc và nguyên tắc tổ chức.",
    viewLink: "https://docs.google.com/document/d/1n_RMHzNiueaWjyhNFPydLyV4svBCQHTWm_MZM2cLcGc/edit?usp=sharing",
    downloadLink: "https://docs.google.com/document/d/1n_RMHzNiueaWjyhNFPydLyV4svBCQHTWm_MZM2cLcGc/export?format=pdf",
  },
  {
    id: "sec-quy-che",
    title: "3. Quy chế tổ chức Đại hội",
    icon: FileText,
    description: "Khung thời gian làm việc và nguyên tắc tổ chức.",
    viewLink: "https://docs.google.com/document/d/14pDjpmPKbNBFKMm5Qdf6hsEj3APlHmpgGfKwKXvGAmY/edit?usp=sharing",
    downloadLink: "https://docs.google.com/document/d/14pDjpmPKbNBFKMm5Qdf6hsEj3APlHmpgGfKwKXvGAmY/export?format=pdf",
  },
  {
    id: "sec-bao-cao",
    title: "4. Báo cáo Tổng kết & Phương hướng",
    icon: ChartLine,
    description: "Tổng kết hoạt động Giai đoạn 2023 - 2025 & Phương hướng Nhiệm kỳ I (2026 - 2031).",
    viewLink: "https://docs.google.com/document/d/1DwR6OkHChjmRs_XNckHHs1kOud1nFkVd61Aa5-piNCQ/edit?usp=sharing",
    downloadLink: "https://docs.google.com/document/d/1DwR6OkHChjmRs_XNckHHs1kOud1nFkVd61Aa5-piNCQ/export?format=pdf",
  },
  {
    id: "sec-kiem-diem-bch",
    title: "5. Kiểm điểm Ban Chấp hành",
    icon: Users,
    description: "",
    viewLink: "https://docs.google.com/document/d/1y8avNyVxROJRhw0tALteouu92MDZbMTr6f_ziZI32ok/edit?usp=sharing",
    downloadLink: "https://docs.google.com/document/d/1y8avNyVxROJRhw0tALteouu92MDZbMTr6f_ziZI32ok/export?format=pdf",
  },
  {
    id: "sec-kiem-diem-bkt",
    title: "6. Kiểm điểm Ban Kiểm tra",
    icon: Search,
    description: "",
    viewLink: "https://docs.google.com/document/d/12QWsVh4QegJ_35yuPnBZToXGXSYj4Py0j4sSzdsA0tQ/edit?usp=sharing",
    downloadLink: "https://docs.google.com/document/d/12QWsVh4QegJ_35yuPnBZToXGXSYj4Py0j4sSzdsA0tQ/export?format=pdf",
  },
  {
    id: "sec-tai-chinh",
    title: "7. Báo cáo Tài chính",
    icon: Coins,
    description: "",
    viewLinks: [
      { label: "Liên đoàn Taekwondo TPHCM (cũ)", url: "https://docs.google.com/spreadsheets/d/1wu_GNkQhmBbxu_aGPPbucg-5n-SH2amZXsUCcwdh-3E/edit?usp=sharing" },
      { label: "Liên đoàn Taekwondo Bình Dương (cũ)", url: "https://docs.google.com/document/d/1tLo-6CGURxURqVVSq9ENY0vNo3NdQB6TLgN_6BR8zNY/edit?usp=sharing" },
      { label: "Hội Taekwondo BRVT (cũ)", url: "https://drive.google.com/file/d/1az8FxwO7ECTTzaxqtSW0NYsnI8A7xDQG/view?usp=sharing" },
    ],
  },
  {
    id: "sec-dieu-le",
    title: "8. Điều lệ Nhiệm kỳ I (2026-2031)",
    icon: Book,
    description: "",
    viewLink: "/dai-hoi/du-thao",
    downloadLink: "https://docs.google.com/document/d/18FfzbMa3JHvZGhtqkdp5NO49FavoNQ3Zvi-p6yaIlUQ/export?format=pdf",
    isInternal: true,
  },
  {
    id: "sec-nhan-su",
    title: "9. Đề án & Danh sách Nhân sự",
    icon: UserCheck,
    description: "Tiêu chuẩn, cơ cấu và danh sách ứng cử viên BCH, BKT.",
    viewLink: "https://docs.google.com/document/d/17WixJ_JBlZEunnLuWErEnOY_qlfjIZjz1tLkeLTmGIg/edit?usp=sharing",
    downloadLink: "https://docs.google.com/document/d/17WixJ_JBlZEunnLuWErEnOY_qlfjIZjz1tLkeLTmGIg/export?format=pdf",
  },
  {
    id: "sec-quyche-baucu",
    title: "10. Quy chế Bầu cử Ban Chấp hành, Ban Kiểm tra",
    icon: Vote,
    description: "Quy định bầu cử Ban Chấp hành, Ban Kiểm tra Nhiệm kỳ I (2026 - 2031).",
    viewLink: "https://docs.google.com/document/d/1Apb5SX5KVGfbVKebdfB47d3KkhKjKJJkiYkhmuiBY7U/edit?usp=sharing",
    downloadLink: "https://docs.google.com/document/d/1Apb5SX5KVGfbVKebdfB47d3KkhKjKJJkiYkhmuiBY7U/export?format=pdf",
  },
  {
    id: "sec-nghi-quyet",
    title: "11. Nghị quyết BCH Nhiệm kỳ I (2026 - 2031)",
    icon: FileCheck,
    description: "Tiêu chuẩn, cơ cấu và danh sách ứng cử viên BCH, BKT.",
    viewLink: "https://docs.google.com/document/d/1ucsKAwG1AWLiAK4GA1slq3TNiM80fYeeaSGDVkWE2RI/edit?usp=sharing",
    downloadLink: "https://docs.google.com/document/d/1ucsKAwG1AWLiAK4GA1slq3TNiM80fYeeaSGDVkWE2RI/export?format=pdf",
  },
  {
    id: "sec-thao-luan",
    title: "12. Nội dung thảo luận và quyết định tại Đại hội",
    icon: MessageSquare,
    description: "Các nội dung cần thảo luận và quyết định tại Đại hội",
    viewLink: "https://docs.google.com/document/d/1Z9xkmqXpxACsjoDuAzmsyucceE5vurrUpsaxjexTVNc/edit?usp=sharing",
    downloadLink: "https://docs.google.com/document/d/1Z9xkmqXpxACsjoDuAzmsyucceE5vurrUpsaxjexTVNc/export?format=pdf",
  },
]

function Loading() {
  return null;
}

export default function DaiHoiPage() {
  return (
    <Suspense fallback={<Loading />}>
      <div className="min-h-screen bg-muted/30">
        {/* Header */}
        <div className="bg-gradient-to-r from-[#003366] to-primary py-4 shadow-lg">
          <div className="container mx-auto px-4">
            <div className="flex items-center justify-between">
              <Link href="/" className="flex items-center gap-3">
                <Image
                  src="/images/logo-htf.png"
                  alt="Logo HTF"
                  width={50}
                  height={50}
                  className="rounded bg-white p-1"
                />
                <div className="text-white">
                  <div className="text-sm font-semibold uppercase tracking-wider">Liên Đoàn Taekwondo</div>
                  <div className="text-xs opacity-80">Thành phố Hồ Chí Minh</div>
                </div>
              </Link>
              <nav className="hidden gap-1 md:flex">
                <Link href="/dai-hoi" className="rounded px-4 py-2 text-sm font-medium text-yellow-300 hover:bg-white/10">
                  Văn kiện
                </Link>
                <Link href="/dai-hoi/ke-hoach" className="rounded px-4 py-2 text-sm font-medium text-white/90 hover:bg-white/10 hover:text-yellow-300">
                  Kế hoạch
                </Link>
              </nav>
            </div>
          </div>
        </div>

{/* Hero */}
        <div className="container mx-auto px-4 py-10">
          <div className="mb-10 text-center">
            <h1 className="text-2xl font-bold uppercase text-primary md:text-3xl">
              Đại hội Đại biểu Nhiệm kỳ I (2026 - 2031)
            </h1>
            <p className="mt-2 text-sm italic text-muted-foreground">
              Tài liệu lưu hành nội bộ phục vụ Đại hội
            </p>
            <div className="mx-auto mt-4 h-1 w-24 bg-primary" />
          </div>

<div className="grid gap-8 lg:grid-cols-[1fr_300px]">
            {/* Documents List */}
            <div className="space-y-6">
              {documents.map((doc) => (
                <Card key={doc.id} id={doc.id} className="scroll-mt-24 border-l-4 border-l-primary">
                  <CardHeader className="pb-2">
                    <CardTitle className="flex items-center gap-2 text-lg text-primary">
                      <doc.icon className="h-5 w-5" />
                      {doc.title}
                    </CardTitle>
                  </CardHeader>
                  <CardContent>
                    {doc.description && (
                      <p className="mb-4 text-sm text-muted-foreground">{doc.description}</p>
                    )}
                    <div className="flex flex-wrap gap-2">
                      {doc.viewLinks ? (
                        doc.viewLinks.map((link, idx) => (
                          <Button key={idx} asChild variant="outline" size="sm" className="bg-transparent">
                            <a href={link.url} target="_blank" rel="noopener noreferrer">
                              <Search className="mr-1 h-4 w-4" />
                              {link.label}
                            </a>
                          </Button>
                        ))
                      ) : doc.isInternal ? (
                        <Button asChild variant="outline" size="sm" className="bg-transparent">
                          <Link href={doc.viewLink || "#"}>
                            <Search className="mr-1 h-4 w-4" />
                            Xem điều lệ
                          </Link>
                        </Button>
                      ) : (
                        <Button asChild variant="outline" size="sm" className="bg-transparent">
                          <a href={doc.viewLink} target="_blank" rel="noopener noreferrer">
                            <Search className="mr-1 h-4 w-4" />
                            Xem văn bản
                          </a>
                        </Button>
                      )}
                      {doc.downloadLink && (
                        <Button asChild size="sm">
                          <a href={doc.downloadLink} target="_blank" rel="noopener noreferrer">
                            <ChevronRight className="mr-1 h-4 w-4" />
                            Tải về PDF
                          </a>
                        </Button>
                      )}
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>

{/* Sidebar */}
            <div className="hidden lg:block">
              <div className="sticky top-24 rounded-lg bg-background p-4 shadow-sm">
                <div className="mb-4 border-b pb-2 font-semibold uppercase text-foreground">
                  Mục lục tài liệu
                </div>
                <nav className="space-y-1">
                  {documents.map((doc) => (
                    <a
                      key={doc.id}
                      href={`#${doc.id}`}
                      className="block rounded px-3 py-2 text-sm text-muted-foreground transition-colors hover:bg-primary/10 hover:text-primary"
                    >
                      {doc.title}
                    </a>
                  ))}
                </nav>
              </div>
            </div>
          </div>
        </div>

{/* Support Widget */}
        <div className="fixed bottom-6 right-6 z-50 flex items-center gap-3">
          <div className="hidden rounded-full bg-background px-4 py-2 text-sm font-medium shadow-lg md:block">
            Gặp khó khăn khi tải tài liệu?
          </div>
          <a
            href="tel:0833567890"
            className="flex h-14 w-14 items-center justify-center rounded-full bg-blue-500 text-white shadow-lg transition-transform hover:scale-110"
            title="Liên hệ hỗ trợ"
          >
            <Phone className="h-6 w-6" />
          </a>
        </div>

{/* Footer */}
        <footer className="mt-10 bg-foreground py-4 text-center text-sm text-background">
          © 2026 Liên đoàn Taekwondo TP.HCM. All rights reserved.
        </footer>
      </div>
    </Suspense>
  )
}
[V0_FILE]typescriptreact:file="app/dai-hoi/ke-hoach/page.tsx" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import Link from "next/link"
import Image from "next/image"

interface DataItem {
  type: string
  text?: string
  style?: string
  isBold?: boolean
  data?: string[][]
}

export default function KeHoachPage() {
  const [content, setContent] = useState<string>("")
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

const API_URL = "https://script.google.com/macros/s/AKfycbzi29dYIqK7zeUYm7dQ8GgWObXVNCE2gmWjRj100-ggi6sn5b5_ULBULnSY-f4UdvDxyw/exec"

const currentDate = new Date()
  const formattedDate = `${currentDate.getDate()} tháng ${currentDate.getMonth() + 1} năm ${currentDate.getFullYear()}`

useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch(API_URL)
        const result = await response.json()

if (result.status === "success") {
          renderContent(result.data)
        } else {
          setError(`Lỗi: ${result.message}`)
        }
      } catch (err) {
        setError(`Lỗi kết nối: ${err}`)
      } finally {
        setLoading(false)
      }
    }

fetchData()
  }, [])

function renderContent(items: DataItem[]) {
    let html = ""

items.forEach((item) => {
      // XỬ LÝ TEXT
      if (item.type === "paragraph") {
        const text = item.text?.trim() || ""
        const textUpper = text.toUpperCase()

// Bỏ qua header bị lặp
        if (text.includes("CỘNG HOÀ XÃ HỘI") || text.includes("Độc lập - Tự do") || text.includes("Số: /KH-HTF")) {
          return
        }

// Tiêu đề chính
        if (item.style === "TITLE" || textUpper === "KẾ HOẠCH" || textUpper === "THÔNG BÁO" || textUpper === "QUYẾT ĐỊNH") {
          html += `<h1 class="doc-title">${text}</h1>`
        }
        // Tiêu đề phụ
        else if (text.startsWith("Tổ chức Đại hội") || text.startsWith("Về việc") || item.style === "SUBTITLE") {
          html += `<h2 class="doc-subtitle">${text.replace(/\n/g, "<br>")}</h2>`
        }
        // Section (I. II. III.)
        else if (text.match(/^[IVX]+\.\s/)) {
          let iconClass = "fa-star"
          if (textUpper.includes("MỤC ĐÍCH")) iconClass = "fa-bullseye"
          if (textUpper.includes("THỜI GIAN")) iconClass = "fa-calendar-alt"
          if (textUpper.includes("THÀNH PHẦN")) iconClass = "fa-users"
          if (textUpper.includes("NHIỆM VỤ") || textUpper.includes("BAN TỔ CHỨC")) iconClass = "fa-tasks"
          if (textUpper.includes("CHƯƠNG TRÌNH")) iconClass = "fa-list-alt"
          if (textUpper.includes("KINH PHÍ") || textUpper.includes("TÀI LIỆU")) iconClass = "fa-file-invoice-dollar"
          if (textUpper.includes("BÁO CÁO") || textUpper.includes("KẾT QUẢ")) iconClass = "fa-paper-plane"

html += `<div class="section-title"><i class="fas ${iconClass}"></i> ${text}</div>`
        }
        // Mục con hoặc in đậm ngắn
        else if (text.match(/^\d+\.\d+/) || (item.isBold && text.length < 150)) {
          html += `<div class="sub-header">${text}</div>`
        }
        // Chữ ký / Nơi nhận
        else if (text.includes("TM. BAN CHẤP HÀNH") || text.includes("Nơi nhận:")) {
          let style = ""
          if (text.includes("TM.") || text.includes("CHỦ TỊCH") || text.includes("THƯ KÝ")) {
            style = "text-align: center; font-weight: bold;"
          } else if (text.includes("Nơi nhận") || text.trim().startsWith("-")) {
            style = "font-size: 12px; font-style: italic;"
          }
          html += `<div style="${style}">${text}</div>`
        }
        // Văn bản thường
        else {
          html += `<p class="doc-text${item.isBold ? " bold-text" : ""}">${text}</p>`
        }
      }

// XỬ LÝ BẢNG
      else if (item.type === "table") {
        const checkStr = JSON.stringify(item.data).toUpperCase()
        if (checkStr.includes("CỘNG HOÀ XÃ HỘI") || checkStr.includes("ĐỘC LẬP - TỰ DO") || checkStr.includes("KH-HTF")) {
          return
        }

let tableHtml = '<div class="table-responsive"><table><tbody>'
        item.data?.forEach((row, rowIndex) => {
          tableHtml += "<tr>"
          row.forEach((cellText) => {
            const tag = rowIndex === 0 ? "th" : "td"
            let iconHTML = ""
            if (rowIndex > 0) {
              const ct = cellText.toLowerCase()
              if (ct.includes("đón tiếp")) iconHTML = '<i class="fas fa-door-open td-icon"></i>'
              else if (ct.includes("khai mạc")) iconHTML = '<i class="fas fa-flag td-icon"></i>'
              else if (ct.includes("báo cáo")) iconHTML = '<i class="fas fa-file-alt td-icon"></i>'
              else if (ct.includes("bầu cử")) iconHTML = '<i class="fas fa-vote-yea td-icon"></i>'
              else if (ct.includes("phát biểu")) iconHTML = '<i class="fas fa-microphone td-icon"></i>'
              else if (ct.includes("thảo luận")) iconHTML = '<i class="fas fa-comments td-icon"></i>'
            }
            tableHtml += `<${tag}>${iconHTML}${cellText.replace(/\n/g, "<br>")}</${tag}>`
          })
          tableHtml += "</tr>"
        })
        tableHtml += "</tbody></table></div>"
        html += tableHtml
      }

// XỬ LÝ LIST
      else if (item.type === "list_item") {
        html += `<li>${item.text}</li>`
      }
    })

setContent(html)
  }

return (
    <div className="min-h-screen bg-[#f0f2f5] p-5">
      <link
        rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
      />

{loading ? (
        <div className="py-20 text-center italic text-[#003366]">
          <i className="fas fa-spinner fa-spin" /> Đang kết nối văn kiện...
        </div>
      ) : error ? (
        <div className="py-20 text-center text-red-500">{error}</div>
      ) : (
        <div className="document-container">
          {/* Header */}
          <div className="doc-header">
            <div className="header-left">
              <h3>ỦY BAN NHÂN DÂN<br />THÀNH PHỐ HỒ CHÍ MINH</h3>
              <p>LIÊN ĐOÀN TAEKWONDO</p>
              <div style={{ fontSize: "12px", marginTop: "5px" }}>Số: 01/KH-HTF</div>
            </div>
            <div className="header-right">
              <h3>CỘNG HOÀ XÃ HỘI CHỦ NGHĨA VIỆT NAM</h3>
              <div className="motto">Độc lập - Tự do - Hạnh phúc</div>
              <div className="date-line">TP. Hồ Chí Minh, ngày {formattedDate}</div>
            </div>
          </div>

{/* Navigation */}
          <div className="mb-6 flex justify-center gap-4">
            <Link
              href="/dai-hoi"
              className="rounded bg-[#003366] px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-[#004488]"
            >
              ← Quay lại Văn kiện
            </Link>
          </div>

{/* Content */}
          <div
            className="dynamic-content"
            dangerouslySetInnerHTML={{ __html: content }}
          />
        </div>
      )}

.doc-header {
          display: flex;
          justify-content: space-between;
          margin-bottom: 20px;
          position: relative;
          z-index: 1;
        }

.header-left,
        .header-right {
          text-align: center;
        }

.header-left h3,
        .header-right h3 {
          font-family: "Merriweather", serif;
          font-size: 13px;
          margin: 0;
          font-weight: 700;
          text-transform: uppercase;
        }

.header-left p {
          margin: 5px 0 0 0;
          font-weight: bold;
          font-size: 14px;
          text-decoration: underline;
        }

.header-right .motto {
          font-size: 13px;
          font-weight: bold;
          border-bottom: 1px solid #000;
          display: inline-block;
          padding-bottom: 3px;
        }

.date-line {
          text-align: right;
          font-style: italic;
          font-size: 14px;
          margin-top: 10px;
        }

.doc-title {
          font-family: "Merriweather", serif;
          color: #cc0000;
          font-size: 28px;
          margin: 30px 0 15px 0;
          text-transform: uppercase;
          text-align: center;
          letter-spacing: 1px;
          font-weight: 900;
          text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
        }

.doc-subtitle {
          font-family: "Merriweather", serif;
          font-size: 18px;
          color: #003366;
          margin-top: 0;
          font-weight: 700;
          text-transform: uppercase;
          text-align: center;
          margin-bottom: 40px;
          line-height: 1.4;
        }

.section-title {
          font-family: "Merriweather", serif;
          font-size: 16px;
          font-weight: 900;
          color: #003366;
          text-transform: uppercase;
          border-bottom: 2px solid #e0e0e0;
          padding-bottom: 5px;
          margin-top: 25px;
          margin-bottom: 15px;
          display: flex;
          align-items: center;
        }

.section-title i {
          margin-right: 10px;
          color: #cc0000;
        }

.doc-text {
          margin-bottom: 10px;
          text-align: justify;
        }

.bold-text {
          font-weight: bold;
        }

.sub-header {
          font-weight: bold;
          color: #333;
          margin-top: 15px;
          margin-bottom: 5px;
        }

.table-responsive {
          overflow-x: auto;
          margin-top: 15px;
          border-radius: 8px;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
          margin-bottom: 20px;
        }

table {
          width: 100%;
          border-collapse: collapse;
          font-size: 14px;
          background: white;
        }

th {
          background-color: #003366;
          color: white;
          padding: 12px;
          text-align: left;
          text-transform: uppercase;
          font-weight: 600;
          font-size: 13px;
        }

td {
          padding: 12px;
          border-bottom: 1px solid #e0e0e0;
          vertical-align: top;
        }

tr:nth-child(even) {
          background-color: #f8f9fa;
        }

tr:hover {
          background-color: #eef2f7;
        }

.td-icon {
          color: #cc0000;
          margin-right: 8px;
        }

@media (max-width: 600px) {
          .doc-header {
            flex-direction: column;
            align-items: center;
            gap: 20px;
          }

.date-line {
            text-align: center;
          }

.document-container {
            padding: 20px;
          }
        }
      `}</style>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dai-hoi/du-thao/page.tsx" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import Link from "next/link"
import Image from "next/image"
import { Menu, X } from "lucide-react"
import { Button } from "@/components/ui/button"

interface TocItem {
  id: string
  title: string
  isChapter: boolean
}

export default function DuThaoPage() {
  const [content, setContent] = useState<string>("")
  const [toc, setToc] = useState<TocItem[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [sidebarOpen, setSidebarOpen] = useState(false)

const API_URL = "https://script.google.com/macros/s/AKfycby-TKs28MY1rAHfB0aMcLX0SOmw2QHVDyvZMGFPDHraGVCZkfmiwQYFcag7ggzfsgTl/exec"

useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch(API_URL)
        const data = await response.json()

if (data.status === "success") {
          renderContent(data.content)
        } else {
          setError(`Lỗi server: ${data.message}`)
        }
      } catch (err) {
        setError(`Không thể tải dữ liệu: ${err}`)
      } finally {
        setLoading(false)
      }
    }

fetchData()
  }, [])

function renderContent(text: string) {
    if (!text) return

const lines = text.split("\n")
    let htmlContent = ""
    const tocItems: TocItem[] = []
    let inArticle = false

lines.forEach((line, index) => {
      line = line.trim()
      if (!line) return

if (line.match(/^Chương\s+[IVX0-9]+/i)) {
        if (inArticle) {
          htmlContent += "</div>"
          inArticle = false
        }
        const id = `pos-${index}`
        htmlContent += `<h2 id="${id}" class="chapter-display">${line}</h2>`
        tocItems.push({ id, title: line, isChapter: true })
      } else if (line.match(/^Điều\s+\d+\./i)) {
        if (inArticle) {
          htmlContent += "</div>"
        }
        const id = `pos-${index}`
        htmlContent += `<div id="${id}" class="article-card"><div class="article-title">${line}</div>`
        inArticle = true
        let shortTitle = line.split(".").slice(0, 2).join(".")
        if (shortTitle.length > 35) shortTitle = shortTitle.substring(0, 35) + "..."
        tocItems.push({ id, title: shortTitle, isChapter: false })
      } else {
        if (!line.includes("Dự thảo") && !line.includes("LIÊN ĐOÀN") && !line.includes("NHIỆM KỲ")) {
          htmlContent += inArticle
            ? `<p class="content-text">${line}</p>`
            : `<p class="bold-center">${line}</p>`
        }
      }
    })

if (inArticle) htmlContent += "</div>"
    setContent(htmlContent)
    setToc(tocItems)
  }

function scrollToId(id: string) {
    const element = document.getElementById(id)
    if (element) {
      element.scrollIntoView({ behavior: "smooth", block: "start" })
      setSidebarOpen(false)
    }
  }

return (
    <div className="min-h-screen bg-[#f4f6f8]">
      {/* Header */}
      <header className="fixed left-0 right-0 top-0 z-50 flex h-[60px] items-center border-b-[3px] border-[#CE1126] bg-[#003893] px-4 shadow-md">
        <Button
          variant="ghost"
          size="icon"
          className="mr-4 text-white hover:bg-white/10 lg:hidden"
          onClick={() => setSidebarOpen(!sidebarOpen)}
        >
          <Menu className="h-6 w-6" />
        </Button>
        <Link href="/dai-hoi" className="mr-4">
          <Image
            src="/images/logo-htf.png"
            alt="Logo HTF"
            width={40}
            height={40}
            className="rounded bg-white p-0.5"
          />
        </Link>
        <h1 className="flex-1 truncate font-['Oswald',sans-serif] text-sm font-medium uppercase text-white md:text-base">
          Dự thảo Điều lệ Liên đoàn Taekwondo TP.HCM Nhiệm kỳ I (2026-2031)
        </h1>
      </header>

{/* Overlay */}
      {sidebarOpen && (
        <div
          className="fixed inset-0 z-40 bg-black/50 lg:hidden"
          onClick={() => setSidebarOpen(false)}
        />
      )}

{/* Layout */}
      <div className="flex pt-[60px]">
        {/* Sidebar - Fixed/Sticky with scroll */}
        <nav
          className={`fixed left-0 top-[60px] z-50 h-[calc(100vh-60px)] w-[280px] max-w-[300px] overflow-y-auto border-r bg-white p-5 shadow-lg transition-transform lg:sticky lg:top-[60px] lg:z-auto lg:block lg:h-[calc(100vh-60px)] lg:translate-x-0 lg:shadow-none ${
            sidebarOpen ? "translate-x-0" : "-translate-x-full"
          }`}
        >
          <div className="mb-4 flex items-center justify-between border-b-2 border-black pb-2 font-['Oswald',sans-serif] text-lg font-medium text-[#CE1126] lg:justify-start">
            <span>MỤC LỤC</span>
            <Button
              variant="ghost"
              size="icon"
              className="lg:hidden"
              onClick={() => setSidebarOpen(false)}
            >
              <X className="h-5 w-5" />
            </Button>
          </div>
          <ul className="space-y-1">
            {toc.map((item) => (
              <li key={item.id}>
                <button
                  onClick={() => scrollToId(item.id)}
                  className={`block w-full cursor-pointer rounded border-l-[3px] border-transparent px-3 py-2 text-left text-sm transition-all hover:border-l-[#003893] hover:bg-[#e3f2fd] hover:font-medium hover:text-[#003893] ${
                    item.isChapter
                      ? "mt-4 bg-[#eee] font-bold uppercase text-black"
                      : "text-[#555]"
                  }`}
                >
                  {item.title}
                </button>
              </li>
            ))}
          </ul>
        </nav>

{/* Main Content */}
        <main className="min-h-[calc(100vh-60px)] flex-1 p-4 lg:p-8">
          {loading ? (
            <div className="flex flex-col items-center justify-center py-20">
              <div className="h-12 w-12 animate-spin rounded-full border-4 border-[#003893] border-t-transparent" />
              <p className="mt-4 text-[#003893]">Đang kết nối dữ liệu...</p>
            </div>
          ) : error ? (
            <div className="py-20 text-center text-red-500">
              <h3 className="text-xl font-bold">Không thể tải dữ liệu</h3>
              <p className="mt-2">{error}</p>
            </div>
          ) : (
            <div
              className="du-thao-content"
              dangerouslySetInnerHTML={{ __html: content }}
            />
          )}

<footer className="mt-10 border-t pt-5 text-center text-sm text-muted-foreground">
            © 2026 HTF - Powered by Vercel & Google Apps Script
          </footer>
        </main>
      </div>

.article-card {
          background: white;
          border-radius: 8px;
          padding: 25px;
          margin-bottom: 20px;
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
          border-left: 5px solid #111111;
          scroll-margin-top: 80px;
          position: relative;
        }

.article-card::after {
          content: "";
          position: absolute;
          top: 0;
          right: 0;
          width: 0;
          height: 0;
          border-style: solid;
          border-width: 0 30px 30px 0;
          border-color: transparent #CE1126 transparent transparent;
          opacity: 0.8;
        }

.article-title {
          color: #CE1126;
          font-weight: 700;
          font-size: 1.1rem;
          margin-bottom: 15px;
          border-bottom: 1px solid #eee;
          padding-bottom: 10px;
        }

.content-text {
          text-align: justify;
          margin-bottom: 10px;
        }

.bold-center {
          text-align: center;
          font-weight: bold;
          color: #003893;
          margin: 20px 0;
        }
      `}</style>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/tin-tuc/[slug]/page.tsx" isMerged="true"
import { createClient } from "@/lib/supabase/server"
import { notFound } from "next/navigation"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { ArrowLeft, Calendar, Share2 } from "lucide-react"
import Link from "next/link"
import type { News } from "@/lib/types"

interface Props {
  params: Promise<{ slug: string }>
}

export async function generateMetadata({ params }: Props) {
  const { slug } = await params
  const supabase = await createClient()
  const { data: news } = await supabase
    .from("news")
    .select("title, excerpt")
    .eq("slug", slug)
    .eq("is_published", true)
    .single()

if (!news) {
    return { title: "Không tìm thấy tin tức" }
  }

return {
    title: `${news.title} | Liên đoàn Taekwondo TP.HCM`,
    description: news.excerpt,
  }
}

export default async function NewsDetailPage({ params }: Props) {
  const { slug } = await params
  const supabase = await createClient()

const { data: news } = await supabase.from("news").select("*").eq("slug", slug).eq("is_published", true).single()

if (!news) {
    notFound()
  }

const newsData = news as News

// Fetch related news
  const { data: relatedNews } = await supabase
    .from("news")
    .select("id, title, slug, image_url, published_at")
    .eq("is_published", true)
    .neq("id", newsData.id)
    .limit(3)

return (
    <main className="min-h-screen bg-background">
      {/* Hero */}
      <section className="relative h-[40vh] min-h-[300px] bg-primary">
        {newsData.image_url && (
          <img
            src={newsData.image_url || "/placeholder.svg"}
            alt={newsData.title}
            className="absolute inset-0 h-full w-full object-cover opacity-30"
          />
        )}
        <div className="absolute inset-0 bg-gradient-to-t from-primary/90 to-transparent" />
        <div className="container relative mx-auto flex h-full flex-col justify-end px-4 pb-8">
          <Button
            asChild
            variant="ghost"
            size="sm"
            className="mb-4 w-fit text-primary-foreground/80 hover:text-primary-foreground hover:bg-primary-foreground/10"
          >
            <Link href="/">
              <ArrowLeft className="mr-2 h-4 w-4" />
              Trở về trang chủ
            </Link>
          </Button>
          {newsData.category && (
            <Badge className="mb-3 w-fit bg-secondary text-secondary-foreground">{newsData.category}</Badge>
          )}
          <h1 className="max-w-3xl text-3xl font-bold text-primary-foreground md:text-4xl">{newsData.title}</h1>
          <div className="mt-4 flex items-center gap-4 text-sm text-primary-foreground/80">
            <div className="flex items-center gap-1">
              <Calendar className="h-4 w-4" />
              <span>
                {new Date(newsData.published_at || newsData.created_at).toLocaleDateString("vi-VN", {
                  day: "numeric",
                  month: "long",
                  year: "numeric",
                })}
              </span>
            </div>
          </div>
        </div>
      </section>

{/* Content */}
      <section className="py-12">
        <div className="container mx-auto px-4">
          <div className="mx-auto max-w-3xl">
            {newsData.excerpt && (
              <p className="mb-8 text-lg font-medium text-muted-foreground leading-relaxed">{newsData.excerpt}</p>
            )}
            <div
              className="prose prose-lg max-w-none dark:prose-invert"
              dangerouslySetInnerHTML={{ __html: newsData.content || "" }}
            />

{/* Share */}
            <div className="mt-12 flex items-center gap-4 border-t pt-8">
              <span className="text-sm text-muted-foreground">Chia sẻ:</span>
              <Button variant="outline" size="icon" className="h-9 w-9 bg-transparent">
                <Share2 className="h-4 w-4" />
              </Button>
            </div>
          </div>

{/* Related News */}
          {relatedNews && relatedNews.length > 0 && (
            <div className="mt-16">
              <h2 className="mb-6 text-2xl font-bold text-foreground">Tin tức liên quan</h2>
              <div className="grid gap-6 md:grid-cols-3">
                {relatedNews.map(
                  (item: {
                    id: string
                    title: string
                    slug: string
                    image_url: string | null
                    published_at: string | null
                  }) => (
                    <Link key={item.id} href={`/tin-tuc/${item.slug}`}>
                      <div className="group overflow-hidden rounded-lg border bg-card">
                        <div className="aspect-[16/9] overflow-hidden bg-muted">
                          <img
                            src={item.image_url || "/placeholder.svg?height=200&width=300&query=taekwondo"}
                            alt={item.title}
                            className="h-full w-full object-cover transition-transform group-hover:scale-105"
                          />
                        </div>
                        <div className="p-4">
                          <h3 className="font-semibold text-foreground group-hover:text-primary transition-colors line-clamp-2">
                            {item.title}
                          </h3>
                          <p className="mt-1 text-xs text-muted-foreground">
                            {item.published_at ? new Date(item.published_at).toLocaleDateString("vi-VN") : ""}
                          </p>
                        </div>
                      </div>
                    </Link>
                  ),
                )}
              </div>
            </div>
          )}
        </div>
      </section>
    </main>
  )
}
[V0_FILE]typescriptreact:file="components/documents/document-card.tsx" isMerged="true"
"use client"

import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { FileText, Download, Calendar, Eye } from "lucide-react"
import { createClient } from "@/lib/supabase/client"
import type { Document } from "@/lib/types"

interface DocumentCardProps {
  document: Document
}

const categoryLabels: Record<string, string> = {
  regulation: "Quy định",
  form: "Biểu mẫu",
  guide: "Hướng dẫn",
  announcement: "Thông báo",
  training: "Đào tạo",
  exam: "Tập huấn",
  event: "Sự kiện",
  other: "Khác",
}

const categoryColors: Record<string, string> = {
  regulation: "bg-primary text-primary-foreground",
  form: "bg-secondary text-secondary-foreground",
  guide: "bg-chart-3 text-white",
  announcement: "bg-chart-4 text-foreground",
  training: "bg-blue-600 text-white",
  exam: "bg-green-600 text-white",
  event: "bg-amber-500 text-white",
  other: "bg-muted text-muted-foreground",
}

function formatFileSize(bytes: number | null): string {
  if (!bytes) return ""
  if (bytes < 1024) return `${bytes} B`
  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
}

export function DocumentCard({ document }: DocumentCardProps) {
  async function handleDownload() {
    // Increment download count
    const supabase = createClient()
    await supabase
      .from("documents")
      .update({ download_count: document.download_count + 1 })
      .eq("id", document.id)

// Open file URL
    window.open(document.file_url, "_blank")
  }

return (
    <Card className="transition-shadow hover:shadow-md">
      <CardContent className="flex items-center gap-4 p-4">
        {/* Icon */}
        <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-muted">
          <FileText className="h-6 w-6 text-primary" />
        </div>

{/* Content */}
        <div className="flex-1 min-w-0">
          <div className="mb-1 flex flex-wrap items-center gap-2">
            <Badge variant="outline" className={`${categoryColors[document.category]} border-0 text-xs`}>
              {categoryLabels[document.category]}
            </Badge>
            {document.document_number && (
              <span className="text-xs text-muted-foreground">Số: {document.document_number}</span>
            )}
          </div>
          <h3 className="font-semibold text-foreground truncate">{document.title}</h3>
          {document.description && (
            <p className="text-sm text-muted-foreground line-clamp-1 mt-0.5">{document.description}</p>
          )}
          <div className="mt-2 flex flex-wrap items-center gap-3 text-xs text-muted-foreground">
            {document.issued_date && (
              <div className="flex items-center gap-1">
                <Calendar className="h-3 w-3" />
                <span>
                  {new Date(document.issued_date).toLocaleDateString("vi-VN", {
                    day: "numeric",
                    month: "short",
                    year: "numeric",
                  })}
                </span>
              </div>
            )}
            {document.file_size && <span>{formatFileSize(document.file_size)}</span>}
            <div className="flex items-center gap-1">
              <Eye className="h-3 w-3" />
              <span>{document.download_count} lượt tải</span>
            </div>
          </div>
        </div>

{/* Download/View Button */}
        <Button onClick={handleDownload} variant="outline" size="sm" className="shrink-0 gap-2 bg-transparent">
          <Eye className="h-4 w-4" />
          <span className="hidden sm:inline">
            {document.title.includes("Điều lệ") 
              ? "Xem điều lệ" 
              : document.title.includes("Quy định") 
                ? "Xem quy định" 
                : document.title.includes("Đại hội") 
                  ? "Văn kiện Đại hội"
                  : document.category === "form" 
                    ? "Xem thông báo" 
                    : "Tải xuống"}
          </span>
        </Button>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/hoat-dong/page.tsx" isMerged="true"
import { createClient } from "@/lib/supabase/server"
import { Header } from "@/components/layout/header"
import { Footer } from "@/components/layout/footer"
import { EventCard } from "@/components/activities/event-card"
import { CountdownBanner } from "@/components/activities/countdown-banner"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import type { Event } from "@/lib/types"

export const metadata = {
  title: "Hoạt động chuyên môn | Liên đoàn Taekwondo TP.HCM",
  description: "Lịch hoạt động, thi đấu, tập huấn và thi thăng đẳng của Liên đoàn Taekwondo TP. Hồ Chí Minh",
}

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

// Fetch all upcoming events
  const { data: upcomingEvents } = await supabase
    .from("events")
    .select("*")
    .eq("is_published", true)
    .gte("start_date", new Date().toISOString())
    .order("start_date", { ascending: true })

// Fetch past events
  const { data: pastEvents } = await supabase
    .from("events")
    .select("*")
    .eq("is_published", true)
    .lt("start_date", new Date().toISOString())
    .order("start_date", { ascending: false })
    .limit(10)

const upcoming = (upcomingEvents as Event[]) || []
  const past = (pastEvents as Event[]) || []

// Group upcoming events by type
  const competitions = upcoming.filter((e) => e.event_type === "competition")
  const trainings = upcoming.filter((e) => e.event_type === "training")
  const exams = upcoming.filter((e) => e.event_type === "exam")
  const meetings = upcoming.filter((e) => e.event_type === "meeting")

return (
    <div className="flex min-h-screen flex-col">
      <Header />
      <main className="flex-1">
        {/* Hero Section */}
        <section className="bg-primary py-16 text-primary-foreground">
          <div className="container mx-auto px-4 text-center">
            <h1 className="text-4xl font-bold md:text-5xl">Hoạt động chuyên môn</h1>
            <p className="mx-auto mt-4 max-w-2xl text-primary-foreground/80">
              Lịch hoạt động, giải đấu, tập huấn và thi thăng đẳng năm 2026
            </p>
          </div>
        </section>

{/* Countdown Banner */}
        {featuredEvent && <CountdownBanner event={featuredEvent as Event} />}

{/* Events Tabs */}
        <section className="py-16">
          <div className="container mx-auto px-4">
            <Tabs defaultValue="all" className="w-full">
              <TabsList className="mb-8 flex h-auto flex-wrap justify-start gap-2 bg-transparent p-0">
                <TabsTrigger
                  value="all"
                  className="rounded-full border data-[state=active]:bg-primary data-[state=active]:text-primary-foreground"
                >
                  Tất cả ({upcoming.length})
                </TabsTrigger>
                <TabsTrigger
                  value="competition"
                  className="rounded-full border data-[state=active]:bg-primary data-[state=active]:text-primary-foreground"
                >
                  Giải đấu ({competitions.length})
                </TabsTrigger>
                <TabsTrigger
                  value="training"
                  className="rounded-full border data-[state=active]:bg-primary data-[state=active]:text-primary-foreground"
                >
                  Đào tạo ({trainings.length})
                </TabsTrigger>
                <TabsTrigger
                  value="exam"
                  className="rounded-full border data-[state=active]:bg-primary data-[state=active]:text-primary-foreground"
                >
                  Sự kiện ({exams.length})
                </TabsTrigger>
                <TabsTrigger
                  value="meeting"
                  className="rounded-full border data-[state=active]:bg-primary data-[state=active]:text-primary-foreground"
                >
                  Hội nghị ({meetings.length})
                </TabsTrigger>
              </TabsList>

{/* Past Events */}
        {past.length > 0 && (
          <section className="bg-muted/30 py-16">
            <div className="container mx-auto px-4">
              <h2 className="mb-8 text-2xl font-bold text-foreground">Hoạt động đã diễn ra</h2>
              <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
                {past.map((event) => (
                  <EventCard key={event.id} event={event} variant="compact" />
                ))}
              </div>
            </div>
          </section>
        )}
      </main>
      <Footer />
    </div>
  )
}

function EventsList({ events, emptyMessage }: { events: Event[]; emptyMessage: string }) {
  if (events.length === 0) {
    return (
      <div className="rounded-lg bg-muted/30 py-12 text-center">
        <p className="text-muted-foreground">{emptyMessage}</p>
      </div>
    )
  }

return (
    <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
      {events.map((event) => (
        <EventCard key={event.id} event={event} />
      ))}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/activities/event-card.tsx" isMerged="true"
import Link from "next/link"
import { Card, CardContent, CardHeader } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Calendar, MapPin, ArrowRight, Clock } from "lucide-react"
import type { Event } from "@/lib/types"

interface EventCardProps {
  event: Event
  variant?: "default" | "compact"
}

const eventTypeLabels: Record<string, string> = {
  competition: "Giải đấu",
  training: "Đào tạo",
  exam: "Sự kiện",
  meeting: "Hội nghị",
  other: "Khác",
}

const eventTypeColors: Record<string, string> = {
  competition: "bg-secondary text-secondary-foreground",
  training: "bg-primary text-primary-foreground",
  exam: "bg-chart-3 text-white",
  meeting: "bg-chart-4 text-foreground",
  other: "bg-muted text-muted-foreground",
}

function formatEventDate(dateString: string, includeWeekday = true): string {
  const date = new Date(dateString)
  const day = date.getDate().toString().padStart(2, "0")
  const month = (date.getMonth() + 1).toString().padStart(2, "0")
  const year = date.getFullYear()
  
  if (includeWeekday) {
    const weekday = date.toLocaleDateString("vi-VN", { weekday: "long" })
    return `${weekday}, ngày ${day}/${month}/${year}`
  }
  return `${day}/${month}/${year}`
}

export function EventCard({ event, variant = "default" }: EventCardProps) {
  const isPast = new Date(event.start_date) < new Date()

if (variant === "compact") {
    return (
      <Card className={`group transition-shadow hover:shadow-md ${isPast ? "opacity-75" : ""}`}>
        <CardContent className="p-4">
          <div className="flex items-start justify-between gap-2">
            <Badge variant="outline" className={`${eventTypeColors[event.event_type]} border-0 text-xs`}>
              {eventTypeLabels[event.event_type]}
            </Badge>
            {isPast && (
              <Badge variant="outline" className="text-xs">
                Đã diễn ra
              </Badge>
            )}
          </div>
          <h3 className="mt-2 font-semibold text-foreground line-clamp-2 group-hover:text-primary transition-colors">
            {event.title}
          </h3>
          <div className="mt-2 flex items-center gap-1 text-xs text-muted-foreground">
            <Calendar className="h-3 w-3" />
            <span>
              {new Date(event.start_date).toLocaleDateString("vi-VN", {
                day: "numeric",
                month: "short",
                year: "numeric",
              })}
            </span>
          </div>
        </CardContent>
      </Card>
    )
  }

return (
    <Card className="group overflow-hidden transition-shadow hover:shadow-lg">
      {event.image_url && (
        <div className="aspect-[16/9] overflow-hidden bg-muted">
          <img
            src={event.image_url || "/placeholder.svg"}
            alt={event.title}
            className="h-full w-full object-cover transition-transform group-hover:scale-105"
          />
        </div>
      )}
      <CardHeader className="pb-3">
        <div className="flex items-start justify-between gap-2">
          <Badge className={eventTypeColors[event.event_type]}>{eventTypeLabels[event.event_type]}</Badge>
          {event.registration_deadline && new Date(event.registration_deadline) > new Date() && (
            <div className="flex items-center gap-1 text-xs text-secondary">
              <Clock className="h-3 w-3" />
              <span>Còn nhận hồ sơ</span>
            </div>
          )}
        </div>
      </CardHeader>
      <CardContent className="space-y-3">
        <h3 className="font-semibold leading-tight text-foreground group-hover:text-primary transition-colors line-clamp-2 text-lg">
          {event.title}
        </h3>

{event.description && <p className="text-sm text-muted-foreground line-clamp-2">{event.description}</p>}

<div className="space-y-2 text-sm text-muted-foreground">
          <div className="flex items-center gap-2">
            <Calendar className="h-4 w-4 shrink-0 text-primary" />
            <span>
              {formatEventDate(event.start_date)}
              {event.end_date && new Date(event.end_date).toDateString() !== new Date(event.start_date).toDateString() && (
                <>
                  {" - "}
                  {formatEventDate(event.end_date, false)}
                </>
              )}
            </span>
          </div>
          {event.location && (
            <div className="flex items-center gap-2">
              <MapPin className="h-4 w-4 shrink-0 text-primary" />
              <span className="line-clamp-1">{event.location}</span>
            </div>
          )}
        </div>

<Button asChild variant="outline" size="sm" className="w-full gap-2 bg-transparent">
          <Link href={`/hoat-dong/${event.slug}`}>
            Xem chi tiết
            <ArrowRight className="h-4 w-4" />
          </Link>
        </Button>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/home/events-section.tsx" isMerged="true"
import Link from "next/link"
import { Card, CardContent, CardHeader } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Calendar, MapPin, ArrowRight } from "lucide-react"
import type { Event } from "@/lib/types"

interface EventsSectionProps {
  events: Event[]
}

const eventTypeLabels: Record<string, string> = {
  competition: "Giải đấu",
  training: "Đào tạo",
  exam: "Sự kiện",
  meeting: "Hội nghị",
  other: "Khác",
}

export function EventsSection({ events }: EventsSectionProps) {
  if (events.length === 0) return null

return (
    <section className="py-16">
      <div className="container mx-auto px-4">
        <div className="mb-10 flex items-end justify-between">
          <div>
            <h2 className="text-3xl font-bold text-foreground">Lịch hoạt động</h2>
            <p className="mt-2 text-muted-foreground">Các sự kiện và hoạt động sắp diễn ra của Liên đoàn</p>
          </div>
          <Button asChild variant="outline" className="hidden gap-2 md:inline-flex bg-transparent">
            <Link href="/hoat-dong">
              Xem tất cả
              <ArrowRight className="h-4 w-4" />
            </Link>
          </Button>
        </div>

<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
          {events.map((event) => (
            <Card key={event.id} className="group overflow-hidden transition-shadow hover:shadow-lg">
              <CardHeader className="pb-3">
                <div className="flex items-start justify-between gap-2">
                  <Badge className={eventTypeColors[event.event_type]}>{eventTypeLabels[event.event_type]}</Badge>
                  <div className="text-right text-sm text-muted-foreground">
                    {new Date(event.start_date).toLocaleDateString("vi-VN", {
                      day: "numeric",
                      month: "short",
                    })}
                  </div>
                </div>
              </CardHeader>
              <CardContent className="space-y-3">
                <h3 className="font-semibold leading-tight text-foreground group-hover:text-primary transition-colors line-clamp-2">
                  {event.title}
                </h3>

<div className="space-y-2 text-sm text-muted-foreground">
                  <div className="flex items-center gap-2">
                    <Calendar className="h-4 w-4 shrink-0" />
                    <span>
                      {formatEventDate(event.start_date)}
                      {event.end_date && new Date(event.end_date).toDateString() !== new Date(event.start_date).toDateString() && (
                        <>
                          {" - "}
                          {formatEventDate(event.end_date, false)}
                        </>
                      )}
                    </span>
                  </div>
                  {event.location && (
                    <div className="flex items-center gap-2">
                      <MapPin className="h-4 w-4 shrink-0" />
                      <span className="line-clamp-1">{event.location}</span>
                    </div>
                  )}
                </div>

<div className="mt-8 text-center md:hidden">
          <Button asChild variant="outline" className="gap-2 bg-transparent">
            <Link href="/hoat-dong">
              Xem tất cả hoạt động
              <ArrowRight className="h-4 w-4" />
            </Link>
          </Button>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]css:file="app/globals.css" isMerged="true"
@import "tailwindcss";
@import "tw-animate-css";

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

:root {
  --background: oklch(0.985 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.45 0.2 250);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.55 0.22 25);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.96 0 0);
  --muted-foreground: oklch(0.45 0 0);
  --accent: oklch(0.55 0.22 25);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.985 0 0);
  --border: oklch(0.9 0 0);
  --input: oklch(0.9 0 0);
  --ring: oklch(0.45 0.2 250);
  --chart-1: oklch(0.45 0.2 250);
  --chart-2: oklch(0.55 0.22 25);
  --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.5rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.45 0.2 250);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.96 0 0);
  --sidebar-accent-foreground: oklch(0.145 0 0);
  --sidebar-border: oklch(0.9 0 0);
  --sidebar-ring: oklch(0.45 0.2 250);
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.18 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.18 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.55 0.2 250);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.6 0.22 25);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.25 0 0);
  --muted-foreground: oklch(0.7 0 0);
  --accent: oklch(0.6 0.22 25);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.5 0.2 25);
  --destructive-foreground: oklch(0.985 0 0);
  --border: oklch(0.3 0 0);
  --input: oklch(0.3 0 0);
  --ring: oklch(0.55 0.2 250);
  --chart-1: oklch(0.55 0.2 250);
  --chart-2: oklch(0.6 0.22 25);
  --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.18 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.55 0.2 250);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.25 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(0.3 0 0);
  --sidebar-ring: oklch(0.55 0.2 250);
}

@theme inline {
  --font-sans: "Be Vietnam Pro", "Geist", "Geist Fallback", sans-serif;
  --font-mono: "Geist Mono", "Geist Mono Fallback", monospace;
  --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 antialiased;
  }
}
[V0_FILE]typescriptreact:file="app/hoat-dong/[slug]/page.tsx" isMerged="true"
import { createClient } from "@/lib/supabase/server"
import { Header } from "@/components/layout/header"
import { Footer } from "@/components/layout/footer"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Calendar, MapPin, Clock, ArrowLeft, FileText, UserPlus } from "lucide-react"
import Link from "next/link"
import { notFound } from "next/navigation"
import type { Event } from "@/lib/types"

const eventTypeLabels: Record<string, string> = {
  competition: "Giải đấu",
  training: "Tập huấn",
  exam: "Thi đẳng",
  meeting: "Hội nghị",
  other: "Khác",
}

export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params
  const supabase = await createClient()
  const { data: event } = await supabase.from("events").select("*").eq("slug", slug).single()

if (!event) {
    return { title: "Không tìm thấy sự kiện" }
  }

return {
    title: `${event.title} | Liên đoàn Taekwondo TP.HCM`,
    description: event.description || `Chi tiết sự kiện ${event.title}`,
  }
}

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

const { data: event } = await supabase.from("events").select("*").eq("slug", slug).eq("is_published", true).single()

if (!event) {
    notFound()
  }

const typedEvent = event as Event
  const isPast = new Date(typedEvent.start_date) < new Date()
  const canRegister = typedEvent.registration_deadline && new Date(typedEvent.registration_deadline) > new Date()

const registrationUrl = `/lien-he?event=${encodeURIComponent(typedEvent.slug)}&eventTitle=${encodeURIComponent(typedEvent.title)}`

return (
    <div className="flex min-h-screen flex-col">
      <Header />
      <main className="flex-1">
        {/* Breadcrumb */}
        <div className="border-b bg-muted/30">
          <div className="container mx-auto px-4 py-3">
            <Button asChild variant="ghost" size="sm" className="gap-2">
              <Link href="/hoat-dong">
                <ArrowLeft className="h-4 w-4" />
                Quay lại danh sách
              </Link>
            </Button>
          </div>
        </div>

<div className="container mx-auto px-4 py-8">
          <div className="grid gap-8 lg:grid-cols-3">
            {/* Main Content */}
            <div className="lg:col-span-2">
              <div className="mb-4 flex flex-wrap items-center gap-2">
                <Badge className={eventTypeColors[typedEvent.event_type]}>
                  {eventTypeLabels[typedEvent.event_type]}
                </Badge>
                {isPast && <Badge variant="outline">Đã diễn ra</Badge>}
                {canRegister && <Badge className="bg-green-500 text-white">Đang nhận đăng ký</Badge>}
              </div>

<h1 className="mb-4 text-3xl font-bold text-foreground md:text-4xl">{typedEvent.title}</h1>

{typedEvent.description && <p className="mb-6 text-lg text-muted-foreground">{typedEvent.description}</p>}

{typedEvent.image_url && (
                <div className="mb-8 aspect-[16/9] overflow-hidden rounded-lg bg-muted">
                  <img
                    src={typedEvent.image_url || "/placeholder.svg"}
                    alt={typedEvent.title}
                    className="h-full w-full object-cover"
                  />
                </div>
              )}

{typedEvent.content && (
                <div className="prose prose-lg max-w-none">
                  <div dangerouslySetInnerHTML={{ __html: typedEvent.content }} />
                </div>
              )}
            </div>

{/* Sidebar */}
            <div className="space-y-6">
              {/* Event Info Card */}
              <Card>
                <CardHeader>
                  <CardTitle className="text-lg">Thông tin sự kiện</CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="flex items-start gap-3">
                    <Calendar className="mt-0.5 h-5 w-5 text-primary" />
                    <div>
                      <div className="font-medium">Thời gian</div>
                      <div className="text-sm text-muted-foreground">
                        {new Date(typedEvent.start_date).toLocaleDateString("vi-VN", {
                          weekday: "long",
                          day: "numeric",
                          month: "long",
                          year: "numeric",
                        })}
                        {typedEvent.end_date && typedEvent.end_date !== typedEvent.start_date && (
                          <>
                            {" - "}
                            {new Date(typedEvent.end_date).toLocaleDateString("vi-VN", {
                              day: "numeric",
                              month: "long",
                              year: "numeric",
                            })}
                          </>
                        )}
                      </div>
                    </div>
                  </div>

{typedEvent.location && (
                    <div className="flex items-start gap-3">
                      <MapPin className="mt-0.5 h-5 w-5 text-primary" />
                      <div>
                        <div className="font-medium">Địa điểm</div>
                        <div className="text-sm text-muted-foreground">{typedEvent.location}</div>
                      </div>
                    </div>
                  )}

{typedEvent.registration_deadline && (
                    <div className="flex items-start gap-3">
                      <Clock className="mt-0.5 h-5 w-5 text-primary" />
                      <div>
                        <div className="font-medium">Hạn đăng ký</div>
                        <div className="text-sm text-muted-foreground">
                          {new Date(typedEvent.registration_deadline).toLocaleDateString("vi-VN", {
                            day: "numeric",
                            month: "long",
                            year: "numeric",
                          })}
                        </div>
                      </div>
                    </div>
                  )}
                </CardContent>
              </Card>

{/* Đăng ký tham dự - chỉ hiển thị cho sự kiện Đại hội */}
              {typedEvent.event_type === "meeting" && (
                <Card className="border-primary/20 bg-primary/5">
                  <CardHeader>
                    <CardTitle className="flex items-center gap-2 text-lg">
                      <UserPlus className="h-5 w-5 text-primary" />
                      Đăng ký tham dự
                    </CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-2">
                    <Button asChild className="w-full">
                      <Link href={registrationUrl}>
                        Đăng ký Tham dự
                      </Link>
                    </Button>
                    <Button asChild className="w-full bg-red-600 hover:bg-red-700 text-white">
                      <a href="https://htf-daihoi.netlify.app/" target="_blank" rel="noopener noreferrer">
                        Văn kiện Đại hội
                      </a>
                    </Button>
                  </CardContent>
                </Card>
              )}

{/* Đăng ký tham gia - chỉ hiển thị cho các sự kiện khác */}
              {canRegister && typedEvent.event_type !== "meeting" && (
                <Card className="border-primary/20 bg-primary/5">
                  <CardHeader>
                    <CardTitle className="flex items-center gap-2 text-lg">
                      <UserPlus className="h-5 w-5 text-primary" />
                      Đăng ký tham gia
                    </CardTitle>
                  </CardHeader>
                  <CardContent>
                    <p className="mb-4 text-sm text-muted-foreground">
                      {typedEvent.title.toLowerCase().includes("trọng tài") 
                        ? "Đăng ký tham gia khóa đào tạo trọng tài qua hệ thống của VTF."
                        : (typedEvent.title.toLowerCase().includes("tập huấn") && typedEvent.title.toLowerCase().includes("thăng đẳng"))
                          ? "Đăng ký tham gia Tập huấn hoặc Thi đẳng qua hệ thống của VTF."
                          : (typedEvent.title.toLowerCase().includes("hlv") || 
                             typedEvent.title.toLowerCase().includes("huấn luyện viên") ||
                             typedEvent.title.toLowerCase().includes("tập huấn") ||
                             typedEvent.title.toLowerCase().includes("thăng đẳng"))
                            ? "Đăng ký tham gia qua hệ thống của VTF."
                            : "Để đăng ký tham gia sự kiện này, vui lòng điền thông tin tại trang Liên hệ."}
                    </p>
                    {/* Nếu sự kiện có cả Tập huấn và Thi đẳng - hiển thị 2 nút */}
                    {typedEvent.title.toLowerCase().includes("tập huấn") && typedEvent.title.toLowerCase().includes("thăng đẳng") ? (
                      <div className="flex flex-col gap-2">
                        <Button asChild className="w-full">
                          <a href="https://tkdvn1996.net/dkhlv" target="_blank" rel="noopener noreferrer">
                            Đăng ký Tập huấn
                          </a>
                        </Button>
                        <Button asChild variant="outline" className="w-full bg-transparent">
                          <a href="https://tkdvn1996.net/dkthidang" target="_blank" rel="noopener noreferrer">
                            Đăng ký Thi đẳng
                          </a>
                        </Button>
                      </div>
                    ) : typedEvent.title.toLowerCase().includes("trọng tài") ? (
                      <Button asChild className="w-full">
                        <a href="https://tkdvn1996.net/dktrongtai" target="_blank" rel="noopener noreferrer">
                          Đăng ký ngay
                        </a>
                      </Button>
                    ) : (typedEvent.title.toLowerCase().includes("hlv") || 
                         typedEvent.title.toLowerCase().includes("huấn luyện viên") ||
                         typedEvent.title.toLowerCase().includes("tập huấn") ||
                         typedEvent.title.toLowerCase().includes("thăng đẳng")) ? (
                      <Button asChild className="w-full">
                        <a href="https://tkdvn1996.net/dkhlv" target="_blank" rel="noopener noreferrer">
                          Đăng ký ngay
                        </a>
                      </Button>
                    ) : (
                      <Button asChild className="w-full">
                        <Link href={registrationUrl}>Đăng ký ngay</Link>
                      </Button>
                    )}
                  </CardContent>
                </Card>
              )}

</div>
          </div>
        </div>
      </main>
      <Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/gioi-thieu/page.tsx"
import { createClient } from "@/lib/supabase/server"
import { Header } from "@/components/layout/header"
import { Footer } from "@/components/layout/footer"
import { Card, CardContent } from "@/components/ui/card"
import { Target, Award, Users, BookOpen } from "lucide-react"
import type { OrganizationMember } from "@/lib/types"

export const metadata = {
  title: "Giới thiệu | Liên đoàn Taekwondo Thành phố Hồ Chí Minh",
  description: "Tìm hiểu về tôn chỉ, mục đích, chức năng và cơ cấu tổ chức của Liên đoàn Taekwondo Thành phố Hồ Chí Minh",
}

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

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

const allMembers = (members as OrganizationMember[]) || []

return (
    <div className="flex min-h-screen flex-col">
      <Header />
      <main className="flex-1">
        <section className="bg-primary py-16 text-primary-foreground">
          <div className="container mx-auto px-4 text-center">
            <h1 className="text-4xl font-bold">Giới thiệu</h1>
            <p className="mx-auto mt-4 max-w-2xl text-primary-foreground/80">
              Liên đoàn Taekwondo Thành phố Hồ Chí Minh - Tổ chức xã hội nghề nghiệp về Taekwondo
            </p>
          </div>
        </section>

<section className="py-16">
          <div className="container mx-auto px-4">
            <div className="mx-auto max-w-4xl">
              <div className="prose prose-lg max-w-none text-muted-foreground">
                <p className="lead text-xl leading-relaxed">
                  <strong className="text-foreground">Liên đoàn Taekwondo Thành phố Hồ Chí Minh (HTF)</strong> là tổ chức xã hội - nghề nghiệp về môn võ thuật Taekwondo, hoạt động theo Điều lệ được phê duyệt và chịu sự quản lý nhà nước của Sở Văn hóa và Thể thao Thành phố Hồ Chí Minh.
                </p>
                <p className="leading-relaxed">
                  Liên đoàn có tư cách pháp nhân, con dấu và tài khoản riêng theo quy định của pháp luật. Trụ sở chính đặt tại Số 2 Lê Đại Hành, Phường Phú Thọ, Thành phố Hồ Chí Minh.
                </p>
              </div>
            </div>
          </div>
        </section>

<section className="bg-muted/30 py-16">
          <div className="container mx-auto px-4">
            <div className="mb-10 text-center">
              <h2 className="text-3xl font-bold text-foreground">Tôn chỉ, Mục đích và Nhiệm vụ</h2>
              <p className="mt-2 text-muted-foreground">Định hướng hoạt động của Liên đoàn Taekwondo TP.HCM</p>
            </div>

<div className="grid gap-6 md:grid-cols-2">
              {missions.map((item, index) => (
                <Card key={index} className="border-none shadow-md">
                  <CardContent className="p-6">
                    <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-primary/10">
                      <item.icon className="h-6 w-6 text-primary" />
                    </div>
                    <h3 className="mb-2 text-xl font-semibold text-foreground">{item.title}</h3>
                    <p className="text-muted-foreground leading-relaxed">{item.description}</p>
                  </CardContent>
                </Card>
              ))}
            </div>
          </div>
        </section>

<section className="py-16">
          <div className="container mx-auto px-4">
            <div className="mb-10 text-center">
              <h2 className="text-3xl font-bold text-foreground">Cơ cấu tổ chức</h2>
              <p className="mt-2 text-muted-foreground">Ban Chấp hành Liên đoàn Nhiệm kỳ I (2026 - 2031)</p>
            </div>

{allMembers.length > 0 && (
              <div className="grid gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
                {allMembers.map((member) => (
                  <Card key={member.id} className="text-center">
                    <CardContent className="p-6">
                      <div className="mx-auto mb-4 h-24 w-24 overflow-hidden rounded-full bg-muted">
                        <img
                          src={member.image_url || "/placeholder.svg?height=96&width=96&query=person portrait"}
                          alt={member.full_name}
                          className="h-full w-full object-cover"
                        />
                      </div>
                      <h4 className="font-semibold text-foreground">{member.full_name}</h4>
                      <p className="text-sm text-primary font-medium">{member.position}</p>
                      {member.title && <p className="text-xs text-muted-foreground">{member.title}</p>}
                    </CardContent>
                  </Card>
                ))}
              </div>
            )}

{allMembers.length === 0 && (
              <div className="text-center py-12 bg-muted/30 rounded-lg">
                <p className="text-muted-foreground">
                  Thông tin Ban Chấp hành Nhiệm kỳ I (2026 - 2031) sẽ được cập nhật sau Đại hội Đại biểu Liên đoàn Taekwondo Thành phố Hồ Chí Minh vào ngày 30/01/2026.
                </p>
              </div>
            )}
          </div>
        </section>

<section className="bg-muted/30 py-16">
          <div className="container mx-auto px-4">
            <div className="mx-auto max-w-4xl">
              <h2 className="mb-6 text-center text-3xl font-bold text-foreground">Lịch sử hình thành</h2>
              <div className="space-y-6 text-muted-foreground">
                <p className="leading-relaxed">
                  Taekwondo được du nhập vào Việt Nam từ những năm 1960 và nhanh chóng phát triển mạnh mẽ tại Thành phố Hồ Chí Minh. Với sự đam mê và nổ lực của các thê hệ huấn luyện viên, võ sư, Taekwondo đã trở thành một trong những môn võ thuật phổ biến nhất tại Thành phố.
                </p>
                <p className="leading-relaxed">
                  Liên đoàn Taekwondo Thành phố Hồ Chí Minh được thành lập nhằm quy tụ và phát triển phong trào Taekwondo, nâng cao thành tích thi đấu quốc gia và quốc tế, đồng thời góp phần xây dựng nền thể thao Thành phố ngày càng vững mạnh.
                </p>
                <p className="leading-relaxed">
                  Năm 2026 đánh dấu mốc quan trọng với việc tổ chức Đại hội Đại biểu Nhiệm kỳ I (2026 - 2031) sáp nhập 3 đơn vị Taekwondo Bà Rịa Vũng Tàu - Bình Dương - TP.HCM, mở ra một giai đoạn phát triển mới với cơ cấu tổ chức hoàn thiện và định hướng chiến lược rõ ràng.
                </p>
              </div>
            </div>
          </div>
        </section>
      </main>
      <Footer />
    </div>
  )
}</article></body></html>