112:"ExplicitChatIdProvider" 113:I[903690,["$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$8c","$8d","$7c","$85","$7f","$7e","$8e","$80","$8f","$90","$91","$7d","$92","$87","$8a","$84","$83","$88","$89","$93","$94","$86","$95","$82"],"$112"] 114:I[838238,["$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$8c","$8d","$7c","$85","$7f","$7e","$8e","$80","$8f","$90","$91","$7d","$92","$87","$8a","$84","$83","$88","$89","$93","$94","$86","$95","$82"],"SWRDataProvider"] 116:[] 117:[["b_ZeQ4AzvnFhP",null],["b_HmKtd66knKD",null],["b_pbyJ6Xs49T9",null]] 118:[["b_ZeQ4AzvnFhP",{"templateVersionId":null,"templateCanonId":null}],["b_HmKtd66knKD",{"templateVersionId":null,"templateCanonId":null}],["b_pbyJ6Xs49T9",{"templateVersionId":null,"templateCanonId":null}]] 119:[["b_VnJiJJmSdXW","$D2025-06-11T00:56:52.445Z"],["b_MmAG1lfqJ77","$D2025-06-11T01:01:53.258Z"],["b_atMTrsACair","$D2025-06-11T01:06:54.971Z"],["b_H6M8qUsA7oh","$D2025-06-11T02:52:48.932Z"],["b_HOPkYnTHaEi","$D2025-06-11T03:00:30.524Z"],["b_mVkgKu3uIQv","$D2025-06-13T08:49:20.718Z"],["b_I9t2gtA9iEc","$D2025-06-13T09:01:01.397Z"],["b_8f9hALo1RiE","$D2025-06-13T09:19:16.958Z"],["b_aTGlSOwGDS8","$D2025-06-13T09:35:05.828Z"],["b_jxYXoGOa0zB","$D2025-06-13T09:36:13.105Z"],["b_W4po5Eton3A","$D2025-06-13T09:38:59.633Z"],["b_ZnaSCsVtW8T","$D2025-06-13T09:57:24.614Z"],["b_prwgaf8OMk9","$D2025-06-13T10:03:09.606Z"],["b_Kfk3oQHCduD","$D2025-06-13T10:08:53.022Z"],["b_e8ojsC9gbkd","$D2025-06-13T10:11:56.323Z"],["b_KJhSeJjHBgq","$D2025-06-13T10:18:06.318Z"],["b_TgD8QOrwHZa","$D2025-06-13T10:24:21.530Z"],["b_jAQ8yysNY5L","$D2025-06-13T10:29:18.192Z"],["b_3bmqpkNssRY","$D2025-06-13T10:45:53.651Z"],["b_CGRpT9ZxFZq","$D2025-06-13T10:49:02.180Z"],["b_SMKhdBirjMZ","$D2025-06-13T10:50:59.710Z"],["b_OZ4vQ6AcSPn","$D2025-06-13T10:52:11.665Z"],["b_k1zivvN6NHb","$D2025-06-13T10:52:56.326Z"],["b_XIg8caPNES8","$D2025-06-13T11:03:54.929Z"],["b_P1gS9NyEjRR","$D2025-06-13T11:19:42.246Z"],["b_0DRMWnN8Eav","$D2025-06-13T11:23:07.492Z"],["b_FyUN61WM7Mz","$D2025-06-13T11:26:01.439Z"],["b_x8dWj4FZ92g","$D2025-06-13T11:30:50.274Z"],["b_mmWZS37JrrA","$D2025-06-13T11:34:32.153Z"],["b_K3Ss8kMZMYA","$D2025-06-13T11:46:33.947Z"],["b_uT4JtISYpx4","$D2025-06-13T12:01:11.258Z"],["b_irC1qTUXrQW","$D2025-06-13T12:04:56.366Z"],["b_LUAUZCfZ1HW","$D2025-06-13T12:16:26.552Z"],["b_KO67FMtSiq0","$D2025-06-13T12:26:30.420Z"],["b_f4WRu8PeNTT","$D2025-06-13T12:31:14.500Z"],["b_wppvA5B9PMh","$D2025-06-13T12:39:26.779Z"],["b_e6pSReG467T","$D2025-06-13T12:41:17.942Z"],["b_EbYSCE2IzAZ","$D2025-06-13T12:42:23.556Z"],["b_YluFfVAVEUl","$D2025-06-13T12:43:17.498Z"],["b_5haxUlDYHRF","$D2025-06-13T12:43:34.413Z"],["b_Q7eMwhBISmy","$D2025-06-13T12:47:13.200Z"],["b_I0gGHVarfIU","$D2025-06-13T12:52:21.318Z"],["b_shOm9gNMyJP","$D2025-06-13T12:58:11.507Z"],["b_CsoCuuHflb4","$D2025-06-13T13:02:48.050Z"],["b_NRb1udEZYCd","$D2025-06-13T13:10:06.816Z"],["b_T8SMWLjG1SP","$D2025-06-13T13:29:12.823Z"],["b_zSgRT49PSgD","$D2025-06-13T13:30:13.240Z"],["b_kntkRx9LFNq","$D2025-06-14T03:14:34.373Z"],["b_e6OdPQvt9DL","$D2025-06-16T07:16:22.836Z"],["b_MU97ZOUKN13","$D2025-06-16T07:18:11.113Z"],["b_Ewi4aDmjWq8","$D2025-06-16T07:20:24.592Z"],["b_tF1LsH3GOf8","$D2025-06-17T04:41:13.207Z"],["b_m2TQ8StstyC","$D2025-06-17T04:42:18.813Z"],["b_SeAyx0mkRHq","$D2025-06-17T08:31:47.861Z"],["b_0pMZoTyXzyb","$D2025-06-17T08:34:08.853Z"],["b_6tNKeaavHFt","$D2025-06-18T06:13:35.176Z"],["b_jWY5MTtggnW","$D2025-06-18T06:32:15.349Z"],["b_SDGIdkYL1kr","$D2025-06-18T06:47:43.177Z"],["b_MUoO40aHFNw","$D2025-06-18T06:57:55.258Z"],["b_OhaQ2xEcg8m","$D2025-06-18T07:08:25.776Z"],["b_PTgwVYiwxYd","$D2025-06-18T07:19:39.002Z"],["b_2xKeweqNofV","$D2025-06-18T07:25:42.056Z"],["b_QMtgl9QaAnz","$D2025-06-18T07:27:45.903Z"],["b_vUtVcdB5IQh","$D2025-06-18T07:27:50.330Z"],["b_8gg7ABgxqsL","$D2025-06-18T07:30:01.550Z"],["b_0wrtsNP86Vv","$D2025-06-18T07:32:25.858Z"],["b_c3O8pRSXkbm","$D2025-06-18T07:35:03.172Z"],["b_3JVMfUjABdC","$D2025-06-18T07:36:09.613Z"],["b_9O0jnDmUo81","$D2025-06-18T07:41:13.788Z"],["b_48V0LnU69O6","$D2025-06-18T21:46:49.411Z"],["b_lFSQYdd1I1n","$D2025-06-18T21:53:05.678Z"],["b_4Ii3k2jVZyf","$D2025-06-19T00:42:41.580Z"],["b_NtKo0jvudGB","$D2025-06-19T00:46:30.206Z"],["b_DPm7R8saV1w","$D2025-06-20T15:59:03.011Z"],["b_fs7cstlvWfW","$D2025-06-20T16:03:57.445Z"],["b_1sKTtvGc6Hs","$D2025-06-20T16:06:35.543Z"],["b_KMctBHsYufl","$D2025-06-20T16:07:18.387Z"],["b_sIusF3hxuhb","$D2025-06-20T16:08:23.242Z"],["b_Ui9gHbAXjP7","$D2025-06-20T16:09:28.119Z"],["b_Tpqe5atC39H","$D2025-06-20T16:10:19.332Z"],["b_AK8JNh8ufep","$D2025-06-21T04:00:58.014Z"],["b_2RwjHbVtH6f","$D2025-06-21T04:04:26.268Z"],["b_2ykyD5vxtS3","$D2025-06-21T04:12:28.544Z"],["b_81mVxXiZROx","$D2025-06-21T04:14:45.947Z"],["b_5pFKOkVCy3L","$D2025-06-21T04:15:13.730Z"],["b_YpQoGmsUcMl","$D2025-06-21T04:19:02.406Z"],["b_TZOLa6ITb5c","$D2025-06-21T04:23:56.577Z"],["b_ElGsG3L4VU7","$D2025-06-21T04:27:47.862Z"],["b_tX5NfshwLzq","$D2025-06-21T04:41:08.865Z"],["b_XDgsXqJe1Ai","$D2025-06-21T04:47:58.890Z"],["b_5WG73rMdf3L","$D2025-06-21T05:01:07.094Z"],["b_TwulleJvLIZ","$D2025-06-21T05:10:35.816Z"],["b_as9vkbAwKU9","$D2025-06-21T12:32:12.553Z"],["b_jcoKzW71gq5","$D2025-06-21T18:44:33.627Z"],["b_wlHNsq5WzfW","$D2025-06-21T18:49:10.860Z"],["b_n0ljGnXOFXf","$D2025-06-21T18:50:08.177Z"],["b_83d64F3XZEI","$D2025-06-21T22:44:03.592Z"],["b_3ukN5CsovX0","$D2025-06-21T22:45:17.846Z"],["b_MvAaqQXUpEA","$D2025-06-21T22:46:27.097Z"],["b_ClD44DtBpmR","$D2025-06-22T01:00:26.521Z"],["b_Frk8teyWLcP","$D2025-06-22T02:48:33.337Z"],["b_hcZSuz0D4F6","$D2025-06-22T02:53:18.484Z"],["b_UQRiDFQKDEF","$D2025-06-23T11:48:54.813Z"],["b_ZeQ4AzvnFhP","$D2025-06-23T12:25:08.832Z"],["b_HmKtd66knKD","$D2025-06-23T12:40:51.846Z"],["b_pbyJ6Xs49T9","$D2025-07-01T01:16:57.922Z"]] 11a:[["b_ZeQ4AzvnFhP",false],["b_HmKtd66knKD",false],["b_pbyJ6Xs49T9",false]] 11b:[["b_ZeQ4AzvnFhP","$undefined"],["b_HmKtd66knKD","$undefined"],["b_pbyJ6Xs49T9","$undefined"]] 11c:[["b_ZeQ4AzvnFhP",null],["b_HmKtd66knKD",null],["b_pbyJ6Xs49T9",null]] 11d:[["b_ZeQ4AzvnFhP",true],["b_HmKtd66knKD",true],["b_pbyJ6Xs49T9",true]] 11e:[["b_ZeQ4AzvnFhP",true],["b_HmKtd66knKD",true],["b_pbyJ6Xs49T9",true]] 11f:[] 120:Tabd4f,[V0_FILE]typescriptreact:file="lib/utils.ts" isMerged="true" import { clsx, type ClassValue } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } export const formatTimeRemaining = (deadline: Date) => { const now = new Date() const diff = deadline.getTime() - now.getTime() if (diff <= 0) return "Expired" const days = Math.floor(diff / (1000 * 60 * 60 * 24)) const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)) if (days > 0) return `${days} day${days > 1 ? "s" : ""}` if (hours > 0) return `${hours} hour${hours > 1 ? "s" : ""}` return "Less than 1 hour" } export const calculateLevel = (xp: number) => { return Math.floor(xp / 100) + 1 } export const getXpForNextLevel = (xp: number) => { const currentLevel = calculateLevel(xp) return currentLevel * 100 } export const getXpProgress = (xp: number) => { const currentLevelXp = (calculateLevel(xp) - 1) * 100 const nextLevelXp = calculateLevel(xp) * 100 return ((xp - currentLevelXp) / (nextLevelXp - currentLevelXp)) * 100 } export const getDifficultyClass = (difficulty: string) => { switch (difficulty) { case "easy": return "badge-easy" case "medium": return "badge-medium" case "hard": return "badge-hard" default: return "badge-purple" } } [V0_FILE]typescriptreact:file="components/toast.tsx" isMerged="true" "use client" import { useEffect } from "react" interface ToastProps { message: string type: string onClose: () => void } export function Toast({ message, type, onClose }: ToastProps) { useEffect(() => { const timer = setTimeout(onClose, 3000) return () => clearTimeout(timer) }, [onClose]) return

{message}

} [V0_FILE]png:file="public/images/createaguild.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/createaguild-YMUPb2ujE6ezQuX6p9nnJSWZiDx4sP.png" isMerged="true" [V0_FILE]png:file="public/images/forgotpass.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/forgotpass-xbJ2VIzwy6xvhluiBtUhY1s38Lwys5.png" isMerged="true" [V0_FILE]png:file="public/images/login.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/logn-qRzPdR7cI5QIL7GTMCkS5k9uHMJlcY.png" isMerged="true" [V0_FILE]png:file="public/images/home-no-login.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Home%20no-login-MamFoTg4RIE615f6ahSpd46RwiRBcQ.png" isMerged="true" [V0_FILE]png:file="public/images/guildhall.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/guildhall-WqejXr0DVuaoHZKvXLo9ntnyOBjtAg.png" isMerged="true" [V0_FILE]png:file="public/images/postaquest.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/postaquest-xYNkUiQ2f54H4D7EkH0SEgkel0kZUS.png" isMerged="true" [V0_FILE]png:file="public/images/register.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/register-P9b8WbEClxw3MabndIh9Aqcdx0dPNV.png" isMerged="true" [V0_FILE]png:file="public/images/questboard.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/questboard-Hea98s8ojNKfDOmVqqPlE2R6RGwEW8.png" isMerged="true" [V0_FILE]png:file="public/images/profile.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/profile-ehzQE5tsNU5UWoTEVzczeVTHpaOAty.png" isMerged="true" [V0_FILE]png:file="public/images/settings.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/setting-r2wyCdu7XIJxJLBwBCLPoZJK1iVBwh.png" isMerged="true" [V0_FILE]typescriptreact:file="tailwind.config.ts" isEdit="true" isQuickEdit="true" isMerged="true" import type { Config } from "tailwindcss" const config: Config = { darkMode: ["class"], content: [ "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { extend: { colors: { background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", chart: { "1": "hsl(var(--chart-1))", "2": "hsl(var(--chart-2))", "3": "hsl(var(--chart-3))", "4": "hsl(var(--chart-4))", "5": "hsl(var(--chart-5))", }, sidebar: { DEFAULT: "hsl(var(--sidebar-background))", foreground: "hsl(var(--sidebar-foreground))", primary: "hsl(var(--sidebar-primary))", "primary-foreground": "hsl(var(--sidebar-primary-foreground))", accent: "hsl(var(--sidebar-accent))", "accent-foreground": "hsl(var(--sidebar-accent-foreground))", border: "hsl(var(--sidebar-border))", ring: "hsl(var(--sidebar-ring))", }, "tavern-cream": "#f4f0e6", "tavern-brown": "#2c1a1d", "tavern-gold": "#ffe26f", "tavern-bronze": "#cdaa7d", "tavern-purple": "#8b75aa", }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0", }, to: { height: "var(--radix-accordion-content-height)", }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)", }, to: { height: "0", }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, fontFamily: { medieval: ["Papyrus", "Bradley Hand", "Brush Script MT", "cursive"], cinzel: ["Times New Roman", "Georgia", "serif"], }, }, }, plugins: [require("tailwindcss-animate")], } export default config [V0_FILE]typescriptreact:file="components/about.tsx" isEdit="true" isMerged="true" export function About() { const teamMembers = [ { name: "Jenel Esteron", role: "API/Database", avatar: "J", portfolio: "https://github.com/jenelesteron", linkedin: "https://linkedin.com/in/jenelesteron", }, { name: "Amry Judith Gutlay", role: "Middleware/Frontend", avatar: "A", portfolio: "https://github.com/amrygutlay", linkedin: "https://linkedin.com/in/amrygutlay", }, { name: "Michael Liam San Diego", role: "API/Frontend", avatar: "ML", portfolio: "https://github.com/michaelsandiego", linkedin: "https://linkedin.com/in/michaelsandiego", }, { name: "Mark John Wayne Yabes", role: "API/Database", avatar: "MJ", portfolio: "https://github.com/markjohnyabes", linkedin: "https://linkedin.com/in/markjohnyabes", }, { name: "Tristan Von Ceazar Yanoria", role: "Documentation/Frontend", avatar: "T", portfolio: "https://github.com/tristanyanoria", linkedin: "https://linkedin.com/in/tristanyanoria", }, { name: "John Odysseus Lim", role: "Documentation/Middleware", avatar: "J", portfolio: "https://github.com/johlim", linkedin: "https://linkedin.com/in/johlim", }, ] return (

About PeerQuest Tavern

Learn more about our platform and the team behind it.

Our Story

PeerQuest Tavern is a fantasy-themed peer learning platform where coding and collaboration become an epic adventure. Our mission is to transform the often solitary experience of learning to code into a collaborative and engaging journey.

In the world of PeerQuest, you're not just a developer - you're an adventurer, taking on quests, earning experience, and joining guilds of like-minded peers. Whether you're a novice apprentice or a seasoned archmage of code, there's a place for you at our tavern.

What started as casual meetups to review each other's code soon evolved into a structured system of "quests" and "rewards" - and the fantasy theme made the process more engaging and fun.

🏰

The Team

{teamMembers.map((member, index) => (

{member.avatar}

{member.name}

{member.role}

Portfolio LinkedIn

))}

) } [V0_FILE]typescriptreact:file="lib/level-utils.ts" isMerged="true" import type { LevelThreshold } from "./types" export const levelThresholds: LevelThreshold[] = [ { level: 1, xpRequired: 0, title: "Novice Adventurer" }, { level: 2, xpRequired: 100, title: "Apprentice Adventurer" }, { level: 3, xpRequired: 250, title: "Journeyman Adventurer" }, { level: 4, xpRequired: 500, title: "Adept Adventurer" }, { level: 5, xpRequired: 1000, title: "Expert Adventurer" }, { level: 6, xpRequired: 1750, title: "Master Adventurer" }, { level: 7, xpRequired: 2750, title: "Grandmaster Adventurer" }, { level: 8, xpRequired: 4000, title: "Legendary Adventurer" }, { level: 9, xpRequired: 5500, title: "Mythic Adventurer" }, { level: 10, xpRequired: 7500, title: "Divine Adventurer" }, ] export const calculateLevel = (xp: number): number => { for (let i = levelThresholds.length - 1; i >= 0; i--) { if (xp >= levelThresholds[i].xpRequired) { return levelThresholds[i].level } } return 1 } export const getXpForNextLevel = (xp: number): number => { const currentLevel = calculateLevel(xp) const nextLevelIndex = levelThresholds.findIndex((threshold) => threshold.level === currentLevel + 1) if (nextLevelIndex === -1) { // Max level reached return levelThresholds[levelThresholds.length - 1].xpRequired } return levelThresholds[nextLevelIndex].xpRequired } export const getXpProgress = (xp: number): number => { const currentLevel = calculateLevel(xp) const currentLevelIndex = levelThresholds.findIndex((threshold) => threshold.level === currentLevel) const nextLevelIndex = levelThresholds.findIndex((threshold) => threshold.level === currentLevel + 1) if (nextLevelIndex === -1) { // Max level reached return 100 } const currentLevelXp = levelThresholds[currentLevelIndex].xpRequired const nextLevelXp = levelThresholds[nextLevelIndex].xpRequired const xpForCurrentLevel = xp - currentLevelXp const xpRequiredForNextLevel = nextLevelXp - currentLevelXp return Math.min(100, Math.floor((xpForCurrentLevel / xpRequiredForNextLevel) * 100)) } export const getLevelTitle = (level: number): string => { const levelData = levelThresholds.find((threshold) => threshold.level === level) return levelData ? levelData.title : "Adventurer" } export const getTotalXpRequired = (level: number): number => { const levelData = levelThresholds.find((threshold) => threshold.level === level) return levelData ? levelData.xpRequired : 0 } [V0_FILE]typescriptreact:file="hooks/use-mobile.tsx" isFixed="true" isMerged="true" "use client" import { useState, useEffect } from "react" const MOBILE_BREAKPOINT = 768 export function useMobile() { const [isMobile, setIsMobile] = useState(false) useEffect(() => { const checkIfMobile = () => { setIsMobile(window.innerWidth < MOBILE_BREAKPOINT) } // Initial check checkIfMobile() // Add event listener window.addEventListener("resize", checkIfMobile) // Clean up return () => { window.removeEventListener("resize", checkIfMobile) } }, []) return isMobile } [V0_FILE]css:file="app/globals.css" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; :root { --tavern-dark: #2c1a1d; --tavern-cream: #f4f0e6; --tavern-gold: #cdaa7d; --tavern-purple: #8b75aa; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: "Inter", sans-serif; background-color: var(--tavern-cream); color: var(--tavern-dark); line-height: 1.6; } .font-medieval { font-family: "Papyrus", "Bradley Hand", "Brush Script MT", cursive; font-weight: bold; } .text-shadow { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); } .line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .progress-bar { width: 100%; height: 8px; background-color: rgba(44, 26, 29, 0.1); border-radius: 4px; overflow: hidden; } .progress-fill { height: 100%; background: linear-gradient(90deg, #cdaa7d 0%, #8b75aa 100%); transition: width 0.3s ease; } .notification-badge { position: absolute; top: -8px; right: -8px; background-color: #f44336; color: white; border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: bold; } .toast { position: fixed; top: 20px; right: 20px; background-color: var(--tavern-dark); color: var(--tavern-cream); padding: 12px 20px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); z-index: 1000; animation: slideIn 0.3s ease; } .toast.success { background-color: #4caf50; } .toast.error { background-color: #f44336; } @keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; animation: fadeIn 0.2s ease; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .modal-content { background-color: var(--tavern-cream); border-radius: 12px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); max-width: 90vw; max-height: 90vh; overflow-y: auto; animation: slideUp 0.3s ease; } @keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .card { background-color: var(--tavern-cream); border: 1px solid var(--tavern-gold); border-radius: 12px; overflow: hidden; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; } .card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); } .btn { display: inline-flex; align-items: center; justify-content: center; padding: 8px 16px; border: none; border-radius: 8px; font-family: "Inter", sans-serif; font-weight: 600; cursor: pointer; transition: all 0.3s ease; text-decoration: none; font-size: 14px; } .btn:disabled { opacity: 0.6; cursor: not-allowed; } .btn-primary { background-color: var(--tavern-gold); color: var(--tavern-dark); } .btn-primary:hover:not(:disabled) { background-color: #b8941f; transform: translateY(-1px); } .btn-secondary { background-color: var(--tavern-dark); color: var(--tavern-cream); } .btn-secondary:hover:not(:disabled) { background-color: #3d2a2f; transform: translateY(-1px); } .btn-outline { background-color: transparent; border: 1px solid var(--tavern-gold); color: var(--tavern-dark); } .btn-outline:hover:not(:disabled) { background-color: var(--tavern-gold); color: var(--tavern-cream); transform: translateY(-1px); } .btn-danger { background-color: #f44336; color: white; } .btn-danger:hover:not(:disabled) { background-color: #d32f2f; transform: translateY(-1px); } .btn-success { background-color: #4caf50; color: white; } .btn-success:hover:not(:disabled) { background-color: #45a049; transform: translateY(-1px); } .input, .textarea, .select { width: 100%; padding: 12px; border: 1px solid var(--tavern-gold); border-radius: 8px; background-color: var(--tavern-cream); color: var(--tavern-dark); font-family: "Inter", sans-serif; font-size: 14px; transition: all 0.3s ease; } .input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--tavern-purple); box-shadow: 0 0 0 3px rgba(139, 117, 170, 0.2); } .textarea { min-height: 100px; resize: vertical; } .search-input { position: relative; } .search-input input { padding-left: 40px; } .search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--tavern-gold); } .filter-section { background-color: rgba(205, 170, 125, 0.1); padding: 20px; border-radius: 12px; margin-bottom: 24px; } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; } .stat-card { background: linear-gradient(135deg, var(--tavern-cream) 0%, rgba(205, 170, 125, 0.1) 100%); border: 1px solid var(--tavern-gold); border-radius: 12px; padding: 20px; text-align: center; position: relative; overflow: hidden; } .stat-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--tavern-gold) 0%, var(--tavern-purple) 100%); } .dropdown { position: relative; display: inline-block; } .dropdown-menu { position: absolute; top: 100%; right: 0; background-color: var(--tavern-cream); min-width: 200px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); border-radius: 8px; overflow: hidden; z-index: 100; border: 1px solid var(--tavern-gold); } .dropdown-item { display: block; width: 100%; padding: 12px 16px; color: var(--tavern-dark); text-decoration: none; font-weight: 500; transition: all 0.3s ease; background: none; border: none; text-align: left; cursor: pointer; font-family: "Inter", sans-serif; font-size: 14px; } .dropdown-item:hover { background-color: var(--tavern-gold); color: var(--tavern-cream); } .badge { display: inline-block; padding: 4px 8px; border-radius: 6px; font-size: 12px; font-weight: 600; text-transform: uppercase; } .badge-easy { background-color: #4caf50; color: white; } .badge-medium { background-color: #ff9800; color: white; } .badge-hard { background-color: #f44336; color: white; } .badge-purple { background-color: var(--tavern-purple); color: white; } .badge-status { background-color: var(--tavern-gold); color: var(--tavern-dark); } .avatar { width: 40px; height: 40px; background-color: var(--tavern-purple); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--tavern-cream); font-weight: bold; font-size: 16px; } .avatar-sm { width: 24px; height: 24px; font-size: 12px; } .avatar-lg { width: 80px; height: 80px; font-size: 32px; } .avatar-xl { width: 120px; height: 120px; font-size: 48px; } .level-badge { background: linear-gradient(135deg, var(--tavern-gold) 0%, #ffe26f 100%); color: var(--tavern-dark); padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: bold; margin-left: 8px; } .quest-progress { background-color: rgba(255, 255, 255, 0.5); border-radius: 8px; padding: 12px; margin-top: 12px; } .quest-progress-bar { width: 100%; height: 6px; background-color: rgba(44, 26, 29, 0.2); border-radius: 3px; overflow: hidden; margin-top: 8px; } .quest-progress-fill { height: 100%; background: linear-gradient(90deg, #ff9800 0%, #4caf50 100%); transition: width 0.3s ease; } .xp-gauge { height: 4px; background-color: #d1d5db; border-radius: 50%; overflow: hidden; } .xp-gauge-fill { height: 100%; background-color: var(--tavern-purple); } .nav-link { padding: 4px 8px; color: var(--tavern-cream); transition: color 0.3s ease; } .nav-link:hover { color: var(--tavern-gold); } .nav-link-active { color: var(--tavern-gold); } .tavern-header { background-color: var(--tavern-dark); color: var(--tavern-cream); padding: 4px 0; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .tavern-card { background-color: white; border: 1px solid var(--tavern-gold); border-radius: 12px; overflow: hidden; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); transition: box-shadow 0.3s ease; } .tavern-card-header { background-color: rgba(205, 170, 125, 0.2); padding: 4px 0; } .tavern-section-title { font-size: 2.25rem; font-weight: bold; text-align: center; margin-bottom: 2rem; color: var(--tavern-dark); font-family: "Times New Roman", "Georgia", serif; } .tavern-section-subtitle { text-align: center; color: var(--tavern-purple); margin-bottom: 2rem; } @media (max-width: 768px) { .stats-grid { grid-template-columns: 1fr; } .filter-section { padding: 16px; } .modal-content { margin: 16px; max-width: calc(100vw - 32px); } .btn { padding: 10px 16px; font-size: 14px; } } .loading-spinner { display: inline-block; width: 20px; height: 20px; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: currentColor; animation: spin 1s ease-in-out infinite; } @keyframes spin { to { transform: rotate(360deg); } } .empty-state { text-align: center; padding: 40px 20px; color: var(--tavern-dark); opacity: 0.7; } .empty-state-icon { width: 64px; height: 64px; margin: 0 auto 16px; opacity: 0.5; } [V0_FILE]typescriptreact:file="app/cookie-policy/page.tsx" isEdit="true" isMerged="true" export default function CookiePolicy() { return (

Cookie Policy

This Cookie Policy explains how PeerQuest Tavern uses cookies and similar technologies to recognize you when you visit our platform. It explains what these technologies are and why we use them, as well as your rights to control our use of them.

1. What are cookies?

Cookies are small data files that are placed on your computer or mobile device when you visit a website. Cookies are widely used by website owners in order to make their websites work, or to work more efficiently, as well as to provide reporting information.

Cookies set by the website owner (in this case, PeerQuest Tavern) are called "first-party cookies". Cookies set by parties other than the website owner are called "third-party cookies". Third-party cookies enable third-party features or functionality to be provided on or through the website (e.g., advertising, interactive content, and analytics).

2. Why do we use cookies?

We use first-party and third-party cookies for several reasons. Some cookies are required for technical reasons in order for our platform to operate, and we refer to these as "essential" or "strictly necessary" cookies. Other cookies also enable us to track and target the interests of our users to enhance the experience on our platform. Third parties serve cookies through our platform for advertising, analytics, and other purposes.

3. Types of cookies we use

The specific types of first and third-party cookies served through our platform and the purposes they perform include:

Essential Cookies

These cookies are strictly necessary to provide you with services available through our platform and to use some of its features, such as access to secure areas. Without these cookies, services you have asked for, like secure login, cannot be provided.

Performance and Functionality Cookies

These cookies are used to enhance the performance and functionality of our platform but are non-essential to their use. However, without these cookies, certain functionality may become unavailable.

Analytics and Customization Cookies

These cookies collect information that is used either in aggregate form to help us understand how our platform is being used or how effective our marketing campaigns are, or to help us customize our platform for you.

Advertising Cookies

These cookies are used to make advertising messages more relevant to you. They perform functions like preventing the same ad from continuously reappearing, ensuring that ads are properly displayed for advertisers, and in some cases selecting advertisements that are based on your interests.

Social Media Cookies

These cookies are used to enable you to share pages and content that you find interesting on our platform through third-party social networking and other websites. These cookies may also be used for advertising purposes.

4. How can you control cookies?

You have the right to decide whether to accept or reject cookies. You can exercise your cookie preferences by clicking on the appropriate opt-out links provided in the cookie banner on our platform.

You can also set or amend your web browser controls to accept or refuse cookies. If you choose to reject cookies, you may still use our platform though your access to some functionality and areas may be restricted. As the means by which you can refuse cookies through your web browser controls vary from browser to browser, you should visit your browser's help menu for more information.

5. How often will we update this Cookie Policy?

We may update this Cookie Policy from time to time in order to reflect, for example, changes to the cookies we use or for other operational, legal, or regulatory reasons. Please therefore revisit this Cookie Policy regularly to stay informed about our use of cookies and related technologies.

The date at the bottom of this Cookie Policy indicates when it was last updated.

6. Where can you get further information?

If you have any questions about our use of cookies or other technologies, please contact us at cookies@peerquesttavern.com.

Last updated: June 13, 2025

) } [V0_FILE]typescriptreact:file="components/enhanced-profile.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" interface User { id: number name: string level: number experience: number gold: number completedQuests: number guilds: string[] } interface Quest { id: number title: string description: string status: string assignedTo: number xp: number reward: number createdAt: Date completedAt?: Date } interface Guild { name: string emblem: string } interface EnhancedProfileProps { user: User quests: Quest[] guilds: Guild[] showToast?: (message: string, type?: "success" | "error") => void } export const EnhancedProfile: React.FC = ({ user, quests, guilds, showToast }) => { const showQuestDetails = (quest: Quest) => { // You could implement a modal to show details here if (showToast) { showToast(`Viewing details for quest: ${quest.title}`) } } const completeTestQuest = () => { // Create a test completed quest const testQuest: Partial = { id: Date.now(), title: `Test Quest ${Math.floor(Math.random() * 1000)}`, description: "This is a test quest that was completed for testing", status: "completed", assignedTo: user.id, xp: 50 + Math.floor(Math.random() * 100), reward: 25 + Math.floor(Math.random() * 75), createdAt: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000), completedAt: new Date(), } // Find the setQuests function from parent component if available if (window.updateCompletedQuests) { window.updateCompletedQuests(testQuest as Quest) if (showToast) { showToast("Test quest completed successfully!") } } else { if (showToast) { showToast("Could not update quests. Function not available.", "error") } } } const joinTestGuild = () => { // Create a test guild to join const guildName = `Test Guild ${Math.floor(Math.random() * 1000)}` if (window.joinGuildTest) { window.joinGuildTest(user.id, guildName) if (showToast) { showToast(`Successfully joined ${guildName}!`) } } else { if (showToast) { showToast("Could not join guild. Function not available.", "error") } } } return (

{/* User Info */}

{user.name}

Level: {user.level}

Experience: {user.experience}

Gold: {user.gold}

{/* Completed Quests */}

Completed Quests

{user.completedQuests > 0 ? ( quests .filter((q) => q.status === "completed" && q.assignedTo === user.id) .slice(0, 3) .map((quest) => (

{quest.title.toUpperCase()}

COMPLETED: {new Date(quest.completedAt || Date.now()).toLocaleDateString()}

{quest.xp} XP

showQuestDetails(quest)}> VIEW DETAILS

)) ) : (

No completed quests yet

)} {/* Add test quest completion button */}

{/* Joined Guilds */}

Guild Memberships

{user.guilds && user.guilds.length > 0 ? (

{user.guilds.map((guildName, index) => { const guild = guilds.find((g) => g.name === guildName) return (

{guild?.emblem || "⚔️"} {guildName.toUpperCase()}

) })}

) : (

No guilds joined yet

)} {/* Add join test guild button */}

) } [V0_FILE]typescriptreact:file="components/auth-modal.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { X, Eye, EyeOff, AlertCircle } from "lucide-react" interface AuthModalProps { isOpen: boolean mode: "login" | "register" | "forgot" setMode: (mode: "login" | "register" | "forgot") => void onClose: () => void onLogin: (credentials: { email: string; password: string }) => void onRegister: (userData: { username: string; email: string; password: string; confirmPassword: string }) => void onForgotPassword?: (email: string) => void } export function AuthModal({ isOpen, mode, setMode, onClose, onLogin, onRegister, onForgotPassword }: AuthModalProps) { const [showPassword, setShowPassword] = useState(false) const [showConfirmPassword, setShowConfirmPassword] = useState(false) const [formErrors, setFormErrors] = useState>({}) const [loginForm, setLoginForm] = useState({ email: "", password: "", rememberMe: false, }) const [registerForm, setRegisterForm] = useState({ username: "", email: "", password: "", confirmPassword: "", birthday: { month: "", day: "", year: "", }, gender: "" as "" | "male" | "female" | "other" | "prefer-not-to-say", agreeToTerms: false, }) const [forgotForm, setForgotForm] = useState({ email: "", }) if (!isOpen) return null const validateEmail = (email: string) => { const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/ return re.test(email) } const validatePassword = (password: string) => { return password.length >= 8 } const validateLoginForm = () => { const errors: Record = {} if (!loginForm.email) { errors.email = "Email is required" } else if (!validateEmail(loginForm.email)) { errors.email = "Please enter a valid email" } if (!loginForm.password) { errors.password = "Password is required" } setFormErrors(errors) return Object.keys(errors).length === 0 } const validateRegisterForm = () => { const errors: Record = {} if (!registerForm.username) { errors.username = "Username is required" } else if (registerForm.username.length < 3) { errors.username = "Username must be at least 3 characters" } if (!registerForm.email) { errors.email = "Email is required" } else if (!validateEmail(registerForm.email)) { errors.email = "Please enter a valid email" } if (!registerForm.password) { errors.password = "Password is required" } else if (!validatePassword(registerForm.password)) { errors.password = "Password must be at least 8 characters" } if (registerForm.password !== registerForm.confirmPassword) { errors.confirmPassword = "Passwords do not match" } if (!registerForm.birthday.month || !registerForm.birthday.day || !registerForm.birthday.year) { errors.birthday = "Please enter your full birthday" } if (!registerForm.agreeToTerms) { errors.agreeToTerms = "You must agree to the Terms of Use" } setFormErrors(errors) return Object.keys(errors).length === 0 } const validateForgotForm = () => { const errors: Record = {} if (!forgotForm.email) { errors.email = "Email is required" } else if (!validateEmail(forgotForm.email)) { errors.email = "Please enter a valid email" } setFormErrors(errors) return Object.keys(errors).length === 0 } const handleLogin = () => { if (validateLoginForm()) { onLogin({ email: loginForm.email, password: loginForm.password, }) } } const handleRegister = () => { if (validateRegisterForm()) { onRegister({ username: registerForm.username, email: registerForm.email, password: registerForm.password, confirmPassword: registerForm.confirmPassword, }) } } const handleForgotPassword = () => { if (validateForgotForm() && onForgotPassword) { onForgotPassword(forgotForm.email) } } const generateMonthOptions = () => { const months = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December", ] return months.map((month, index) => ( )) } const generateDayOptions = () => { const days = [] for (let i = 1; i <= 31; i++) { days.push( , ) } return days } const generateYearOptions = () => { const years = [] const currentYear = new Date().getFullYear() for (let i = currentYear - 13; i >= currentYear - 100; i--) { years.push( , ) } return years } return (

{/* Header */}

{mode === "login" ? "Enter the Tavern" : mode === "register" ? "Join the Tavern" : "Recover Your Password"}

{/* Tabs for Login/Register */} {mode !== "forgot" && (

)} {/* Form Content */}

{formErrors.auth && (

{formErrors.auth}

)} {mode === "login" && ( <>

EMAIL setLoginForm((prev) => ({ ...prev, email: e.target.value }))} /> {formErrors.email &&

{formErrors.email}

}

PASSWORD

setLoginForm((prev) => ({ ...prev, password: e.target.value }))} />

{formErrors.password &&

{formErrors.password}

}

setLoginForm((prev) => ({ ...prev, rememberMe: e.target.checked }))} className="w-4 h-4 text-[#8B75AA] border-[#CDAA7D] rounded focus:ring-[#8B75AA]" /> REMEMBER ME

OR LOGIN WITH

)} {mode === "register" && ( <>

USERNAME setRegisterForm((prev) => ({ ...prev, username: e.target.value }))} /> {formErrors.username &&

{formErrors.username}

}

EMAIL setRegisterForm((prev) => ({ ...prev, email: e.target.value }))} /> {formErrors.email &&

{formErrors.email}

}

PASSWORD

setRegisterForm((prev) => ({ ...prev, password: e.target.value }))} />

{formErrors.password &&

{formErrors.password}

}

CONFIRM PASSWORD

setRegisterForm((prev) => ({ ...prev, confirmPassword: e.target.value }))} />

{formErrors.confirmPassword && (

{formErrors.confirmPassword}

)}

BIRTHDAY

{formErrors.birthday &&

{formErrors.birthday}

}

GENDER (OPTIONAL)

setRegisterForm((prev) => ({ ...prev, agreeToTerms: e.target.checked }))} />

BY CLICKING SIGN UP, YOU ARE AGREEING TO THE TERMS OF USE AND{" "} PRIVACY POLICY.

{formErrors.agreeToTerms &&

{formErrors.agreeToTerms}

}

OR REGISTER WITH

)} {mode === "forgot" && ( <>

EMAIL ADDRESS setForgotForm((prev) => ({ ...prev, email: e.target.value }))} /> {formErrors.email &&

{formErrors.email}

}

ENTER YOUR EMAIL ADDRESS AND WE'LL SEND YOU A LINK TO RESET YOUR PASSWORD.

)}

) } [V0_FILE]typescriptreact:file="components/footer.tsx" isEdit="true" isMerged="true" import { Star } from "lucide-react" export function Footer() { return ( ) } [V0_FILE]typescriptreact:file="components/gold-purchase-modal.tsx" isEdit="true" isMerged="true" "use client" import { X, CircleDollarSign, Shield } from "lucide-react" import type { User } from "@/lib/types" interface GoldPurchaseModalProps { isOpen: boolean onClose: () => void currentUser: User | null setCurrentUser: (user: User | ((prev: User) => User)) => void showToast: (message: string, type?: string) => void } export function GoldPurchaseModal({ isOpen, onClose, currentUser, setCurrentUser, showToast }: GoldPurchaseModalProps) { if (!isOpen) return null const purchaseGold = (amount: number, price: number) => { if (!currentUser) { showToast("Please log in to purchase gold", "error") return } setCurrentUser((prev) => ({ ...prev, gold: prev.gold + amount, })) onClose() showToast(`Successfully purchased ${amount} gold!`) } const packages = [ { amount: 100, price: 50, popular: false }, { amount: 250, price: 120, popular: true }, { amount: 500, price: 230, popular: false }, { amount: 1000, price: 450, popular: false }, ] return (

e.stopPropagation()}>

Purchase Gold

Choose a gold package to enhance your questing experience

{packages.map((pkg) => (

purchaseGold(pkg.amount, pkg.price)} > {pkg.popular && (

Notifications

{filteredNotifications.length > 0 ? ( filteredNotifications.map((notification) => (

markAsRead(notification.id)} >

{getNotificationIcon(notification.type)}

{notification.title}

{formatTime(notification.createdAt)}

{notification.message}

)) ) : (

No notifications to display

)}

) } [V0_FILE]typescriptreact:file="components/hero.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import type { User } from "@/lib/types" interface HeroProps { currentUser: User | null openAuthModal: () => void openRegisterModal: () => void navigateToSection: (section: string) => void } export function Hero({ currentUser, openAuthModal, openRegisterModal, navigateToSection }: HeroProps) { const [isHovered, setIsHovered] = useState(false) return (

{/* Background Pattern */}

Welcome to PeerQuest Tavern

A collaborative platform where adventurers gather to share skills, complete quests, and form guilds.

{!currentUser ? ( <> ) : ( <> )}

setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} >

🏆

Join the Adventure

Connect with skilled peers, showcase your talents, and earn rewards by completing quests.

{/* Features Section */}

Why Join Our Tavern?

{/* Skill Showcase */}

🔧

Skill Showcase

Display your talents through completed quests and build a portfolio that showcases your abilities to potential collaborators.

{/* Guild System */}

👥

Guild System

Join specialized guilds to connect with like-minded individuals, share resources, and collaborate on larger projects.

{/* Reputation System */}

🏆

Reputation System

Earn badges and increase your reputation by successfully completing quests and receiving positive feedback from other adventurers.

) } [V0_FILE]typescriptreact:file="lib/auth-service.ts" isEdit="true" isMerged="true" import type { User } from "./types" // Mock users for demo purposes const mockUsers = [ { id: 1, username: "HeroicAdventurer", displayName: "HeroicAdventurer", email: "hero@example.com", password: "password123", avatar: "H", bio: "Experienced adventurer looking for challenging quests.", level: 10, xp: 5600, gold: 1200, completedQuests: 1, createdQuests: 0, guilds: ["Mystic Brewers Guild", "Tavern Defenders", "Creative Crafters"], roles: ["user"], createdAt: new Date("2023-01-15"), settings: { theme: "dark", language: "English", privacy: { showEmail: false, showBirthday: false, showGender: false, }, notifications: { newQuests: true, questApplications: true, guildAnnouncements: true, directMessages: true, newsletter: false, }, security: { twoFactorEnabled: false, twoFactorMethod: "email", backupCodesGenerated: false, }, }, }, { id: 2, username: "TavernKeeper", displayName: "Tavern Keeper", email: "admin@example.com", password: "admin123", avatar: "T", bio: "Keeper of the PeerQuest Tavern. Administrator and moderator.", level: 50, xp: 25000, gold: 5000, completedQuests: 25, createdQuests: 15, guilds: ["Tavern Defenders"], roles: ["user", "admin"], createdAt: new Date("2022-10-01"), settings: { theme: "dark", language: "English", privacy: { showEmail: true, showBirthday: false, showGender: true, }, notifications: { newQuests: true, questApplications: true, guildAnnouncements: true, directMessages: true, newsletter: true, }, security: { twoFactorEnabled: true, twoFactorMethod: "authenticator", backupCodesGenerated: true, }, }, }, ] class AuthService { private currentUser: User | null = null constructor() { // Only access localStorage in the browser environment if (typeof window !== "undefined") { const storedUser = localStorage.getItem("currentUser") if (storedUser) { try { this.currentUser = JSON.parse(storedUser) } catch (error) { console.error("Failed to parse stored user:", error) localStorage.removeItem("currentUser") } } } } async login(email: string, password: string): Promise { // Simulate API call delay await new Promise((resolve) => setTimeout(resolve, 500)) const user = mockUsers.find((u) => u.email === email && u.password === password) if (!user) { throw new Error("Invalid email or password") } // Don't include password in the returned user object const { password: _, ...userWithoutPassword } = user this.currentUser = userWithoutPassword as User // Only access localStorage in the browser environment if (typeof window !== "undefined") { localStorage.setItem("currentUser", JSON.stringify(this.currentUser)) } return this.currentUser } async register(username: string, email: string, password: string): Promise { // Simulate API call delay await new Promise((resolve) => setTimeout(resolve, 500)) // Check if user already exists if (mockUsers.some((u) => u.email === email)) { throw new Error("Email already in use") } // Create new user const newUser = { id: mockUsers.length + 1, username, displayName: username, email, password, // In a real app, this would be hashed avatar: username.charAt(0).toUpperCase(), bio: "", level: 1, xp: 0, gold: 100, completedQuests: 0, createdQuests: 0, guilds: [], roles: ["user"], createdAt: new Date(), settings: { theme: "dark", language: "English", privacy: { showEmail: false, showBirthday: false, showGender: false, }, notifications: { newQuests: true, questApplications: true, guildAnnouncements: true, directMessages: true, newsletter: false, }, security: { twoFactorEnabled: false, twoFactorMethod: "email", backupCodesGenerated: false, }, }, } mockUsers.push(newUser) // Don't include password in the returned user object const { password: _, ...userWithoutPassword } = newUser this.currentUser = userWithoutPassword as User // Only access localStorage in the browser environment if (typeof window !== "undefined") { localStorage.setItem("currentUser", JSON.stringify(this.currentUser)) } return this.currentUser } async forgotPassword(email: string): Promise { // Simulate API call delay await new Promise((resolve) => setTimeout(resolve, 500)) const user = mockUsers.find((u) => u.email === email) if (!user) { throw new Error("No account found with this email") } // In a real app, this would send a password reset email console.log(`Password reset requested for ${email}`) } logout(): void { this.currentUser = null // Only access localStorage in the browser environment if (typeof window !== "undefined") { localStorage.removeItem("currentUser") } } async getCurrentUser(): Promise { // Simulate API call delay await new Promise((resolve) => setTimeout(resolve, 100)) return this.currentUser } isAuthenticated(): boolean { return !!this.currentUser } hasRole(role: string): boolean { return this.currentUser?.roles?.includes(role) || false } } export const authService = new AuthService() [V0_FILE]plaintext:file="componentdefined.txt" isMerged="true" PEERQUEST TAVERN - COMPONENT DEFINITIONS ======================================= UI ELEMENTS: ----------- - Primary Button (purple background, white text) - Secondary Button (outline style) - Success Button (green background) - Danger Button (red background) - Icon Buttons (small circular with icons) - Quest Cards (title, description, difficulty badge, action buttons) - Guild Cards (emblem, name, member count, join button) - User Cards (avatar, name, level, skills) - Navigation Panel (navbar with logo, links, user dropdown) - Modal Panels (overlay, centered content, close button) - Difficulty Badges (Easy=green, Medium=orange, Hard=red) - Status Badges (Open, In Progress, Completed, Pending) - Skill Badges (purple pills) - Input Fields (styled with tavern colors) - Select Dropdowns (custom styling) - Textareas (consistent border styling) COMPONENTS: ---------- Layout Components: - Navbar (main navigation, user dropdown, notifications) - Footer (links, legal info, social media) Page Components: - Hero (landing page hero section) - About (about page content) Quest Components: - QuestBoard (display and filter quests) - QuestDetailsModal (detailed quest information) - QuestManagement (manage user's quests) - PostQuestModal (create new quests) Guild Components: - GuildHall (display available guilds) - GuildManagement (manage user's guilds) - CreateGuildModal (create new guilds) User Components: - Profile (user profile display) - UserSearch (search and discover users) - Settings (user settings and preferences) Communication Components: - MessagingSystem (in-app messaging) - Notifications (display user notifications) Modal Components: - AuthModal (login/register/forgot password) - GoldSystemModal (gold purchase and management) - ApplicationsModal (view quest applications) Admin Components: - AdminPanel (administrative functions) FUNCTIONS: --------- Authentication Functions: - authService.login() - authService.register() - authService.logout() - authService.getCurrentUser() Utility Functions: - formatTimeRemaining() - getDifficultyClass() - calculateLevel() - getXPForLevel() - cn() (class name utility) Quest Functions: - applyForQuest() - approveApplication() - completeQuest() Guild Functions: - createGuild() - joinGuild() - approveGuildApplication() Notification Functions: - showToast() - addNotification() DATA TYPES: ---------- - User (id, username, email, avatar, level, xp, gold, skills, etc.) - Quest (id, title, description, category, difficulty, reward, status, etc.) - Guild (id, name, description, emblem, specialization, members, etc.) - QuestApplication (id, userId, status, message, appliedAt, etc.) - GuildApplication (id, guildId, applicant, message, status, etc.) - Notification (id, userId, type, title, message, read, createdAt, etc.) SERVICES: -------- - AuthService (authentication and session management) - ToastService (toast notifications) - ValidationService (form validation utilities) COLORS: ------ Primary Colors: - Tavern Brown (#2C1A1D) - Tavern Purple (#8B75AA) - Tavern Gold (#CDAA7D) - Tavern Cream (#F4F0E6) Status Colors: - Success (#10B981 - Green) - Warning (#F59E0B - Orange) - Error (#EF4444 - Red) - Info (#3B82F6 - Blue) FILES: ----- Components: - about.tsx - admin-panel.tsx - applications-modal.tsx - auth-modal.tsx - create-guild-modal.tsx - enhanced-profile.tsx - footer.tsx - gold-purchase-modal.tsx - gold-system-modal.tsx - guild-hall.tsx - guild-management.tsx - hero.tsx - messaging-system.tsx - navbar.tsx - notifications.tsx - post-quest-modal.tsx - profile.tsx - quest-board.tsx - quest-details-modal.tsx - quest-management.tsx - settings.tsx - toast.tsx - user-search.tsx Library Files: - auth-service.ts - level-utils.ts - mock-data.ts - types.ts - utils.ts App Files: - globals.css - layout.tsx - page.tsx - cookie-policy/page.tsx - privacy-policy/page.tsx - terms-of-service/page.tsx Assets: - createaguild.png - forgotpass.png - login.png - home-no-login.png - guildhall.png - postaquest.png - register.png - questboard.png - profile.png - settings.png FEATURES: -------- - User Authentication (Login/Register/Logout) - Quest System (Create/Browse/Apply/Complete) - Guild System (Create/Join/Manage) - Messaging System (User-to-user communication) - Notification System (Real-time updates) - Gold System (Virtual currency) - Level System (XP-based progression) - Admin Panel (User/Content management) - Profile Management (Skills/Bio/Settings) - Search & Discovery (Users/Quests/Guilds) - Responsive Design (Mobile/Desktop) - Toast Notifications (Success/Error messages) [V0_FILE]plaintext:file="flowchartdefinition.txt" isMerged="true" PEERQUEST TAVERN - FLOWCHART DEFINITION GUIDE ============================================= HOW TO CREATE FLOWCHARTS FOR THIS PROJECT ========================================= FLOWCHART SYMBOLS TO USE: ------------------------ [Rectangle] = Process/Action [Diamond] = Decision Point [Oval] = Start/End Point [Circle] = Connector [Parallelogram] = Input/Output [Document] = Data/File [Database] = Data Storage MAIN APPLICATION FLOW: --------------------- Start → Landing Page → Authentication Check → Dashboard/Home USER AUTHENTICATION FLOW: ------------------------- [Start] → [User clicks Login/Register] → [AuthModal opens] → [User selects Login/Register/Forgot Password] → → Yes → [Enter credentials] → [Validate] → → Yes → [Set user session] → [Close modal] → [Redirect to dashboard] → No → [Show error message] → [Return to login form] → Yes → [Enter user details] → [Validate] → → Yes → [Create account] → [Set user session] → [Close modal] → [Redirect to dashboard] → Yes → [Enter email] → [Send reset link] → [Show success message] QUEST SYSTEM FLOW: ----------------- Quest Creation: [User clicks "Post Quest"] → [PostQuestModal opens] → [Fill form] → [Validate data] → → Yes → [Save quest] → [Show success] → [Close modal] → No → [Show validation errors] → [Return to form] Quest Application: [User views quest] → [Click "Apply"] → [QuestDetailsModal opens] → [Click "Apply for Quest"] → [Fill application] → [Submit] → [Save application] → [Notify quest owner] → [Show success message] Quest Management: [Quest Owner] → [QuestManagement] → [View applications] → [Select applicant] → → Yes → [Update application status] → [Notify applicant] → No → [Reject application] → [Notify applicant] GUILD SYSTEM FLOW: ----------------- Guild Creation: [User clicks "Create Guild"] → [CreateGuildModal opens] → [Fill form] → [Upload emblem] → [Validate] → → Yes → [Create guild] → [Set user as leader] → [Close modal] → No → [Show errors] → [Return to form] Guild Joining: [User views guild] → [Click "Join Guild"] → [Fill application] → [Submit] → [Save application] → [Notify guild leaders] → [Show success] Guild Management: [Guild Leader] → [GuildManagement] → [View applications] → [Select applicant] → → Yes → [Add to guild] → [Notify applicant] → No → [Reject] → [Notify applicant] MESSAGING SYSTEM FLOW: --------------------- [User opens messages] → [MessagingSystem loads] → [Display conversations] → [User selects conversation] → [Load messages] → [Display chat] → [User types message] → [Send] → [Save to database] → [Update UI] → [Notify recipient] NOTIFICATION SYSTEM FLOW: ------------------------ [Event occurs] → [Create notification] → [Save to database] → [Check if user online] → → Yes → [Show real-time notification] → No → [Store for later] → [Show when user logs in] ADMIN PANEL FLOW: ---------------- [Admin login] → [Check admin role] → → Yes → [Show AdminPanel] → No → [Deny access] → [Show error] [AdminPanel] → [Select action] → → [User management interface] → [Quest moderation interface] → [Guild management interface] → [Reports dashboard] PROFILE MANAGEMENT FLOW: ----------------------- [User clicks profile] → [Profile component loads] → [Display user data] → [User clicks edit] → [Settings modal opens] → [Modify data] → [Save changes] → [Validate] → → Yes → [Update database] → [Show success] → No → [Show errors] → [Return to form] GOLD SYSTEM FLOW: ---------------- [User clicks gold] → [GoldSystemModal opens] → [Display packages] → [User selects package] → [Proceed to payment] → [Process payment] → → Yes → [Add gold to account] → [Show success] → No → [Show error] → [Return to selection] SEARCH SYSTEM FLOW: ------------------ [User enters search] → [Validate input] → → Yes → [Query database] → [Filter results] → [Display results] → [User selects result] → [Navigate to detail] → No → [Show validation message] ERROR HANDLING FLOW: ------------------- [Error occurs] → [Log error] → [Check error type] → → [Show network error message] → [Retry option] → [Show field-specific errors] → [Highlight fields] → [Show generic error] → [Contact support option] → [Clear session] → [Redirect to login] DATA FLOW PATTERNS: ------------------ Component → Service → API → Database → API → Service → Component State Management Flow: [User Action] → [Update Local State] → [Call Service] → [Update Database] → [Return Response] → [Update UI State] → [Re-render Component] NAVIGATION FLOW: --------------- [Current Page] → [User clicks navigation] → [Route change] → [Load new component] → [Fetch required data] → [Render page] RESPONSIVE DESIGN FLOW: ---------------------- [Page loads] → [Detect screen size] → → Yes → [Load mobile layout] → No → → Yes → [Load tablet layout] → No → [Load desktop layout] SECURITY FLOW: ------------- [User request] → [Check authentication] → → No → [Redirect to login] → Yes → [Check authorization] → → No → [Show access denied] → Yes → [Process request] → [Return response] HOW TO DRAW THE FLOWCHARTS: -------------------------- 1. Start with the main user journey 2. Identify decision points (diamond shapes) 3. Show all possible paths (Yes/No branches) 4. Include error handling paths 5. Use consistent symbols throughout 6. Add labels to all connections 7. Group related processes in swimlanes 8. Use colors to differentiate user types (Admin, Regular User, Guest) 9. Include data flow arrows 10. Add notes for complex business logic RECOMMENDED FLOWCHART TOOLS: --------------------------- - Lucidchart - Draw.io (now diagrams.net) - Miro - Figma - Microsoft Visio - Creately FLOWCHART BEST PRACTICES: ------------------------ - Keep it simple and readable - Use standard flowchart symbols - Maintain consistent spacing - Label all decision points clearly - Show error paths in red - Use different colors for different user roles - Include a legend for symbols used - Break complex flows into multiple diagrams - Number the steps for reference - Include start and end points for each flow [V0_FILE]png:file="public/images/roblox-community-1.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-QwpGlDnR7oDSBb7cqNYRueHTMvGHrO.png" isMerged="true" [V0_FILE]png:file="public/images/roblox-community-2.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-if70bDxtOsGOzd2GYCustpjXj20Y4D.png" isMerged="true" [V0_FILE]png:file="public/images/roblox-community-3.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-NKldhvLwq7dFk308LKPUGaGsw0Y3oF.png" isMerged="true" [V0_FILE]png:file="public/images/roblox-community-4.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-o73FVVywXw00uSaSFIGcb6tCjY8RRz.png" isMerged="true" [V0_FILE]png:file="public/images/roblox-community-5.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-VKLjwCJKlnokYldvlVgsMzQdIZqJN9.png" isMerged="true" [V0_FILE]png:file="public/images/roblox-community-6.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-WPXCqRguY7iDDmk8rW9acB3rjyJWts.png" isMerged="true" [V0_FILE]png:file="public/images/roblox-community-7.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-XyQYZ8irSIm0TtBsRZGs48pN1802Pq.png" isMerged="true" [V0_FILE]png:file="public/images/roblox-community-8.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-KmdxStH98Ul9QZCz4J0gL7E90w8TbI.png" isMerged="true" [V0_FILE]png:file="public/images/roblox-community-9.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-TPhgEgQd5mne9gIwTka5zutHj6YBou.png" isMerged="true" [V0_FILE]png:file="public/images/roblox-community-10.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-JRjVGWNFOwYjKXONEa5oK9EdnzUPo3.png" isMerged="true" [V0_FILE]typescriptreact:file="lib/mock-data.ts" isEdit="true" isMerged="true" import type { User, Quest, Guild, Message, Conversation, GuildSettings, GuildRole } from "./types" const defaultGuildSettings: GuildSettings = { joinRequirements: { manualApproval: true, minimumLevel: 1, requiresApplication: true, }, visibility: { publiclyVisible: true, showOnHomePage: true, allowDiscovery: true, }, permissions: { whoCanPost: "members", whoCanInvite: "members", whoCanKick: "admins", }, } const defaultGuildRoles: GuildRole[] = [ { id: 1, name: "Owner", description: "The guild's owner", rank: 255, permissions: { manageMembers: true, manageFunds: true, postAnnouncements: true, moderateChat: true, acceptApplications: true, kickMembers: true, banMembers: true, manageRoles: true, }, color: "#FFD700", }, { id: 2, name: "Admin", description: "Guild administrators", rank: 200, permissions: { manageMembers: true, manageFunds: false, postAnnouncements: true, moderateChat: true, acceptApplications: true, kickMembers: true, banMembers: false, manageRoles: false, }, color: "#FF6B6B", }, { id: 3, name: "Member", description: "Regular guild members", rank: 1, permissions: { manageMembers: false, manageFunds: false, postAnnouncements: false, moderateChat: false, acceptApplications: false, kickMembers: false, banMembers: false, manageRoles: false, }, color: "#4ECDC4", }, ] export const mockUsers: User[] = [ { id: 1, username: "HeroicAdventurer", displayName: "HeroicAdventurer", email: "hero@example.com", password: "password123", // In a real app, this would be hashed gold: 1200, xp: 5600, level: 10, joinDate: "2023-01-15", completedQuests: 1, activeQuests: 0, guilds: ["Mystic Brewers Guild", "Tavern Defenders", "Creative Crafters"], guildIds: [1, 2, 3], avatar: "H", bio: "Experienced adventurer looking for challenging quests.", skills: ["Combat", "Alchemy", "Negotiation"], role: "user", settings: { theme: "dark", language: "en", privacy: { showBirthday: false, showGender: true, showEmail: false, }, security: { twoFactorEnabled: false, twoFactorMethod: null, backupCodesGenerated: false, }, notifications: { newQuests: true, questApplications: true, guildAnnouncements: true, directMessages: true, newsletter: false, }, }, }, { id: 2, username: "QuestMaster", displayName: "Quest Master", email: "admin@example.com", password: "admin123", // In a real app, this would be hashed gold: 5000, xp: 15000, level: 25, joinDate: "2022-11-05", completedQuests: 45, activeQuests: 2, guilds: ["Tavern Defenders"], guildIds: [2], avatar: "Q", bio: "I create the most challenging quests for worthy adventurers.", skills: ["Leadership", "Strategy", "Lore"], role: "admin", settings: { theme: "light", language: "en", privacy: { showBirthday: true, showGender: true, showEmail: true, }, security: { twoFactorEnabled: true, twoFactorMethod: "app", backupCodesGenerated: true, }, notifications: { newQuests: true, questApplications: true, guildAnnouncements: true, directMessages: true, newsletter: true, }, }, }, { id: 3, username: "MysticBrewer", displayName: "Mystic Brewer", email: "brewer@example.com", password: "brew123", // In a real app, this would be hashed gold: 800, xp: 3200, level: 7, joinDate: "2023-03-20", completedQuests: 12, activeQuests: 1, guilds: ["Mystic Brewers Guild"], guildIds: [1], avatar: "M", bio: "Specializing in rare and magical potions.", skills: ["Alchemy", "Herbalism", "Research"], role: "user", settings: { theme: "dark", language: "en", privacy: { showBirthday: false, showGender: false, showEmail: false, }, security: { twoFactorEnabled: false, twoFactorMethod: null, backupCodesGenerated: false, }, notifications: { newQuests: true, questApplications: true, guildAnnouncements: true, directMessages: true, newsletter: false, }, }, }, { id: 4, username: "TavernKeeper", email: "keeper@example.com", password: "secure456", avatar: "T", level: 15, xp: 8900, gold: 3500, bio: "Owner of the PeerQuest Tavern. Always looking for talented individuals.", completedQuests: 42, activeQuests: 0, guilds: ["Tavern Defenders", "Creative Crafters"], guildIds: [2, 3], isAdmin: true, isBanned: false, createdAt: new Date(2022, 10, 5), settings: { email: "keeper@example.com", username: "TavernKeeper", password: "secure456", avatar: "T", notifications: { questUpdates: true, guildUpdates: true, messages: true, applicationUpdates: true, }, privacy: { showProfile: "everyone", showActivity: true, showGuilds: true, }, theme: "dark", language: "en", }, roles: ["admin"], }, { id: 5, username: "BannedUser", email: "banned@example.com", password: "banned123", avatar: "B", level: 3, xp: 1200, gold: 100, bio: "This account has been banned for violating community guidelines.", completedQuests: 2, activeQuests: 0, guilds: [], guildIds: [], isAdmin: false, isBanned: true, createdAt: new Date(2023, 6, 5), settings: { email: "banned@example.com", username: "BannedUser", password: "banned123", avatar: "B", notifications: { questUpdates: true, guildUpdates: true, messages: true, applicationUpdates: true, }, privacy: { showProfile: "everyone", showActivity: true, showGuilds: true, }, theme: "light", language: "en", }, roles: ["user"], }, ] export const mockQuests: Quest[] = [ { id: 1, title: "Create a Website for the Tavern", description: "We need a new website for the PeerQuest Tavern. Looking for someone with web development skills.", poster: mockUsers[1], // TavernKeeper reward: 500, xp: 300, deadline: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000), // 7 days from now category: "development", difficulty: "medium", status: "open", createdAt: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000), // 2 days ago applicants: [ { id: 1, userId: 3, username: "QuestSeeker", avatar: "Q", message: "I have experience with web development and would love to help create a website for the tavern!", status: "pending", appliedAt: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000), // 1 day ago }, ], }, { id: 2, title: "Design a Tavern Logo", description: "Looking for a creative artist to design a new logo for the PeerQuest Tavern.", poster: mockUsers[1], // TavernKeeper reward: 300, xp: 200, deadline: new Date(Date.now() + 5 * 24 * 60 * 60 * 1000), // 5 days from now category: "design", difficulty: "easy", status: "in-progress", createdAt: new Date(Date.now() - 4 * 24 * 60 * 60 * 1000), // 4 days ago assignedTo: 4, // MysticBrewer applicants: [ { id: 2, userId: 4, username: "MysticBrewer", avatar: "M", message: "I'm a skilled artist and would love to design a logo for the tavern!", status: "accepted", appliedAt: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000), // 3 days ago }, { id: 3, userId: 3, username: "QuestSeeker", avatar: "Q", message: "I have some design experience and would like to try creating a logo for you.", status: "rejected", appliedAt: new Date(Date.now() - 3.5 * 24 * 60 * 60 * 1000), // 3.5 days ago }, ], }, { id: 3, title: "Guild Alchemy Research Project", description: "Need an experienced alchemist to develop a new potion recipe for health regeneration. This is a guild-sponsored quest with shared rewards.", poster: mockUsers[3], // MysticBrewer reward: 800, xp: 400, deadline: new Date(Date.now() + 10 * 24 * 60 * 60 * 1000), // 10 days from now category: "alchemy", difficulty: "hard", status: "open", createdAt: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000), // 1 day ago isGuildQuest: true, guildId: 1, guildReward: 200, applicants: [], }, { id: 4, title: "Write Tavern Lore", description: "Looking for a skilled writer to create lore and stories about the PeerQuest Tavern's history.", poster: mockUsers[1], // TavernKeeper reward: 400, xp: 250, deadline: new Date(Date.now() + 14 * 24 * 60 * 60 * 1000), // 14 days from now category: "writing", difficulty: "medium", status: "completed", createdAt: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000), // 30 days ago completedAt: new Date(Date.now() - 10 * 24 * 60 * 60 * 1000), // 10 days ago assignedTo: 1, // HeroicAdventurer applicants: [ { id: 4, userId: 1, username: "HeroicAdventurer", avatar: "H", message: "I'm a storyteller at heart and would love to craft the history of the tavern!", status: "accepted", appliedAt: new Date(Date.now() - 28 * 24 * 60 * 60 * 1000), // 28 days ago }, ], }, { id: 5, title: "Create Tavern Music", description: "Seeking a musician to compose a theme song for the PeerQuest Tavern.", poster: mockUsers[1], // TavernKeeper reward: 600, xp: 350, deadline: new Date(Date.now() + 20 * 24 * 60 * 60 * 1000), // 20 days from now category: "music", difficulty: "medium", status: "open", createdAt: new Date(Date.now() - 5 * 24 * 60 * 60 * 1000), // 5 days ago applicants: [ { id: 5, userId: 1, username: "HeroicAdventurer", avatar: "H", message: "I play the lute and would love to compose a theme for the tavern!", status: "pending", appliedAt: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000), // 3 days ago }, ], }, ] export const mockGuilds: Guild[] = [ { id: 1, name: "Mystic Brewers Guild", description: "A guild dedicated to the art of potion-making and alchemy. We share recipes, techniques, and collaborate on complex brewing projects.", emblem: "🧪", poster: mockUsers[2], // MysticBrewer members: 3, membersList: [1, 2, 3], // HeroicAdventurer, QuestMaster, MysticBrewer admins: [2], // MysticBrewer specialization: "Alchemy", category: "Alchemists", createdAt: new Date(2023, 3, 15), applications: [], funds: 1250, settings: defaultGuildSettings, roles: defaultGuildRoles, socialLinks: ["https://discord.gg/mysticbrewers", "https://twitter.com/mysticbrewers"], shout: { id: 1, content: "Welcome to the Mystic Brewers Guild! We're currently working on a new health potion recipe. Check out our latest guild quest!", authorId: 2, authorName: "MysticBrewer", createdAt: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000), updatedAt: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000), }, }, { id: 2, name: "Tavern Defenders", description: "The official guild for those who help protect and maintain the PeerQuest Tavern. Members get priority on tavern-related quests.", emblem: "🛡️", poster: mockUsers[3], // TavernKeeper members: 3, membersList: [1, 2, 4], // HeroicAdventurer, QuestMaster, TavernKeeper admins: [4], // TavernKeeper specialization: "Protection", category: "Warriors", createdAt: new Date(2023, 1, 10), applications: [ { id: 1, userId: 3, username: "MysticBrewer", avatar: "M", message: "I would like to join the Tavern Defenders to help protect this wonderful establishment!", status: "pending", appliedAt: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000), // 2 days ago }, ], funds: 2800, settings: { ...defaultGuildSettings, joinRequirements: { manualApproval: false, minimumLevel: 5, requiresApplication: false, }, }, roles: defaultGuildRoles, socialLinks: ["https://discord.gg/taverndefenders"], shout: { id: 2, content: "Defenders! We have new tavern security quests available. Let's keep our home safe!", authorId: 4, authorName: "TavernKeeper", createdAt: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000), updatedAt: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000), }, }, { id: 3, name: "Creative Crafters", description: "A guild for artists, designers, and creators of all kinds. We collaborate on creative projects and share techniques.", emblem: "🎨", poster: mockUsers[0], // HeroicAdventurer members: 2, membersList: [1, 4], // HeroicAdventurer, TavernKeeper admins: [1], // HeroicAdventurer specialization: "Art & Design", category: "Artists", createdAt: new Date(2023, 5, 20), applications: [ { id: 2, userId: 2, username: "MysticBrewer", avatar: "M", message: "I have a passion for art and would love to join your creative guild!", status: "pending", appliedAt: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000), // 1 day ago }, ], funds: 750, settings: defaultGuildSettings, roles: defaultGuildRoles, socialLinks: ["https://instagram.com/creativecrafters", "https://behance.net/creativecrafters"], shout: { id: 3, content: "Artists unite! We're hosting a design contest this week. Show us your creativity!", authorId: 1, authorName: "HeroicAdventurer", createdAt: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000), updatedAt: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000), }, }, ] export const mockMessages: Message[] = [ { id: 1, senderId: 1, // HeroicAdventurer receiverId: 2, // TavernKeeper content: "Hello! I'm interested in taking on more quests at the tavern.", read: true, createdAt: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000), // 3 days ago }, { id: 2, senderId: 2, // TavernKeeper receiverId: 1, // HeroicAdventurer content: "Great to hear! I've just posted a new quest for designing a tavern logo. Would you be interested?", read: true, createdAt: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000 + 30 * 60 * 1000), // 3 days ago + 30 minutes }, { id: 3, senderId: 1, // HeroicAdventurer receiverId: 2, // TavernKeeper content: "I'll check it out! My design skills aren't the best, but I might know someone who could help.", read: true, createdAt: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000 + 45 * 60 * 1000), // 3 days ago + 45 minutes }, { id: 4, senderId: 2, // TavernKeeper receiverId: 1, // HeroicAdventurer content: "That would be wonderful! Let me know if you find someone suitable.", read: true, createdAt: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000 + 60 * 60 * 1000), // 3 days ago + 60 minutes }, { id: 5, senderId: 1, // HeroicAdventurer receiverId: 2, // TavernKeeper content: "By the way, I completed the tavern lore quest. The documents should be on your desk.", read: true, createdAt: new Date(Date.now() - 10 * 24 * 60 * 60 * 1000), // 10 days ago }, { id: 6, senderId: 2, // TavernKeeper receiverId: 1, // HeroicAdventurer content: "I just read through them. Excellent work! Your reward has been processed.", read: true, createdAt: new Date(Date.now() - 9 * 24 * 60 * 60 * 1000), // 9 days ago }, { id: 7, senderId: 2, // TavernKeeper receiverId: 1, // HeroicAdventurer content: "Are you available to discuss a new special quest? It's something that requires your expertise.", read: false, createdAt: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000), // 1 day ago }, { id: 8, senderId: 3, // QuestSeeker receiverId: 1, // HeroicAdventurer content: "Hello! I'm new to the tavern and was hoping to get some advice from an experienced adventurer like yourself.", read: false, createdAt: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000), // 2 days ago }, { id: 9, senderId: 4, // MysticBrewer receiverId: 1, // HeroicAdventurer content: "I saw your application for the music quest. I'm also a musician! Perhaps we could collaborate sometime?", read: true, createdAt: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000), // 2 days ago }, { id: 10, senderId: 1, // HeroicAdventurer receiverId: 4, // MysticBrewer content: "That sounds like a great idea! What instruments do you play?", read: true, createdAt: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000 + 30 * 60 * 1000), // 2 days ago + 30 minutes }, ] export const mockConversations: Conversation[] = [ { id: 1, participants: [1, 2], // HeroicAdventurer, TavernKeeper lastMessage: "Are you available to discuss a new special quest? It's something that requires your expertise.", lastMessageDate: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000), // 1 day ago unreadCount: 1, }, { id: 2, participants: [1, 3], // HeroicAdventurer, QuestSeeker lastMessage: "Hello! I'm new to the tavern and was hoping to get some advice from an experienced adventurer like yourself.", lastMessageDate: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000), // 2 days ago unreadCount: 1, }, { id: 3, participants: [1, 4], // HeroicAdventurer, MysticBrewer lastMessage: "That sounds like a great idea! What instruments do you play?", lastMessageDate: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000 + 30 * 60 * 1000), // 2 days ago + 30 minutes unreadCount: 0, }, ] [V0_FILE]png:file="public/images/roblox-audit-log.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-qnW13Xo8fk1rDbyhMlEXOKfnnHjWQ7.png" isMerged="true" [V0_FILE]png:file="public/images/roblox-payouts.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-CbGaagRGMYQGogRVoZJBSmhunwI5kg.png" isMerged="true" [V0_FILE]typescriptreact:file="app/terms-of-service/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" export default function TermsOfService() { return (

Terms of Service

Welcome to PeerQuest Tavern. By accessing or using our service, you agree to be bound by these Terms of Service.

1. Acceptance of Terms

By accessing or using the PeerQuest Tavern platform, you agree to be bound by these Terms of Service and all applicable laws and regulations. If you do not agree with any of these terms, you are prohibited from using or accessing this site.

2. User Accounts

To use certain features of the platform, you must register for an account. You agree to provide accurate, current, and complete information during the registration process and to update such information to keep it accurate, current, and complete.

You are responsible for safeguarding the password that you use to access the platform and for any activities or actions under your password. We encourage you to use "strong" passwords (passwords that use a combination of upper and lower case letters, numbers, and symbols) with your account.

You must be at least 18 years of age to create an account. We may require age verification as part of the registration process.

3. User Content

Our platform allows you to post, link, store, share and otherwise make available certain information, text, graphics, videos, or other material. You are responsible for the content that you post to the platform, including its legality, reliability, and appropriateness.

By posting content to the platform, you grant us the right to use, modify, publicly perform, publicly display, reproduce, and distribute such content on and through the platform. You retain any and all of your rights to any content you submit, post or display on or through the platform and you are responsible for protecting those rights.

4. Quests and Guilds

PeerQuest Tavern provides a platform for users to create and participate in quests and guilds. We do not guarantee the quality, accuracy, or legality of quests posted by users.

Users who create quests are responsible for fulfilling the terms of their quests, including providing the stated rewards. Users who apply for quests are responsible for completing the quest requirements as specified.

5. Virtual Currency

PeerQuest Tavern may include a virtual currency system ("Gold"). Gold has no real-world value and cannot be exchanged for real money or items of value outside of the platform. We reserve the right to manage, regulate, control, modify, or eliminate Gold at any time, with or without notice.

The purchase of Gold is final and non-refundable. You acknowledge that we are not required to provide a refund for any reason.

6. Prohibited Activities

You may not access or use the platform for any purpose other than that for which we make the platform available. The platform may not be used in connection with any commercial endeavors except those that are specifically endorsed or approved by us.

Prohibited activities include, but are not limited to:

Systematic retrieval of data to create a collection or database
Making any unauthorized use of the platform
Engaging in unauthorized framing or linking to the platform
Tricking, defrauding, or misleading us and other users
Attempting to impersonate another user or person
Using the platform in a manner inconsistent with any applicable laws or regulations

7. Age Requirement

PeerQuest Tavern is intended for users who are 18 years of age or older. By using our platform, you represent and warrant that you are at least 18 years old. If we learn that we have collected personal information from someone under 18, we will promptly delete that information.

8. Termination

We may terminate or suspend your account and bar access to the platform immediately, without prior notice or liability, under our sole discretion, for any reason whatsoever and without limitation, including but not limited to a breach of the Terms.

If you wish to terminate your account, you may simply discontinue using the platform, or notify us that you wish to delete your account.

9. Limitation of Liability

In no event shall PeerQuest Tavern, nor its directors, employees, partners, agents, suppliers, or affiliates, be liable for any indirect, incidental, special, consequential or punitive damages, including without limitation, loss of profits, data, use, goodwill, or other intangible losses, resulting from your access to or use of or inability to access or use the platform.

10. Changes to Terms

We reserve the right, at our sole discretion, to modify or replace these Terms at any time. If a revision is material we will provide at least 30 days' notice prior to any new terms taking effect. What constitutes a material change will be determined at our sole discretion.

11. Contact Us

If you have any questions about these Terms, please contact us at support@peerquesttavern.com.

Last updated: June 13, 2025

) } [V0_FILE]typescriptreact:file="app/privacy-policy/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" export default function PrivacyPolicy() { return (

Privacy Policy

At PeerQuest Tavern, we take your privacy seriously. This Privacy Policy explains how we collect, use, disclose, and safeguard your information when you use our platform.

1. Information We Collect

We collect information that you provide directly to us when you:

Register for an account
Create or modify your profile
Post quests or apply to quests
Create or join guilds
Communicate with other users
Purchase virtual currency
Contact our support team

This information may include:

Name and username
Email address
Password
Profile information (avatar, bio, skills)
Content you post (quests, applications, messages)
Payment information (when purchasing virtual currency)

2. Automatically Collected Information

When you access or use our platform, we automatically collect certain information, including:

Log information (IP address, browser type, pages visited)
Device information (hardware model, operating system)
Usage data (features used, interactions, time spent)
Location information (general location based on IP address)

3. How We Use Your Information

We use the information we collect to:

Provide, maintain, and improve our platform
Create and maintain your account
Process transactions and send related information
Send administrative messages and updates
Respond to your comments, questions, and requests
Monitor and analyze trends, usage, and activities
Detect, investigate, and prevent fraudulent transactions and other illegal activities
Personalize your experience

4. Sharing of Information

We may share the information we collect in the following circumstances:

With other users as part of the normal operation of the platform (e.g., your username and profile information when you post a quest)
With vendors, consultants, and other service providers who need access to such information to carry out work on our behalf
In response to a request for information if we believe disclosure is in accordance with any applicable law, regulation, or legal process
If we believe your actions are inconsistent with our user agreements or policies, or to protect the rights, property, and safety of PeerQuest Tavern or others
In connection with, or during negotiations of, any merger, sale of company assets, financing, or acquisition of all or a portion of our business by another company
With your consent or at your direction

5. Data Security

We take reasonable measures to help protect information about you from loss, theft, misuse, unauthorized access, disclosure, alteration, and destruction. However, no internet or electronic transmission is ever fully secure or error-free.

6. Your Choices

You can access and update certain information about you from within your account settings. You can also request that we delete your account and associated data by contacting us.

7. Age Requirement

Our platform is designed for users who are 18 years of age or older. We do not knowingly collect personal information from individuals under 18. If we learn that we have collected personal information from someone under 18, we will promptly delete that information and terminate their account.

8. Changes to this Privacy Policy

We may update this Privacy Policy from time to time. If we make material changes, we will notify you through the platform or by other means, such as email. We encourage you to review the Privacy Policy whenever you access the platform.

9. Contact Us

If you have any questions about this Privacy Policy, please contact us at privacy@peerquesttavern.com.

Last updated: June 13, 2025

) } [V0_FILE]typescriptreact:file="components/guild-management.tsx" isEdit="true" isQuickEdit="true" isMerged="true" export { EnhancedGuildManagement as GuildManagement } from "./enhanced-guild-management" [V0_FILE]typescriptreact:file="components/guild-chat-modal.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect, useRef } from "react" import { X, Send, Smile } from "lucide-react" import type { Guild, User, GuildChatMessage } from "@/lib/types" interface GuildChatModalProps { isOpen: boolean onClose: () => void guild: Guild currentUser: User | null showToast: (message: string, type?: string) => void } export function GuildChatModal({ isOpen, onClose, guild, currentUser, showToast }: GuildChatModalProps) { const [messages, setMessages] = useState([]) const [newMessage, setNewMessage] = useState("") const [onlineMembers] = useState(Math.floor(guild.members * 0.3)) // Simulate online members const messagesEndRef = useRef(null) // Mock messages for demonstration useEffect(() => { if (isOpen) { const mockMessages: GuildChatMessage[] = [ { id: 1, guildId: guild.id, senderId: guild.poster.id, senderName: guild.poster.username, senderAvatar: guild.poster.avatar, content: "Welcome to the guild chat! Feel free to discuss quests and collaborate here.", createdAt: new Date(Date.now() - 2 * 60 * 60 * 1000), // 2 hours ago }, { id: 2, guildId: guild.id, senderId: 2, senderName: "QuestMaster", senderAvatar: "Q", content: "Has anyone seen the new alchemy quest? It looks challenging but rewarding!", createdAt: new Date(Date.now() - 1 * 60 * 60 * 1000), // 1 hour ago }, { id: 3, guildId: guild.id, senderId: 3, senderName: "MysticBrewer", senderAvatar: "M", content: "I'm working on that one! Would love some help with the rare ingredients.", createdAt: new Date(Date.now() - 30 * 60 * 1000), // 30 minutes ago }, ] setMessages(mockMessages) } }, [isOpen, guild.id, guild.poster]) useEffect(() => { messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }) }, [messages]) if (!isOpen || !currentUser) return null const isMember = guild.membersList.includes(currentUser.id) const isAdmin = guild.admins.includes(currentUser.id) || guild.poster.id === currentUser.id const handleSendMessage = () => { if (!newMessage.trim()) return const message: GuildChatMessage = { id: Date.now(), guildId: guild.id, senderId: currentUser.id, senderName: currentUser.username, senderAvatar: currentUser.avatar, content: newMessage, createdAt: new Date(), } setMessages((prev) => [...prev, message]) setNewMessage("") showToast("Message sent!", "success") } const formatTime = (date: Date) => { const now = new Date() const diffMinutes = Math.floor((now.getTime() - date.getTime()) / (1000 * 60)) if (diffMinutes < 1) return "Just now" if (diffMinutes < 60) return `${diffMinutes}m ago` if (diffMinutes < 1440) return `${Math.floor(diffMinutes / 60)}h ago` return date.toLocaleDateString() } return (

{/* Sidebar - Simplified */}

{/* Guild Header */}

{guild.emblem}

{guild.name}

{onlineMembers} online • {guild.members} members

{/* Members List */}

Online Members ({onlineMembers})

{/* Owner */}

{guild.poster.avatar}

{guild.poster.username}

{/* Sample online members */} {guild.membersList.slice(0, 5).map((memberId) => (

Member {memberId}

))}

{/* Chat Area */}

{/* Chat Header */}

{guild.name} Chat

Guild discussion

{/* Messages */}

{messages.map((message) => (

{message.senderAvatar}

{message.senderName} {formatTime(message.createdAt)}

{message.content}

))}

{/* Message Input */} {isMember && (

setNewMessage(e.target.value)} onKeyPress={(e) => { if (e.key === "Enter") handleSendMessage() }} className="w-full bg-[#3D2A2F] border border-[#4A3540] rounded px-4 py-3 text-white placeholder-gray-400 focus:outline-none focus:border-[#8B75AA]" />

)} {!isMember && (

You must be a member of this guild to participate in chat.

)}

) } [V0_FILE]png:file="public/images/roblox-payouts-clean.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-AUAFULFtvshNftgIkptzcTUDgxPCDd.png" isMerged="true" [V0_FILE]png:file="public/images/roblox-activity-history.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-e3ueR8VSKpxLM7KgUo4sk9bveP9S8w.png" isMerged="true" [V0_FILE]png:file="public/images/roblox-roles-config.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-GIQWoYLb4In4iM3AyAf3TUAIp1YIEg.png" isMerged="true" [V0_FILE]typescriptreact:file="components/guild-payouts.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Send } from "lucide-react" import type { Guild, User } from "@/lib/types" interface GuildPayoutsProps { guild: Guild currentUser: User | null showToast: (message: string, type?: string) => void } export function GuildPayouts({ guild, currentUser, showToast }: GuildPayoutsProps) { const [payoutAmount, setPayoutAmount] = useState("") const [selectedMember, setSelectedMember] = useState("") // Mock payout data const payoutData = [{ name: guild.name, percentage: 100, amount: guild.funds || 0, color: "#8B75AA" }] const handleSendPayout = () => { if (!payoutAmount || !selectedMember) { showToast("Please enter amount and select a member", "error") return } const amount = Number.parseInt(payoutAmount) if (amount > (guild.funds || 0)) { showToast("Insufficient guild funds", "error") return } showToast(`Payout of ${amount} gold sent to ${selectedMember}`, "success") setPayoutAmount("") setSelectedMember("") } return (

Payouts

{/* Guild Funds */}

Guild Funds

Gold in your guild's account

{guild.funds || 0} Gold

Splits

{payoutData.map((item, index) => (

{guild.emblem}

{item.name}

{item.percentage}%

{item.amount} Gold

))}

{/* Send Payout */}

Send a One-Time Payout

Give Gold to your collaborators

Amount (Gold) setPayoutAmount(e.target.value)} placeholder="Enter amount" className="w-full bg-[#3D2A2F] border border-[#CDAA7D] rounded px-3 py-2 text-[#F4F0E6] placeholder-gray-400 focus:outline-none focus:border-[#8B75AA]" />

Select Member

{/* Pie Chart Visualization */}

Total Splits

{guild.name}

100%

) } [V0_FILE]typescriptreact:file="components/guild-audit-log.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { Search, Filter, Calendar, User, Settings, DollarSign, Users, Shield } from "lucide-react" import type { Guild, User as UserType } from "@/lib/types" interface GuildAuditLogProps { guild: Guild currentUser: UserType | null } interface AuditLogEntry { id: number date: Date event: string description: string changedBy: { username: string avatar: string } category: "role" | "member" | "funds" | "settings" | "general" } export function GuildAuditLog({ guild, currentUser }: GuildAuditLogProps) { const [dateRange, setDateRange] = useState("all") const [filterBy, setFilterBy] = useState("all") const [searchQuery, setSearchQuery] = useState("") // Mock audit log data const auditEntries: AuditLogEntry[] = [ { id: 1, date: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000), event: "Role Created", description: "New Role 'Quest Leader' was created", changedBy: { username: currentUser?.username || "Admin", avatar: currentUser?.avatar || "A" }, category: "role", }, { id: 2, date: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000), event: "Member Added", description: "QuestMaster was added to the guild", changedBy: { username: currentUser?.username || "Admin", avatar: currentUser?.avatar || "A" }, category: "member", }, { id: 3, date: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000), event: "Funds Distributed", description: "500 gold distributed to guild members", changedBy: { username: currentUser?.username || "Admin", avatar: currentUser?.avatar || "A" }, category: "funds", }, { id: 4, date: new Date(Date.now() - 5 * 24 * 60 * 60 * 1000), event: "Guild Settings Updated", description: "Guild description was modified", changedBy: { username: currentUser?.username || "Admin", avatar: currentUser?.avatar || "A" }, category: "settings", }, { id: 5, date: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000), event: "Member Role Changed", description: "MysticBrewer's role changed from Member to Admin", changedBy: { username: currentUser?.username || "Admin", avatar: currentUser?.avatar || "A" }, category: "role", }, ] const getCategoryIcon = (category: string) => { switch (category) { case "role": return case "member": return case "funds": return case "settings": return default: return } } const filteredEntries = auditEntries.filter((entry) => { const matchesSearch = entry.description.toLowerCase().includes(searchQuery.toLowerCase()) || entry.event.toLowerCase().includes(searchQuery.toLowerCase()) const matchesFilter = filterBy === "all" || entry.category === filterBy return matchesSearch && matchesFilter }) return (

Guild Activity History

{/* Filters */}

setSearchQuery(e.target.value)} className="w-full bg-[#3D2A2F] border border-[#CDAA7D] rounded px-3 py-2 pl-10 text-[#F4F0E6] placeholder-gray-400 focus:outline-none focus:border-[#8B75AA]" />

{/* Activity Table */}

{filteredEntries.map((entry) => ( ))}

Event	Changed By	Date
{getCategoryIcon(entry.category)} {entry.event} {entry.description}	{entry.changedBy.avatar} {entry.changedBy.username}	{entry.date.toLocaleDateString()} {entry.date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}

{filteredEntries.length === 0 && (

No activity found matching your criteria

)}

) } [V0_FILE]typescriptreact:file="components/guild-roles-config.tsx" isMerged="true" "use client" import { useState } from "react" import { Plus, Shield, Users, Settings, DollarSign, BarChart3 } from "lucide-react" import type { Guild, User } from "@/lib/types" interface GuildRolesConfigProps { guild: Guild currentUser: User | null showToast: (message: string, type?: string) => void } interface Role { id: number name: string color: string permissions: string[] memberCount: number } interface Permission { id: string name: string description: string category: "group" | "experience" | "revenue" } export function GuildRolesConfig({ guild, currentUser, showToast }: GuildRolesConfigProps) { const [selectedRole, setSelectedRole] = useState(null) const [activeTab, setActiveTab] = useState<"permissions" | "members" | "settings">("permissions") // Mock roles data const roles: Role[] = [ { id: 1, name: "Owner", color: "#FFD700", permissions: ["all"], memberCount: 1 }, { id: 2, name: "Admin", color: "#FF6B6B", permissions: ["manage_members", "manage_roles"], memberCount: 2 }, { id: 3, name: "Quest Leader", color: "#4ECDC4", permissions: ["create_quests", "manage_quests"], memberCount: 5 }, { id: 4, name: "Member", color: "#95E1D3", permissions: ["view_guild"], memberCount: 15 }, ] // Mock permissions const permissions: Permission[] = [ { id: "add_remove_members", name: "Add or remove guild members", description: "Allow adding and removing members from the guild", category: "group", }, { id: "manage_roles", name: "Configure limited roles", description: "Members with this role can manage the roles they are assigned and assign permissions to those roles that they themselves have", category: "group", }, { id: "admin_all_roles", name: "Administrate all roles", description: "Members with this role can create, delete, and configure any role in the guild. This is a super-admin permission as it provides nearly full access", category: "group", }, { id: "configure_guild", name: "Configure guild profile", description: "Allow editing guild information and settings", category: "group", }, { id: "view_activity", name: "View guild activity history", description: "Access to guild activity logs and history", category: "group", }, { id: "play_experiences", name: "Play all guild experiences", description: "Access to all guild-related activities and quests", category: "experience", }, { id: "edit_experiences", name: "Edit all guild experiences", description: "Modify and manage guild quests and activities", category: "experience", }, { id: "publish_experiences", name: "Edit and publish all guild experiences", description: "Full control over guild quest publishing", category: "experience", }, { id: "view_revenue", name: "View guild revenue", description: "Access to guild financial information", category: "revenue", }, ] const handleRoleSelect = (role: Role) => { setSelectedRole(role) setActiveTab("permissions") } const handlePermissionToggle = (permissionId: string) => { if (!selectedRole) return showToast(`Permission ${permissionId} toggled for ${selectedRole.name}`, "success") } const getPermissionsByCategory = (category: string) => { return permissions.filter((p) => p.category === category) } return (

Roles

Roles allow you to group creators together and manage them as a single unit.

{/* Roles List */}

{roles.map((role) => ( ))}

Legacy Roles

Guest

Member

Admin

Owner

{/* Role Configuration */}

{selectedRole ? (

{selectedRole.name.charAt(0)}

Configure {selectedRole.name}

{selectedRole.memberCount} members

{/* Tabs */}

{/* Tab Content */} {activeTab === "permissions" && (

{/* Group Permissions */}

Guild permissions

{getPermissionsByCategory("group").map((permission) => ( handlePermissionToggle(permission.id)} />

{permission.name}

{permission.description}

))}

{/* Experience Permissions */}

Experience permissions

{getPermissionsByCategory("experience").map((permission) => ( handlePermissionToggle(permission.id)} />

{permission.name}

{permission.description}

))}

{/* Revenue Permissions */}

Guild revenue

{getPermissionsByCategory("revenue").map((permission) => ( handlePermissionToggle(permission.id)} />

{permission.name}

{permission.description}

))}

)} {activeTab === "members" && (

Member management coming soon

)} {activeTab === "settings" && (

Role settings coming soon

)}

) : (

Select a role to configure its permissions

)}

) } [V0_FILE]typescriptreact:file="components/enhanced-guild-management.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Search, Users, Shield, DollarSign, Activity, BarChart3, UserPlus, CheckCircle, XCircle } from "lucide-react" import type { Guild, User, GuildApplication } from "@/lib/types" import { GuildAuditLog } from "./guild-audit-log" import { GuildPayouts } from "./guild-payouts" import { GuildRolesConfig } from "./guild-roles-config" interface EnhancedGuildManagementProps { guilds: Guild[] guildApplications: GuildApplication[] currentUser: User showToast: (message: string, type?: string) => void onViewGuild: (guild: Guild) => void onEditGuild: (guild: Guild) => void onDeleteGuild: (guildId: string) => void onApproveApplication: (applicationId: string) => void onRejectApplication: (applicationId: string) => void onManageMembers: (guild: Guild) => void } export function EnhancedGuildManagement({ guilds, guildApplications, currentUser, showToast, onViewGuild, onEditGuild, onDeleteGuild, onApproveApplication, onRejectApplication, onManageMembers, }: EnhancedGuildManagementProps) { const [activeTab, setActiveTab] = useState<"owned" | "member" | "applications">("owned") const [selectedGuild, setSelectedGuild] = useState(null) const [managementView, setManagementView] = useState< "overview" | "members" | "requests" | "roles" | "audit" | "payouts" >("overview") const [searchQuery, setSearchQuery] = useState("") const [memberSearchQuery, setMemberSearchQuery] = useState("") const [selectedRole, setSelectedRole] = useState("All") // Get guilds where the current user is an admin const ownedGuilds = guilds.filter((guild) => guild.admins && guild.admins.includes(currentUser.id)) const memberGuilds = guilds.filter( (guild) => guild.membersList && guild.membersList.includes(currentUser.id) && (!guild.admins || !guild.admins.includes(currentUser.id)), ) const relevantApplications = guildApplications.filter((app) => { const guild = guilds.find((g) => g.id.toString() === app.guildId) return guild && guild.admins && guild.admins.includes(currentUser.id) }) // Mock member data for demonstration const mockMembers = [ { id: currentUser.id, username: currentUser.username, avatar: currentUser.avatar, role: "Owner", joinDate: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000), level: 25, xp: 12500, }, { id: 2, username: "QuestMaster", avatar: "Q", role: "Admin", joinDate: new Date(Date.now() - 20 * 24 * 60 * 60 * 1000), level: 18, xp: 8900, }, { id: 3, username: "MysticBrewer", avatar: "M", role: "Member", joinDate: new Date(Date.now() - 15 * 24 * 60 * 60 * 1000), level: 12, xp: 5600, }, { id: 4, username: "ShadowHunter", avatar: "S", role: "Member", joinDate: new Date(Date.now() - 10 * 24 * 60 * 60 * 1000), level: 15, xp: 7200, }, { id: 5, username: "DragonSlayer", avatar: "D", role: "Member", joinDate: new Date(Date.now() - 5 * 24 * 60 * 60 * 1000), level: 8, xp: 3400, }, ] const calculateGuildLevel = (guild: Guild) => { // Calculate guild level based on total member XP and activities const totalMemberXP = mockMembers.reduce((sum, member) => sum + member.xp, 0) const guildLevel = Math.floor(totalMemberXP / 1000) + guild.members return Math.min(guildLevel, 100) // Cap at level 100 } const getGuildXPProgress = (guild: Guild) => { const currentLevel = calculateGuildLevel(guild) const xpForCurrentLevel = currentLevel * 1000 const xpForNextLevel = (currentLevel + 1) * 1000 const currentXP = mockMembers.reduce((sum, member) => sum + member.xp, 0) const progress = ((currentXP - xpForCurrentLevel) / (xpForNextLevel - xpForCurrentLevel)) * 100 return Math.max(0, Math.min(100, progress)) } const getRoleColor = (role: string) => { switch (role) { case "Owner": return "text-yellow-400" case "Admin": return "text-red-400" case "Member": return "text-blue-400" default: return "text-gray-400" } } const getRoleBadgeColor = (role: string) => { switch (role) { case "Owner": return "bg-yellow-500" case "Admin": return "bg-red-500" case "Member": return "bg-blue-500" default: return "bg-gray-500" } } if (selectedGuild) { const isOwner = selectedGuild.admins && selectedGuild.admins.includes(currentUser.id) return (

{selectedGuild.emblem}

{selectedGuild.name}

Level {calculateGuildLevel(selectedGuild)} Guild

{/* Guild Level Progress */}

Guild Level {calculateGuildLevel(selectedGuild)} {getGuildXPProgress(selectedGuild).toFixed(1)}% to next level

{/* Management Navigation */}

{isOwner && ( )} {isOwner && ( )} {isOwner && ( )}

{managementView === "overview" && (

Total Members

{selectedGuild.members}

Guild Funds

{selectedGuild.funds || 0}

Guild Level

{calculateGuildLevel(selectedGuild)}

Pending Requests

{selectedGuild.applications?.filter((app) => app.status === "pending").length || 0}

)} {managementView === "members" && (

Members

setMemberSearchQuery(e.target.value)} className="bg-white border border-[#CDAA7D] rounded px-3 py-2 pl-10 text-[#2C1A1D] placeholder-gray-400 focus:outline-none focus:border-[#8B75AA]" />

{mockMembers .filter( (member) => (selectedRole === "All" || member.role === selectedRole) && member.username.toLowerCase().includes(memberSearchQuery.toLowerCase()), ) .map((member) => ( ))}

Member	Role	Level	XP	Joined	Actions
{member.avatar} {member.username}	{member.role}	{member.level}	{member.xp.toLocaleString()}	{member.joinDate?.toLocaleDateString() \|\| "N/A"}	{member.role !== "Owner" && ( <> )}

)} {managementView === "requests" && (

Join Requests

{selectedGuild.applications ?.filter((app) => app.status === "pending") .map((application) => (

{application.avatar}

{application.username}

Applied {application.appliedAt.toLocaleDateString()}

{application.message}

)) || (

No pending join requests

)}

)} {managementView === "roles" && ( )} {managementView === "audit" && } {managementView === "payouts" && ( )}

) } // Rest of the original component for guild list view return (

Guild Management

{/* Tabs */}

{/* Guild Cards */}

{(activeTab === "owned" ? ownedGuilds : memberGuilds).map((guild) => (

{guild.emblem}

{guild.name}

Level {calculateGuildLevel(guild)}

{guild.members}

{guild.funds || 0}

{/* Guild Level Progress */}

Level {calculateGuildLevel(guild)} {getGuildXPProgress(guild).toFixed(0)}%

{guild.description}

))}

{(activeTab === "owned" ? ownedGuilds : memberGuilds).length === 0 && (

No Guilds Found

{activeTab === "owned" ? "You don't own any guilds yet. Create a new guild to get started!" : "You're not a member of any guilds yet. Join a guild from the Guild Hall!"}

)}

) } [V0_FILE]png:file="public/images/post-as-dropdown.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-rGham22RORISI1CmgpToPQW9Tlhax0.png" isMerged="true" [V0_FILE]png:file="public/images/quest-management-ui.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-vqeM0X1hFrD2WG4IDVcoJQGwEZrI8b.png" isMerged="true" [V0_FILE]png:file="public/images/admin-reports-ui.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-x6F5mVJInII65SXf6wGBL1YTJnoFun.png" isMerged="true" [V0_FILE]png:file="public/images/guild-management-ui.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-owsVXkVNGbH2IX4rLGaZ9dnNNbSotb.png" isMerged="true" [V0_FILE]typescriptreact:file="components/report-details-modal.tsx" isMerged="true" "use client" import { useState } from "react" import { X, Flag, User, FileText, Calendar, MessageSquare, Shield } from "lucide-react" import type { User as UserType } from "@/lib/types" interface Report { id: number type: "user" | "quest" reportedId: number reason: string status: "pending" | "resolved" reportedBy: number createdAt: Date description?: string evidence?: string[] } interface ReportDetailsModalProps { isOpen: boolean onClose: () => void report: Report | null users: UserType[] onResolve: (reportId: number, action: string, notes: string) => void showToast: (message: string, type?: string) => void } export function ReportDetailsModal({ isOpen, onClose, report, users, onResolve, showToast }: ReportDetailsModalProps) { const [action, setAction] = useState("") const [notes, setNotes] = useState("") if (!isOpen || !report) return null const reportedByUser = users.find((u) => u.id === report.reportedBy) const reportedUser = report.type === "user" ? users.find((u) => u.id === report.reportedId) : null const handleResolve = () => { if (!action) { showToast("Please select an action", "error") return } onResolve(report.id, action, notes) showToast(`Report resolved with action: ${action}`, "success") onClose() } return (

{/* Header */}

Report Details

{report.type === "user" ? "User Report" : "Quest Report"} • Report #{report.id}

{/* Content */}

{/* Report Info */}

Reported By

{reportedByUser?.avatar || "U"}

{reportedByUser?.username || "Unknown"}

{reportedByUser?.email}

Report Details

Date: {report.createdAt.toLocaleDateString()}

Type:{" "} {report.type === "user" ? "User Report" : "Quest Report"}

Status:{" "} {report.status}

{/* Reported Content */} {report.type === "user" && reportedUser && (

Reported User

{reportedUser.avatar || "U"}

{reportedUser.username}

{reportedUser.email}

Level {reportedUser.level || 1} {reportedUser.banned && ( Banned )}

)} {/* Report Reason */}

Report Reason

Category: {report.reason}

{report.description && (

Description:

{report.description}

)}

{/* Evidence */} {report.evidence && report.evidence.length > 0 && (

Evidence

{report.evidence.map((item, index) => (

{item}

))}

)} {/* Resolution Actions */} {report.status === "pending" && (

Resolution Actions

Action to Take:

Admin Notes:

setNotes(e.target.value)}
                    placeholder="Add notes about your decision..."
                    className="w-full px-3 py-2 border border-[#CDAA7D] rounded bg-white text-[#2C1A1D] focus:outline-none focus:border-[#8B75AA] h-20 resize-none"
                  />
                </div>
              </div>
            </div>
          )}
        </div>

{/* Footer */}
        <div className="flex justify-end gap-3 p-6 border-t border-[#CDAA7D]">
          <button
            onClick={onClose}
            className="px-6 py-2 border border-[#CDAA7D] rounded-lg text-[#2C1A1D] hover:bg-[#CDAA7D] hover:text-white transition-colors"
          >
            Close
          </button>
          {report.status === "pending" && (
            <button
              onClick={handleResolve}
              className="px-6 py-2 bg-[#8B75AA] text-white rounded-lg hover:bg-[#7A6699] transition-colors"
            >
              Resolve Report
            </button>
          )}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/messaging-modal.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { X, Send } from "lucide-react"
import type { User as UserType } from "@/lib/types"

interface MessagingModalProps {
  isOpen: boolean
  onClose: () => void
  recipient: UserType
  currentUser: UserType
  showToast: (message: string, type?: string) => void
}

export function MessagingModal({ isOpen, onClose, recipient, currentUser, showToast }: MessagingModalProps) {
  const [message, setMessage] = useState("")
  const [messages, setMessages] = useState([
    {
      id: 1,
      senderId: currentUser.id,
      content: "Hello! I saw your profile and wanted to connect.",
      timestamp: new Date(Date.now() - 2 * 60 * 60 * 1000),
    },
    {
      id: 2,
      senderId: recipient.id,
      content: "Hi there! Thanks for reaching out. How can I help you?",
      timestamp: new Date(Date.now() - 1 * 60 * 60 * 1000),
    },
  ])

if (!isOpen) return null

const handleSendMessage = () => {
    if (!message.trim()) return

const newMessage = {
      id: messages.length + 1,
      senderId: currentUser.id,
      content: message.trim(),
      timestamp: new Date(),
    }

setMessages([...messages, newMessage])
    setMessage("")
    showToast("Message sent!", "success")
  }

const handleKeyPress = (e: React.KeyboardEvent) => {
    if (e.key === "Enter" && !e.shiftKey) {
      e.preventDefault()
      handleSendMessage()
    }
  }

return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
      <div className="bg-[#F4F0E6] rounded-lg w-full max-w-2xl h-[600px] flex flex-col">
        {/* Header */}
        <div className="bg-gradient-to-r from-[#8B75AA] to-[#CDAA7D] text-white p-4 rounded-t-lg">
          <div className="flex justify-between items-center">
            <div className="flex items-center gap-3">
              <div className="w-10 h-10 bg-[#2C1A1D] rounded-full flex items-center justify-center text-white font-bold">
                {recipient.avatar || recipient.username?.[0]?.toUpperCase() || "U"}
              </div>
              <div>
                <h2 className="font-bold">{recipient.username}</h2>
                <p className="text-sm text-[#F4F0E6] opacity-80">Level {recipient.level || 1} Adventurer</p>
              </div>
            </div>
            <button onClick={onClose} className="text-white hover:text-[#CDAA7D] transition-colors">
              <X size={20} />
            </button>
          </div>
        </div>

{/* Messages */}
        <div className="flex-1 p-4 overflow-y-auto space-y-4">
          {messages.map((msg) => (
            <div key={msg.id} className={`flex ${msg.senderId === currentUser.id ? "justify-end" : "justify-start"}`}>
              <div
                className={`max-w-xs lg:max-w-md px-4 py-2 rounded-lg ${
                  msg.senderId === currentUser.id
                    ? "bg-[#8B75AA] text-white"
                    : "bg-white border border-[#CDAA7D] text-[#2C1A1D]"
                }`}
              >
                <p>{msg.content}</p>
                <p
                  className={`text-xs mt-1 ${
                    msg.senderId === currentUser.id ? "text-[#F4F0E6] opacity-80" : "text-gray-500"
                  }`}
                >
                  {msg.timestamp.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}
                </p>
              </div>
            </div>
          ))}
        </div>

{/* Message Input */}
        <div className="p-4 border-t border-[#CDAA7D]">
          <div className="flex gap-2">
            <textarea
              value={message}
              onChange={(e) => setMessage(e.target.value)}
              onKeyPress={handleKeyPress}
              placeholder="Type your message..."
              className="flex-1 px-3 py-2 border border-[#CDAA7D] rounded-lg bg-white text-[#2C1A1D] focus:outline-none focus:border-[#8B75AA] resize-none"
              rows={2}
            />
            <button
              onClick={handleSendMessage}
              disabled={!message.trim()}
              className={`px-4 py-2 rounded-lg transition-colors ${
                message.trim()
                  ? "bg-[#8B75AA] text-white hover:bg-[#7A6699]"
                  : "bg-gray-300 text-gray-500 cursor-not-allowed"
              }`}
            >
              <Send size={18} />
            </button>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/user-search.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Search, Filter, ChevronDown, ChevronUp } from "lucide-react"
import type { User, Quest, Guild } from "@/lib/types"
import { UserProfileModal } from "./user-profile-modal"
import { MessagingModal } from "./messaging-modal"

interface UserSearchProps {
  users: User[]
  quests: Quest[]
  guilds: Guild[]
  currentUser: User | null
  showToast: (message: string, type?: string) => void
}

export function UserSearch({ users, quests, guilds, currentUser, showToast }: UserSearchProps) {
  const [searchQuery, setSearchQuery] = useState("")
  const [sortField, setSortField] = useState<"username" | "level" | "quests">("level")
  const [sortDirection, setSortDirection] = useState<"asc" | "desc">("desc")
  const [expandedUserId, setExpandedUserId] = useState<number | null>(null)
  const [selectedSkill, setSelectedSkill] = useState<string>("all")
  const [selectedUserProfile, setSelectedUserProfile] = useState<User | null>(null)
  const [messagingUser, setMessagingUser] = useState<User | null>(null)

// Get all unique skills from users
  const allSkills = Array.from(new Set(users.flatMap((user) => user.skills || []).filter(Boolean)))

// Filter users based on search query and selected skill
  const filteredUsers = users.filter((user) => {
    const matchesSearch =
      user.username.toLowerCase().includes(searchQuery.toLowerCase()) ||
      (user.displayName && user.displayName.toLowerCase().includes(searchQuery.toLowerCase()))

const matchesSkill = selectedSkill === "all" || (user.skills && user.skills.includes(selectedSkill))

return matchesSearch && matchesSkill
  })

// Sort users
  const sortedUsers = [...filteredUsers].sort((a, b) => {
    let aValue, bValue

if (sortField === "username") {
      aValue = a.username.toLowerCase()
      bValue = b.username.toLowerCase()
      return sortDirection === "asc" ? aValue.localeCompare(bValue) : bValue.localeCompare(aValue)
    } else if (sortField === "level") {
      aValue = a.level || 0
      bValue = b.level || 0
    } else {
      aValue = a.completedQuests?.length || 0
      bValue = b.completedQuests?.length || 0
    }

return sortDirection === "asc" ? aValue - bValue : bValue - aValue
  })

const toggleSort = (field: "username" | "level" | "quests") => {
    if (sortField === field) {
      setSortDirection(sortDirection === "asc" ? "desc" : "asc")
    } else {
      setSortField(field)
      setSortDirection("desc")
    }
  }

const handleViewProfile = (user: User) => {
    setSelectedUserProfile(user)
  }

const handleSendMessage = (user: User) => {
    if (!currentUser) {
      showToast("Please log in to send messages", "error")
      return
    }
    setMessagingUser(user)
  }

return (
    <section className="bg-[#F4F0E6] min-h-screen py-8">
      <div className="max-w-6xl mx-auto px-6">
        <h2 className="text-4xl font-bold text-[#2C1A1D] font-serif mb-6">Find Adventurers</h2>
        <p className="text-center text-[#8B75AA] mb-8">
          DISCOVER SKILLED ADVENTURERS TO COLLABORATE WITH ON YOUR QUESTS.
        </p>

{/* Search and Filters */}
        <div className="mb-8">
          <div className="relative mb-4">
            <input
              type="text"
              placeholder="Search adventurers..."
              className="w-full px-4 py-3 pl-10 border border-[#CDAA7D] rounded bg-white text-[#2C1A1D] focus:outline-none focus:border-[#8B75AA]"
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
            />
            <Search size={18} className="absolute left-3 top-1/2 transform -translate-y-1/2 text-[#CDAA7D]" />
          </div>

<button
              className="flex items-center px-3 py-1 border border-[#CDAA7D] rounded bg-white hover:bg-[#F4F0E6]"
              onClick={() => toggleSort("username")}
            >
              <span className={sortField === "username" ? "text-[#8B75AA] font-medium" : "text-[#2C1A1D]"}>
                Username
              </span>
              {sortField === "username" && (
                <span className="ml-1">
                  {sortDirection === "asc" ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
                </span>
              )}
            </button>

<button
              className="flex items-center px-3 py-1 border border-[#CDAA7D] rounded bg-white hover:bg-[#F4F0E6]"
              onClick={() => toggleSort("level")}
            >
              <span className={sortField === "level" ? "text-[#8B75AA] font-medium" : "text-[#2C1A1D]"}>Level</span>
              {sortField === "level" && (
                <span className="ml-1">
                  {sortDirection === "asc" ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
                </span>
              )}
            </button>

<button
              className="flex items-center px-3 py-1 border border-[#CDAA7D] rounded bg-white hover:bg-[#F4F0E6]"
              onClick={() => toggleSort("quests")}
            >
              <span className={sortField === "quests" ? "text-[#8B75AA] font-medium" : "text-[#2C1A1D]"}>
                Completed Quests
              </span>
              {sortField === "quests" && (
                <span className="ml-1">
                  {sortDirection === "asc" ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
                </span>
              )}
            </button>

<div className="ml-auto">
              <select
                className="px-3 py-1 border border-[#CDAA7D] rounded bg-white text-[#2C1A1D] focus:outline-none focus:border-[#8B75AA]"
                value={selectedSkill}
                onChange={(e) => setSelectedSkill(e.target.value)}
              >
                <option value="all">All Skills</option>
                {allSkills.map((skill) => (
                  <option key={skill} value={skill}>
                    {skill}
                  </option>
                ))}
              </select>
            </div>
          </div>
        </div>

{/* Users Grid */}
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
          {sortedUsers.map((user) => (
            <div
              key={user.id}
              className="bg-white border border-[#CDAA7D] rounded-lg overflow-hidden hover:shadow-lg transition-shadow"
            >
              {/* User Header */}
              <div className="bg-[#CDAA7D] p-4 flex justify-between items-center">
                <div className="flex items-center gap-3">
                  <div className="w-12 h-12 bg-[#8B75AA] rounded-full flex items-center justify-center text-xl text-white">
                    {user.avatar}
                  </div>
                  <div>
                    <h3 className="font-bold text-[#2C1A1D]">{user.displayName || user.username}</h3>
                    <p className="text-sm text-[#2C1A1D]/70">@{user.username}</p>
                  </div>
                </div>
                <div className="flex items-center gap-2">
                  <span className="bg-[#8B75AA] text-white text-xs px-2 py-1 rounded-full">LVL {user.level || 1}</span>
                </div>
              </div>

{/* User Content */}
              <div className="p-4">
                <div className="flex justify-between items-center mb-4">
                  <div className="flex items-center gap-4">
                    <div className="flex items-center gap-1">
                      <span className="text-[#CDAA7D]">🏆</span>
                      <span className="text-[#2C1A1D] font-medium">{user.completedQuests?.length || 0} Quests</span>
                    </div>
                    <div className="flex items-center gap-1">
                      <span className="text-[#8B75AA]">👥</span>
                      <span className="text-[#2C1A1D] font-medium">{user.guilds?.length || 0} Guilds</span>
                    </div>
                  </div>

<button
                    onClick={() => setExpandedUserId(expandedUserId === user.id ? null : user.id)}
                    className="text-[#8B75AA] hover:text-[#7A6699]"
                  >
                    {expandedUserId === user.id ? <ChevronUp size={20} /> : <ChevronDown size={20} />}
                  </button>
                </div>

{/* Skills */}
                <div className="mb-4">
                  <h4 className="text-sm font-medium text-[#2C1A1D] mb-2">Skills:</h4>
                  <div className="flex flex-wrap gap-2">
                    {user.skills && user.skills.length > 0 ? (
                      user.skills.map((skill, index) => (
                        <span key={index} className="px-2 py-1 bg-[#8B75AA]/10 text-[#8B75AA] rounded text-xs">
                          {skill}
                        </span>
                      ))
                    ) : (
                      <span className="text-sm text-gray-500 italic">No skills listed</span>
                    )}
                  </div>
                </div>

{/* Expanded Content */}
                {expandedUserId === user.id && (
                  <div className="mt-4 border-t border-gray-200 pt-4">
                    <div className="mb-4">
                      <h4 className="text-sm font-medium text-[#2C1A1D] mb-2">About:</h4>
                      <p className="text-sm text-[#2C1A1D]">
                        {user.bio || "This adventurer hasn't shared their story yet."}
                      </p>
                    </div>

{/* Badges */}
                    {user.badges && user.badges.length > 0 && (
                      <div className="mb-4">
                        <h4 className="text-sm font-medium text-[#2C1A1D] mb-2">Badges:</h4>
                        <div className="flex flex-wrap gap-2">
                          {user.badges.map((badge, index) => (
                            <div
                              key={index}
                              className="flex items-center gap-1 px-2 py-1 bg-[#CDAA7D]/10 text-[#CDAA7D] rounded text-xs"
                            >
                              <span>{badge.icon}</span>
                              <span>{badge.name}</span>
                            </div>
                          ))}
                        </div>
                      </div>
                    )}
                  </div>
                )}

{/* Action Buttons */}
                <div className="flex justify-end gap-2 mt-4">
                  <button
                    onClick={() => handleViewProfile(user)}
                    className="px-3 py-1 border border-[#CDAA7D] rounded text-[#2C1A1D] hover:bg-[#CDAA7D] hover:text-white transition-colors text-sm"
                  >
                    View Profile
                  </button>
                  <button
                    onClick={() => handleSendMessage(user)}
                    className="px-3 py-1 bg-[#8B75AA] text-white rounded hover:bg-[#7A6699] transition-colors text-sm"
                  >
                    Send Message
                  </button>
                </div>
              </div>
            </div>
          ))}
        </div>

{sortedUsers.length === 0 && (
          <div className="bg-white border border-[#CDAA7D] rounded-lg p-8 text-center">
            <div className="w-16 h-16 bg-[#CDAA7D] rounded-full flex items-center justify-center mx-auto mb-6 text-2xl">
              🔍
            </div>
            <h3 className="text-xl font-bold text-[#2C1A1D] mb-2">No Adventurers Found</h3>
            <p className="text-[#8B75AA]">
              Try adjusting your search criteria or check back later for new adventurers.
            </p>
          </div>
        )}
      </div>

{/* User Profile Modal */}
      {selectedUserProfile && (
        <UserProfileModal
          isOpen={!!selectedUserProfile}
          onClose={() => setSelectedUserProfile(null)}
          user={selectedUserProfile}
          quests={quests}
          guilds={guilds}
          currentUser={currentUser}
        />
      )}

{/* Messaging Modal */}
      {messagingUser && currentUser && (
        <MessagingModal
          isOpen={!!messagingUser}
          onClose={() => setMessagingUser(null)}
          recipient={messagingUser}
          currentUser={currentUser}
          showToast={showToast}
        />
      )}
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/create-guild-modal.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
export { EnhancedCreateGuildModal as CreateGuildModal } from "./enhanced-create-guild-modal"
[V0_FILE]typescriptreact:file="components/index.ts" isEdit="true" isQuickEdit="true" isMerged="true"
export { Navbar } from "./navbar"
export { Hero } from "./hero"
export { QuestBoard } from "./quest-board"
export { GuildHall } from "./guild-hall"
export { Profile } from "./profile"
export { Settings } from "./settings"
export { About } from "./about"
export { AuthModal } from "./auth-modal"
export { PostQuestModal } from "./post-quest-modal"
export { CreateGuildModal } from "./create-guild-modal"
export { QuestDetailsModal } from "./quest-details-modal"
export { ApplicationsModal } from "./applications-modal"
export { GoldPurchaseModal } from "./gold-purchase-modal"
export { Toast } from "./toast"
export { Footer } from "./footer"
export { EnhancedProfile } from "./enhanced-profile"
export { UserSearch } from "./user-search"
export { MessagingSystem } from "./messaging-system"
export { QuestManagement } from "./quest-management"
export { GuildManagement } from "./guild-management"
export { AdminPanel } from "./admin-panel"
export { EnhancedCreateGuildModal } from "./enhanced-create-guild-modal"
[V0_FILE]typescriptreact:file="components/kyc-verification-modal.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { X, Upload, Shield, AlertCircle } from "lucide-react"

interface KYCVerificationModalProps {
  isOpen: boolean
  onClose: () => void
  onComplete: () => void
  cashoutAmount: number
  showToast?: (message: string, type?: string) => void
}

export function KYCVerificationModal({
  isOpen,
  onClose,
  onComplete,
  cashoutAmount,
  showToast,
}: KYCVerificationModalProps) {
  const [step, setStep] = useState(1)
  const [formData, setFormData] = useState({
    fullName: "",
    birthDate: "",
    address: "",
    phoneNumber: "",
    idType: "national-id",
    idFront: null as File | null,
    idBack: null as File | null,
    selfie: null as File | null,
  })

if (!isOpen) return null

const handleFileUpload = (field: string, file: File | null) => {
    setFormData((prev) => ({ ...prev, [field]: file }))
  }

const handleSubmit = () => {
    // Validate all required fields
    const requiredFields = ["fullName", "birthDate", "address", "phoneNumber"]
    const missingFields = requiredFields.filter((field) => !formData[field as keyof typeof formData])

if (missingFields.length > 0 || !formData.idFront || !formData.idBack || !formData.selfie) {
      if (showToast) {
        showToast("Please complete all required fields and upload all documents", "error")
      }
      return
    }

// Simulate KYC submission
    if (showToast) {
      showToast(
        "KYC verification submitted successfully. Your cashout will be processed within 5-7 business days.",
        "success",
      )
    }

onComplete()
    onClose()
  }

return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
      <div className="bg-[#F4F0E6] rounded-lg w-full max-w-2xl max-h-[90vh] overflow-hidden relative">
        {/* Header */}
        <div className="bg-[#CDAA7D] px-6 py-4 flex justify-between items-center">
          <h2 className="text-xl font-bold text-[#2C1A1D]">KYC Verification Required</h2>
          <button onClick={onClose} className="text-[#2C1A1D] hover:text-[#8B75AA] transition-colors">
            <X size={20} />
          </button>
        </div>

<div className="p-6 overflow-y-auto max-h-[calc(90vh-140px)]">
          {/* Alert */}
          <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-6">
            <div className="flex items-center gap-2 mb-2">
              <AlertCircle size={20} className="text-yellow-600" />
              <span className="font-semibold text-yellow-800">Verification Required</span>
            </div>
            <p className="text-sm text-yellow-700">
              Cashouts of ₱1,000 or more require identity verification to comply with financial regulations and prevent
              fraud.
            </p>
            <p className="text-sm text-yellow-700 mt-1">
              <strong>Cashout Amount:</strong> {cashoutAmount.toLocaleString()} coins (₱
              {(cashoutAmount * 0.07).toFixed(2)})
            </p>
          </div>

{/* Step Indicator */}
          <div className="flex items-center justify-center mb-6">
            <div className="flex items-center">
              <div
                className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold ${
                  step >= 1 ? "bg-[#8B75AA] text-white" : "bg-gray-300 text-gray-600"
                }`}
              >
                1
              </div>
              <div className={`w-16 h-1 ${step >= 2 ? "bg-[#8B75AA]" : "bg-gray-300"}`}></div>
              <div
                className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold ${
                  step >= 2 ? "bg-[#8B75AA] text-white" : "bg-gray-300 text-gray-600"
                }`}
              >
                2
              </div>
            </div>
          </div>

{/* Step 1: Personal Information */}
          {step === 1 && (
            <div>
              <h3 className="text-lg font-bold text-[#2C1A1D] mb-4">Personal Information</h3>
              <div className="space-y-4">
                <div>
                  <label className="block text-sm font-medium text-[#2C1A1D] mb-2">Full Name (as shown on ID)</label>
                  <input
                    type="text"
                    value={formData.fullName}
                    onChange={(e) => setFormData((prev) => ({ ...prev, fullName: e.target.value }))}
                    className="w-full px-3 py-2 border border-[#CDAA7D] rounded focus:outline-none focus:border-[#8B75AA]"
                    placeholder="Enter your full name"
                  />
                </div>

<div>
                  <label className="block text-sm font-medium text-[#2C1A1D] mb-2">Date of Birth</label>
                  <input
                    type="date"
                    value={formData.birthDate}
                    onChange={(e) => setFormData((prev) => ({ ...prev, birthDate: e.target.value }))}
                    className="w-full px-3 py-2 border border-[#CDAA7D] rounded focus:outline-none focus:border-[#8B75AA]"
                  />
                </div>

<div>
                  <label className="block text-sm font-medium text-[#2C1A1D] mb-2">Complete Address</label>
                  <textarea
                    value={formData.address}
                    onChange={(e) => setFormData((prev) => ({ ...prev, address: e.target.value }))}
                    className="w-full px-3 py-2 border border-[#CDAA7D] rounded focus:outline-none focus:border-[#8B75AA]"
                    rows={3}
                    placeholder="Enter your complete address"
                  />
                </div>

<div>
                  <label className="block text-sm font-medium text-[#2C1A1D] mb-2">Phone Number</label>
                  <input
                    type="tel"
                    value={formData.phoneNumber}
                    onChange={(e) => setFormData((prev) => ({ ...prev, phoneNumber: e.target.value }))}
                    className="w-full px-3 py-2 border border-[#CDAA7D] rounded focus:outline-none focus:border-[#8B75AA]"
                    placeholder="+63 9XX XXX XXXX"
                  />
                </div>

<button
                  onClick={() => setStep(2)}
                  disabled={!formData.fullName || !formData.birthDate || !formData.address || !formData.phoneNumber}
                  className={`w-full py-3 rounded font-medium transition-colors ${
                    formData.fullName && formData.birthDate && formData.address && formData.phoneNumber
                      ? "bg-[#8B75AA] text-white hover:bg-[#7A6699]"
                      : "bg-gray-300 text-gray-500 cursor-not-allowed"
                  }`}
                >
                  Continue to Document Upload
                </button>
              </div>
            </div>
          )}

{/* Step 2: Document Upload */}
          {step === 2 && (
            <div>
              <h3 className="text-lg font-bold text-[#2C1A1D] mb-4">Document Upload</h3>

<div className="space-y-6">
                <div>
                  <label className="block text-sm font-medium text-[#2C1A1D] mb-2">ID Type</label>
                  <select
                    value={formData.idType}
                    onChange={(e) => setFormData((prev) => ({ ...prev, idType: e.target.value }))}
                    className="w-full px-3 py-2 border border-[#CDAA7D] rounded focus:outline-none focus:border-[#8B75AA]"
                  >
                    <option value="national-id">National ID</option>
                    <option value="drivers-license">Driver's License</option>
                    <option value="passport">Passport</option>
                    <option value="postal-id">Postal ID</option>
                    <option value="voters-id">Voter's ID</option>
                  </select>
                </div>

{/* ID Front Upload */}
                <div>
                  <label className="block text-sm font-medium text-[#2C1A1D] mb-2">ID Front Side</label>
                  <div className="border-2 border-dashed border-[#CDAA7D] rounded-lg p-6 text-center">
                    <Upload size={32} className="mx-auto text-[#8B75AA] mb-2" />
                    <p className="text-sm text-[#8B75AA] mb-2">
                      {formData.idFront ? formData.idFront.name : "Click to upload or drag and drop"}
                    </p>
                    <input
                      type="file"
                      accept="image/*"
                      onChange={(e) => handleFileUpload("idFront", e.target.files?.[0] || null)}
                      className="hidden"
                      id="id-front"
                    />
                    <label
                      htmlFor="id-front"
                      className="inline-block px-4 py-2 bg-[#8B75AA] text-white rounded cursor-pointer hover:bg-[#7A6699]"
                    >
                      Choose File
                    </label>
                  </div>
                </div>

{/* ID Back Upload */}
                <div>
                  <label className="block text-sm font-medium text-[#2C1A1D] mb-2">ID Back Side</label>
                  <div className="border-2 border-dashed border-[#CDAA7D] rounded-lg p-6 text-center">
                    <Upload size={32} className="mx-auto text-[#8B75AA] mb-2" />
                    <p className="text-sm text-[#8B75AA] mb-2">
                      {formData.idBack ? formData.idBack.name : "Click to upload or drag and drop"}
                    </p>
                    <input
                      type="file"
                      accept="image/*"
                      onChange={(e) => handleFileUpload("idBack", e.target.files?.[0] || null)}
                      className="hidden"
                      id="id-back"
                    />
                    <label
                      htmlFor="id-back"
                      className="inline-block px-4 py-2 bg-[#8B75AA] text-white rounded cursor-pointer hover:bg-[#7A6699]"
                    >
                      Choose File
                    </label>
                  </div>
                </div>

{/* Selfie Upload */}
                <div>
                  <label className="block text-sm font-medium text-[#2C1A1D] mb-2">Selfie with ID</label>
                  <div className="border-2 border-dashed border-[#CDAA7D] rounded-lg p-6 text-center">
                    <Upload size={32} className="mx-auto text-[#8B75AA] mb-2" />
                    <p className="text-sm text-[#8B75AA] mb-2">
                      {formData.selfie ? formData.selfie.name : "Take a selfie holding your ID"}
                    </p>
                    <input
                      type="file"
                      accept="image/*"
                      onChange={(e) => handleFileUpload("selfie", e.target.files?.[0] || null)}
                      className="hidden"
                      id="selfie"
                    />
                    <label
                      htmlFor="selfie"
                      className="inline-block px-4 py-2 bg-[#8B75AA] text-white rounded cursor-pointer hover:bg-[#7A6699]"
                    >
                      Choose File
                    </label>
                  </div>
                </div>

<div className="flex gap-3">
                  <button
                    onClick={() => setStep(1)}
                    className="flex-1 py-3 border border-[#CDAA7D] text-[#2C1A1D] rounded font-medium hover:bg-[#CDAA7D]/10"
                  >
                    Back
                  </button>
                  <button
                    onClick={handleSubmit}
                    disabled={!formData.idFront || !formData.idBack || !formData.selfie}
                    className={`flex-1 py-3 rounded font-medium transition-colors ${
                      formData.idFront && formData.idBack && formData.selfie
                        ? "bg-[#8B75AA] text-white hover:bg-[#7A6699]"
                        : "bg-gray-300 text-gray-500 cursor-not-allowed"
                    }`}
                  >
                    Submit Verification
                  </button>
                </div>
              </div>
            </div>
          )}

{/* Security Notice */}
          <div className="mt-6 p-4 bg-[#8B75AA]/10 border border-[#8B75AA]/30 rounded-lg">
            <div className="flex items-center gap-2 mb-2">
              <Shield size={16} className="text-[#8B75AA]" />
              <span className="font-semibold text-[#2C1A1D]">Security & Privacy</span>
            </div>
            <ul className="text-xs text-[#8B75AA] space-y-1">
              <li>• All documents are encrypted and stored securely</li>
              <li>• Information is used solely for verification purposes</li>
              <li>• Documents are automatically deleted after 30 days</li>
              <li>• Verification typically takes 1-3 business days</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/gold-system-modal.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { X, Coins, TrendingUp, TrendingDown, ArrowUpDown } from "lucide-react"
import type { User } from "@/lib/types"
import { KYCVerificationModal } from "./kyc-verification-modal"

interface GoldSystemModalProps {
  isOpen: boolean
  onClose: () => void
  currentUser?: User | null
  setCurrentUser?: (user: User | ((prev: User) => User)) => void
  showToast?: (message: string, type?: string) => void
}

interface Transaction {
  id: number
  type: "incoming" | "outgoing"
  category: string
  amount: number
  date: Date
  description: string
}

export function GoldSystemModal({ isOpen, onClose, currentUser, setCurrentUser, showToast }: GoldSystemModalProps) {
  const [activeTab, setActiveTab] = useState<"purchase" | "transactions" | "goldex">("transactions")
  const [transactionFilter, setTransactionFilter] = useState("outgoing")
  const [dateRange, setDateRange] = useState("all-time")
  const [cashoutAmount, setCashoutAmount] = useState("")
  const [cashoutMethod, setCashoutMethod] = useState("gcash")
  const [showKYCModal, setShowKYCModal] = useState(false)

if (!isOpen) return null

// Mock transaction data
  const transactions: Transaction[] = [
    {
      id: 1,
      type: "incoming",
      category: "Quest Completion",
      amount: 50,
      date: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000),
      description: "Logo Design for Guild - Completed",
    },
    {
      id: 2,
      type: "incoming",
      category: "Gold Purchase",
      amount: 100,
      date: new Date(Date.now() - 5 * 24 * 60 * 60 * 1000),
      description: "Purchased 100 Gold Package",
    },
    {
      id: 3,
      type: "outgoing",
      category: "Quest Posting",
      amount: 30,
      date: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000),
      description: "Posted: Epic Tale Writing Quest",
    },
    {
      id: 4,
      type: "incoming",
      category: "Guild Bonus",
      amount: 25,
      date: new Date(Date.now() - 10 * 24 * 60 * 60 * 1000),
      description: "Monthly Guild Activity Bonus",
    },
  ]

const goldPackages = [
    { amount: 500, price: 56, usd: 0.99, rate: 0.112, popular: false },
    { amount: 2800, price: 285, usd: 4.99, rate: 0.102, popular: true, bonus: "+300 bonus coins" },
    { amount: 6500, price: 570, usd: 9.99, rate: 0.088, popular: false, bonus: "+1000 bonus coins" },
    { amount: 14500, price: 1140, usd: 19.99, rate: 0.078, popular: false, bonus: "+2500 bonus coins" },
  ]

const purchaseGold = (amount: number, price: number) => {
    if (setCurrentUser && currentUser) {
      setCurrentUser((prev) => ({
        ...prev,
        gold: prev.gold + amount,
      }))
      if (showToast) {
        showToast(`Successfully purchased ${amount} gold for ₱${price}!`)
      }
    }
  }

const handleCashOut = () => {
    if (!currentUser || !cashoutAmount) return

const amount = Number.parseInt(cashoutAmount)
    const minimumCashout = 5000 // 5,000 coins minimum as per suggestions

if (amount < minimumCashout) {
      if (showToast) {
        showToast(`Minimum cashout is ${minimumCashout.toLocaleString()} coins`, "error")
      }
      return
    }

if (amount > currentUser.gold) {
      if (showToast) {
        showToast("Insufficient gold balance", "error")
      }
      return
    }

// Check if KYC is required for large amounts (₱1000+)
    const cashoutValue = amount * 0.07
    if (cashoutValue >= 1000) {
      setShowKYCModal(true)
      return
    }

processCashout(amount)
  }

const processCashout = (amount) => {
    const cashoutValue = (amount * 0.07).toFixed(2)

if (setCurrentUser) {
      setCurrentUser((prev) => ({
        ...prev,
        gold: prev.gold - amount,
      }))
    }

if (showToast) {
      showToast(
        `Successfully requested cashout of ${amount.toLocaleString()} coins (₱${cashoutValue}) via ${cashoutMethod.toUpperCase()}. Processing time: 24-72 hours.`,
        "success",
      )
    }

setCashoutAmount("")
  }

const filteredTransactions = transactions.filter((transaction) => {
    if (transactionFilter === "all") return true
    return transaction.type === transactionFilter
  })

const totalIncoming = transactions.filter((t) => t.type === "incoming").reduce((sum, t) => sum + t.amount, 0)
  const totalOutgoing = transactions.filter((t) => t.type === "outgoing").reduce((sum, t) => sum + t.amount, 0)

return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
      <div className="bg-[#F4F0E6] rounded-lg w-full max-w-4xl max-h-[90vh] overflow-hidden relative">
        {/* Header */}
        <div className="bg-[#CDAA7D] px-6 py-4 flex justify-between items-center">
          <h2 className="text-xl font-bold text-[#2C1A1D]">Gold Treasury</h2>
          <button onClick={onClose} className="text-[#2C1A1D] hover:text-[#8B75AA] transition-colors">
            <X size={20} />
          </button>
        </div>

{/* Tab Navigation */}
        <div className="flex border-b border-[#CDAA7D]">
          <button
            onClick={() => setActiveTab("purchase")}
            className={`flex-1 py-3 px-4 text-center font-medium transition-colors ${
              activeTab === "purchase"
                ? "text-[#2C1A1D] border-b-2 border-[#2C1A1D] bg-[#CDAA7D]/20"
                : "text-[#8B75AA] hover:text-[#2C1A1D]"
            }`}
          >
            <Coins size={16} className="inline mr-2" />
            BUY GOLD
          </button>
          <button
            onClick={() => setActiveTab("transactions")}
            className={`flex-1 py-3 px-4 text-center font-medium transition-colors ${
              activeTab === "transactions"
                ? "text-[#2C1A1D] border-b-2 border-[#2C1A1D] bg-[#CDAA7D]/20"
                : "text-[#8B75AA] hover:text-[#2C1A1D]"
            }`}
          >
            <ArrowUpDown size={16} className="inline mr-2" />
            MY TRANSACTIONS
          </button>
          <button
            onClick={() => setActiveTab("goldex")}
            className={`flex-1 py-3 px-4 text-center font-medium transition-colors ${
              activeTab === "goldex"
                ? "text-[#2C1A1D] border-b-2 border-[#2C1A1D] bg-[#CDAA7D]/20"
                : "text-[#8B75AA] hover:text-[#2C1A1D]"
            }`}
          >
            <TrendingUp size={16} className="inline mr-2" />
            GOLDEX
          </button>
        </div>

{/* Content */}
        <div className="p-6 overflow-y-auto max-h-[calc(90vh-140px)]">
          {/* Purchase Tab */}
          {activeTab === "purchase" && (
            <div>
              <div className="mb-6 text-center">
                <h3 className="text-2xl font-bold text-[#2C1A1D] mb-2">Purchase Gold Coins</h3>
                <p className="text-[#8B75AA]">Choose a package to enhance your questing experience</p>
              </div>

<div className="grid md:grid-cols-2 gap-4">
                {goldPackages.map((pkg) => (
                  <div
                    key={pkg.amount}
                    className={`relative border-2 rounded-lg p-6 cursor-pointer transition-all hover:shadow-lg ${
                      pkg.popular ? "border-[#8B75AA] bg-[#8B75AA]/5" : "border-[#CDAA7D] hover:border-[#8B75AA]/50"
                    }`}
                    onClick={() => purchaseGold(pkg.amount, pkg.price)}
                  >
                    {pkg.popular && (
                      <div className="absolute -top-3 left-1/2 transform -translate-x-1/2 bg-[#8B75AA] text-white px-3 py-1 rounded-full text-xs font-bold">
                        MOST POPULAR
                      </div>
                    )}
                    <div className="flex justify-between items-center mb-4">
                      <div className="flex items-center gap-3">
                        <Coins size={32} className="text-[#CDAA7D]" />
                        <div>
                          <div className="text-xl font-bold text-[#2C1A1D]">{pkg.amount.toLocaleString()} Gold</div>
                          <div className="text-sm text-[#8B75AA]">₱{pkg.price.toLocaleString()}</div>
                        </div>
                      </div>
                      <div className="text-right">
                        <div className="text-sm font-bold text-[#8B75AA] bg-[#CDAA7D]/20 px-2 py-1 rounded">
                          {pkg.bonus}
                        </div>
                      </div>
                    </div>
                    <div className="text-xs text-[#8B75AA] text-center">
                      ₱{(pkg.price / pkg.amount).toFixed(2)} per gold
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}

{/* Transactions Tab */}
          {activeTab === "transactions" && (
            <div>
              <div className="mb-6">
                <h3 className="text-2xl font-bold text-[#2C1A1D] mb-4">My Transactions</h3>
                <div className="flex items-center gap-2 text-sm text-[#8B75AA] mb-4">
                  <Coins size={16} className="text-[#CDAA7D]" />
                  <span>My Balance: {currentUser?.gold || 0} Gold</span>
                </div>

{/* Filters */}
                <div className="flex gap-4 mb-6">
                  <select
                    className="px-3 py-2 border border-[#CDAA7D] rounded bg-white text-[#2C1A1D] focus:outline-none focus:border-[#8B75AA]"
                    value={transactionFilter}
                    onChange={(e) => setTransactionFilter(e.target.value)}
                  >
                    <option value="all">All Transactions</option>
                    <option value="incoming">Incoming Gold</option>
                    <option value="outgoing">Outgoing Gold</option>
                  </select>
                  <select
                    className="px-3 py-2 border border-[#CDAA7D] rounded bg-white text-[#2C1A1D] focus:outline-none focus:border-[#8B75AA]"
                    value={dateRange}
                    onChange={(e) => setDateRange(e.target.value)}
                  >
                    <option value="past-30-days">Past 30 Days</option>
                    <option value="past-90-days">Past 90 Days</option>
                    <option value="all-time">All Time</option>
                  </select>
                </div>
              </div>

{/* Summary */}
              <div className="grid md:grid-cols-2 gap-4 mb-6">
                <div className="bg-green-50 border border-green-200 rounded-lg p-4">
                  <div className="flex items-center gap-2 mb-2">
                    <TrendingUp size={20} className="text-green-600" />
                    <span className="font-bold text-green-800">Incoming Gold</span>
                  </div>
                  <div className="text-2xl font-bold text-green-800">{totalIncoming.toLocaleString()}</div>
                </div>
                <div className="bg-red-50 border border-red-200 rounded-lg p-4">
                  <div className="flex items-center gap-2 mb-2">
                    <TrendingDown size={20} className="text-red-600" />
                    <span className="font-bold text-red-800">Outgoing Gold</span>
                  </div>
                  <div className="text-2xl font-bold text-red-800">{totalOutgoing.toLocaleString()}</div>
                </div>
              </div>

{/* Transaction List */}
              <div className="space-y-3">
                {filteredTransactions.map((transaction) => (
                  <div key={transaction.id} className="bg-white border border-[#CDAA7D] rounded-lg p-4">
                    <div className="flex justify-between items-center">
                      <div className="flex items-center gap-3">
                        <div
                          className={`w-8 h-8 rounded-full flex items-center justify-center ${
                            transaction.type === "incoming" ? "bg-green-100" : "bg-red-100"
                          }`}
                        >
                          {transaction.type === "incoming" ? (
                            <TrendingUp size={16} className="text-green-600" />
                          ) : (
                            <TrendingDown size={16} className="text-red-600" />
                          )}
                        </div>
                        <div>
                          <div className="font-semibold text-[#2C1A1D]">{transaction.category}</div>
                          <div className="text-sm text-[#8B75AA]">{transaction.description}</div>
                          <div className="text-xs text-[#8B75AA]">{transaction.date.toLocaleDateString()}</div>
                        </div>
                      </div>
                      <div
                        className={`text-lg font-bold ${
                          transaction.type === "incoming" ? "text-green-600" : "text-red-600"
                        }`}
                      >
                        {transaction.type === "incoming" ? "+" : "-"}
                        {transaction.amount} Gold
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}

{/* GoldEx Tab */}
          {activeTab === "goldex" && (
            <div>
              <div className="text-center mb-8">
                <h3 className="text-2xl font-bold text-[#2C1A1D] mb-2">GoldEx - Gold Exchange</h3>
                <p className="text-[#8B75AA]">Convert your earned gold into real money</p>
              </div>

<div className="max-w-2xl mx-auto">
                {/* Balance Overview */}
                <div className="bg-gradient-to-r from-[#CDAA7D]/20 to-[#8B75AA]/20 border border-[#CDAA7D] rounded-lg p-6 mb-6">
                  <div className="grid md:grid-cols-2 gap-4 mb-4">
                    <div>
                      <div className="text-sm text-[#8B75AA] mb-1">Available Balance</div>
                      <div className="text-2xl font-bold text-[#2C1A1D]">
                        {(currentUser?.gold || 0).toLocaleString()} Gold
                      </div>
                      <div className="text-sm text-[#8B75AA]">≈ ₱{((currentUser?.gold || 0) * 0.07).toFixed(2)}</div>
                    </div>
                    <div>
                      <div className="text-sm text-[#8B75AA] mb-1">Exchange Rate</div>
                      <div className="text-xl font-bold text-[#2C1A1D]">₱0.07</div>
                      <div className="text-sm text-[#8B75AA]">per gold coin</div>
                    </div>
                  </div>
                </div>

{/* Cashout Form */}
                <div className="bg-white border border-[#CDAA7D] rounded-lg p-6 mb-6">
                  <h4 className="font-bold text-[#2C1A1D] mb-4">Cash Out Gold</h4>

<div className="space-y-4">
                    <div>
                      <label className="block text-sm font-medium text-[#2C1A1D] mb-2">Amount to Cash Out (Gold)</label>
                      <input
                        type="number"
                        value={cashoutAmount}
                        onChange={(e) => setCashoutAmount(e.target.value)}
                        placeholder="Enter amount (min. 5,000)"
                        min="5000"
                        max={currentUser?.gold || 0}
                        className="w-full px-3 py-2 border border-[#CDAA7D] rounded focus:outline-none focus:border-[#8B75AA]"
                      />
                      {cashoutAmount && (
                        <div className="mt-2 text-sm text-[#8B75AA]">
                          You will receive: ₱{(Number.parseInt(cashoutAmount || "0") * 0.07).toFixed(2)}
                        </div>
                      )}
                    </div>

<div>
                      <label className="block text-sm font-medium text-[#2C1A1D] mb-2">Cashout Method</label>
                      <select
                        value={cashoutMethod}
                        onChange={(e) => setCashoutMethod(e.target.value)}
                        className="w-full px-3 py-2 border border-[#CDAA7D] rounded focus:outline-none focus:border-[#8B75AA]"
                      >
                        <option value="gcash">GCash</option>
                        <option value="paymaya">PayMaya</option>
                        <option value="bank">Bank Transfer</option>
                      </select>
                    </div>

<button
                      onClick={handleCashOut}
                      disabled={
                        !cashoutAmount ||
                        Number.parseInt(cashoutAmount || "0") < 5000 ||
                        Number.parseInt(cashoutAmount || "0") > (currentUser?.gold || 0)
                      }
                      className={`w-full py-3 rounded font-medium transition-colors ${
                        cashoutAmount &&
                        Number.parseInt(cashoutAmount) >= 5000 &&
                        Number.parseInt(cashoutAmount) <= (currentUser?.gold || 0)
                          ? "bg-[#8B75AA] text-white hover:bg-[#7A6699]"
                          : "bg-gray-300 text-gray-500 cursor-not-allowed"
                      }`}
                    >
                      Request Cashout
                    </button>
                  </div>
                </div>

{/* Quick Cashout Options */}
                <div className="bg-[#F4F0E6] border border-[#CDAA7D] rounded-lg p-4 mb-6">
                  <h5 className="font-semibold text-[#2C1A1D] mb-3">Quick Cashout</h5>
                  <div className="grid grid-cols-3 gap-2">
                    {[5000, 10000, 20000].map((amount) => (
                      <button
                        key={amount}
                        onClick={() => setCashoutAmount(amount.toString())}
                        disabled={(currentUser?.gold || 0) < amount}
                        className={`p-2 text-sm rounded border transition-colors ${
                          (currentUser?.gold || 0) >= amount
                            ? "border-[#8B75AA] text-[#8B75AA] hover:bg-[#8B75AA] hover:text-white"
                            : "border-gray-300 text-gray-400 cursor-not-allowed"
                        }`}
                      >
                        {amount.toLocaleString()}
                        <div className="text-xs">₱{(amount * 0.07).toFixed(0)}</div>
                      </button>
                    ))}
                  </div>
                </div>

{/* Important Notes */}
                <div className="bg-[#8B75AA]/10 border border-[#8B75AA]/30 rounded-lg p-4">
                  <h4 className="font-bold text-[#2C1A1D] mb-2">Important Notes:</h4>
                  <ul className="text-sm text-[#8B75AA] space-y-1">
                    <li>• Minimum cashout: 5,000 gold coins (₱350)</li>
                    <li>• Exchange rate: 1 gold = ₱0.07 PHP</li>
                    <li>• Processing time: 24-72 hours</li>
                    <li>• KYC verification required for cashouts ≥₱1,000</li>
                    <li>• Only earned gold from completed quests is eligible</li>
                    <li>• Supported methods: GCash, PayMaya, Bank Transfer</li>
                  </ul>
                </div>
              </div>
            </div>
          )}
        </div>
        {/* KYC Verification Modal */}
        {showKYCModal && (
          <KYCVerificationModal
            isOpen={showKYCModal}
            onClose={() => setShowKYCModal(false)}
            onComplete={() => {
              processCashout(Number.parseInt(cashoutAmount))
              setShowKYCModal(false)
            }}
            cashoutAmount={Number.parseInt(cashoutAmount || "0")}
            showToast={showToast}
          />
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/post-quest-modal.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { X, Coins, Clock, Target, Users } from "lucide-react"
import type { User, Quest, Guild } from "@/lib/types"
import { ConfirmationModal } from "@/components/confirmation-modal"

interface PostQuestModalProps {
  isOpen: boolean
  onClose: () => void
  currentUser?: User | null
  onSubmit?: (questData: Partial<Quest>) => void
  guilds?: Guild[]
}

export function PostQuestModal({ isOpen, onClose, currentUser, onSubmit, guilds = [] }: PostQuestModalProps) {
  const [questForm, setQuestForm] = useState({
    title: "",
    description: "",
    category: "",
    difficulty: 2,
    reward: "",
    deadline: "",
    postAs: "individual",
    selectedGuild: "",
  })

const [showConfirmation, setShowConfirmation] = useState(false)

if (!isOpen) return null

// Get guilds where user has posting permissions
  const userGuilds = guilds.filter(
    (guild) =>
      guild.membersList?.includes(currentUser?.id || 0) &&
      (guild.admins?.includes(currentUser?.id || 0) ||
        guild.poster.id === currentUser?.id ||
        guild.settings?.permissions?.whoCanPost === "members"),
  )

const handleSubmit = () => {
    if (!currentUser) {
      alert("Please log in to post quests")
      return
    }

if (!questForm.title || !questForm.description || !questForm.category || !questForm.reward || !questForm.deadline) {
      alert("Please fill in all required fields")
      return
    }

// Check if user has enough gold for the reward
    const rewardAmount = Number.parseInt(questForm.reward)
    if (currentUser.gold < rewardAmount) {
      alert(
        `Insufficient gold. You need ${rewardAmount} gold to post this quest but only have ${currentUser.gold} gold.`,
      )
      return
    }

// Show confirmation modal instead of submitting directly
    setShowConfirmation(true)
  }

const handleConfirmSubmit = () => {
    const rewardAmount = Number.parseInt(questForm.reward)
    const questCost = rewardAmount

const selectedGuild =
      questForm.postAs === "guild" && questForm.selectedGuild
        ? guilds.find((g) => g.id.toString() === questForm.selectedGuild)
        : null

const newQuest: Partial<Quest> = {
      title: questForm.title,
      description: questForm.description,
      category: questForm.category,
      difficulty: questForm.difficulty === 1 ? "easy" : questForm.difficulty === 2 ? "medium" : "hard",
      reward: Number.parseInt(questForm.reward),
      xp: questForm.difficulty === 1 ? 50 : questForm.difficulty === 2 ? 75 : 150,
      deadline: new Date(questForm.deadline),
      poster: selectedGuild
        ? {
            id: selectedGuild.id,
            name: selectedGuild.name,
            avatar: selectedGuild.emblem,
            isGuild: true,
          }
        : currentUser,
      isGuildQuest: questForm.postAs === "guild",
      guildId: selectedGuild?.id,
    }

if (onSubmit) {
      onSubmit({ ...newQuest, questCost })
    }

setQuestForm({
      title: "",
      description: "",
      category: "",
      difficulty: 2,
      reward: "",
      deadline: "",
      postAs: "individual",
      selectedGuild: "",
    })
    setShowConfirmation(false)
  }

const difficultyColors = {
    1: "from-green-400 to-green-600",
    2: "from-yellow-400 to-orange-500",
    3: "from-red-400 to-red-600",
  }

const difficultyLabels = {
    1: { name: "EASY", xp: "50 XP", desc: "Perfect for beginners" },
    2: { name: "MEDIUM", xp: "75 XP", desc: "Moderate challenge" },
    3: { name: "HARD", xp: "150 XP", desc: "Expert level required" },
  }

return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
      <div className="bg-[#F4F0E6] rounded-xl w-full max-w-2xl relative max-h-[90vh] overflow-y-auto shadow-2xl">
        {/* Header */}
        <div className="bg-gradient-to-r from-[#8B75AA] to-[#CDAA7D] px-8 py-6 rounded-t-xl">
          <div className="flex justify-between items-center">
            <div>
              <h2 className="text-2xl font-bold text-white">Post a New Quest</h2>
              <p className="text-white/80 mt-1">Share your quest with the tavern community</p>
            </div>
            <button
              onClick={onClose}
              className="text-white hover:text-[#F4F0E6] transition-colors p-2 hover:bg-white/10 rounded-lg"
            >
              <X size={24} />
            </button>
          </div>
        </div>

{/* Form Content */}
        <div className="p-8 space-y-6">
          {/* Quest Title */}
          <div className="space-y-2">
            <label className="flex items-center gap-2 text-sm font-bold text-[#2C1A1D] uppercase tracking-wide">
              <Target size={16} />
              Quest Title
            </label>
            <input
              type="text"
              className="w-full px-4 py-3 border-2 border-[#CDAA7D] rounded-lg bg-white text-[#2C1A1D] placeholder-[#8B75AA]/60 focus:outline-none focus:border-[#8B75AA] focus:ring-2 focus:ring-[#8B75AA]/20 transition-all"
              placeholder="Enter a compelling title for your quest..."
              value={questForm.title}
              onChange={(e) => setQuestForm((prev) => ({ ...prev, title: e.target.value }))}
            />
          </div>

{/* Quest Description */}
          <div className="space-y-2">
            <label className="flex items-center gap-2 text-sm font-bold text-[#2C1A1D] uppercase tracking-wide">
              <Users size={16} />
              Quest Description
            </label>
            <textarea
              className="w-full px-4 py-3 border-2 border-[#CDAA7D] rounded-lg bg-white text-[#2C1A1D] placeholder-[#8B75AA]/60 focus:outline-none focus:border-[#8B75AA] focus:ring-2 focus:ring-[#8B75AA]/20 h-32 resize-none transition-all"
              placeholder="Describe your quest in detail. What needs to be done? What are the requirements?"
              value={questForm.description}
              onChange={(e) => setQuestForm((prev) => ({ ...prev, description: e.target.value }))}
            />
          </div>

{/* Category and Reward Row */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            {/* Category */}
            <div className="space-y-2">
              <label className="block text-sm font-bold text-[#2C1A1D] uppercase tracking-wide">Category</label>
              <select
                className="w-full px-4 py-3 border-2 border-[#CDAA7D] rounded-lg bg-white text-[#2C1A1D] focus:outline-none focus:border-[#8B75AA] focus:ring-2 focus:ring-[#8B75AA]/20 transition-all"
                value={questForm.category}
                onChange={(e) => setQuestForm((prev) => ({ ...prev, category: e.target.value }))}
              >
                <option value="">Select Category</option>
                <option value="design">🎨 Design</option>
                <option value="development">💻 Development</option>
                <option value="writing">✍️ Writing</option>
                <option value="music">🎵 Music</option>
                <option value="art">🖼️ Art</option>
                <option value="marketing">📢 Marketing</option>
                <option value="research">🔍 Research</option>
              </select>
            </div>

{/* Reward */}
            <div className="space-y-2">
              <label className="flex items-center gap-2 text-sm font-bold text-[#2C1A1D] uppercase tracking-wide">
                <Coins size={16} />
                Reward (Gold)
              </label>
              <input
                type="number"
                className="w-full px-4 py-3 border-2 border-[#CDAA7D] rounded-lg bg-white text-[#2C1A1D] placeholder-[#8B75AA]/60 focus:outline-none focus:border-[#8B75AA] focus:ring-2 focus:ring-[#8B75AA]/20 transition-all"
                placeholder="100"
                min="1"
                value={questForm.reward}
                onChange={(e) => setQuestForm((prev) => ({ ...prev, reward: e.target.value }))}
              />
            </div>
          </div>

{/* Difficulty Slider */}
          <div className="space-y-4">
            <label className="block text-sm font-bold text-[#2C1A1D] uppercase tracking-wide">Difficulty Level</label>
            <div className="space-y-3">
              <input
                type="range"
                min="1"
                max="3"
                value={questForm.difficulty}
                onChange={(e) => setQuestForm((prev) => ({ ...prev, difficulty: Number.parseInt(e.target.value) }))}
                className="w-full h-3 rounded-lg appearance-none cursor-pointer"
                style={{
                  background: `linear-gradient(to right, ${questForm.difficulty === 1 ? "#10b981" : questForm.difficulty === 2 ? "#f59e0b" : "#ef4444"} 0%, ${questForm.difficulty === 1 ? "#059669" : questForm.difficulty === 2 ? "#d97706" : "#dc2626"} 100%)`,
                }}
              />
              <div
                className={`p-4 rounded-lg bg-gradient-to-r ${difficultyColors[questForm.difficulty as keyof typeof difficultyColors]} text-white`}
              >
                <div className="flex justify-between items-center">
                  <div>
                    <div className="font-bold text-lg">
                      {difficultyLabels[questForm.difficulty as keyof typeof difficultyLabels].name}
                    </div>
                    <div className="text-sm opacity-90">
                      {difficultyLabels[questForm.difficulty as keyof typeof difficultyLabels].desc}
                    </div>
                  </div>
                  <div className="text-right">
                    <div className="font-bold">
                      {difficultyLabels[questForm.difficulty as keyof typeof difficultyLabels].xp}
                    </div>
                    <div className="text-sm opacity-90">Reward</div>
                  </div>
                </div>
              </div>
            </div>
          </div>

{/* Deadline */}
          <div className="space-y-2">
            <label className="flex items-center gap-2 text-sm font-bold text-[#2C1A1D] uppercase tracking-wide">
              <Clock size={16} />
              Deadline
            </label>
            <input
              type="date"
              className="w-full px-4 py-3 border-2 border-[#CDAA7D] rounded-lg bg-white text-[#2C1A1D] focus:outline-none focus:border-[#8B75AA] focus:ring-2 focus:ring-[#8B75AA]/20 transition-all"
              value={questForm.deadline}
              onChange={(e) => setQuestForm((prev) => ({ ...prev, deadline: e.target.value }))}
              min={new Date().toISOString().split("T")[0]}
            />
          </div>

{/* Post As */}
          <div className="space-y-3">
            <label className="block text-sm font-bold text-[#2C1A1D] uppercase tracking-wide">Post As</label>
            <div className="space-y-3">
              {/* Individual Option */}
              <label className="flex items-center gap-3 p-4 border-2 border-[#CDAA7D] rounded-lg cursor-pointer hover:bg-white/50 transition-all">
                <input
                  type="radio"
                  name="postAs"
                  value="individual"
                  checked={questForm.postAs === "individual"}
                  onChange={(e) => setQuestForm((prev) => ({ ...prev, postAs: e.target.value }))}
                  className="w-4 h-4 text-[#8B75AA]"
                />
                <div className="flex items-center gap-3">
                  <div className="w-10 h-10 bg-[#8B75AA] rounded-full flex items-center justify-center text-white font-bold">
                    {currentUser?.avatar || currentUser?.username?.[0]?.toUpperCase() || "U"}
                  </div>
                  <div>
                    <div className="font-medium text-[#2C1A1D]">
                      Individual ({currentUser?.username || "Your Username"})
                    </div>
                    <div className="text-sm text-[#8B75AA]">Post as yourself</div>
                  </div>
                </div>
              </label>

{/* Guild Options */}
              {userGuilds.length > 0 && (
                <label className="flex items-start gap-3 p-4 border-2 border-[#CDAA7D] rounded-lg cursor-pointer hover:bg-white/50 transition-all">
                  <input
                    type="radio"
                    name="postAs"
                    value="guild"
                    checked={questForm.postAs === "guild"}
                    onChange={(e) => setQuestForm((prev) => ({ ...prev, postAs: e.target.value }))}
                    className="w-4 h-4 text-[#8B75AA] mt-1"
                  />
                  <div className="flex-1">
                    <div className="font-medium text-[#2C1A1D] mb-2">Guild Representative</div>
                    <div className="text-sm text-[#8B75AA] mb-3">Post on behalf of a guild</div>

{questForm.postAs === "guild" && (
                      <select
                        className="w-full px-3 py-2 border border-[#CDAA7D] rounded bg-white text-[#2C1A1D] focus:outline-none focus:border-[#8B75AA]"
                        value={questForm.selectedGuild}
                        onChange={(e) => setQuestForm((prev) => ({ ...prev, selectedGuild: e.target.value }))}
                      >
                        <option value="">Select a guild...</option>
                        {userGuilds.map((guild) => (
                          <option key={guild.id} value={guild.id.toString()}>
                            {guild.emblem} {guild.name}
                          </option>
                        ))}
                      </select>
                    )}
                  </div>
                </label>
              )}

{userGuilds.length === 0 && (
                <div className="p-4 border-2 border-dashed border-[#CDAA7D] rounded-lg text-center">
                  <p className="text-[#8B75AA] text-sm">Join a guild to post quests on their behalf</p>
                </div>
              )}
            </div>
          </div>

{/* Action Buttons */}
          <div className="flex gap-4 pt-6 border-t border-[#CDAA7D]">
            <button
              onClick={onClose}
              className="flex-1 border-2 border-[#CDAA7D] py-3 px-6 rounded-lg font-bold text-[#2C1A1D] hover:bg-[#CDAA7D] hover:text-white transition-all duration-200"
            >
              Cancel
            </button>
            <button
              onClick={handleSubmit}
              className="flex-1 bg-gradient-to-r from-[#8B75AA] to-[#CDAA7D] text-white py-3 px-6 rounded-lg font-bold hover:from-[#7A6699] hover:to-[#B8935A] transition-all duration-200 shadow-lg hover:shadow-xl"
            >
              Post Quest
            </button>
          </div>
        </div>
        {/* Confirmation Modal */}
        <ConfirmationModal
          isOpen={showConfirmation}
          onClose={() => setShowConfirmation(false)}
          onConfirm={handleConfirmSubmit}
          title="Confirm Quest Posting"
          message={`Are you sure you want to post this quest? The reward amount will be deducted from your gold balance.`}
          goldAmount={Number.parseInt(questForm.reward) || 0}
          confirmText="Post Quest"
          cancelText="Cancel"
        />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/enhanced-create-guild-modal.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useRef } from "react"
import { X, Upload, Plus, Trash2, Users, Settings, Palette, Globe, Lock } from "lucide-react"
import type { User, Guild } from "@/lib/types"
import { ConfirmationModal } from "@/components/confirmation-modal"

interface EnhancedCreateGuildModalProps {
  isOpen: boolean
  onClose: () => void
  currentUser?: User | null
  onSubmit?: (guildData: Partial<Guild>) => void
  showToast?: (message: string, type?: string) => void
}

export function EnhancedCreateGuildModal({
  isOpen,
  onClose,
  currentUser,
  onSubmit,
  showToast,
}: EnhancedCreateGuildModalProps) {
  const [currentStep, setCurrentStep] = useState(1)
  const [guildForm, setGuildForm] = useState({
    name: "",
    description: "",
    emblem: "🧪",
    specialization: "",
    privacy: "public",
    welcomeMessage: "",
    tags: [] as string[],
    socialLinks: [] as { platform: string; url: string }[],
    customEmblemFile: null as File | null,
    customEmblemPreview: "",
    useCustomEmblem: false,
    // Settings
    requireApproval: true,
    minimumLevel: 1,
    allowDiscovery: true,
    showOnHomePage: true,
    whoCanPost: "members",
    whoCanInvite: "members",
  })

const [currentTag, setCurrentTag] = useState("")
  const [currentSocialPlatform, setCurrentSocialPlatform] = useState("")
  const [currentSocialUrl, setCurrentSocialUrl] = useState("")
  const fileInputRef = useRef<HTMLInputElement>(null)
  const [showConfirmation, setShowConfirmation] = useState(false)

const emblems = ["🧪", "🌙", "🔥", "🌿", "🥕", "🍂", "🔮", "💎", "⚔️", "🏰", "🛡️", "🎯", "🎨", "💻", "📚", "🎵"]

const specializations = [
    { value: "alchemy", label: "Alchemy", icon: "🧪" },
    { value: "protection", label: "Protection", icon: "🛡️" },
    { value: "design", label: "Art & Design", icon: "🎨" },
    { value: "development", label: "Development", icon: "💻" },
    { value: "writing", label: "Writing", icon: "📚" },
    { value: "music", label: "Music", icon: "🎵" },
    { value: "research", label: "Research", icon: "🔍" },
    { value: "marketing", label: "Marketing", icon: "📢" },
  ]

if (!isOpen) return null

const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0]
    if (file) {
      // Validate file size (5MB max)
      if (file.size > 5 * 1024 * 1024) {
        showToast?.("File size must be less than 5MB", "error")
        return
      }

// Validate file type
      if (!file.type.startsWith("image/")) {
        showToast?.("Please upload an image file", "error")
        return
      }

const reader = new FileReader()
      reader.onload = (e) => {
        setGuildForm((prev) => ({
          ...prev,
          customEmblemFile: file,
          customEmblemPreview: e.target?.result as string,
          useCustomEmblem: true,
        }))
      }
      reader.readAsDataURL(file)
    }
  }

const addTag = () => {
    if (currentTag.trim() && !guildForm.tags.includes(currentTag.trim()) && guildForm.tags.length < 5) {
      setGuildForm((prev) => ({
        ...prev,
        tags: [...prev.tags, currentTag.trim()],
      }))
      setCurrentTag("")
    }
  }

const removeTag = (index: number) => {
    setGuildForm((prev) => ({
      ...prev,
      tags: prev.tags.filter((_, i) => i !== index),
    }))
  }

const addSocialLink = () => {
    if (currentSocialPlatform.trim() && currentSocialUrl.trim()) {
      setGuildForm((prev) => ({
        ...prev,
        socialLinks: [...prev.socialLinks, { platform: currentSocialPlatform.trim(), url: currentSocialUrl.trim() }],
      }))
      setCurrentSocialPlatform("")
      setCurrentSocialUrl("")
    }
  }

const removeSocialLink = (index: number) => {
    setGuildForm((prev) => ({
      ...prev,
      socialLinks: prev.socialLinks.filter((_, i) => i !== index),
    }))
  }

const handleSubmit = () => {
    if (!currentUser) {
      showToast?.("Please log in to create a guild", "error")
      return
    }

const GUILD_CREATION_COST = 1000

// Check if user has enough gold to create a guild
    if (currentUser.gold < GUILD_CREATION_COST) {
      showToast?.(
        `Insufficient gold. You need ${GUILD_CREATION_COST} gold to create a guild but only have ${currentUser.gold} gold.`,
        "error",
      )
      return
    }

if (!guildForm.name || !guildForm.description || !guildForm.specialization) {
      showToast?.("Please fill in all required fields", "error")
      return
    }

// Show confirmation modal instead of submitting directly
    setShowConfirmation(true)
  }

const handleConfirmSubmit = () => {
    const GUILD_CREATION_COST = 1000

const newGuild: Partial<Guild> = {
      name: guildForm.name,
      description: guildForm.description,
      emblem: guildForm.useCustomEmblem ? guildForm.customEmblemPreview : guildForm.emblem,
      specialization: guildForm.specialization,
      privacy: guildForm.privacy,
      poster: currentUser,
      members: 1,
      membersList: [currentUser.id],
      welcomeMessage: guildForm.welcomeMessage,
      tags: guildForm.tags,
      socialLinks: guildForm.socialLinks,
      settings: {
        joinRequirements: {
          manualApproval: guildForm.requireApproval,
          minimumLevel: guildForm.minimumLevel,
          requiresApplication: guildForm.requireApproval,
        },
        visibility: {
          publiclyVisible: guildForm.privacy === "public",
          showOnHomePage: guildForm.showOnHomePage,
          allowDiscovery: guildForm.allowDiscovery,
        },
        permissions: {
          whoCanPost: guildForm.whoCanPost,
          whoCanInvite: guildForm.whoCanInvite,
          whoCanKick: "admins",
        },
      },
    }

if (onSubmit) {
      onSubmit({ ...newGuild, guildCreationCost: GUILD_CREATION_COST })
    }

// Reset form
    setGuildForm({
      name: "",
      description: "",
      emblem: "🧪",
      specialization: "",
      privacy: "public",
      welcomeMessage: "",
      tags: [],
      socialLinks: [],
      customEmblemFile: null,
      customEmblemPreview: "",
      useCustomEmblem: false,
      requireApproval: true,
      minimumLevel: 1,
      allowDiscovery: true,
      showOnHomePage: true,
      whoCanPost: "members",
      whoCanInvite: "members",
    })
    setCurrentStep(1)
    setShowConfirmation(false)
  }

const nextStep = () => {
    if (currentStep === 1) {
      if (!guildForm.name || !guildForm.description) {
        showToast?.("Please fill in the guild name and description", "error")
        return
      }
    }
    setCurrentStep((prev) => Math.min(prev + 1, 3))
  }

const prevStep = () => {
    setCurrentStep((prev) => Math.max(prev - 1, 1))
  }

return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
      <div className="bg-[#F4F0E6] rounded-lg w-full max-w-2xl max-h-[90vh] overflow-y-auto">
        {/* Header */}
        <div className="bg-gradient-to-r from-[#2C1A1D] to-[#8B75AA] text-white p-6 rounded-t-lg">
          <div className="flex justify-between items-center">
            <div>
              <h2 className="text-2xl font-bold">Create a New Guild</h2>
              <p className="text-[#CDAA7D]">Step {currentStep} of 3</p>
            </div>
            <button onClick={onClose} className="text-white hover:text-[#CDAA7D] transition-colors">
              <X size={24} />
            </button>
          </div>

{/* Progress Bar */}
          <div className="mt-4">
            <div className="flex justify-between text-sm mb-2">
              <span className={currentStep >= 1 ? "text-[#CDAA7D]" : "text-white/60"}>Basic Info</span>
              <span className={currentStep >= 2 ? "text-[#CDAA7D]" : "text-white/60"}>Customization</span>
              <span className={currentStep >= 3 ? "text-[#CDAA7D]" : "text-white/60"}>Settings</span>
            </div>
            <div className="w-full bg-[#2C1A1D] rounded-full h-2">
              <div
                className="bg-[#CDAA7D] h-2 rounded-full transition-all duration-300"
                style={{ width: `${(currentStep / 3) * 100}%` }}
              ></div>
            </div>
          </div>
        </div>

{/* Form Content */}
        <div className="p-6">
          {/* Step 1: Basic Information */}
          {currentStep === 1 && (
            <div className="space-y-6">
              <div className="flex items-center gap-2 text-[#8B75AA] mb-4">
                <Users size={20} />
                <h3 className="text-lg font-semibold">Basic Information</h3>
              </div>

<div>
                <label className="block text-sm font-medium text-[#2C1A1D] mb-2">
                  GUILD NAME <span className="text-red-500">*</span>
                </label>
                <input
                  type="text"
                  className="w-full px-4 py-3 border border-[#CDAA7D] rounded-lg bg-white text-[#2C1A1D] focus:outline-none focus:border-[#8B75AA]"
                  placeholder="Enter a unique name for your guild"
                  value={guildForm.name}
                  onChange={(e) => setGuildForm((prev) => ({ ...prev, name: e.target.value }))}
                />
              </div>

<div>
                <label className="block text-sm font-medium text-[#2C1A1D] mb-2">
                  DESCRIPTION <span className="text-red-500">*</span>
                </label>
                <textarea
                  className="w-full px-4 py-3 border border-[#CDAA7D] rounded-lg bg-white text-[#2C1A1D] focus:outline-none focus:border-[#8B75AA] h-32 resize-none"
                  placeholder="Describe your guild's purpose, goals, and what makes it special..."
                  value={guildForm.description}
                  onChange={(e) => setGuildForm((prev) => ({ ...prev, description: e.target.value }))}
                />
              </div>

<div>
                <label className="block text-sm font-medium text-[#2C1A1D] mb-2">SPECIALIZATION</label>
                <div className="grid grid-cols-2 gap-3">
                  {specializations.map((spec) => (
                    <button
                      key={spec.value}
                      type="button"
                      onClick={() => setGuildForm((prev) => ({ ...prev, specialization: spec.value }))}
                      className={`p-3 border rounded-lg flex items-center gap-3 transition-colors ${
                        guildForm.specialization === spec.value
                          ? "border-[#8B75AA] bg-[#8B75AA]/10 text-[#8B75AA]"
                          : "border-[#CDAA7D] hover:bg-[#CDAA7D]/10 text-[#2C1A1D]"
                      }`}
                    >
                      <span className="text-xl">{spec.icon}</span>
                      <span className="font-medium">{spec.label}</span>
                    </button>
                  ))}
                </div>
              </div>

<div>
                <label className="block text-sm font-medium text-[#2C1A1D] mb-2">WELCOME MESSAGE</label>
                <textarea
                  className="w-full px-4 py-3 border border-[#CDAA7D] rounded-lg bg-white text-[#2C1A1D] focus:outline-none focus:border-[#8B75AA] h-24 resize-none"
                  placeholder="Welcome new members with a friendly message..."
                  value={guildForm.welcomeMessage}
                  onChange={(e) => setGuildForm((prev) => ({ ...prev, welcomeMessage: e.target.value }))}
                />
              </div>
            </div>
          )}

{/* Step 2: Customization */}
          {currentStep === 2 && (
            <div className="space-y-6">
              <div className="flex items-center gap-2 text-[#8B75AA] mb-4">
                <Palette size={20} />
                <h3 className="text-lg font-semibold">Customization</h3>
              </div>

{/* Guild Emblem */}
              <div>
                <label className="block text-sm font-medium text-[#2C1A1D] mb-2">GUILD EMBLEM</label>

{/* Custom Upload Option */}
                <div className="mb-4 p-4 border border-[#CDAA7D] rounded-lg bg-white">
                  <div className="flex items-center justify-between mb-3">
                    <span className="font-medium text-[#2C1A1D]">Custom Emblem</span>
                    <button
                      type="button"
                      onClick={() => fileInputRef.current?.click()}
                      className="flex items-center gap-2 px-3 py-2 bg-[#8B75AA] text-white rounded hover:bg-[#7A6699] transition-colors"
                    >
                      <Upload size={16} />
                      Upload Image
                    </button>
                  </div>

{guildForm.customEmblemPreview && (
                    <div className="flex items-center gap-3">
                      <img
                        src={guildForm.customEmblemPreview || "/placeholder.svg"}
                        alt="Custom emblem preview"
                        className="w-16 h-16 rounded-lg object-cover border border-[#CDAA7D]"
                      />
                      <div className="flex-1">
                        <p className="text-sm text-[#2C1A1D] font-medium">Custom emblem uploaded</p>
                        <p className="text-xs text-[#8B75AA]">This will be used as your guild emblem</p>
                      </div>
                      <button
                        onClick={() =>
                          setGuildForm((prev) => ({
                            ...prev,
                            customEmblemFile: null,
                            customEmblemPreview: "",
                            useCustomEmblem: false,
                          }))
                        }
                        className="text-red-500 hover:text-red-700"
                      >
                        <Trash2 size={16} />
                      </button>
                    </div>
                  )}

<input
                    ref={fileInputRef}
                    type="file"
                    accept="image/*"
                    onChange={handleFileUpload}
                    className="hidden"
                  />
                  <p className="text-xs text-[#8B75AA] mt-2">
                    Upload a custom image (max 5MB). Recommended size: 256x256px
                  </p>
                </div>

{/* Preset Emblems */}
                <div>
                  <p className="text-sm text-[#2C1A1D] mb-3">Or choose from preset emblems:</p>
                  <div className="grid grid-cols-8 gap-2">
                    {emblems.map((emblem) => (
                      <button
                        key={emblem}
                        type="button"
                        onClick={() =>
                          setGuildForm((prev) => ({
                            ...prev,
                            emblem,
                            useCustomEmblem: false,
                            customEmblemFile: null,
                            customEmblemPreview: "",
                          }))
                        }
                        className={`h-12 flex items-center justify-center text-xl border rounded-lg transition-colors ${
                          guildForm.emblem === emblem && !guildForm.useCustomEmblem
                            ? "border-[#8B75AA] bg-[#8B75AA]/10"
                            : "border-[#CDAA7D] hover:bg-[#CDAA7D]/10"
                        }`}
                      >
                        {emblem}
                      </button>
                    ))}
                  </div>
                </div>
              </div>

{/* Tags */}
              <div>
                <label className="block text-sm font-medium text-[#2C1A1D] mb-2">TAGS (Max 5)</label>
                <div className="flex gap-2 mb-3">
                  <input
                    type="text"
                    placeholder="Add a tag..."
                    value={currentTag}
                    onChange={(e) => setCurrentTag(e.target.value)}
                    onKeyPress={(e) => e.key === "Enter" && addTag()}
                    className="flex-1 px-4 py-2 border border-[#CDAA7D] rounded bg-white text-[#2C1A1D] focus:outline-none focus:border-[#8B75AA]"
                  />
                  <button
                    type="button"
                    onClick={addTag}
                    disabled={guildForm.tags.length >= 5}
                    className="px-4 py-2 bg-[#8B75AA] text-white rounded hover:bg-[#7A6699] disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
                  >
                    <Plus size={16} />
                    Add
                  </button>
                </div>
                <div className="flex flex-wrap gap-2">
                  {guildForm.tags.map((tag, index) => (
                    <span
                      key={index}
                      className="bg-[#8B75AA]/10 text-[#8B75AA] px-3 py-1 rounded-full text-sm flex items-center gap-2"
                    >
                      {tag}
                      <button onClick={() => removeTag(index)} className="text-[#8B75AA] hover:text-red-500">
                        <X size={14} />
                      </button>
                    </span>
                  ))}
                </div>
              </div>

{/* Social Links */}
              <div>
                <label className="block text-sm font-medium text-[#2C1A1D] mb-2">SOCIAL LINKS</label>
                <div className="grid grid-cols-2 gap-2 mb-3">
                  <input
                    type="text"
                    placeholder="Platform (e.g., Discord)"
                    value={currentSocialPlatform}
                    onChange={(e) => setCurrentSocialPlatform(e.target.value)}
                    className="px-4 py-2 border border-[#CDAA7D] rounded bg-white text-[#2C1A1D] focus:outline-none focus:border-[#8B75AA]"
                  />
                  <input
                    type="url"
                    placeholder="URL"
                    value={currentSocialUrl}
                    onChange={(e) => setCurrentSocialUrl(e.target.value)}
                    className="px-4 py-2 border border-[#CDAA7D] rounded bg-white text-[#2C1A1D] focus:outline-none focus:border-[#8B75AA]"
                  />
                </div>
                <button
                  type="button"
                  onClick={addSocialLink}
                  className="w-full px-4 py-2 border border-[#8B75AA] text-[#8B75AA] rounded hover:bg-[#8B75AA] hover:text-white transition-colors flex items-center justify-center gap-2"
                >
                  <Plus size={16} />
                  Add Social Link
                </button>
                <div className="space-y-2 mt-3">
                  {guildForm.socialLinks.map((link, index) => (
                    <div
                      key={index}
                      className="flex items-center justify-between bg-white p-3 rounded border border-[#CDAA7D]"
                    >
                      <div>
                        <span className="font-medium text-[#2C1A1D]">{link.platform}</span>
                        <p className="text-sm text-[#8B75AA] truncate">{link.url}</p>
                      </div>
                      <button onClick={() => removeSocialLink(index)} className="text-red-500 hover:text-red-700">
                        <Trash2 size={16} />
                      </button>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          )}

{/* Step 3: Settings */}
          {currentStep === 3 && (
            <div className="space-y-6">
              <div className="flex items-center gap-2 text-[#8B75AA] mb-4">
                <Settings size={20} />
                <h3 className="text-lg font-semibold">Guild Settings</h3>
              </div>

{/* Privacy */}
              <div>
                <label className="block text-sm font-medium text-[#2C1A1D] mb-2">PRIVACY</label>
                <div className="grid grid-cols-2 gap-3">
                  <button
                    type="button"
                    onClick={() => setGuildForm((prev) => ({ ...prev, privacy: "public" }))}
                    className={`p-4 border rounded-lg flex items-center gap-3 transition-colors ${
                      guildForm.privacy === "public"
                        ? "border-[#8B75AA] bg-[#8B75AA]/10 text-[#8B75AA]"
                        : "border-[#CDAA7D] hover:bg-[#CDAA7D]/10 text-[#2C1A1D]"
                    }`}
                  >
                    <Globe size={20} />
                    <div className="text-left">
                      <div className="font-medium">Public</div>
                      <div className="text-sm opacity-70">Anyone can find and join</div>
                    </div>
                  </button>
                  <button
                    type="button"
                    onClick={() => setGuildForm((prev) => ({ ...prev, privacy: "private" }))}
                    className={`p-4 border rounded-lg flex items-center gap-3 transition-colors ${
                      guildForm.privacy === "private"
                        ? "border-[#8B75AA] bg-[#8B75AA]/10 text-[#8B75AA]"
                        : "border-[#CDAA7D] hover:bg-[#CDAA7D]/10 text-[#2C1A1D]"
                    }`}
                  >
                    <Lock size={20} />
                    <div className="text-left">
                      <div className="font-medium">Private</div>
                      <div className="text-sm opacity-70">Invitation only</div>
                    </div>
                  </button>
                </div>
              </div>

{/* Join Requirements */}
              <div className="space-y-4">
                <h4 className="font-medium text-[#2C1A1D]">Join Requirements</h4>

<div className="flex items-center justify-between">
                  <div>
                    <span className="font-medium text-[#2C1A1D]">Require Approval</span>
                    <p className="text-sm text-[#8B75AA]">New members need approval to join</p>
                  </div>
                  <button
                    type="button"
                    onClick={() => setGuildForm((prev) => ({ ...prev, requireApproval: !prev.requireApproval }))}
                    className={`w-12 h-6 rounded-full transition-colors ${
                      guildForm.requireApproval ? "bg-[#8B75AA]" : "bg-gray-300"
                    }`}
                  >
                    <div
                      className={`w-5 h-5 bg-white rounded-full transition-transform ${
                        guildForm.requireApproval ? "translate-x-6" : "translate-x-0.5"
                      }`}
                    />
                  </button>
                </div>

<div>
                  <label className="block text-sm font-medium text-[#2C1A1D] mb-2">Minimum Level</label>
                  <input
                    type="number"
                    min="1"
                    max="100"
                    value={guildForm.minimumLevel}
                    onChange={(e) =>
                      setGuildForm((prev) => ({ ...prev, minimumLevel: Number.parseInt(e.target.value) || 1 }))
                    }
                    className="w-full px-4 py-2 border border-[#CDAA7D] rounded bg-white text-[#2C1A1D] focus:outline-none focus:border-[#8B75AA]"
                  />
                </div>
              </div>

{/* Visibility Settings */}
              <div className="space-y-4">
                <h4 className="font-medium text-[#2C1A1D]">Visibility</h4>

<div className="flex items-center justify-between">
                  <div>
                    <span className="font-medium text-[#2C1A1D]">Allow Discovery</span>
                    <p className="text-sm text-[#8B75AA]">Show in guild search results</p>
                  </div>
                  <button
                    type="button"
                    onClick={() => setGuildForm((prev) => ({ ...prev, allowDiscovery: !prev.allowDiscovery }))}
                    className={`w-12 h-6 rounded-full transition-colors ${
                      guildForm.allowDiscovery ? "bg-[#8B75AA]" : "bg-gray-300"
                    }`}
                  >
                    <div
                      className={`w-5 h-5 bg-white rounded-full transition-transform ${
                        guildForm.allowDiscovery ? "translate-x-6" : "translate-x-0.5"
                      }`}
                    />
                  </button>
                </div>

<div className="flex items-center justify-between">
                  <div>
                    <span className="font-medium text-[#2C1A1D]">Show on Home Page</span>
                    <p className="text-sm text-[#8B75AA]">Feature in recommended guilds</p>
                  </div>
                  <button
                    type="button"
                    onClick={() => setGuildForm((prev) => ({ ...prev, showOnHomePage: !prev.showOnHomePage }))}
                    className={`w-12 h-6 rounded-full transition-colors ${
                      guildForm.showOnHomePage ? "bg-[#8B75AA]" : "bg-gray-300"
                    }`}
                  >
                    <div
                      className={`w-5 h-5 bg-white rounded-full transition-transform ${
                        guildForm.showOnHomePage ? "translate-x-6" : "translate-x-0.5"
                      }`}
                    />
                  </button>
                </div>
              </div>

{/* Permissions */}
              <div className="space-y-4">
                <h4 className="font-medium text-[#2C1A1D]">Permissions</h4>

<div>
                  <label className="block text-sm font-medium text-[#2C1A1D] mb-2">Who can post quests?</label>
                  <select
                    value={guildForm.whoCanPost}
                    onChange={(e) => setGuildForm((prev) => ({ ...prev, whoCanPost: e.target.value }))}
                    className="w-full px-4 py-2 border border-[#CDAA7D] rounded bg-white text-[#2C1A1D] focus:outline-none focus:border-[#8B75AA]"
                  >
                    <option value="members">All Members</option>
                    <option value="admins">Admins Only</option>
                    <option value="owner">Owner Only</option>
                  </select>
                </div>

<div>
                  <label className="block text-sm font-medium text-[#2C1A1D] mb-2">Who can invite members?</label>
                  <select
                    value={guildForm.whoCanInvite}
                    onChange={(e) => setGuildForm((prev) => ({ ...prev, whoCanInvite: e.target.value }))}
                    className="w-full px-4 py-2 border border-[#CDAA7D] rounded bg-white text-[#2C1A1D] focus:outline-none focus:border-[#8B75AA]"
                  >
                    <option value="members">All Members</option>
                    <option value="admins">Admins Only</option>
                    <option value="owner">Owner Only</option>
                  </select>
                </div>
              </div>
            </div>
          )}

{/* Navigation Buttons */}
          <div className="flex justify-between pt-6 border-t border-[#CDAA7D] mt-8">
            <button
              onClick={currentStep === 1 ? onClose : prevStep}
              className="px-6 py-3 border border-[#CDAA7D] rounded font-medium text-[#2C1A1D] hover:bg-[#CDAA7D] hover:text-white transition-colors"
            >
              {currentStep === 1 ? "Cancel" : "Previous"}
            </button>

<button
              onClick={currentStep === 3 ? handleSubmit : nextStep}
              className="px-6 py-3 bg-[#8B75AA] text-white rounded font-medium hover:bg-[#7A6699] transition-colors"
            >
              {currentStep === 3 ? "Create Guild" : "Next"}
            </button>
          </div>
        </div>
        {/* Confirmation Modal */}
        <ConfirmationModal
          isOpen={showConfirmation}
          onClose={() => setShowConfirmation(false)}
          onConfirm={handleConfirmSubmit}
          title="Confirm Guild Creation"
          message={`Are you sure you want to create "${guildForm.name}" guild? The creation fee will be deducted from your gold balance.`}
          goldAmount={1000}
          confirmText="Create Guild"
          cancelText="Cancel"
        />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="lib/types.ts" isEdit="true" isMerged="true"
export interface User {
  id: number
  username: string
  email: string
  password: string
  avatar: string
  level: number
  xp: number
  gold: number
  bio: string
  completedQuests: number
  createdQuests: number
  joinedGuilds: number
  createdGuilds: number
  isAdmin?: boolean
  isBanned?: boolean
  createdAt: Date
  settings: UserSettings
  spendingLimits?: SpendingLimits
  spendingHistory?: SpendingRecord[]
}

export interface SpendingLimits {
  dailyLimit: number
  weeklyLimit: number
  enabled: boolean
  notifications: boolean
}

export interface SpendingRecord {
  id: number
  amount: number
  type: "quest_posting" | "guild_creation" | "other"
  description: string
  date: Date
}

export interface UserSettings {
  email: string
  username: string
  password: string
  avatar: string
  notifications: {
    questUpdates: boolean
    guildUpdates: boolean
    messages: boolean
    applicationUpdates: boolean
  }
  privacy: {
    showProfile: "everyone" | "friends" | "none"
    showActivity: boolean
    showGuilds: boolean
  }
  theme: "light" | "dark" | "system"
  language: string
}

export interface Quest {
  id: number
  title: string
  description: string
  poster: User
  reward: number
  xp: number
  deadline: Date
  category: string
  difficulty: "easy" | "medium" | "hard"
  status: "open" | "in-progress" | "completed"
  createdAt: Date
  completedAt?: Date
  assignedTo?: number
  applicants: QuestApplication[]
  isGuildQuest?: boolean
  guildId?: number
  guildReward?: number
}

export interface QuestApplication {
  id: number
  userId: number
  username: string
  avatar: string
  message: string
  status: "pending" | "accepted" | "rejected"
  appliedAt: Date
}

export interface Guild {
  id: number
  name: string
  description: string
  emblem: string
  poster: User
  members: number
  membersList: number[]
  admins: number[]
  specialization: string
  category: string
  createdAt: Date
  applications: GuildApplication[]
  funds: number
  settings: GuildSettings
  roles: GuildRole[]
  socialLinks: string[]
  shout?: GuildShout
}

export interface GuildSettings {
  joinRequirements: {
    manualApproval: boolean
    minimumLevel: number
    requiresApplication: boolean
  }
  visibility: {
    publiclyVisible: boolean
    showOnHomePage: boolean
    allowDiscovery: boolean
  }
  permissions: {
    whoCanPost: "everyone" | "members" | "admins"
    whoCanInvite: "everyone" | "members" | "admins"
    whoCanKick: "admins" | "owner"
  }
}

export interface GuildRole {
  id: number
  name: string
  description: string
  rank: number
  permissions: {
    manageMembers: boolean
    manageFunds: boolean
    postAnnouncements: boolean
    moderateChat: boolean
    acceptApplications: boolean
    kickMembers: boolean
    banMembers: boolean
    manageRoles: boolean
  }
  color: string
}

export interface GuildShout {
  id: number
  content: string
  authorId: number
  authorName: string
  createdAt: Date
  updatedAt: Date
}

export interface GuildApplication {
  id: number
  userId: number
  username: string
  avatar: string
  message: string
  status: "pending" | "accepted" | "rejected"
  appliedAt: Date
}

export interface GuildChatMessage {
  id: number
  guildId: number
  senderId: number
  senderName: string
  senderAvatar: string
  content: string
  createdAt: Date
  edited?: boolean
  editedAt?: Date
}

export interface Message {
  id: number
  senderId: number
  receiverId: number
  content: string
  read: boolean
  createdAt: Date
}

export interface Conversation {
  id: number
  participants: number[]
  lastMessage: string
  lastMessageDate: Date
  unreadCount: number
}

export interface Report {
  id: number
  type: "user" | "quest" | "guild"
  targetId: number
  targetName: string
  reason: string
  reportedBy: number
  reporterName: string
  status: "pending" | "resolved" | "dismissed"
  createdAt: Date
}

export interface GuildTransaction {
  id: number
  guildId: number
  type: "quest_reward" | "donation" | "expense" | "payout"
  amount: number
  description: string
  fromUserId?: number
  toUserId?: number
  questId?: number
  createdAt: Date
}
[V0_FILE]typescriptreact:file="lib/spending-utils.ts" isMerged="true"
import type { User, SpendingRecord } from "./types"

export function getSpendingForPeriod(user: User, days: number): number {
  if (!user.spendingHistory) return 0

const cutoffDate = new Date()
  cutoffDate.setDate(cutoffDate.getDate() - days)

return user.spendingHistory
    .filter((record) => record.date >= cutoffDate)
    .reduce((total, record) => total + record.amount, 0)
}

export function getDailySpending(user: User): number {
  return getSpendingForPeriod(user, 1)
}

export function getWeeklySpending(user: User): number {
  return getSpendingForPeriod(user, 7)
}

export function canSpend(user: User, amount: number): { canSpend: boolean; reason?: string } {
  if (!user.spendingLimits?.enabled) {
    return { canSpend: true }
  }

const dailySpent = getDailySpending(user)
  const weeklySpent = getWeeklySpending(user)

if (dailySpent + amount > user.spendingLimits.dailyLimit) {
    return {
      canSpend: false,
      reason: `Daily spending limit exceeded. You have spent ${dailySpent} gold today (limit: ${user.spendingLimits.dailyLimit})`,
    }
  }

if (weeklySpent + amount > user.spendingLimits.weeklyLimit) {
    return {
      canSpend: false,
      reason: `Weekly spending limit exceeded. You have spent ${weeklySpent} gold this week (limit: ${user.spendingLimits.weeklyLimit})`,
    }
  }

return { canSpend: true }
}

export function addSpendingRecord(user: User, amount: number, type: SpendingRecord["type"], description: string): User {
  const newRecord: SpendingRecord = {
    id: Date.now(),
    amount,
    type,
    description,
    date: new Date(),
  }

return {
    ...user,
    spendingHistory: [...(user.spendingHistory || []), newRecord],
  }
}
[V0_FILE]typescriptreact:file="components/confirmation-modal.tsx" isEdit="true" isMerged="true"
"use client"

import { X, AlertTriangle, Coins } from "lucide-react"
import type { User } from "@/lib/types"
import { canSpend, getDailySpending, getWeeklySpending } from "@/lib/spending-utils"

interface ConfirmationModalProps {
  isOpen: boolean
  onClose: () => void
  onConfirm: () => void
  title: string
  message: string
  goldAmount: number
  confirmText: string
  currentUser?: User | null
}

export function ConfirmationModal({
  isOpen,
  onClose,
  onConfirm,
  title,
  message,
  goldAmount,
  confirmText,
  currentUser,
}: ConfirmationModalProps) {
  if (!isOpen) return null

const spendingCheck = currentUser ? canSpend(currentUser, goldAmount) : { canSpend: true }
  const dailySpent = currentUser ? getDailySpending(currentUser) : 0
  const weeklySpent = currentUser ? getWeeklySpending(currentUser) : 0

const handleConfirm = () => {
    if (spendingCheck.canSpend) {
      onConfirm()
    }
  }

return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-60 p-4">
      <div className="bg-white rounded-lg w-full max-w-md p-6 border-2 border-orange-200">
        <div className="flex justify-between items-center mb-4">
          <div className="flex items-center gap-2">
            <AlertTriangle size={24} className="text-orange-500" />
            <h3 className="text-lg font-bold text-gray-900">{title}</h3>
          </div>
          <button onClick={onClose} className="text-gray-400 hover:text-gray-600">
            <X size={20} />
          </button>
        </div>

<div className="mb-6">
          <p className="text-gray-700 mb-4">{message}</p>

<div className="bg-orange-50 border border-orange-200 rounded-lg p-4 mb-4">
            <div className="flex items-center gap-2 mb-2">
              <Coins size={20} className="text-orange-600" />
              <span className="font-bold text-orange-800">Gold Cost: {goldAmount.toLocaleString()}</span>
            </div>
            <p className="text-sm text-orange-700">This action cannot be undone.</p>
          </div>

{/* Spending Limits Info */}
          {currentUser?.spendingLimits?.enabled && (
            <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-4">
              <h4 className="font-semibold text-blue-800 mb-2">Spending Summary</h4>
              <div className="text-sm text-blue-700 space-y-1">
                <div className="flex justify-between">
                  <span>Daily spent:</span>
                  <span>
                    {dailySpent.toLocaleString()} / {currentUser.spendingLimits.dailyLimit.toLocaleString()}
                  </span>
                </div>
                <div className="flex justify-between">
                  <span>Weekly spent:</span>
                  <span>
                    {weeklySpent.toLocaleString()} / {currentUser.spendingLimits.weeklyLimit.toLocaleString()}
                  </span>
                </div>
                <div className="flex justify-between font-semibold">
                  <span>After this purchase:</span>
                  <span>{(dailySpent + goldAmount).toLocaleString()} daily</span>
                </div>
              </div>
            </div>
          )}

{/* Spending Limit Warning */}
          {!spendingCheck.canSpend && (
            <div className="bg-red-50 border border-red-200 rounded-lg p-4 mb-4">
              <div className="flex items-center gap-2 mb-2">
                <AlertTriangle size={16} className="text-red-600" />
                <span className="font-semibold text-red-800">Spending Limit Exceeded</span>
              </div>
              <p className="text-sm text-red-700">{spendingCheck.reason}</p>
            </div>
          )}
        </div>

<div className="flex gap-3">
          <button
            onClick={onClose}
            className="flex-1 px-4 py-2 border border-gray-300 rounded text-gray-700 hover:bg-gray-50 transition-colors"
          >
            Cancel
          </button>
          <button
            onClick={handleConfirm}
            disabled={!spendingCheck.canSpend}
            className={`flex-1 px-4 py-2 rounded font-medium transition-colors ${
              spendingCheck.canSpend
                ? "bg-orange-500 text-white hover:bg-orange-600"
                : "bg-gray-300 text-gray-500 cursor-not-allowed"
            }`}
          >
            {confirmText}
          </button>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/guild-hall.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"
import { useState } from "react"
import type { Guild, User } from "@/lib/types"
import { GuildOverviewModal } from "./guild-overview-modal"
import { GuildChatModal } from "./guild-chat-modal"

interface GuildHallProps {
  guilds: Guild[]
  currentUser: User | null
  openCreateGuildModal: () => void
  handleApplyForGuild: (guildId: number, message: string) => void
  showToast: (message: string, type?: string) => void
}

export function GuildHall({
  guilds,
  currentUser,
  openCreateGuildModal,
  handleApplyForGuild,
  showToast,
}: GuildHallProps) {
  const [showJoinModal, setShowJoinModal] = useState(false)
  const [selectedGuildId, setSelectedGuildId] = useState<number | null>(null)
  const [joinMessage, setJoinMessage] = useState("")
  const [showOverviewModal, setShowOverviewModal] = useState(false)
  const [showChatModal, setShowChatModal] = useState(false)
  const [selectedGuild, setSelectedGuild] = useState<Guild | null>(null)

const handleJoinClick = (guildId: number) => {
    if (!currentUser) {
      if (window.openAuthModal) window.openAuthModal()
      return
    }

const guild = guilds.find((g) => g.id === guildId)
    if (!guild) return

if (guild.membersList && guild.membersList.includes(currentUser.id)) {
      showToast("You are already a member of this guild", "error")
      return
    }

// Open the join modal
    setSelectedGuildId(guildId)
    setShowJoinModal(true)
  }

const handleGuildCardClick = (guild: Guild) => {
    setSelectedGuild(guild)
    setShowOverviewModal(true)
  }

const handleOpenChat = (guildId: number) => {
    const guild = guilds.find((g) => g.id === guildId)
    if (guild) {
      setSelectedGuild(guild)
      setShowChatModal(true)
      setShowOverviewModal(false)
    }
  }

const submitJoinRequest = () => {
    if (selectedGuildId && joinMessage.trim()) {
      handleApplyForGuild(selectedGuildId, joinMessage)
      setShowJoinModal(false)
      setJoinMessage("")
      setSelectedGuildId(null)
    }
  }

const getSpecializationBadgeColor = (specialization: string) => {
    switch (specialization.toLowerCase()) {
      case "alchemy":
        return "bg-purple-500"
      case "development":
        return "bg-blue-500"
      case "writing":
        return "bg-green-500"
      default:
        return "bg-gray-500"
    }
  }

return (
    <section className="bg-[#F4F0E6] min-h-screen py-8">
      <div className="max-w-6xl mx-auto px-6">
        <div className="flex justify-between items-center mb-6">
          <h2 className="text-4xl font-bold text-[#2C1A1D] font-serif">Guild Hall</h2>
          {currentUser && (
            <button
              onClick={openCreateGuildModal}
              className="bg-[#8B75AA] text-white px-4 py-2 rounded hover:bg-[#7A6699] transition-colors"
            >
              Create a Guild
            </button>
          )}
        </div>
        <p className="text-center text-[#8B75AA] mb-8">
          JOIN OR CREATE A GUILD TO COLLABORATE WITH OTHER ADVENTURERS ON LARGER QUESTS.
        </p>

{/* Guild Grid */}
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
          {guilds.map((guild) => (
            <div
              key={guild.id}
              className="bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden border border-[#CDAA7D]/20 hover:border-[#8B75AA]/30 cursor-pointer group"
              onClick={() => handleGuildCardClick(guild)}
            >
              {/* Guild Header with Gradient */}
              <div className="bg-gradient-to-r from-[#CDAA7D] to-[#B8956D] p-6 relative overflow-hidden">
                <div className="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full -translate-y-16 translate-x-16"></div>
                <div className="relative z-10">
                  <div className="flex items-center gap-4 mb-3">
                    <div className="w-16 h-16 bg-white/20 backdrop-blur-sm rounded-xl flex items-center justify-center text-3xl shadow-lg">
                      {guild.emblem}
                    </div>
                    <div className="flex-1">
                      <h3 className="font-bold text-white text-xl leading-tight font-serif mb-1">{guild.name}</h3>
                      <span
                        className={`px-3 py-1 rounded-full text-xs font-bold text-white shadow-lg ${getSpecializationBadgeColor(guild.specialization)}`}
                      >
                        {guild.specialization.toUpperCase()}
                      </span>
                    </div>
                  </div>
                </div>
              </div>

{/* Guild Content */}
              <div className="p-6">
                <p className="text-[#2C1A1D] text-sm leading-relaxed mb-6 line-clamp-3">{guild.description}</p>

{/* Guild Stats */}
                <div className="bg-gradient-to-r from-[#F4F0E6] to-[#F8F4EA] rounded-lg p-4 mb-6">
                  <div className="grid grid-cols-2 gap-4">
                    <div className="text-center">
                      <div className="flex items-center justify-center gap-2 mb-1">
                        <span className="text-[#8B75AA] text-lg">👥</span>
                        <span className="text-[#2C1A1D] font-bold text-lg">{guild.members}</span>
                      </div>
                      <span className="text-[#8B75AA] text-xs uppercase tracking-wide">Members</span>
                    </div>
                    <div className="text-center">
                      <div className="flex items-center justify-center gap-2 mb-1">
                        <span className="text-yellow-500 text-lg">💰</span>
                        <span className="text-[#2C1A1D] font-bold text-lg">{guild.funds || 0}</span>
                      </div>
                      <span className="text-[#8B75AA] text-xs uppercase tracking-wide">Guild Gold</span>
                    </div>
                  </div>
                </div>

{/* Specialization */}
                <div className="flex items-center gap-2 text-sm text-[#8B75AA] mb-6 bg-[#8B75AA]/5 rounded-lg p-3">
                  <span className="text-lg">⚡</span>
                  <div>
                    <span className="font-medium">Specialization: </span>
                    <span className="font-bold uppercase">{guild.specialization}</span>
                  </div>
                </div>

{/* Guild Master */}
                <div className="flex items-center gap-3 mb-6 p-3 bg-[#CDAA7D]/5 rounded-lg">
                  <div className="w-10 h-10 bg-gradient-to-br from-[#8B75AA] to-[#7A6699] rounded-full flex items-center justify-center text-white text-sm font-bold shadow-md">
                    {guild.poster.avatar}
                  </div>
                  <div>
                    <div className="font-semibold text-[#2C1A1D]">{guild.poster.username}</div>
                    <div className="text-xs text-[#8B75AA] uppercase tracking-wide">Guild Master</div>
                  </div>
                </div>
              </div>

{/* Guild Footer */}
              <div className="border-t border-[#CDAA7D]/20 p-6 bg-gradient-to-r from-[#F4F0E6] to-white">
                <div className="flex justify-between items-center">
                  <div className="flex items-center gap-2 text-sm text-[#8B75AA]">
                    <span className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></span>
                    <span className="font-medium">Active Guild</span>
                  </div>

<button
                    onClick={(e) => {
                      e.stopPropagation()
                      handleJoinClick(guild.id)
                    }}
                    disabled={currentUser && guild.membersList && guild.membersList.includes(currentUser.id)}
                    className={`px-6 py-2 rounded-lg font-medium transition-all duration-200 shadow-md ${
                      currentUser && guild.membersList && guild.membersList.includes(currentUser.id)
                        ? "bg-gray-200 text-gray-500 cursor-not-allowed"
                        : "bg-[#8B75AA] text-white hover:bg-[#7A6699] hover:shadow-lg transform hover:-translate-y-0.5"
                    }`}
                  >
                    {currentUser && guild.membersList && guild.membersList.includes(currentUser.id)
                      ? "✓ JOINED"
                      : "JOIN GUILD"}
                  </button>
                </div>
              </div>
            </div>
          ))}
        </div>

{/* Join Guild Modal */}
        {showJoinModal && (
          <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
            <div className="bg-[#F4F0E6] rounded-lg w-full max-w-md p-6">
              <h3 className="text-xl font-bold text-[#2C1A1D] mb-4">Join Guild</h3>
              <p className="text-[#2C1A1D] mb-4">
                Why do you want to join this guild? Please provide a brief message to the guild admins.
              </p>
              <textarea
                className="w-full px-3 py-2 border border-[#CDAA7D] rounded bg-white text-[#2C1A1D] placeholder-[#8B75AA] focus:outline-none focus:border-[#8B75AA] h-24 resize-none mb-4"
                placeholder="I want to join because..."
                value={joinMessage}
                onChange={(e) => setJoinMessage(e.target.value)}
              />
              <div className="flex justify-end gap-3">
                <button
                  onClick={() => setShowJoinModal(false)}
                  className="px-4 py-2 border border-[#CDAA7D] rounded text-[#2C1A1D] hover:bg-[#CDAA7D] hover:text-white transition-colors"
                >
                  Cancel
                </button>
                <button
                  onClick={submitJoinRequest}
                  className="px-4 py-2 bg-[#8B75AA] text-white rounded hover:bg-[#7A6699] transition-colors"
                >
                  Submit Request
                </button>
              </div>
            </div>
          </div>
        )}

{/* Guild Overview Modal */}
        {selectedGuild && (
          <GuildOverviewModal
            isOpen={showOverviewModal}
            onClose={() => setShowOverviewModal(false)}
            guild={selectedGuild}
            currentUser={currentUser}
            onJoinGuild={handleApplyForGuild}
            onOpenChat={handleOpenChat}
            showToast={showToast}
          />
        )}

{/* Guild Chat Modal */}
        {selectedGuild && (
          <GuildChatModal
            isOpen={showChatModal}
            onClose={() => setShowChatModal(false)}
            guild={selectedGuild}
            currentUser={currentUser}
            showToast={showToast}
          />
        )}

{/* Features Section */}
        <section>
          <h2 className="text-4xl font-bold text-center mb-4 text-[#2C1A1D] font-serif">Why Join Our Tavern?</h2>
          <p className="text-center text-[#8B75AA] mb-12">
            PEERQUEST TAVERN OFFERS UNIQUE FEATURES TO ENHANCE YOUR COLLABORATIVE JOURNEY.
          </p>

<div className="grid md:grid-cols-3 gap-8">
            {/* Skill Showcase */}
            <div className="bg-white border border-[#CDAA7D] rounded-lg p-8 text-center">
              <div className="w-16 h-16 bg-[#CDAA7D] rounded-full flex items-center justify-center mx-auto mb-6">
                <span className="text-2xl">🔧</span>
              </div>
              <h3 className="text-xl font-bold mb-4 text-[#2C1A1D]">Skill Showcase</h3>
              <p className="text-[#8B75AA] leading-relaxed">
                DISPLAY YOUR TALENTS THROUGH COMPLETED QUESTS AND BUILD A PORTFOLIO THAT SHOWCASES YOUR ABILITIES TO
                POTENTIAL COLLABORATORS.
              </p>
            </div>

{/* Guild System */}
            <div className="bg-white border border-[#CDAA7D] rounded-lg p-8 text-center">
              <div className="w-16 h-16 bg-[#CDAA7D] rounded-full flex items-center justify-center mx-auto mb-6">
                <span className="text-2xl">👥</span>
              </div>
              <h3 className="text-xl font-bold mb-4 text-[#2C1A1D]">Guild System</h3>
              <p className="text-[#8B75AA] leading-relaxed">
                JOIN SPECIALIZED GUILDS TO CONNECT WITH LIKE-MINDED INDIVIDUALS, SHARE RESOURCES, AND COLLABORATE ON
                LARGER PROJECTS.
              </p>
            </div>

{/* Reputation System */}
            <div className="bg-white border border-[#CDAA7D] rounded-lg p-8 text-center">
              <div className="w-16 h-16 bg-[#CDAA7D] rounded-full flex items-center justify-center mx-auto mb-6">
                <span className="text-2xl">🏆</span>
              </div>
              <h3 className="text-xl font-bold mb-4 text-[#2C1A1D]">Reputation System</h3>
              <p className="text-[#8B75AA] leading-relaxed">
                EARN BADGES AND INCREASE YOUR REPUTATION BY SUCCESSFULLY COMPLETING QUESTS AND RECEIVING POSITIVE
                FEEDBACK FROM OTHER ADVENTURERS.
              </p>
            </div>
          </div>
        </section>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/quest-board.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Search, Star, DollarSign, User, Clock } from "lucide-react"
import type { Quest } from "@/lib/types"
import { formatTimeRemaining } from "@/lib/utils"

interface QuestBoardProps {
  quests: Quest[]
  currentUser: any
  openQuestDetails: (quest: Quest) => void
  openPostQuestModal: () => void
  openApplications: (quest: Quest) => void
  openEditQuestModal?: (quest: Quest) => void
}

export function QuestBoard({
  quests,
  currentUser,
  openQuestDetails,
  openPostQuestModal,
  openApplications,
  openEditQuestModal,
}: QuestBoardProps) {
  const [questFilters, setQuestFilters] = useState({
    search: "",
    category: "ALL CATEGORIES",
    difficulty: "ALL DIFFICULTIES",
    status: "ALL STATUSES",
  })

const filteredQuests = quests.filter((quest) => {
    const matchesSearch =
      quest.title.toLowerCase().includes(questFilters.search.toLowerCase()) ||
      quest.description.toLowerCase().includes(questFilters.search.toLowerCase())
    const matchesCategory =
      questFilters.category === "ALL CATEGORIES" || quest.category.toUpperCase() === questFilters.category
    const matchesDifficulty =
      questFilters.difficulty === "ALL DIFFICULTIES" || quest.difficulty.toUpperCase() === questFilters.difficulty
    const matchesStatus = questFilters.status === "ALL STATUSES" || quest.status.toUpperCase() === questFilters.status

return matchesSearch && matchesCategory && matchesDifficulty && matchesStatus
  })

const getDifficultyColor = (difficulty: string) => {
    switch (difficulty.toLowerCase()) {
      case "easy":
        return "bg-emerald-500 text-white"
      case "medium":
        return "bg-amber-500 text-white"
      case "hard":
        return "bg-red-500 text-white"
      default:
        return "bg-gray-500 text-white"
    }
  }

const getCategoryIcon = (category: string) => {
    switch (category.toLowerCase()) {
      case "design":
        return "🎨"
      case "development":
        return "💻"
      case "writing":
        return "✍️"
      case "music":
        return "🎵"
      case "art":
        return "🖼️"
      case "marketing":
        return "📢"
      case "research":
        return "🔍"
      default:
        return "💼"
    }
  }

const getStatusColor = (status: string) => {
    switch (status.toLowerCase()) {
      case "open":
        return "bg-green-100 text-green-800 border-green-200"
      case "in-progress":
        return "bg-blue-100 text-blue-800 border-blue-200"
      case "completed":
        return "bg-gray-100 text-gray-800 border-gray-200"
      default:
        return "bg-gray-100 text-gray-800 border-gray-200"
    }
  }

return (
    <section className="bg-[#F4F0E6] min-h-screen py-8">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Header */}
        <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-8">
          <div>
            <h2 className="text-3xl sm:text-4xl font-bold text-[#2C1A1D] font-serif">Quest Board</h2>
            <p className="text-[#8B75AA] mt-2">Discover opportunities to showcase your skills and collaborate</p>
          </div>
          {currentUser && (
            <button
              onClick={openPostQuestModal}
              className="bg-[#8B75AA] text-white px-6 py-3 rounded-lg hover:bg-[#7A6699] transition-colors font-medium shadow-md"
            >
              Post a Quest
            </button>
          )}
        </div>

{/* Filters */}
        <div className="mb-8 bg-white rounded-xl shadow-sm border border-[#CDAA7D]/20 p-6">
          {/* Search Bar */}
          <div className="relative mb-6">
            <input
              type="text"
              placeholder="Search quests by title or description..."
              className="w-full px-4 py-3 pl-12 border border-[#CDAA7D]/30 rounded-lg bg-white text-[#2C1A1D] focus:outline-none focus:border-[#8B75AA] focus:ring-2 focus:ring-[#8B75AA]/20 transition-all"
              value={questFilters.search}
              onChange={(e) => setQuestFilters((prev) => ({ ...prev, search: e.target.value }))}
            />
            <Search size={20} className="absolute left-4 top-1/2 transform -translate-y-1/2 text-[#CDAA7D]" />
          </div>

{/* Filter Dropdowns */}
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
            <select
              className="px-4 py-3 border border-[#CDAA7D]/30 rounded-lg bg-white text-[#2C1A1D] focus:outline-none focus:border-[#8B75AA] focus:ring-2 focus:ring-[#8B75AA]/20 transition-all"
              value={questFilters.category}
              onChange={(e) => setQuestFilters((prev) => ({ ...prev, category: e.target.value }))}
            >
              <option>ALL CATEGORIES</option>
              <option>DESIGN</option>
              <option>DEVELOPMENT</option>
              <option>WRITING</option>
              <option>MUSIC</option>
              <option>ART</option>
              <option>MARKETING</option>
              <option>RESEARCH</option>
            </select>

<select
              className="px-4 py-3 border border-[#CDAA7D]/30 rounded-lg bg-white text-[#2C1A1D] focus:outline-none focus:border-[#8B75AA] focus:ring-2 focus:ring-[#8B75AA]/20 transition-all"
              value={questFilters.difficulty}
              onChange={(e) => setQuestFilters((prev) => ({ ...prev, difficulty: e.target.value }))}
            >
              <option>ALL DIFFICULTIES</option>
              <option>EASY</option>
              <option>MEDIUM</option>
              <option>HARD</option>
            </select>

<select
              className="px-4 py-3 border border-[#CDAA7D]/30 rounded-lg bg-white text-[#2C1A1D] focus:outline-none focus:border-[#8B75AA] focus:ring-2 focus:ring-[#8B75AA]/20 transition-all"
              value={questFilters.status}
              onChange={(e) => setQuestFilters((prev) => ({ ...prev, status: e.target.value }))}
            >
              <option>ALL STATUSES</option>
              <option>OPEN</option>
              <option>IN-PROGRESS</option>
              <option>COMPLETED</option>
            </select>
          </div>
        </div>

{/* Quest Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 mb-16">
          {filteredQuests.map((quest) => (
            <div
              key={quest.id}
              className="bg-white rounded-xl shadow-md hover:shadow-xl transition-all duration-300 overflow-hidden border border-[#CDAA7D]/20 hover:border-[#8B75AA]/40 group"
            >
              {/* Quest Header */}
              <div className="bg-gradient-to-br from-[#CDAA7D] to-[#B8956D] p-6 relative overflow-hidden">
                <div className="absolute top-0 right-0 w-24 h-24 bg-white/10 rounded-full -translate-y-12 translate-x-12"></div>
                <div className="absolute bottom-0 left-0 w-16 h-16 bg-white/5 rounded-full translate-y-8 -translate-x-8"></div>

<div className="relative z-10">
                  <div className="flex justify-between items-start mb-3">
                    <h3 className="font-bold text-white text-lg leading-tight flex-1 mr-3 font-serif group-hover:text-[#F4F0E6] transition-colors">
                      {quest.title}
                    </h3>
                    <span
                      className={`px-3 py-1 rounded-full text-xs font-bold shadow-sm ${getDifficultyColor(quest.difficulty)}`}
                    >
                      {quest.difficulty.toUpperCase()}
                    </span>
                  </div>

<div className="flex items-center justify-between">
                    <div className="flex items-center gap-2">
                      <span className="text-xl">{getCategoryIcon(quest.category)}</span>
                      <span className="text-white/90 text-sm font-medium uppercase tracking-wide">
                        {quest.category}
                      </span>
                    </div>
                    <span
                      className={`px-2 py-1 rounded-full text-xs font-medium border ${getStatusColor(quest.status)}`}
                    >
                      {quest.status.toUpperCase()}
                    </span>
                  </div>
                </div>
              </div>

{/* Quest Content */}
              <div className="p-6">
                {/* Description */}
                <p className="text-[#2C1A1D] text-sm leading-relaxed mb-6 line-clamp-3 min-h-[4.5rem]">
                  {quest.description}
                </p>

{/* Rewards Section */}
                <div className="bg-gradient-to-r from-[#F4F0E6] to-[#F8F4EA] rounded-lg p-4 mb-6">
                  <div className="grid grid-cols-2 gap-4">
                    <div className="flex items-center gap-3">
                      <div className="w-10 h-10 bg-[#CDAA7D] rounded-full flex items-center justify-center">
                        <DollarSign size={18} className="text-white" />
                      </div>
                      <div>
                        <div className="font-bold text-[#2C1A1D] text-lg">{quest.reward}</div>
                        <div className="text-[#8B75AA] text-xs uppercase tracking-wide">Gold</div>
                      </div>
                    </div>
                    <div className="flex items-center gap-3">
                      <div className="w-10 h-10 bg-[#8B75AA] rounded-full flex items-center justify-center">
                        <Star size={18} className="text-white" />
                      </div>
                      <div>
                        <div className="font-bold text-[#8B75AA] text-lg">{quest.xp}</div>
                        <div className="text-[#8B75AA] text-xs uppercase tracking-wide">XP</div>
                      </div>
                    </div>
                  </div>
                </div>

{/* Meta Information */}
                <div className="space-y-3 mb-6">
                  {/* Deadline */}
                  <div className="flex items-center gap-3 text-sm">
                    <div className="w-8 h-8 bg-[#8B75AA]/10 rounded-full flex items-center justify-center">
                      <Clock size={14} className="text-[#8B75AA]" />
                    </div>
                    <div>
                      <span className="text-[#2C1A1D] font-medium">Deadline: </span>
                      <span className="text-[#8B75AA] font-semibold">{formatTimeRemaining(quest.deadline)}</span>
                    </div>
                  </div>

{/* Quest Poster */}
                  <div className="flex items-center gap-3 text-sm">
                    <div className="w-8 h-8 bg-gradient-to-br from-[#8B75AA] to-[#7A6699] rounded-full flex items-center justify-center text-white text-xs font-bold">
                      {quest.poster.avatar}
                    </div>
                    <div>
                      <span className="text-[#2C1A1D] font-medium">Posted by </span>
                      <span className="text-[#8B75AA] font-semibold">{quest.poster.name}</span>
                    </div>
                  </div>

{/* Applications Count */}
                  {quest.applicants && quest.applicants.length > 0 && (
                    <div className="flex items-center gap-3 text-sm">
                      <div className="w-8 h-8 bg-[#CDAA7D]/10 rounded-full flex items-center justify-center">
                        <User size={14} className="text-[#CDAA7D]" />
                      </div>
                      <div>
                        <span className="text-[#2C1A1D] font-medium">
                          {quest.applicants.length} {quest.applicants.length === 1 ? "Application" : "Applications"}
                        </span>
                      </div>
                    </div>
                  )}
                </div>
              </div>

{/* Quest Footer */}
              <div className="border-t border-[#CDAA7D]/20 p-6 bg-gradient-to-r from-[#F4F0E6]/50 to-white/50">
                <div className="flex flex-col sm:flex-row gap-3">
                  <button
                    onClick={() => openQuestDetails(quest)}
                    className="flex-1 flex items-center justify-center gap-2 px-4 py-2.5 bg-white border-2 border-[#CDAA7D] rounded-lg hover:bg-[#CDAA7D] hover:text-white transition-all duration-200 text-[#2C1A1D] font-medium group"
                  >
                    <span className="group-hover:scale-110 transition-transform">👁️</span>
                    View Details
                  </button>

{currentUser && quest.poster.id === currentUser.id ? (
                    <div className="flex gap-2">
                      {quest.status === "open" && (
                        <button
                          onClick={() => openApplications(quest)}
                          className="flex items-center justify-center gap-2 px-4 py-2.5 bg-[#8B75AA] text-white rounded-lg hover:bg-[#7A6699] transition-all duration-200 font-medium shadow-md group"
                        >
                          <span className="group-hover:scale-110 transition-transform">📋</span>
                          <span className="hidden sm:inline">Apps</span>
                        </button>
                      )}
                      {openEditQuestModal && (
                        <button
                          onClick={() => openEditQuestModal(quest)}
                          className="flex items-center justify-center gap-2 px-4 py-2.5 bg-[#CDAA7D] text-white rounded-lg hover:bg-[#B8956D] transition-all duration-200 font-medium shadow-md group"
                        >
                          <span className="group-hover:scale-110 transition-transform">✏️</span>
                          <span className="hidden sm:inline">Edit</span>
                        </button>
                      )}
                    </div>
                  ) : null}
                </div>
              </div>
            </div>
          ))}
        </div>

{/* Empty State */}
        {filteredQuests.length === 0 && (
          <div className="text-center py-16">
            <div className="w-24 h-24 bg-[#CDAA7D]/10 rounded-full flex items-center justify-center mx-auto mb-6">
              <Search size={32} className="text-[#CDAA7D]" />
            </div>
            <h3 className="text-xl font-bold text-[#2C1A1D] mb-2">No quests found</h3>
            <p className="text-[#8B75AA] mb-6">Try adjusting your search criteria or filters</p>
            {currentUser && (
              <button
                onClick={openPostQuestModal}
                className="bg-[#8B75AA] text-white px-6 py-3 rounded-lg hover:bg-[#7A6699] transition-colors font-medium"
              >
                Post the First Quest
              </button>
            )}
          </div>
        )}

{/* Features Section */}
        <section className="mt-16">
          <div className="text-center mb-12">
            <h2 className="text-3xl sm:text-4xl font-bold text-[#2C1A1D] font-serif mb-4">Why Join Our Tavern?</h2>
            <p className="text-[#8B75AA] text-lg max-w-2xl mx-auto">
              PeerQuest Tavern offers unique features to enhance your collaborative journey and showcase your skills.
            </p>
          </div>

<div className="grid md:grid-cols-3 gap-8">
            {[
              {
                icon: "🔧",
                title: "Skill Showcase",
                description:
                  "Display your talents through completed quests and build a portfolio that showcases your abilities to potential collaborators.",
              },
              {
                icon: "👥",
                title: "Guild System",
                description:
                  "Join specialized guilds to connect with like-minded individuals, share resources, and collaborate on larger projects.",
              },
              {
                icon: "🏆",
                title: "Reputation System",
                description:
                  "Earn badges and increase your reputation by successfully completing quests and receiving positive feedback from other adventurers.",
              },
            ].map((feature, index) => (
              <div
                key={index}
                className="bg-white border border-[#CDAA7D]/20 rounded-xl p-8 text-center hover:shadow-lg transition-shadow"
              >
                <div className="w-16 h-16 bg-gradient-to-br from-[#CDAA7D] to-[#B8956D] rounded-full flex items-center justify-center mx-auto mb-6">
                  <span className="text-2xl">{feature.icon}</span>
                </div>
                <h3 className="text-xl font-bold mb-4 text-[#2C1A1D]">{feature.title}</h3>
                <p className="text-[#8B75AA] leading-relaxed">{feature.description}</p>
              </div>
            ))}
          </div>
        </section>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/quest-details-modal.tsx" isEdit="true" isMerged="true"
"use client"

import { X, CircleDollarSign, Star, Clock, Palette, Code, PenTool } from "lucide-react"
import type { Quest, User } from "@/lib/types"
import { formatTimeRemaining, getDifficultyClass } from "@/lib/utils"

interface QuestDetailsModalProps {
  isOpen: boolean
  onClose: () => void
  quest: Quest | null
  currentUser: User | null
  isAuthenticated: boolean
  setQuests: (quests: Quest[] | ((prev: Quest[]) => Quest[])) => void
  showToast: (message: string, type?: string) => void
  setAuthModalOpen: (open: boolean) => void
  openEditQuestModal?: (quest: Quest) => void
}

export function QuestDetailsModal({
  isOpen,
  onClose,
  quest,
  currentUser,
  isAuthenticated,
  setQuests,
  showToast,
  setAuthModalOpen,
  openEditQuestModal,
}: QuestDetailsModalProps) {
  if (!isOpen || !quest) return null

const getCategoryIcon = (category: string) => {
    switch (category) {
      case "design":
        return <Palette size={16} />
      case "development":
        return <Code size={16} />
      case "writing":
        return <PenTool size={16} />
      default:
        return <Palette size={16} />
    }
  }

const applyForQuest = (questId: number) => {
    if (!isAuthenticated) {
      showToast("Please log in to apply for quests", "error")
      setAuthModalOpen(true)
      return
    }

if (!currentUser) return

if (quest.applicants.some((app) => app.userId === currentUser.id)) {
      showToast("You have already applied for this quest", "error")
      return
    }

const application = {
      id: Date.now(),
      userId: currentUser.id,
      username: currentUser.username,
      avatar: currentUser.avatar,
      appliedAt: new Date(),
      status: "pending" as const,
      message: "I'm interested in this quest and believe I have the skills to complete it successfully.",
    }

setQuests((prev) => prev.map((q) => (q.id === questId ? { ...q, applicants: [...q.applicants, application] } : q)))

showToast("Application submitted successfully!")
    onClose()
  }

const handleManageQuest = () => {
    if (openEditQuestModal) {
      openEditQuestModal(quest)
      onClose()
    } else {
      showToast("Quest editing coming soon!", "info")
    }
  }

const isQuestOwner = currentUser && quest.poster.id === currentUser.id

return (
    <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4">
      <div
        className="bg-white rounded-xl w-full max-w-3xl max-h-[90vh] overflow-hidden shadow-2xl"
        onClick={(e) => e.stopPropagation()}
      >
        {/* Header */}
        <div className="bg-gradient-to-r from-[#8B75AA] to-[#CDAA7D] text-white p-6">
          <div className="flex justify-between items-start">
            <div className="flex-1">
              <h2 className="text-2xl font-bold font-serif mb-2">Quest Details</h2>
              <p className="text-white/80">Complete quest information and requirements</p>
            </div>
            <button onClick={onClose} className="p-2 hover:bg-white/20 rounded-lg transition-colors">
              <X size={24} />
            </button>
          </div>
        </div>

{/* Content */}
        <div className="p-6 overflow-y-auto max-h-[calc(90vh-200px)]">
          <div className="space-y-6">
            {/* Title and Difficulty */}
            <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
              <h3 className="text-2xl sm:text-3xl font-bold text-[#2C1A1D] font-serif flex-1">{quest.title}</h3>
              <span
                className={`inline-flex px-3 py-1 rounded-full text-sm font-bold self-start ${getDifficultyClass(quest.difficulty)}`}
              >
                {quest.difficulty.charAt(0).toUpperCase() + quest.difficulty.slice(1)}
              </span>
            </div>

{/* Quest Meta Information */}
            <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 p-4 bg-[#F4F0E6] rounded-lg">
              <div className="flex items-center gap-2 text-sm">
                {getCategoryIcon(quest.category)}
                <span className="font-medium text-[#2C1A1D]">
                  {quest.category.charAt(0).toUpperCase() + quest.category.slice(1)}
                </span>
              </div>
              <div className="flex items-center gap-2 text-sm">
                <CircleDollarSign size={16} className="text-[#CDAA7D]" />
                <span className="font-bold text-[#2C1A1D]">{quest.reward} Gold</span>
              </div>
              <div className="flex items-center gap-2 text-sm">
                <Star size={16} className="text-[#8B75AA]" />
                <span className="font-bold text-[#8B75AA]">{quest.xp} XP</span>
              </div>
              <div className="flex items-center gap-2 text-sm">
                <Clock size={16} className="text-[#8B75AA]" />
                <span className="font-medium text-[#8B75AA]">{formatTimeRemaining(quest.deadline)}</span>
              </div>
            </div>

{/* Description */}
            <div>
              <h4 className="text-lg font-bold mb-3 text-[#2C1A1D] font-serif">Description</h4>
              <p className="text-[#2C1A1D] leading-relaxed">{quest.description}</p>
            </div>

{/* Requirements */}
            {quest.requirements && quest.requirements.length > 0 && (
              <div>
                <h4 className="text-lg font-bold mb-3 text-[#2C1A1D] font-serif">Requirements</h4>
                <ul className="space-y-2">
                  {quest.requirements.map((req, index) => (
                    <li key={index} className="flex items-start gap-3">
                      <span className="w-2 h-2 bg-[#8B75AA] rounded-full mt-2 flex-shrink-0"></span>
                      <span className="text-[#2C1A1D]">{req}</span>
                    </li>
                  ))}
                </ul>
              </div>
            )}

{/* Quest Poster */}
            <div className="bg-gradient-to-r from-[#CDAA7D]/10 to-[#8B75AA]/10 p-4 rounded-lg">
              <h4 className="text-lg font-bold mb-3 text-[#2C1A1D] font-serif">Quest Giver</h4>
              <div className="flex items-center gap-4">
                <div className="w-12 h-12 bg-gradient-to-br from-[#8B75AA] to-[#7A6699] rounded-full flex items-center justify-center text-white text-lg font-bold">
                  {quest.poster.avatar}
                </div>
                <div>
                  <div className="font-semibold text-[#2C1A1D] text-lg">{quest.poster.name}</div>
                  <div className="text-sm text-[#8B75AA]">Quest Giver</div>
                </div>
              </div>
            </div>

{/* Applications Count (for quest owner) */}
            {isQuestOwner && quest.applicants && quest.applicants.length > 0 && (
              <div className="bg-blue-50 border border-blue-200 p-4 rounded-lg">
                <h4 className="text-lg font-bold mb-2 text-blue-800">Applications</h4>
                <p className="text-blue-700">
                  {quest.applicants.length} {quest.applicants.length === 1 ? "person has" : "people have"} applied for
                  this quest.
                </p>
              </div>
            )}
          </div>
        </div>

{isQuestOwner ? (
              <div className="flex gap-3">
                <div className="px-4 py-2 bg-[#8B75AA]/10 text-[#8B75AA] rounded-lg font-medium flex items-center">
                  Your Quest
                </div>
                <button
                  onClick={handleManageQuest}
                  className="px-6 py-2 bg-[#8B75AA] text-white rounded-lg hover:bg-[#7A6699] transition-colors font-medium shadow-md"
                >
                  Edit Quest
                </button>
              </div>
            ) : (
              <button
                onClick={() => applyForQuest(quest.id)}
                className="px-6 py-2 bg-[#8B75AA] text-white rounded-lg hover:bg-[#7A6699] transition-colors font-medium shadow-md disabled:opacity-50 disabled:cursor-not-allowed"
                disabled={!isAuthenticated || quest.applicants.some((app) => app.userId === currentUser?.id)}
              >
                {!isAuthenticated
                  ? "Login to Apply"
                  : quest.applicants.some((app) => app.userId === currentUser?.id)
                    ? "Already Applied"
                    : "Apply for Quest"}
              </button>
            )}
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/edit-quest-modal.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { X, Calendar, DollarSign, Star, FileText, Tag, Clock } from "lucide-react"
import type { Quest } from "@/lib/types"

interface EditQuestModalProps {
  isOpen: boolean
  onClose: () => void
  quest: Quest | null
  onSave: (updatedQuest: Quest) => void
  showToast: (message: string, type?: string) => void
}

export function EditQuestModal({ isOpen, onClose, quest, onSave, showToast }: EditQuestModalProps) {
  const [formData, setFormData] = useState({
    title: "",
    description: "",
    category: "design",
    difficulty: "easy",
    reward: 0,
    xp: 0,
    deadline: "",
    requirements: [] as string[],
    newRequirement: "",
  })

const [isLoading, setIsLoading] = useState(false)

const difficulties = [
    { value: "easy", label: "Easy", color: "text-green-600", bg: "bg-green-100" },
    { value: "medium", label: "Medium", color: "text-yellow-600", bg: "bg-yellow-100" },
    { value: "hard", label: "Hard", color: "text-red-600", bg: "bg-red-100" },
  ]

const categories = [
    { value: "design", label: "🎨 Design" },
    { value: "development", label: "💻 Development" },
    { value: "writing", label: "✍️ Writing" },
    { value: "marketing", label: "📢 Marketing" },
    { value: "research", label: "🔍 Research" },
    { value: "music", label: "🎵 Music" },
    { value: "art", label: "🖼️ Art" },
  ]

// Initialize form data when quest changes
  useEffect(() => {
    if (quest && isOpen) {
      setFormData({
        title: quest.title || "",
        description: quest.description || "",
        category: quest.category || "design",
        difficulty: quest.difficulty || "easy",
        reward: quest.reward || 0,
        xp: quest.xp || 0,
        deadline: quest.deadline ? new Date(quest.deadline).toISOString().split("T")[0] : "",
        requirements: quest.requirements || [],
        newRequirement: "",
      })
    }
  }, [quest, isOpen])

if (!isOpen || !quest) return null

const handleSave = async () => {
    if (!formData.title.trim() || !formData.description.trim()) {
      showToast("Please fill in all required fields", "error")
      return
    }

if (formData.reward < 0 || formData.xp < 0) {
      showToast("Reward and XP values must be positive", "error")
      return
    }

if (!formData.deadline) {
      showToast("Please set a deadline for the quest", "error")
      return
    }

const deadlineDate = new Date(formData.deadline)
    if (deadlineDate <= new Date()) {
      showToast("Deadline must be in the future", "error")
      return
    }

setIsLoading(true)

try {
      const updatedQuest: Quest = {
        ...quest,
        title: formData.title.trim(),
        description: formData.description.trim(),
        category: formData.category,
        difficulty: formData.difficulty,
        reward: formData.reward,
        xp: formData.xp,
        deadline: deadlineDate,
        requirements: formData.requirements,
      }

onSave(updatedQuest)
      showToast("Quest updated successfully!", "success")
      onClose()
    } catch (error) {
      showToast("Failed to update quest. Please try again.", "error")
    } finally {
      setIsLoading(false)
    }
  }

const addRequirement = () => {
    if (formData.newRequirement.trim()) {
      setFormData({
        ...formData,
        requirements: [...formData.requirements, formData.newRequirement.trim()],
        newRequirement: "",
      })
    }
  }

const removeRequirement = (index: number) => {
    setFormData({
      ...formData,
      requirements: formData.requirements.filter((_, i) => i !== index),
    })
  }

const handleKeyPress = (e: React.KeyboardEvent) => {
    if (e.key === "Enter" && e.target === document.activeElement) {
      e.preventDefault()
      if (formData.newRequirement.trim()) {
        addRequirement()
      }
    }
  }

return (
    <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4">
      <div className="bg-white rounded-xl w-full max-w-4xl max-h-[95vh] overflow-hidden shadow-2xl">
        {/* Header */}
        <div className="bg-gradient-to-r from-[#8B75AA] to-[#CDAA7D] text-white p-6">
          <div className="flex justify-between items-center">
            <div>
              <h2 className="text-2xl font-bold font-serif">Edit Quest</h2>
              <p className="text-white/80 mt-1">Update your quest details and requirements</p>
            </div>
            <button
              onClick={onClose}
              className="p-2 hover:bg-white/20 rounded-lg transition-colors"
              disabled={isLoading}
            >
              <X size={24} />
            </button>
          </div>
        </div>

{/* Form Content */}
        <div className="p-6 overflow-y-auto max-h-[calc(95vh-200px)]">
          <div className="space-y-6">
            {/* Title */}
            <div>
              <label className="flex items-center gap-2 text-sm font-semibold text-[#2C1A1D] mb-3">
                <FileText size={16} />
                Quest Title *
              </label>
              <input
                type="text"
                value={formData.title}
                onChange={(e) => setFormData({ ...formData, title: e.target.value })}
                className="w-full px-4 py-3 border border-[#CDAA7D]/30 rounded-lg bg-white text-[#2C1A1D] focus:outline-none focus:border-[#8B75AA] focus:ring-2 focus:ring-[#8B75AA]/20 transition-all"
                placeholder="Enter a compelling quest title..."
                maxLength={100}
              />
              <div className="text-xs text-[#8B75AA] mt-1">{formData.title.length}/100 characters</div>
            </div>

{/* Description */}
            <div>
              <label className="flex items-center gap-2 text-sm font-semibold text-[#2C1A1D] mb-3">
                <FileText size={16} />
                Description *
              </label>
              <textarea
                value={formData.description}
                onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                rows={5}
                className="w-full px-4 py-3 border border-[#CDAA7D]/30 rounded-lg bg-white text-[#2C1A1D] focus:outline-none focus:border-[#8B75AA] focus:ring-2 focus:ring-[#8B75AA]/20 transition-all resize-none"
                placeholder="Describe your quest in detail. What needs to be done? What are the expectations?"
                maxLength={1000}
              />
              <div className="text-xs text-[#8B75AA] mt-1">{formData.description.length}/1000 characters</div>
            </div>

{/* Category and Difficulty */}
            <div className="grid md:grid-cols-2 gap-6">
              <div>
                <label className="flex items-center gap-2 text-sm font-semibold text-[#2C1A1D] mb-3">
                  <Tag size={16} />
                  Category
                </label>
                <select
                  value={formData.category}
                  onChange={(e) => setFormData({ ...formData, category: e.target.value })}
                  className="w-full px-4 py-3 border border-[#CDAA7D]/30 rounded-lg bg-white text-[#2C1A1D] focus:outline-none focus:border-[#8B75AA] focus:ring-2 focus:ring-[#8B75AA]/20 transition-all"
                >
                  {categories.map((cat) => (
                    <option key={cat.value} value={cat.value}>
                      {cat.label}
                    </option>
                  ))}
                </select>
              </div>

<div>
                <label className="flex items-center gap-2 text-sm font-semibold text-[#2C1A1D] mb-3">
                  <Star size={16} />
                  Difficulty
                </label>
                <select
                  value={formData.difficulty}
                  onChange={(e) => setFormData({ ...formData, difficulty: e.target.value })}
                  className="w-full px-4 py-3 border border-[#CDAA7D]/30 rounded-lg bg-white text-[#2C1A1D] focus:outline-none focus:border-[#8B75AA] focus:ring-2 focus:ring-[#8B75AA]/20 transition-all"
                >
                  {difficulties.map((diff) => (
                    <option key={diff.value} value={diff.value}>
                      {diff.value === "easy" ? "🟢" : diff.value === "medium" ? "🟡" : "🔴"} {diff.label}
                    </option>
                  ))}
                </select>
              </div>
            </div>

{/* Reward and XP */}
            <div className="grid md:grid-cols-2 gap-6">
              <div>
                <label className="flex items-center gap-2 text-sm font-semibold text-[#2C1A1D] mb-3">
                  <DollarSign size={16} />
                  Gold Reward
                </label>
                <input
                  type="number"
                  value={formData.reward}
                  onChange={(e) =>
                    setFormData({ ...formData, reward: Math.max(0, Number.parseInt(e.target.value) || 0) })
                  }
                  className="w-full px-4 py-3 border border-[#CDAA7D]/30 rounded-lg bg-white text-[#2C1A1D] focus:outline-none focus:border-[#8B75AA] focus:ring-2 focus:ring-[#8B75AA]/20 transition-all"
                  min="0"
                  max="100000"
                />
              </div>

<div>
                <label className="flex items-center gap-2 text-sm font-semibold text-[#2C1A1D] mb-3">
                  <Star size={16} />
                  XP Reward
                </label>
                <input
                  type="number"
                  value={formData.xp}
                  onChange={(e) => setFormData({ ...formData, xp: Math.max(0, Number.parseInt(e.target.value) || 0) })}
                  className="w-full px-4 py-3 border border-[#CDAA7D]/30 rounded-lg bg-white text-[#2C1A1D] focus:outline-none focus:border-[#8B75AA] focus:ring-2 focus:ring-[#8B75AA]/20 transition-all"
                  min="0"
                  max="10000"
                />
              </div>
            </div>

{/* Deadline */}
            <div>
              <label className="flex items-center gap-2 text-sm font-semibold text-[#2C1A1D] mb-3">
                <Calendar size={16} />
                Deadline *
              </label>
              <input
                type="date"
                value={formData.deadline}
                onChange={(e) => setFormData({ ...formData, deadline: e.target.value })}
                className="w-full px-4 py-3 border border-[#CDAA7D]/30 rounded-lg bg-white text-[#2C1A1D] focus:outline-none focus:border-[#8B75AA] focus:ring-2 focus:ring-[#8B75AA]/20 transition-all"
                min={new Date().toISOString().split("T")[0]}
              />
            </div>

{/* Requirements */}
            <div>
              <label className="flex items-center gap-2 text-sm font-semibold text-[#2C1A1D] mb-3">
                <Clock size={16} />
                Requirements
              </label>

{/* Existing Requirements */}
              <div className="space-y-3 mb-4">
                {formData.requirements.map((req, index) => (
                  <div key={index} className="flex items-start gap-3 p-3 bg-[#F4F0E6] rounded-lg">
                    <span className="flex-1 text-[#2C1A1D]">{req}</span>
                    <button
                      onClick={() => removeRequirement(index)}
                      className="px-3 py-1 bg-red-500 text-white text-sm rounded hover:bg-red-600 transition-colors flex-shrink-0"
                    >
                      Remove
                    </button>
                  </div>
                ))}
              </div>

{/* Add New Requirement */}
              <div className="flex gap-3">
                <input
                  type="text"
                  value={formData.newRequirement}
                  onChange={(e) => setFormData({ ...formData, newRequirement: e.target.value })}
                  onKeyPress={handleKeyPress}
                  placeholder="Add a requirement..."
                  className="flex-1 px-4 py-3 border border-[#CDAA7D]/30 rounded-lg bg-white text-[#2C1A1D] focus:outline-none focus:border-[#8B75AA] focus:ring-2 focus:ring-[#8B75AA]/20 transition-all"
                  maxLength={200}
                />
                <button
                  onClick={addRequirement}
                  disabled={!formData.newRequirement.trim()}
                  className="px-6 py-3 bg-[#8B75AA] text-white rounded-lg hover:bg-[#7A6699] transition-colors font-medium disabled:opacity-50 disabled:cursor-not-allowed"
                >
                  Add
                </button>
              </div>
            </div>
          </div>
        </div>

{/* Footer */}
        <div className="border-t border-[#CDAA7D]/20 p-6 bg-[#F4F0E6]/30">
          <div className="flex flex-col sm:flex-row justify-end gap-3">
            <button
              onClick={onClose}
              disabled={isLoading}
              className="px-6 py-3 border border-[#CDAA7D] rounded-lg text-[#2C1A1D] hover:bg-[#CDAA7D] hover:text-white transition-colors font-medium disabled:opacity-50"
            >
              Cancel
            </button>
            <button
              onClick={handleSave}
              disabled={isLoading || !formData.title.trim() || !formData.description.trim()}
              className="px-6 py-3 bg-[#8B75AA] text-white rounded-lg hover:bg-[#7A6699] transition-colors font-medium shadow-md disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
            >
              {isLoading ? (
                <>
                  <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin"></div>
                  Saving...
                </>
              ) : (
                "Save Changes"
              )}
            </button>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/admin-panel.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import type { User, Quest, Guild } from "@/lib/types"
import { Users, FileText, Flag, Home, X } from "lucide-react"
import { ReportDetailsModal } from "./report-details-modal"

interface AdminPanelProps {
  currentUser: User | null
  users: User[]
  quests: Quest[]
  guilds: Guild[]
  setUsers: (users: User[]) => void
  setQuests: (quests: Quest[]) => void
  setGuilds: (guilds: Guild[]) => void
  showToast: (message: string, type?: string) => void
}

export function AdminPanel({
  currentUser,
  users,
  quests,
  guilds,
  setUsers,
  setQuests,
  setGuilds,
  showToast,
}: AdminPanelProps) {
  const [activeTab, setActiveTab] = useState<"overview" | "users" | "quests" | "guilds" | "reports">("overview")
  const [showBanConfirm, setShowBanConfirm] = useState<number | null>(null)
  const [banReason, setBanReason] = useState("")
  const [customBanReason, setCustomBanReason] = useState("")
  const [showDeleteQuestConfirm, setShowDeleteQuestConfirm] = useState<number | null>(null)
  const [deleteQuestReason, setDeleteQuestReason] = useState("")
  const [customDeleteQuestReason, setCustomDeleteQuestReason] = useState("")
  const [showDeleteGuildConfirm, setShowDeleteGuildConfirm] = useState<number | null>(null)
  const [deleteGuildReason, setDeleteGuildReason] = useState("")
  const [customDeleteGuildReason, setCustomDeleteGuildReason] = useState("")
  const [selectedUserDetails, setSelectedUserDetails] = useState<User | null>(null)
  const [selectedQuestDetails, setSelectedQuestDetails] = useState<Quest | null>(null)
  const [selectedGuildDetails, setSelectedGuildDetails] = useState<Guild | null>(null)
  const [selectedReport, setSelectedReport] = useState<any>(null)
  const [resolvedReports, setResolvedReports] = useState<number[]>([])

// Count active and banned users
  const activeUsers = users.filter((user) => !user.banned).length
  const bannedUsers = users.filter((user) => user.banned).length

// Count open, completed quests
  const openQuests = quests.filter((quest) => quest.status === "open").length
  const completedQuests = quests.filter((quest) => quest.status === "completed").length

// Mock reports data
  const reports = [
    {
      id: 1,
      type: "user",
      reportedId: users[2]?.id || 3,
      reason: "Inappropriate behavior",
      status: "pending",
      reportedBy: users[0]?.id || 1,
      createdAt: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000),
      description: "User was posting inappropriate content in guild chat and harassing other members.",
      evidence: ["Screenshot of chat messages", "Multiple user reports"],
    },
    {
      id: 2,
      type: "quest",
      reportedId: quests[0]?.id || 1,
      reason: "Misleading information",
      status: "pending",
      reportedBy: users[1]?.id || 2,
      createdAt: new Date(Date.now() - 5 * 24 * 60 * 60 * 1000),
      description: "Quest description doesn't match the actual requirements and seems to be a scam.",
      evidence: ["Quest posting details", "User complaint"],
    },
  ]

const handleBanUser = (userId: number) => {
    const finalReason = banReason === "custom" ? customBanReason : banReason
    setUsers(users.map((user) => (user.id === userId ? { ...user, banned: true, banReason: finalReason } : user)))
    showToast(`User has been banned. Reason: ${finalReason}`, "success")
    setShowBanConfirm(null)
    setBanReason("")
    setCustomBanReason("")
  }

const handleUnbanUser = (userId: number) => {
    setUsers(users.map((user) => (user.id === userId ? { ...user, banned: false } : user)))
    showToast(`User has been unbanned.`, "success")
  }

const handleDeleteQuest = (questId: number) => {
    const finalReason = deleteQuestReason === "custom" ? customDeleteQuestReason : deleteQuestReason
    setQuests(quests.filter((quest) => quest.id !== questId))
    showToast(`Quest has been deleted. Reason: ${finalReason}`, "success")
    setShowDeleteQuestConfirm(null)
    setDeleteQuestReason("")
    setCustomDeleteQuestReason("")
  }

const handleDeleteGuild = (guildId: number) => {
    const finalReason = deleteGuildReason === "custom" ? customDeleteGuildReason : deleteGuildReason
    setGuilds(guilds.filter((guild) => guild.id !== guildId))
    showToast(`Guild has been deleted. Reason: ${finalReason}`, "success")
    setShowDeleteGuildConfirm(null)
    setDeleteGuildReason("")
    setCustomDeleteGuildReason("")
  }

const handleResolveReport = (reportId: number, action: string, notes: string) => {
    setResolvedReports((prev) => [...prev, reportId])
    showToast(`Report resolved with action: ${action}`, "success")
  }

const handleViewReport = (report: any) => {
    setSelectedReport(report)
  }

if (!currentUser || !currentUser.roles || !currentUser.roles.includes("admin")) {
    return (
      <div className="max-w-6xl mx-auto px-4 py-16 text-center">
        <h2 className="text-2xl font-bold text-[#2C1A1D] mb-4">Access Denied</h2>
        <p className="text-gray-600 mb-6">You do not have permission to access the admin panel.</p>
      </div>
    )
  }

return (
    <div className="bg-[#F4F0E6] min-h-screen py-8">
      <div className="max-w-6xl mx-auto px-4 sm:px-6">
        <div className="bg-[#8B75AA] rounded-t-lg p-6">
          <h2 className="text-2xl font-bold text-white">Admin Panel</h2>
          <p className="text-[#F4F0E6] opacity-80">Manage users, quests, guilds, and reports</p>
        </div>

{/* Tab Navigation */}
        <div className="bg-white border-b border-gray-200 overflow-x-auto">
          <div className="flex min-w-max">
            <button
              onClick={() => setActiveTab("overview")}
              className={`flex items-center px-4 sm:px-6 py-4 text-sm font-medium whitespace-nowrap ${
                activeTab === "overview"
                  ? "border-b-2 border-[#8B75AA] text-[#8B75AA]"
                  : "text-gray-500 hover:text-[#8B75AA]"
              }`}
            >
              <Home size={18} className="mr-2" />
              Overview
            </button>
            <button
              onClick={() => setActiveTab("users")}
              className={`flex items-center px-4 sm:px-6 py-4 text-sm font-medium whitespace-nowrap ${
                activeTab === "users"
                  ? "border-b-2 border-[#8B75AA] text-[#8B75AA]"
                  : "text-gray-500 hover:text-[#8B75AA]"
              }`}
            >
              <Users size={18} className="mr-2" />
              Users
            </button>
            <button
              onClick={() => setActiveTab("quests")}
              className={`flex items-center px-4 sm:px-6 py-4 text-sm font-medium whitespace-nowrap ${
                activeTab === "quests"
                  ? "border-b-2 border-[#8B75AA] text-[#8B75AA]"
                  : "text-gray-500 hover:text-[#8B75AA]"
              }`}
            >
              <FileText size={18} className="mr-2" />
              Quests
            </button>
            <button
              onClick={() => setActiveTab("guilds")}
              className={`flex items-center px-4 sm:px-6 py-4 text-sm font-medium whitespace-nowrap ${
                activeTab === "guilds"
                  ? "border-b-2 border-[#8B75AA] text-[#8B75AA]"
                  : "text-gray-500 hover:text-[#8B75AA]"
              }`}
            >
              <Users size={18} className="mr-2" />
              Guilds
            </button>
            <button
              onClick={() => setActiveTab("reports")}
              className={`flex items-center px-4 sm:px-6 py-4 text-sm font-medium whitespace-nowrap ${
                activeTab === "reports"
                  ? "border-b-2 border-[#8B75AA] text-[#8B75AA]"
                  : "text-gray-500 hover:text-[#8B75AA]"
              }`}
            >
              <Flag size={18} className="mr-2" />
              Reports
              <span className="ml-2 bg-red-500 text-white text-xs px-1.5 rounded-full">2</span>
            </button>
          </div>
        </div>

{/* Content Area */}
        <div className="bg-white rounded-b-lg p-6">
          {activeTab === "overview" && (
            <div>
              {/* Stats Cards */}
              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6 mb-6 sm:mb-8">
                {/* Total Users */}
                <div className="bg-[#F4F0E6] border border-[#CDAA7D] rounded-lg p-4">
                  <div className="flex items-center justify-between mb-2">
                    <h3 className="font-bold text-[#2C1A1D]">Total Users</h3>
                    <Users size={18} className="text-[#8B75AA]" />
                  </div>
                  <div className="text-3xl font-bold text-[#2C1A1D]">{users.length}</div>
                  <div className="text-sm text-[#8B75AA] mt-2">
                    <span className="font-medium">{activeUsers} active</span> •{" "}
                    <span className="text-red-500">{bannedUsers} banned</span>
                  </div>
                </div>

{/* Total Quests */}
                <div className="bg-[#F4F0E6] border border-[#CDAA7D] rounded-lg p-4">
                  <div className="flex items-center justify-between mb-2">
                    <h3 className="font-bold text-[#2C1A1D]">Total Quests</h3>
                    <FileText size={18} className="text-[#8B75AA]" />
                  </div>
                  <div className="text-3xl font-bold text-[#2C1A1D]">{quests.length}</div>
                  <div className="text-sm text-[#8B75AA] mt-2">
                    <span className="font-medium">{openQuests} open</span> •{" "}
                    <span className="text-green-500">{completedQuests} completed</span>
                  </div>
                </div>

{/* Total Guilds */}
                <div className="bg-[#F4F0E6] border border-[#CDAA7D] rounded-lg p-4">
                  <div className="flex items-center justify-between mb-2">
                    <h3 className="font-bold text-[#2C1A1D]">Total Guilds</h3>
                    <Users size={18} className="text-[#8B75AA]" />
                  </div>
                  <div className="text-3xl font-bold text-[#2C1A1D]">{guilds.length}</div>
                </div>

{/* Pending Reports */}
                <div className="bg-[#F4F0E6] border border-[#CDAA7D] rounded-lg p-4">
                  <div className="flex items-center justify-between mb-2">
                    <h3 className="font-bold text-[#2C1A1D]">Pending Reports</h3>
                    <Flag size={18} className="text-[#8B75AA]" />
                  </div>
                  <div className="text-3xl font-bold text-[#2C1A1D]">{reports.length}</div>
                  <div className="text-sm text-[#8B75AA] mt-2">
                    <button onClick={() => setActiveTab("reports")} className="text-[#8B75AA] hover:underline">
                      View reports
                    </button>
                  </div>
                </div>
              </div>

{/* Action Cards */}
              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6">
                <div
                  className="bg-[#F4F0E6] border border-[#CDAA7D] rounded-lg p-6 hover:shadow-lg transition-shadow cursor-pointer"
                  onClick={() => setActiveTab("users")}
                >
                  <div className="flex items-center justify-between mb-4">
                    <h3 className="font-bold text-[#2C1A1D]">Manage Users</h3>
                    <Users size={24} className="text-[#8B75AA]" />
                  </div>
                  <p className="text-[#8B75AA] text-sm">View and manage user accounts, roles, and permissions</p>
                </div>

<div
                  className="bg-[#F4F0E6] border border-[#CDAA7D] rounded-lg p-6 hover:shadow-lg transition-shadow cursor-pointer"
                  onClick={() => setActiveTab("quests")}
                >
                  <div className="flex items-center justify-between mb-4">
                    <h3 className="font-bold text-[#2C1A1D]">Manage Quests</h3>
                    <FileText size={24} className="text-[#8B75AA]" />
                  </div>
                  <p className="text-[#8B75AA] text-sm">Monitor and moderate quest postings and activities</p>
                </div>

<div
                  className="bg-[#F4F0E6] border border-[#CDAA7D] rounded-lg p-6 hover:shadow-lg transition-shadow cursor-pointer"
                  onClick={() => setActiveTab("guilds")}
                >
                  <div className="flex items-center justify-between mb-4">
                    <h3 className="font-bold text-[#2C1A1D]">Manage Guilds</h3>
                    <Users size={24} className="text-[#8B75AA]" />
                  </div>
                  <p className="text-[#8B75AA] text-sm">Oversee guild activities and manage guild settings</p>
                </div>

<div
                  className="bg-[#F4F0E6] border border-[#CDAA7D] rounded-lg p-6 hover:shadow-lg transition-shadow cursor-pointer"
                  onClick={() => setActiveTab("reports")}
                >
                  <div className="flex items-center justify-between mb-4">
                    <h3 className="font-bold text-[#2C1A1D]">Manage Reports</h3>
                    <Flag size={24} className="text-[#8B75AA]" />
                  </div>
                  <p className="text-[#8B75AA] text-sm">Review and resolve user reports and violations</p>
                  {reports.length > 0 && (
                    <span className="inline-block mt-2 bg-red-500 text-white text-xs px-2 py-1 rounded-full">
                      {reports.length} pending
                    </span>
                  )}
                </div>

<div className="bg-[#F4F0E6] border border-[#CDAA7D] rounded-lg p-6 hover:shadow-lg transition-shadow cursor-pointer">
                  <div className="flex items-center justify-between mb-4">
                    <h3 className="font-bold text-[#2C1A1D]">Recent Users</h3>
                    <Users size={24} className="text-[#8B75AA]" />
                  </div>
                  <p className="text-[#8B75AA] text-sm">View recently registered users and their activity</p>
                </div>

<div className="bg-[#F4F0E6] border border-[#CDAA7D] rounded-lg p-6 hover:shadow-lg transition-shadow cursor-pointer">
                  <div className="flex items-center justify-between mb-4">
                    <h3 className="font-bold text-[#2C1A1D]">Recent Reports</h3>
                    <Flag size={24} className="text-[#8B75AA]" />
                  </div>
                  <p className="text-[#8B75AA] text-sm">Latest reports requiring admin attention</p>
                </div>
              </div>
            </div>
          )}

{/* Users Tab */}
          {activeTab === "users" && (
            <div>
              <h3 className="text-xl font-bold text-[#2C1A1D] mb-4">Manage Users</h3>
              <div className="overflow-x-auto -mx-4 sm:mx-0">
                <div className="min-w-full inline-block align-middle">
                  <table className="min-w-full bg-white border border-gray-200">
                    <thead>
                      <tr className="bg-gray-100">
                        <th className="py-2 px-4 border-b text-left">User</th>
                        <th className="py-2 px-4 border-b text-left">Email</th>
                        <th className="py-2 px-4 border-b text-left">Role</th>
                        <th className="py-2 px-4 border-b text-left">Status</th>
                        <th className="py-2 px-4 border-b text-left">Joined</th>
                        <th className="py-2 px-4 border-b text-left">Actions</th>
                      </tr>
                    </thead>
                    <tbody>
                      {users.map((user) => (
                        <tr key={user.id} className="hover:bg-gray-50">
                          <td className="py-2 px-4 border-b">
                            <div className="flex items-center">
                              <div className="w-8 h-8 rounded-full bg-[#8B75AA] flex items-center justify-center text-white font-medium">
                                {user.avatar || user.username?.charAt(0).toUpperCase() || "U"}
                              </div>
                              <span className="ml-2 font-medium">{user.username}</span>
                            </div>
                          </td>
                          <td className="py-2 px-4 border-b">{user.email}</td>
                          <td className="py-2 px-4 border-b">
                            {user.roles?.includes("admin") ? (
                              <span className="bg-[#8B75AA] text-white text-xs px-2 py-1 rounded">Admin</span>
                            ) : (
                              <span className="bg-gray-200 text-gray-700 text-xs px-2 py-1 rounded">User</span>
                            )}
                          </td>
                          <td className="py-2 px-4 border-b">
                            {user.banned ? (
                              <span className="bg-red-100 text-red-800 text-xs px-2 py-1 rounded">Banned</span>
                            ) : (
                              <span className="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Active</span>
                            )}
                          </td>
                          <td className="py-2 px-4 border-b">
                            {user.createdAt ? new Date(user.createdAt).toLocaleDateString() : "N/A"}
                          </td>
                          <td className="py-2 px-4 border-b">
                            <div className="flex space-x-2">
                              <button
                                onClick={() => setSelectedUserDetails(user)}
                                className="text-blue-600 hover:text-blue-800 text-sm"
                              >
                                View
                              </button>
                              {user.banned ? (
                                <button
                                  onClick={() => handleUnbanUser(user.id)}
                                  className="text-green-600 hover:text-green-800 text-sm"
                                >
                                  Unban
                                </button>
                              ) : (
                                <button
                                  onClick={() => setShowBanConfirm(user.id)}
                                  className="text-red-600 hover:text-red-800 text-sm"
                                >
                                  Ban
                                </button>
                              )}
                            </div>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          )}

{/* Quests Tab */}
          {activeTab === "quests" && (
            <div>
              <h3 className="text-xl font-bold text-[#2C1A1D] mb-4">Manage Quests</h3>
              <div className="overflow-x-auto -mx-4 sm:mx-0">
                <div className="min-w-full inline-block align-middle">
                  <table className="min-w-full bg-white border border-gray-200">
                    <thead>
                      <tr className="bg-gray-100">
                        <th className="py-2 px-4 border-b text-left">Title</th>
                        <th className="py-2 px-4 border-b text-left">Posted By</th>
                        <th className="py-2 px-4 border-b text-left">Category</th>
                        <th className="py-2 px-4 border-b text-left">Status</th>
                        <th className="py-2 px-4 border-b text-left">Created</th>
                        <th className="py-2 px-4 border-b text-left">Actions</th>
                      </tr>
                    </thead>
                    <tbody>
                      {quests.map((quest) => (
                        <tr key={quest.id} className="hover:bg-gray-50">
                          <td className="py-2 px-4 border-b font-medium">{quest.title}</td>
                          <td className="py-2 px-4 border-b">
                            <div className="flex items-center">
                              <div className="w-6 h-6 rounded-full bg-[#8B75AA] flex items-center justify-center text-white text-xs">
                                {quest.poster.avatar}
                              </div>
                              <span className="ml-2">{quest.poster.name}</span>
                            </div>
                          </td>
                          <td className="py-2 px-4 border-b">
                            <span className="bg-gray-200 text-gray-700 text-xs px-2 py-1 rounded">
                              {quest.category}
                            </span>
                          </td>
                          <td className="py-2 px-4 border-b">
                            {quest.status === "open" && (
                              <span className="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Open</span>
                            )}
                            {quest.status === "in-progress" && (
                              <span className="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded">
                                In Progress
                              </span>
                            )}
                            {quest.status === "completed" && (
                              <span className="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Completed</span>
                            )}
                          </td>
                          <td className="py-2 px-4 border-b">
                            {quest.createdAt ? new Date(quest.createdAt).toLocaleDateString() : "N/A"}
                          </td>
                          <td className="py-2 px-4 border-b">
                            <div className="flex space-x-2">
                              <button
                                onClick={() => setSelectedQuestDetails(quest)}
                                className="text-blue-600 hover:text-blue-800 text-sm"
                              >
                                View
                              </button>
                              <button
                                onClick={() => setShowDeleteQuestConfirm(quest.id)}
                                className="text-red-600 hover:text-red-800 text-sm"
                              >
                                Delete
                              </button>
                            </div>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          )}

{/* Guilds Tab */}
          {activeTab === "guilds" && (
            <div>
              <h3 className="text-xl font-bold text-[#2C1A1D] mb-4">Manage Guilds</h3>
              <div className="overflow-x-auto -mx-4 sm:mx-0">
                <div className="min-w-full inline-block align-middle">
                  <table className="min-w-full bg-white border border-gray-200">
                    <thead>
                      <tr className="bg-gray-100">
                        <th className="py-2 px-4 border-b text-left">Guild</th>
                        <th className="py-2 px-4 border-b text-left">Owner</th>
                        <th className="py-2 px-4 border-b text-left">Members</th>
                        <th className="py-2 px-4 border-b text-left">Specialization</th>
                        <th className="py-2 px-4 border-b text-left">Created</th>
                        <th className="py-2 px-4 border-b text-left">Actions</th>
                      </tr>
                    </thead>
                    <tbody>
                      {guilds.map((guild) => (
                        <tr key={guild.id} className="hover:bg-gray-50">
                          <td className="py-2 px-4 border-b">
                            <div className="flex items-center">
                              <span className="text-xl mr-2">{guild.emblem}</span>
                              <span className="font-medium">{guild.name}</span>
                            </div>
                          </td>
                          <td className="py-2 px-4 border-b">
                            <div className="flex items-center">
                              <div className="w-6 h-6 rounded-full bg-[#8B75AA] flex items-center justify-center text-white text-xs">
                                {guild.poster.avatar}
                              </div>
                              <span className="ml-2">{guild.poster.name}</span>
                            </div>
                          </td>
                          <td className="py-2 px-4 border-b">{guild.members}</td>
                          <td className="py-2 px-4 border-b">
                            <span className="bg-gray-200 text-gray-700 text-xs px-2 py-1 rounded">
                              {guild.specialization}
                            </span>
                          </td>
                          <td className="py-2 px-4 border-b">
                            {guild.createdAt ? new Date(guild.createdAt).toLocaleDateString() : "N/A"}
                          </td>
                          <td className="py-2 px-4 border-b">
                            <div className="flex space-x-2">
                              <button
                                onClick={() => setSelectedGuildDetails(guild)}
                                className="text-blue-600 hover:text-blue-800 text-sm"
                              >
                                View
                              </button>
                              <button
                                onClick={() => setShowDeleteGuildConfirm(guild.id)}
                                className="text-red-600 hover:text-red-800 text-sm"
                              >
                                Delete
                              </button>
                            </div>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          )}

{/* Reports Tab */}
          {activeTab === "reports" && (
            <div>
              <h3 className="text-xl font-bold text-[#2C1A1D] mb-4">Manage Reports</h3>
              <div className="overflow-x-auto -mx-4 sm:mx-0">
                <div className="min-w-full inline-block align-middle">
                  <table className="min-w-full bg-white border border-gray-200">
                    <thead>
                      <tr className="bg-gray-100">
                        <th className="py-2 px-4 border-b text-left">Type</th>
                        <th className="py-2 px-4 border-b text-left">Reported By</th>
                        <th className="py-2 px-4 border-b text-left">Reason</th>
                        <th className="py-2 px-4 border-b text-left">Status</th>
                        <th className="py-2 px-4 border-b text-left">Date</th>
                        <th className="py-2 px-4 border-b text-left">Actions</th>
                      </tr>
                    </thead>
                    <tbody>
                      {reports.map((report) => (
                        <tr key={report.id} className="hover:bg-gray-50">
                          <td className="py-2 px-4 border-b">
                            <span
                              className={`inline-flex items-center px-2 py-1 rounded text-xs font-medium ${
                                report.type === "user" ? "bg-red-100 text-red-800" : "bg-orange-100 text-orange-800"
                              }`}
                            >
                              {report.type === "user" ? "User Report" : "Quest Report"}
                            </span>
                          </td>
                          <td className="py-2 px-4 border-b">
                            <div className="flex items-center">
                              <div className="w-6 h-6 rounded-full bg-[#8B75AA] flex items-center justify-center text-white text-xs">
                                {users.find((u) => u.id === report.reportedBy)?.avatar || "U"}
                              </div>
                              <span className="ml-2">
                                {users.find((u) => u.id === report.reportedBy)?.username || "Unknown"}
                              </span>
                            </div>
                          </td>
                          <td className="py-2 px-4 border-b">{report.reason}</td>
                          <td className="py-2 px-4 border-b">
                            {resolvedReports.includes(report.id) ? (
                              <span className="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Completed</span>
                            ) : (
                              <span className="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded">Pending</span>
                            )}
                          </td>
                          <td className="py-2 px-4 border-b">
                            {report.createdAt ? report.createdAt.toLocaleDateString() : "N/A"}
                          </td>
                          <td className="py-2 px-4 border-b">
                            <div className="flex space-x-2">
                              <button
                                onClick={() => handleViewReport(report)}
                                className="text-blue-600 hover:text-blue-800 text-sm"
                              >
                                View
                              </button>
                              {!resolvedReports.includes(report.id) && (
                                <button
                                  onClick={() =>
                                    handleResolveReport(report.id, "quick_resolve", "Resolved via quick action")
                                  }
                                  className="text-green-600 hover:text-green-800 text-sm"
                                >
                                  Resolve
                                </button>
                              )}
                            </div>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>

{/* All existing modals remain the same... */}
      {/* Ban Confirmation Modal */}
      {showBanConfirm !== null && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-lg w-full max-w-md p-6">
            <h3 className="text-xl font-bold text-[#2C1A1D] mb-4">Confirm Ban</h3>
            <p className="text-[#2C1A1D] mb-4">Are you sure you want to ban this user?</p>

<div className="mb-4">
              <label className="block text-sm font-medium text-[#2C1A1D] mb-2">Reason for ban:</label>
              <select
                value={banReason}
                onChange={(e) => setBanReason(e.target.value)}
                className="w-full border border-[#CDAA7D] rounded px-3 py-2 text-[#2C1A1D] focus:outline-none focus:border-[#8B75AA] mb-2"
              >
                <option value="">Select a reason...</option>
                <option value="Inappropriate behavior">Inappropriate behavior</option>
                <option value="Spam or harassment">Spam or harassment</option>
                <option value="Violation of terms">Violation of terms</option>
                <option value="Fraudulent activity">Fraudulent activity</option>
                <option value="custom">Custom reason</option>
              </select>

{banReason === "custom" && (
                <textarea
                  value={customBanReason}
                  onChange={(e) => setCustomBanReason(e.target.value)}
                  placeholder="Enter custom reason..."
                  className="w-full border border-[#CDAA7D] rounded px-3 py-2 text-[#2C1A1D] focus:outline-none focus:border-[#8B75AA] h-20 resize-none"
                />
              )}
            </div>

<div className="flex justify-end gap-3">
              <button
                onClick={() => {
                  setShowBanConfirm(null)
                  setBanReason("")
                  setCustomBanReason("")
                }}
                className="px-4 py-2 border border-[#CDAA7D] rounded text-[#2C1A1D] hover:bg-[#CDAA7D] hover:text-white transition-colors"
              >
                No
              </button>
              <button
                onClick={() => handleBanUser(showBanConfirm)}
                disabled={!banReason || (banReason === "custom" && !customBanReason.trim())}
                className={`px-4 py-2 rounded transition-colors ${
                  banReason && (banReason !== "custom" || customBanReason.trim())
                    ? "bg-red-500 text-white hover:bg-red-600"
                    : "bg-gray-300 text-gray-500 cursor-not-allowed"
                }`}
              >
                Yes, Ban User
              </button>
            </div>
          </div>
        </div>
      )}

{/* Report Details Modal */}
      {selectedReport && (
        <ReportDetailsModal
          isOpen={!!selectedReport}
          onClose={() => setSelectedReport(null)}
          report={selectedReport}
          users={users}
          onResolve={handleResolveReport}
          showToast={showToast}
        />
      )}

{/* User Details Modal */}
      {selectedUserDetails && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-lg w-full max-w-2xl p-6">
            <div className="flex justify-between items-center mb-6">
              <h3 className="text-xl font-bold text-[#2C1A1D]">User Details</h3>
              <button onClick={() => setSelectedUserDetails(null)} className="text-gray-400 hover:text-gray-600">
                <X size={20} />
              </button>
            </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <div className="flex items-center gap-3 mb-4">
                  <div className="w-16 h-16 bg-[#8B75AA] rounded-full flex items-center justify-center text-white text-xl font-bold">
                    {selectedUserDetails.avatar}
                  </div>
                  <div>
                    <h4 className="text-lg font-bold text-[#2C1A1D]">{selectedUserDetails.username}</h4>
                    <p className="text-[#8B75AA]">{selectedUserDetails.email}</p>
                  </div>
                </div>

<div className="space-y-3">
                  <div>
                    <label className="text-sm font-medium text-gray-600">Level</label>
                    <p className="text-[#2C1A1D]">{selectedUserDetails.level}</p>
                  </div>
                  <div>
                    <label className="text-sm font-medium text-gray-600">XP</label>
                    <p className="text-[#2C1A1D]">{selectedUserDetails.xp}</p>
                  </div>
                  <div>
                    <label className="text-sm font-medium text-gray-600">Gold</label>
                    <p className="text-[#2C1A1D]">{selectedUserDetails.gold}</p>
                  </div>
                  <div>
                    <label className="text-sm font-medium text-gray-600">Joined</label>
                    <p className="text-[#2C1A1D]">
                      {selectedUserDetails.createdAt
                        ? new Date(selectedUserDetails.createdAt).toLocaleDateString()
                        : "N/A"}
                    </p>
                  </div>
                </div>
              </div>

<div>
                <h5 className="font-medium text-[#2C1A1D] mb-3">Activity Stats</h5>
                <div className="space-y-3">
                  <div>
                    <label className="text-sm font-medium text-gray-600">Completed Quests</label>
                    <p className="text-[#2C1A1D]">{selectedUserDetails.completedQuests}</p>
                  </div>
                  <div>
                    <label className="text-sm font-medium text-gray-600">Created Quests</label>
                    <p className="text-[#2C1A1D]">{selectedUserDetails.createdQuests}</p>
                  </div>
                  <div>
                    <label className="text-sm font-medium text-gray-600">Joined Guilds</label>
                    <p className="text-[#2C1A1D]">{selectedUserDetails.joinedGuilds}</p>
                  </div>
                  <div>
                    <label className="text-sm font-medium text-gray-600">Created Guilds</label>
                    <p className="text-[#2C1A1D]">{selectedUserDetails.createdGuilds}</p>
                  </div>
                </div>

{selectedUserDetails.bio && (
                  <div className="mt-4">
                    <label className="text-sm font-medium text-gray-600">Bio</label>
                    <p className="text-[#2C1A1D] text-sm">{selectedUserDetails.bio}</p>
                  </div>
                )}
              </div>
            </div>
          </div>
        </div>
      )}

{/* Quest Details Modal */}
      {selectedQuestDetails && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-lg w-full max-w-2xl p-6">
            <div className="flex justify-between items-center mb-6">
              <h3 className="text-xl font-bold text-[#2C1A1D]">Quest Details</h3>
              <button onClick={() => setSelectedQuestDetails(null)} className="text-gray-400 hover:text-gray-600">
                <X size={20} />
              </button>
            </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <h4 className="text-lg font-bold text-[#2C1A1D] mb-4">{selectedQuestDetails.title}</h4>
                <div className="space-y-3">
                  <div>
                    <label className="text-sm font-medium text-gray-600">Category</label>
                    <p className="text-[#2C1A1D]">{selectedQuestDetails.category}</p>
                  </div>
                  <div>
                    <label className="text-sm font-medium text-gray-600">Status</label>
                    <p className="text-[#2C1A1D]">{selectedQuestDetails.status}</p>
                  </div>
                  <div>
                    <label className="text-sm font-medium text-gray-600">Reward</label>
                    <p className="text-[#2C1A1D]">{selectedQuestDetails.reward} Gold</p>
                  </div>
                  <div>
                    <label className="text-sm font-medium text-gray-600">Created</label>
                    <p className="text-[#2C1A1D]">
                      {selectedQuestDetails.createdAt
                        ? new Date(selectedQuestDetails.createdAt).toLocaleDateString()
                        : "N/A"}
                    </p>
                  </div>
                </div>
              </div>

<div>
                <h5 className="font-medium text-[#2C1A1D] mb-3">Posted By</h5>
                <div className="flex items-center gap-3 mb-4">
                  <div className="w-12 h-12 bg-[#8B75AA] rounded-full flex items-center justify-center text-white font-bold">
                    {selectedQuestDetails.poster.avatar}
                  </div>
                  <div>
                    <p className="font-medium text-[#2C1A1D]">{selectedQuestDetails.poster.name}</p>
                  </div>
                </div>

<div>
                  <label className="text-sm font-medium text-gray-600">Description</label>
                  <p className="text-[#2C1A1D] text-sm mt-1">{selectedQuestDetails.description}</p>
                </div>

{selectedQuestDetails.requirements && (
                  <div className="mt-4">
                    <label className="text-sm font-medium text-gray-600">Requirements</label>
                    <ul className="text-[#2C1A1D] text-sm mt-1 list-disc list-inside">
                      {selectedQuestDetails.requirements.map((req, index) => (
                        <li key={index}>{req}</li>
                      ))}
                    </ul>
                  </div>
                )}
              </div>
            </div>
          </div>
        </div>
      )}

{/* Guild Details Modal */}
      {selectedGuildDetails && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-lg w-full max-w-2xl p-6">
            <div className="flex justify-between items-center mb-6">
              <h3 className="text-xl font-bold text-[#2C1A1D]">Guild Details</h3>
              <button onClick={() => setSelectedGuildDetails(null)} className="text-gray-400 hover:text-gray-600">
                <X size={20} />
              </button>
            </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <div className="flex items-center gap-3 mb-4">
                  <div className="w-16 h-16 bg-[#CDAA7D] rounded-lg flex items-center justify-center text-2xl">
                    {selectedGuildDetails.emblem}
                  </div>
                  <div>
                    <h4 className="text-lg font-bold text-[#2C1A1D]">{selectedGuildDetails.name}</h4>
                    <p className="text-[#8B75AA]">{selectedGuildDetails.specialization}</p>
                  </div>
                </div>

<div className="space-y-3">
                  <div>
                    <label className="text-sm font-medium text-gray-600">Members</label>
                    <p className="text-[#2C1A1D]">{selectedGuildDetails.members}</p>
                  </div>
                  <div>
                    <label className="text-sm font-medium text-gray-600">Funds</label>
                    <p className="text-[#2C1A1D]">{selectedGuildDetails.funds || 0} Gold</p>
                  </div>
                  <div>
                    <label className="text-sm font-medium text-gray-600">Created</label>
                    <p className="text-[#2C1A1D]">
                      {selectedGuildDetails.createdAt
                        ? new Date(selectedGuildDetails.createdAt).toLocaleDateString()
                        : "N/A"}
                    </p>
                  </div>
                </div>
              </div>

<div>
                <h5 className="font-medium text-[#2C1A1D] mb-3">Owner</h5>
                <div className="flex items-center gap-3 mb-4">
                  <div className="w-12 h-12 bg-[#8B75AA] rounded-full flex items-center justify-center text-white font-bold">
                    {selectedGuildDetails.poster.avatar}
                  </div>
                  <div>
                    <p className="font-medium text-[#2C1A1D]">{selectedGuildDetails.poster.name}</p>
                  </div>
                </div>

<div>
                  <label className="text-sm font-medium text-gray-600">Description</label>
                  <p className="text-[#2C1A1D] text-sm mt-1">{selectedGuildDetails.description}</p>
                </div>

{selectedGuildDetails.requirements && (
                  <div className="mt-4">
                    <label className="text-sm font-medium text-gray-600">Requirements</label>
                    <ul className="text-[#2C1A1D] text-sm mt-1 list-disc list-inside">
                      {selectedGuildDetails.requirements.map((req, index) => (
                        <li key={index}>{req}</li>
                      ))}
                    </ul>
                  </div>
                )}
              </div>
            </div>
          </div>
        </div>
      )}

{/* Delete Quest Confirmation Modal */}
      {showDeleteQuestConfirm !== null && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-lg w-full max-w-md p-6">
            <h3 className="text-xl font-bold text-[#2C1A1D] mb-4">Confirm Quest Deletion</h3>
            <p className="text-[#2C1A1D] mb-4">Are you sure you want to delete this quest?</p>

<div className="mb-4">
              <label className="block text-sm font-medium text-[#2C1A1D] mb-2">Reason for deletion:</label>
              <select
                value={deleteQuestReason}
                onChange={(e) => setDeleteQuestReason(e.target.value)}
                className="w-full border border-[#CDAA7D] rounded px-3 py-2 text-[#2C1A1D] focus:outline-none focus:border-[#8B75AA] mb-2"
              >
                <option value="">Select a reason...</option>
                <option value="Inappropriate content">Inappropriate content</option>
                <option value="Misleading information">Misleading information</option>
                <option value="Spam or duplicate">Spam or duplicate</option>
                <option value="Violation of guidelines">Violation of guidelines</option>
                <option value="custom">Custom reason</option>
              </select>

{deleteQuestReason === "custom" && (
                <textarea
                  value={customDeleteQuestReason}
                  onChange={(e) => setCustomDeleteQuestReason(e.target.value)}
                  placeholder="Enter custom reason..."
                  className="w-full border border-[#CDAA7D] rounded px-3 py-2 text-[#2C1A1D] focus:outline-none focus:border-[#8B75AA] h-20 resize-none"
                />
              )}
            </div>

<div className="flex justify-end gap-3">
              <button
                onClick={() => {
                  setShowDeleteQuestConfirm(null)
                  setDeleteQuestReason("")
                  setCustomDeleteQuestReason("")
                }}
                className="px-4 py-2 border border-[#CDAA7D] rounded text-[#2C1A1D] hover:bg-[#CDAA7D] hover:text-white transition-colors"
              >
                Cancel
              </button>
              <button
                onClick={() => handleDeleteQuest(showDeleteQuestConfirm)}
                disabled={!deleteQuestReason || (deleteQuestReason === "custom" && !customDeleteQuestReason.trim())}
                className={`px-4 py-2 rounded transition-colors ${
                  deleteQuestReason && (deleteQuestReason !== "custom" || customDeleteQuestReason.trim())
                    ? "bg-red-500 text-white hover:bg-red-600"
                    : "bg-gray-300 text-gray-500 cursor-not-allowed"
                }`}
              >
                Delete Quest
              </button>
            </div>
          </div>
        </div>
      )}

{/* Delete Guild Confirmation Modal */}
      {showDeleteGuildConfirm !== null && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-lg w-full max-w-md p-6">
            <h3 className="text-xl font-bold text-[#2C1A1D] mb-4">Confirm Guild Deletion</h3>
            <p className="text-[#2C1A1D] mb-4">Are you sure you want to delete this guild?</p>

<div className="mb-4">
              <label className="block text-sm font-medium text-[#2C1A1D] mb-2">Reason for deletion:</label>
              <select
                value={deleteGuildReason}
                onChange={(e) => setDeleteGuildReason(e.target.value)}
                className="w-full border border-[#CDAA7D] rounded px-3 py-2 text-[#2C1A1D] focus:outline-none focus:border-[#8B75AA] mb-2"
              >
                <option value="">Select a reason...</option>
                <option value="Inappropriate content">Inappropriate content</option>
                <option value="Inactive or abandoned">Inactive or abandoned</option>
                <option value="Violation of guidelines">Violation of guidelines</option>
                <option value="Fraudulent activity">Fraudulent activity</option>
                <option value="custom">Custom reason</option>
              </select>

{deleteGuildReason === "custom" && (
                <textarea
                  value={customDeleteGuildReason}
                  onChange={(e) => setCustomDeleteGuildReason(e.target.value)}
                  placeholder="Enter custom reason..."
                  className="w-full border border-[#CDAA7D] rounded px-3 py-2 text-[#2C1A1D] focus:outline-none focus:border-[#8B75AA] h-20 resize-none"
                />
              )}
            </div>

<div className="flex justify-end gap-3">
              <button
                onClick={() => {
                  setShowDeleteGuildConfirm(null)
                  setDeleteGuildReason("")
                  setCustomDeleteGuildReason("")
                }}
                className="px-4 py-2 border border-[#CDAA7D] rounded text-[#2C1A1D] hover:bg-[#CDAA7D] hover:text-white transition-colors"
              >
                Cancel
              </button>
              <button
                onClick={() => handleDeleteGuild(showDeleteGuildConfirm)}
                disabled={!deleteGuildReason || (deleteGuildReason === "custom" && !customDeleteGuildReason.trim())}
                className={`px-4 py-2 rounded transition-colors ${
                  deleteGuildReason && (deleteGuildReason !== "custom" || customDeleteGuildReason.trim())
                    ? "bg-red-500 text-white hover:bg-red-600"
                    : "bg-gray-300 text-gray-500 cursor-not-allowed"
                }`}
              >
                Delete Guild
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/guild-overview-modal.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { X, Users, Crown, MessageCircle, Settings, DollarSign, Star, ChevronDown } from "lucide-react"
import type { Guild, User } from "@/lib/types"

interface GuildOverviewModalProps {
  isOpen: boolean
  onClose: () => void
  guild: Guild
  currentUser: User | null
  onJoinGuild: (guildId: number, message: string) => void
  onOpenChat: (guildId: number) => void
  onOpenSettings?: (guildId: number) => void
  showToast: (message: string, type?: string) => void
}

export function GuildOverviewModal({
  isOpen,
  onClose,
  guild,
  currentUser,
  onJoinGuild,
  onOpenChat,
  onOpenSettings,
  showToast,
}: GuildOverviewModalProps) {
  const [activeTab, setActiveTab] = useState<"about" | "members" | "chat">("about")
  const [joinMessage, setJoinMessage] = useState("")
  const [showJoinForm, setShowJoinForm] = useState(false)
  const [showMobileMenu, setShowMobileMenu] = useState(false)

if (!isOpen) return null

const isOwner = currentUser && guild.poster.id === currentUser.id
  const isAdmin = currentUser && guild.admins.includes(currentUser.id)
  const isMember = currentUser && guild.membersList.includes(currentUser.id)
  const canManage = isOwner || isAdmin

const handleJoinClick = () => {
    if (!currentUser) {
      showToast("Please log in to join guilds", "error")
      return
    }

if (guild.settings?.joinRequirements?.manualApproval) {
      setShowJoinForm(true)
    } else {
      onJoinGuild(guild.id, "")
      onClose()
    }
  }

const handleJoinSubmit = () => {
    if (joinMessage.trim()) {
      onJoinGuild(guild.id, joinMessage)
      setShowJoinForm(false)
      setJoinMessage("")
      onClose()
    }
  }

const tabs = [
    { id: "about", label: "About" },
    { id: "members", label: `Members (${guild.members})` },
    ...(isMember ? [{ id: "chat", label: "Chat" }] : []),
  ]

return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-2 sm:p-4">
      <div className="bg-[#F4F0E6] rounded-lg w-full max-w-2xl max-h-[95vh] sm:max-h-[85vh] overflow-hidden flex flex-col">
        {/* Compact Header */}
        <div className="bg-[#2C1A1D] text-white p-3 sm:p-4 relative flex-shrink-0">
          <button
            onClick={onClose}
            className="absolute top-2 right-2 sm:top-3 sm:right-3 text-white hover:text-gray-300 transition-colors"
          >
            <X size={20} />
          </button>

<div className="flex items-center gap-3 pr-8">
            <div className="w-12 h-12 sm:w-16 sm:h-16 bg-[#CDAA7D] rounded-lg flex items-center justify-center text-2xl sm:text-3xl flex-shrink-0">
              {guild.emblem}
            </div>
            <div className="flex-1 min-w-0">
              <h2 className="text-lg sm:text-xl font-bold mb-1 truncate">{guild.name}</h2>
              <p className="text-gray-300 text-xs sm:text-sm line-clamp-2">{guild.description}</p>
              <div className="flex flex-wrap items-center gap-3 text-xs mt-2">
                <span className="flex items-center gap-1">
                  <Users size={12} />
                  {guild.members}
                </span>
                <span className="flex items-center gap-1">
                  <Crown size={12} />
                  {guild.poster.username}
                </span>
              </div>
            </div>
          </div>

{/* Action Buttons */}
          <div className="flex flex-wrap gap-2 mt-3">
            {!isMember && currentUser && (
              <button
                onClick={handleJoinClick}
                className="px-3 py-1.5 bg-[#8B75AA] text-white rounded text-sm hover:bg-[#7A6699] transition-colors"
              >
                Join Guild
              </button>
            )}
            {isMember && (
              <button
                onClick={() => onOpenChat(guild.id)}
                className="px-3 py-1.5 bg-[#CDAA7D] text-[#2C1A1D] rounded text-sm hover:bg-[#B8956A] transition-colors flex items-center gap-1"
              >
                <MessageCircle size={14} />
                Chat
              </button>
            )}
            {canManage && onOpenSettings && (
              <button
                onClick={() => onOpenSettings(guild.id)}
                className="px-3 py-1.5 border border-white text-white rounded text-sm hover:bg-white hover:text-[#2C1A1D] transition-colors flex items-center gap-1"
              >
                <Settings size={14} />
                Manage
              </button>
            )}
          </div>
        </div>

{/* Mobile Tab Dropdown */}
        <div className="sm:hidden border-b border-[#CDAA7D] bg-white">
          <button
            onClick={() => setShowMobileMenu(!showMobileMenu)}
            className="w-full px-4 py-3 flex items-center justify-between text-[#2C1A1D] font-medium"
          >
            <span>{tabs.find((tab) => tab.id === activeTab)?.label}</span>
            <ChevronDown size={16} className={`transition-transform ${showMobileMenu ? "rotate-180" : ""}`} />
          </button>
          {showMobileMenu && (
            <div className="border-t border-[#CDAA7D]">
              {tabs.map((tab) => (
                <button
                  key={tab.id}
                  onClick={() => {
                    setActiveTab(tab.id as any)
                    setShowMobileMenu(false)
                  }}
                  className={`w-full px-4 py-2 text-left text-sm ${
                    activeTab === tab.id ? "bg-[#8B75AA] text-white" : "text-[#2C1A1D] hover:bg-gray-50"
                  }`}
                >
                  {tab.label}
                </button>
              ))}
            </div>
          )}
        </div>

{/* Desktop Tabs */}
        <div className="hidden sm:flex border-b border-[#CDAA7D] bg-white">
          {tabs.map((tab) => (
            <button
              key={tab.id}
              onClick={() => setActiveTab(tab.id as any)}
              className={`px-4 py-3 font-medium transition-colors ${
                activeTab === tab.id
                  ? "text-[#8B75AA] border-b-2 border-[#8B75AA] bg-white"
                  : "text-[#2C1A1D] hover:text-[#8B75AA] hover:bg-gray-50"
              }`}
            >
              {tab.label}
            </button>
          ))}
        </div>

{/* Content */}
        <div className="flex-1 overflow-y-auto p-3 sm:p-4">
          {activeTab === "about" && (
            <div className="space-y-4">
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                <div className="bg-white p-3 rounded border border-[#CDAA7D]">
                  <h4 className="font-medium text-[#2C1A1D] mb-1 text-sm">Specialization</h4>
                  <p className="text-[#8B75AA] text-sm">{guild.specialization}</p>
                </div>
                <div className="bg-white p-3 rounded border border-[#CDAA7D]">
                  <h4 className="font-medium text-[#2C1A1D] mb-1 text-sm">Category</h4>
                  <p className="text-[#8B75AA] text-sm">{guild.category}</p>
                </div>
                <div className="bg-white p-3 rounded border border-[#CDAA7D]">
                  <h4 className="font-medium text-[#2C1A1D] mb-1 text-sm">Guild Funds</h4>
                  <div className="flex items-center gap-1">
                    <DollarSign size={14} className="text-yellow-500" />
                    <span className="text-[#8B75AA] font-medium text-sm">{guild.funds || 0} Gold</span>
                  </div>
                </div>
                <div className="bg-white p-3 rounded border border-[#CDAA7D]">
                  <h4 className="font-medium text-[#2C1A1D] mb-1 text-sm">Join Requirements</h4>
                  <p className="text-[#8B75AA] text-sm">
                    {guild.settings?.joinRequirements?.manualApproval ? "Manual Approval" : "Open to All"}
                  </p>
                </div>
              </div>

{guild.shout && (
                <div className="bg-white p-3 rounded border border-[#CDAA7D]">
                  <div className="flex items-center gap-2 mb-2">
                    <Star size={14} className="text-yellow-400" />
                    <span className="font-medium text-sm">Guild Announcement</span>
                  </div>
                  <p className="text-gray-700 text-sm">{guild.shout.content}</p>
                  <p className="text-xs text-gray-500 mt-1">
                    by {guild.shout.authorName} • {new Date(guild.shout.createdAt).toLocaleDateString()}
                  </p>
                </div>
              )}

{guild.socialLinks && guild.socialLinks.length > 0 && (
                <div>
                  <h3 className="font-medium text-[#2C1A1D] mb-2">Social Links</h3>
                  <div className="space-y-2">
                    {guild.socialLinks.map((link, index) => (
                      <a
                        key={index}
                        href={link}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="block p-2 bg-white border border-[#CDAA7D] rounded hover:bg-gray-50 transition-colors text-sm truncate"
                      >
                        {link}
                      </a>
                    ))}
                  </div>
                </div>
              )}
            </div>
          )}

{activeTab === "members" && (
            <div className="space-y-3">
              {/* Owner */}
              <div className="flex items-center gap-3 p-3 bg-white border border-[#CDAA7D] rounded">
                <div className="w-8 h-8 bg-[#8B75AA] rounded-full flex items-center justify-center text-white font-bold text-sm">
                  {guild.poster.avatar}
                </div>
                <div className="flex-1 min-w-0">
                  <p className="font-medium text-[#2C1A1D] text-sm truncate">{guild.poster.username}</p>
                  <p className="text-xs text-[#8B75AA]">Guild Owner</p>
                </div>
                <Crown size={16} className="text-yellow-500 flex-shrink-0" />
              </div>

{/* Admins */}
              {guild.admins
                .filter((adminId) => adminId !== guild.poster.id)
                .map((adminId) => (
                  <div key={adminId} className="flex items-center gap-3 p-3 bg-white border border-[#CDAA7D] rounded">
                    <div className="w-8 h-8 bg-[#8B75AA] rounded-full flex items-center justify-center text-white font-bold text-sm">
                      A
                    </div>
                    <div className="flex-1 min-w-0">
                      <p className="font-medium text-[#2C1A1D] text-sm">Admin {adminId}</p>
                      <p className="text-xs text-[#8B75AA]">Administrator</p>
                    </div>
                    <Star size={16} className="text-blue-500 flex-shrink-0" />
                  </div>
                ))}

{/* Regular Members */}
              {guild.membersList
                .filter((memberId) => memberId !== guild.poster.id && !guild.admins.includes(memberId))
                .slice(0, 8)
                .map((memberId) => (
                  <div key={memberId} className="flex items-center gap-3 p-3 bg-white border border-[#CDAA7D] rounded">
                    <div className="w-8 h-8 bg-[#8B75AA] rounded-full flex items-center justify-center text-white font-bold text-sm">
                      M
                    </div>
                    <div className="flex-1 min-w-0">
                      <p className="font-medium text-[#2C1A1D] text-sm">Member {memberId}</p>
                      <p className="text-xs text-[#8B75AA]">Member</p>
                    </div>
                  </div>
                ))}

{guild.membersList.length > 11 && (
                <p className="text-center text-[#8B75AA] py-2 text-sm">
                  and {guild.membersList.length - 11} more members...
                </p>
              )}
            </div>
          )}

{activeTab === "chat" && isMember && (
            <div className="text-center py-8">
              <MessageCircle size={48} className="mx-auto mb-4 text-[#CDAA7D]" />
              <p className="text-[#8B75AA] mb-4">Guild chat will open in a separate window</p>
              <button
                onClick={() => onOpenChat(guild.id)}
                className="px-4 py-2 bg-[#8B75AA] text-white rounded hover:bg-[#7A6699] transition-colors"
              >
                Open Guild Chat
              </button>
            </div>
          )}
        </div>

{/* Join Form Modal */}
        {showJoinForm && (
          <div className="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4">
            <div className="bg-white rounded-lg p-4 w-full max-w-sm">
              <h3 className="text-lg font-bold text-[#2C1A1D] mb-3">Join Guild Application</h3>
              <p className="text-[#2C1A1D] mb-3 text-sm">
                This guild requires manual approval. Please tell us why you want to join:
              </p>
              <textarea
                className="w-full px-3 py-2 border border-[#CDAA7D] rounded bg-white text-[#2C1A1D] placeholder-[#8B75AA] focus:outline-none focus:border-[#8B75AA] h-20 resize-none mb-4 text-sm"
                placeholder="I want to join because..."
                value={joinMessage}
                onChange={(e) => setJoinMessage(e.target.value)}
              />
              <div className="flex gap-2">
                <button
                  onClick={() => setShowJoinForm(false)}
                  className="flex-1 px-3 py-2 border border-[#CDAA7D] rounded text-[#2C1A1D] hover:bg-[#CDAA7D] hover:text-white transition-colors text-sm"
                >
                  Cancel
                </button>
                <button
                  onClick={handleJoinSubmit}
                  className="flex-1 px-3 py-2 bg-[#8B75AA] text-white rounded hover:bg-[#7A6699] transition-colors text-sm"
                >
                  Submit
                </button>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/profile.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import type { User, Quest, Guild } from "@/lib/types"
import { ChevronDown } from "lucide-react"

interface ProfileProps {
  currentUser: User
  quests: Quest[]
  guilds: Guild[]
  navigateToSection?: (section: string) => void
}

export function Profile({ currentUser, quests, guilds, navigateToSection }: ProfileProps) {
  const [activeTab, setActiveTab] = useState<"overview" | "quests" | "guilds" | "achievements">("overview")
  const [showMobileMenu, setShowMobileMenu] = useState(false)

// Filter quests by status
  const activeQuests = quests.filter((q) => q.status === "in-progress" && q.assignedTo === currentUser.id)
  const createdQuests = quests.filter((q) => q.poster.id === currentUser.id)
  const completedQuests = quests.filter((q) => q.status === "completed" && q.assignedTo === currentUser.id)

// Get user's guilds
  const userGuilds = guilds.filter((g) => g.membersList.includes(currentUser.id))

// Calculate XP progress
  const xpForNextLevel = 1000 // Example value
  const xpProgress = ((currentUser.xp % xpForNextLevel) / xpForNextLevel) * 100

const completeTestQuest = () => {
    if (window.updateCompletedQuests) {
      const testQuest = {
        id: Date.now(),
        title: "Write Tavern Lore",
        description: "Looking for a skilled writer to create lore and stories about the PeerQuest Tavern's history.",
        status: "completed",
        assignedTo: currentUser.id,
        xp: 250,
        reward: 400,
        createdAt: new Date(Date.now() - 14 * 24 * 60 * 60 * 1000),
        completedAt: new Date(),
      }
      window.updateCompletedQuests(testQuest)
    }
  }

const joinTestGuild = () => {
    if (window.joinGuildTest) {
      window.joinGuildTest(currentUser.id, "Mystic Brewers Guild")
    }
  }

const tabs = [
    { id: "overview", label: "Overview" },
    { id: "quests", label: "Quests" },
    { id: "guilds", label: "Guilds" },
    { id: "achievements", label: "Achievements" },
  ]

return (
    <section className="bg-[#F4F0E6] min-h-screen">
      {/* Profile Header */}
      <div className="bg-gradient-to-r from-[#2C1A1D] to-[#8B75AA] text-white p-4 sm:p-6">
        <div className="max-w-4xl mx-auto">
          <div className="flex flex-col sm:flex-row items-center sm:items-start gap-4 sm:gap-6">
            {/* Avatar */}
            <div className="w-20 h-20 sm:w-24 sm:h-24 bg-[#CDAA7D] rounded-full flex items-center justify-center text-2xl sm:text-3xl font-bold flex-shrink-0">
              {currentUser.avatar || currentUser.username?.[0] || "H"}
            </div>

{/* User Info */}
            <div className="flex-1 text-center sm:text-left">
              <h2 className="text-xl sm:text-2xl font-bold">{currentUser.username || "HeroicAdventurer"}</h2>
              <p className="text-[#CDAA7D]">Novice Adventurer</p>

{/* Level Bar */}
              <div className="mt-4 max-w-md mx-auto sm:mx-0">
                <div className="flex justify-between text-sm mb-1">
                  <span>Level</span>
                  <span>{currentUser.xp} XP</span>
                </div>
                <div className="w-full bg-[#2C1A1D] rounded-full h-2">
                  <div className="bg-[#CDAA7D] h-2 rounded-full" style={{ width: `${xpProgress}%` }}></div>
                </div>
              </div>
            </div>

{/* Join Date */}
            <div className="text-center sm:text-right">
              <div className="text-sm">Member since</div>
              <div>{currentUser.joinDate || "Invalid Date"}</div>
            </div>
          </div>
        </div>
      </div>

{/* Mobile Tab Dropdown */}
      <div className="sm:hidden border-b border-[#CDAA7D] bg-white">
        <div className="max-w-4xl mx-auto">
          <button
            onClick={() => setShowMobileMenu(!showMobileMenu)}
            className="w-full px-4 py-3 flex items-center justify-between text-[#2C1A1D] font-medium"
          >
            <span>{tabs.find((tab) => tab.id === activeTab)?.label}</span>
            <ChevronDown size={16} className={`transition-transform ${showMobileMenu ? "rotate-180" : ""}`} />
          </button>
          {showMobileMenu && (
            <div className="border-t border-[#CDAA7D]">
              {tabs.map((tab) => (
                <button
                  key={tab.id}
                  onClick={() => {
                    setActiveTab(tab.id as any)
                    setShowMobileMenu(false)
                  }}
                  className={`w-full px-4 py-2 text-left ${
                    activeTab === tab.id ? "bg-[#8B75AA] text-white" : "text-[#2C1A1D] hover:bg-gray-50"
                  }`}
                >
                  {tab.label}
                </button>
              ))}
            </div>
          )}
        </div>
      </div>

{/* Desktop Navigation Tabs */}
      <div className="hidden sm:block border-b border-[#CDAA7D] bg-white">
        <div className="max-w-4xl mx-auto flex">
          {tabs.map((tab) => (
            <button
              key={tab.id}
              onClick={() => setActiveTab(tab.id as any)}
              className={`px-6 py-3 font-medium transition-colors ${
                activeTab === tab.id
                  ? "border-b-2 border-[#8B75AA] text-[#8B75AA]"
                  : "text-[#2C1A1D] hover:text-[#8B75AA]"
              }`}
            >
              {tab.label}
            </button>
          ))}
        </div>
      </div>

{/* Content Area */}
      <div className="max-w-4xl mx-auto p-4 sm:p-6">
        {/* Overview Tab */}
        {activeTab === "overview" && (
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 sm:gap-6">
            {/* Stats */}
            <div className="bg-white rounded-lg p-4 sm:p-6 border border-[#CDAA7D]">
              <h3 className="font-medium mb-4">Stats</h3>
              <div className="space-y-2">
                <div className="flex justify-between">
                  <span>Quests Completed:</span>
                  <span className="font-medium">{currentUser.completedQuests || 1}</span>
                </div>
                <div className="flex justify-between">
                  <span>Quests Created:</span>
                  <span className="font-medium">{createdQuests.length || 0}</span>
                </div>
                <div className="flex justify-between">
                  <span>Guilds Joined:</span>
                  <span className="font-medium">{userGuilds.length || 3}</span>
                </div>
                <div className="flex justify-between">
                  <span>Gold:</span>
                  <span className="font-medium text-[#CDAA7D]">{currentUser.gold || 1200}</span>
                </div>
              </div>
            </div>

{/* About */}
            <div className="bg-white rounded-lg p-4 sm:p-6 border border-[#CDAA7D]">
              <h3 className="font-medium mb-4">About</h3>
              <p className="text-gray-600 text-sm">
                {currentUser.bio || "Experienced adventurer looking for challenging quests."}
              </p>
            </div>

{/* Skills */}
            <div className="bg-white rounded-lg p-4 sm:p-6 border border-[#CDAA7D]">
              <h3 className="font-medium mb-4">Skills</h3>
              {currentUser.skills && currentUser.skills.length > 0 ? (
                <div className="flex flex-wrap gap-2">
                  {currentUser.skills.map((skill, index) => (
                    <span key={index} className="bg-[#8B75AA]/10 text-[#8B75AA] px-2 py-1 rounded text-sm">
                      {skill}
                    </span>
                  ))}
                </div>
              ) : (
                <p className="text-gray-500 text-sm">No skills listed yet.</p>
              )}
            </div>

{/* Recent Activity */}
            <div className="bg-white rounded-lg p-4 sm:p-6 border border-[#CDAA7D] md:col-span-3">
              <h3 className="font-medium mb-4">Recent Activity</h3>
              <p className="text-gray-500 text-sm">No recent activity.</p>
            </div>
          </div>
        )}

{/* Quests Tab */}
        {activeTab === "quests" && (
          <div className="space-y-4 sm:space-y-6">
            {/* Active Quests */}
            <div className="bg-white rounded-lg p-4 sm:p-6 border border-[#CDAA7D]">
              <h3 className="font-medium mb-4">Active Quests</h3>
              {activeQuests.length > 0 ? (
                <div className="space-y-4">
                  {activeQuests.map((quest) => (
                    <div key={quest.id} className="border-b border-[#CDAA7D] pb-4">
                      <h4 className="font-medium">{quest.title}</h4>
                      <p className="text-sm text-gray-600 mb-2">{quest.description}</p>
                      <div className="flex flex-col sm:flex-row sm:justify-between gap-2 text-sm">
                        <span>Reward: {quest.reward} Gold</span>
                        <span>Due: {new Date(quest.deadline).toLocaleDateString()}</span>
                      </div>
                    </div>
                  ))}
                </div>
              ) : (
                <p className="text-gray-500 text-sm">No active quests.</p>
              )}
            </div>

{/* Created Quests */}
            <div className="bg-white rounded-lg p-4 sm:p-6 border border-[#CDAA7D]">
              <h3 className="font-medium mb-4">Created Quests</h3>
              {createdQuests.length > 0 ? (
                <div className="space-y-4">
                  {createdQuests.map((quest) => (
                    <div key={quest.id} className="border-b border-[#CDAA7D] pb-4">
                      <h4 className="font-medium">{quest.title}</h4>
                      <p className="text-sm text-gray-600 mb-2">{quest.description}</p>
                      <div className="flex flex-col sm:flex-row sm:justify-between gap-2 text-sm">
                        <span>Reward: {quest.reward} Gold</span>
                        <span>Status: {quest.status}</span>
                      </div>
                    </div>
                  ))}
                </div>
              ) : (
                <p className="text-gray-500 text-sm">No created quests.</p>
              )}
            </div>

{/* Completed Quests */}
            <div className="bg-white rounded-lg p-4 sm:p-6 border border-[#CDAA7D]">
              <h3 className="font-medium mb-4">Completed Quests</h3>
              {completedQuests.length > 0 ? (
                <div className="space-y-4">
                  {completedQuests.map((quest) => (
                    <div key={quest.id} className="border-b border-[#CDAA7D] pb-4">
                      <div className="flex flex-col sm:flex-row sm:justify-between gap-2">
                        <h4 className="font-medium">{quest.title}</h4>
                        <span className="text-[#8B75AA] font-medium">{quest.xp} XP</span>
                      </div>
                      <p className="text-sm text-gray-600">
                        Looking for a skilled writer to create lore and stories about the PeerQuest Tavern's history.
                      </p>
                      <div className="flex flex-col sm:flex-row sm:justify-between gap-2 text-sm">
                        <span>Completed: {new Date(quest.completedAt || Date.now()).toLocaleDateString()}</span>
                        <span className="text-blue-600 cursor-pointer">VIEW DETAILS</span>
                      </div>
                    </div>
                  ))}
                </div>
              ) : (
                <div>
                  <div className="border-b border-[#CDAA7D] pb-4 mb-4">
                    <div className="flex flex-col sm:flex-row sm:justify-between gap-2">
                      <h4 className="font-medium">WRITE TAVERN LORE</h4>
                      <span className="text-[#8B75AA] font-medium">250 XP</span>
                    </div>
                    <p className="text-sm text-gray-600">
                      Looking for a skilled writer to create lore and stories about the PeerQuest Tavern's history.
                    </p>
                    <div className="flex flex-col sm:flex-row sm:justify-between gap-2 text-sm">
                      <span>Reward: 400 Gold</span>
                      <span>Completed: 6/3/2025</span>
                    </div>
                  </div>
                </div>
              )}

<button
                onClick={completeTestQuest}
                className="w-full mt-4 bg-[#8B75AA] text-white py-3 rounded hover:bg-[#7A6699] transition-colors"
              >
                Complete a Test Quest
              </button>
            </div>
          </div>
        )}

{/* Guilds Tab */}
        {activeTab === "guilds" && (
          <div>
            {userGuilds.length > 0 || currentUser.guilds?.length ? (
              <div className="space-y-4">
                {/* Mystic Brewers Guild */}
                <div className="bg-white rounded-lg border border-[#CDAA7D] overflow-hidden">
                  <div className="p-4">
                    <div className="flex items-center gap-3">
                      <div className="w-10 h-10 bg-[#2C1A1D] rounded-full flex items-center justify-center text-white">
                        🧪
                      </div>
                      <div>
                        <h3 className="font-medium">Mystic Brewers Guild</h3>
                        <p className="text-sm text-[#8B75AA]">Alchemy</p>
                      </div>
                    </div>
                    <p className="mt-3 text-sm">
                      A guild dedicated to the art of potion-making and alchemy. We share recipes, techniques, and
                      collaborate on complex brewing projects.
                    </p>
                    <div className="flex flex-col sm:flex-row sm:justify-between gap-2 mt-2 text-sm">
                      <span>3 members</span>
                      <span>Created: 4/15/2023</span>
                    </div>
                  </div>
                </div>

{/* Tavern Defenders */}
                <div className="bg-white rounded-lg border border-[#CDAA7D] overflow-hidden">
                  <div className="p-4">
                    <div className="flex items-center gap-3">
                      <div className="w-10 h-10 bg-[#2C1A1D] rounded-full flex items-center justify-center text-white">
                        🛡️
                      </div>
                      <div>
                        <h3 className="font-medium">Tavern Defenders</h3>
                        <p className="text-sm text-[#8B75AA]">Protection</p>
                      </div>
                    </div>
                    <p className="mt-3 text-sm">
                      The official guild for those who help protect and maintain the PeerQuest Tavern. Members get
                      priority on tavern-related quests.
                    </p>
                    <div className="flex flex-col sm:flex-row sm:justify-between gap-2 mt-2 text-sm">
                      <span>2 members</span>
                      <span>Created: 2/10/2023</span>
                    </div>
                  </div>
                </div>

{/* Creative Crafters */}
                <div className="bg-white rounded-lg border border-[#CDAA7D] overflow-hidden">
                  <div className="p-4">
                    <div className="flex items-center gap-3">
                      <div className="w-10 h-10 bg-[#2C1A1D] rounded-full flex items-center justify-center text-white">
                        🎨
                      </div>
                      <div className="flex-1">
                        <h3 className="font-medium">Creative Crafters</h3>
                        <p className="text-sm text-[#8B75AA]">Art & Design</p>
                      </div>
                      <div className="bg-[#CDAA7D]/20 text-[#CDAA7D] text-xs px-2 py-1 rounded">Guild Master</div>
                    </div>
                    <p className="mt-3 text-sm">
                      A guild for artists, designers, and creators of all kinds. We collaborate on creative projects and
                      share techniques.
                    </p>
                    <div className="flex flex-col sm:flex-row sm:justify-between gap-2 mt-2 text-sm">
                      <span>1 member</span>
                      <span>Created: 6/20/2023</span>
                    </div>
                  </div>
                </div>
              </div>
            ) : (
              <div className="bg-white rounded-lg p-6 border border-[#CDAA7D] text-center">
                <p className="text-gray-500 mb-6">No guilds joined yet</p>
                <button
                  onClick={joinTestGuild}
                  className="bg-[#8B75AA] text-white px-6 py-3 rounded hover:bg-[#7A6699] transition-colors"
                >
                  Join a Test Guild
                </button>
              </div>
            )}
          </div>
        )}

{/* Achievements Tab */}
        {activeTab === "achievements" && (
          <div className="bg-white rounded-lg p-6 border border-[#CDAA7D] text-center">
            <p className="text-gray-500">No achievements yet.</p>
          </div>
        )}
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/user-profile-modal.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { X, MapPin, Calendar, Award, Users, FileText, Star, ChevronDown } from "lucide-react"
import type { User, Quest, Guild } from "@/lib/types"

interface UserProfileModalProps {
  isOpen: boolean
  onClose: () => void
  user: User
  quests: Quest[]
  guilds: Guild[]
  currentUser?: User | null
}

export function UserProfileModal({ isOpen, onClose, user, quests, guilds, currentUser }: UserProfileModalProps) {
  const [activeTab, setActiveTab] = useState<"overview" | "quests" | "guilds" | "achievements">("overview")
  const [isDropdownOpen, setIsDropdownOpen] = useState(false)

if (!isOpen) return null

// Calculate user stats with proper null checks
  const userQuests = (quests || []).filter((q) => q.poster?.id === user.id) || []
  const completedQuests = (quests || []).filter((q) => q.assignedTo === user.id && q.status === "completed") || []
  const userGuilds = (guilds || []).filter((g) => g.membersList?.includes(user.id)) || []
  const ownedGuilds = (guilds || []).filter((g) => g.poster?.id === user.id) || []

// Calculate level from XP (assuming 1000 XP per level)
  const level = Math.floor((user.xp || 0) / 1000) + 1
  const xpForNextLevel = level * 1000
  const xpProgress = (((user.xp || 0) % 1000) / 1000) * 100

// Check if current user is viewing their own profile
  const isOwnProfile = currentUser?.id === user.id

const tabs = [
    { id: "overview", label: "Overview" },
    { id: "quests", label: "Quests" },
    { id: "guilds", label: "Guilds" },
    { id: "achievements", label: "Achievements" },
  ]

const currentTab = tabs.find((tab) => tab.id === activeTab)

return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
      <div className="bg-[#F4F0E6] rounded-lg w-full max-w-2xl max-h-[90vh] overflow-y-auto">
        {/* Compact Header */}
        <div className="bg-gradient-to-r from-[#2C1A1D] to-[#8B75AA] text-white p-4 rounded-t-lg">
          <div className="flex justify-between items-start">
            <div className="flex items-center gap-4">
              {/* Smaller Avatar */}
              <div className="w-16 h-16 bg-[#CDAA7D] rounded-full flex items-center justify-center text-xl font-bold">
                {user.avatar || user.username?.[0]?.toUpperCase() || "U"}
              </div>

{/* User Info */}
              <div>
                <h2 className="text-xl font-bold">{user.username || "Unknown User"}</h2>
                <p className="text-[#CDAA7D]">Level {level} Adventurer</p>

{/* Compact Level Progress Bar */}
                <div className="mt-2 w-48">
                  <div className="flex justify-between text-xs mb-1">
                    <span>
                      XP: {user.xp || 0} / {xpForNextLevel}
                    </span>
                  </div>
                  <div className="w-full bg-[#2C1A1D] rounded-full h-1.5">
                    <div
                      className="bg-[#CDAA7D] h-1.5 rounded-full transition-all duration-300"
                      style={{ width: `${xpProgress}%` }}
                    ></div>
                  </div>
                </div>

{/* Join Date */}
                <div className="flex items-center gap-2 mt-2 text-xs text-[#F4F0E6] opacity-80">
                  <Calendar size={12} />
                  <span>Joined {user.createdAt ? new Date(user.createdAt).toLocaleDateString() : "Unknown"}</span>
                </div>
              </div>
            </div>

{/* Compact Stats Cards */}
        <div className="p-4 border-b border-[#CDAA7D]">
          <div className={`grid gap-3 ${isOwnProfile ? "grid-cols-2 sm:grid-cols-4" : "grid-cols-3"}`}>
            <div className="bg-white rounded-lg p-3 border border-[#CDAA7D] text-center">
              <div className="text-lg font-bold text-[#8B75AA]">{completedQuests.length}</div>
              <div className="text-xs text-[#2C1A1D]">Completed</div>
            </div>
            <div className="bg-white rounded-lg p-3 border border-[#CDAA7D] text-center">
              <div className="text-lg font-bold text-[#8B75AA]">{userQuests.length}</div>
              <div className="text-xs text-[#2C1A1D]">Posted</div>
            </div>
            <div className="bg-white rounded-lg p-3 border border-[#CDAA7D] text-center">
              <div className="text-lg font-bold text-[#8B75AA]">{userGuilds.length}</div>
              <div className="text-xs text-[#2C1A1D]">Guilds</div>
            </div>
            {/* Only show gold if viewing own profile */}
            {isOwnProfile && (
              <div className="bg-white rounded-lg p-3 border border-[#CDAA7D] text-center">
                <div className="text-lg font-bold text-[#CDAA7D]">{user.gold || 0}</div>
                <div className="text-xs text-[#2C1A1D]">Gold</div>
              </div>
            )}
          </div>
        </div>

{/* Navigation - Mobile Dropdown, Desktop Tabs */}
        <div className="border-b border-[#CDAA7D]">
          {/* Mobile Dropdown */}
          <div className="sm:hidden">
            <div className="relative">
              <button
                onClick={() => setIsDropdownOpen(!isDropdownOpen)}
                className="w-full px-4 py-3 text-left flex items-center justify-between bg-white border-b border-[#CDAA7D] hover:bg-[#F4F0E6] transition-colors"
              >
                <span className="font-medium text-[#2C1A1D]">{currentTab?.label}</span>
                <ChevronDown
                  size={16}
                  className={`transform transition-transform ${isDropdownOpen ? "rotate-180" : ""}`}
                />
              </button>

{isDropdownOpen && (
                <div className="absolute top-full left-0 right-0 bg-white border-l border-r border-b border-[#CDAA7D] z-10">
                  {tabs.map((tab) => (
                    <button
                      key={tab.id}
                      onClick={() => {
                        setActiveTab(tab.id as any)
                        setIsDropdownOpen(false)
                      }}
                      className={`w-full px-4 py-3 text-left hover:bg-[#F4F0E6] transition-colors ${
                        activeTab === tab.id ? "bg-[#8B75AA]/10 text-[#8B75AA] font-medium" : "text-[#2C1A1D]"
                      }`}
                    >
                      {tab.label}
                    </button>
                  ))}
                </div>
              )}
            </div>
          </div>

{/* Desktop Tabs */}
          <div className="hidden sm:flex">
            {tabs.map((tab) => (
              <button
                key={tab.id}
                onClick={() => setActiveTab(tab.id as any)}
                className={`px-4 py-3 font-medium transition-colors ${
                  activeTab === tab.id
                    ? "border-b-2 border-[#8B75AA] text-[#8B75AA]"
                    : "text-[#2C1A1D] hover:text-[#8B75AA]"
                }`}
              >
                {tab.label}
              </button>
            ))}
          </div>
        </div>

{/* Compact Content Area */}
        <div className="p-4">
          {/* Overview Tab */}
          {activeTab === "overview" && (
            <div className="space-y-4">
              {/* About */}
              <div className="bg-white rounded-lg p-4 border border-[#CDAA7D]">
                <h3 className="font-bold text-[#2C1A1D] mb-3 flex items-center gap-2">
                  <Users size={16} />
                  About
                </h3>
                <p className="text-[#2C1A1D] text-sm">{user.bio || "This adventurer hasn't written a bio yet."}</p>

{user.location && (
                  <div className="flex items-center gap-2 mt-3 text-[#8B75AA]">
                    <MapPin size={14} />
                    <span className="text-sm">{user.location}</span>
                  </div>
                )}
              </div>

{/* Skills */}
              <div className="bg-white rounded-lg p-4 border border-[#CDAA7D]">
                <h3 className="font-bold text-[#2C1A1D] mb-3 flex items-center gap-2">
                  <Award size={16} />
                  Skills
                </h3>
                {user.skills && user.skills.length > 0 ? (
                  <div className="flex flex-wrap gap-2">
                    {user.skills.map((skill, index) => (
                      <span
                        key={index}
                        className="bg-[#8B75AA]/10 text-[#8B75AA] px-2 py-1 rounded-full text-xs font-medium"
                      >
                        {skill}
                      </span>
                    ))}
                  </div>
                ) : (
                  <p className="text-gray-500 text-sm">No skills listed yet.</p>
                )}
              </div>

{/* Recent Activity */}
              <div className="bg-white rounded-lg p-4 border border-[#CDAA7D]">
                <h3 className="font-bold text-[#2C1A1D] mb-3 flex items-center gap-2">
                  <FileText size={16} />
                  Recent Activity
                </h3>
                <div className="space-y-2">
                  {completedQuests.slice(0, 3).map((quest) => (
                    <div key={quest.id} className="flex items-center gap-3 p-2 bg-[#F4F0E6] rounded">
                      <div className="w-6 h-6 bg-green-500 rounded-full flex items-center justify-center">
                        <Star size={12} className="text-white" />
                      </div>
                      <div className="flex-1">
                        <p className="font-medium text-[#2C1A1D] text-sm">Completed: {quest.title}</p>
                        <p className="text-xs text-[#8B75AA]">
                          {quest.completedAt ? new Date(quest.completedAt).toLocaleDateString() : "Recently"}
                        </p>
                      </div>
                    </div>
                  ))}
                  {completedQuests.length === 0 && <p className="text-gray-500 text-sm">No recent activity.</p>}
                </div>
              </div>
            </div>
          )}

{/* Quests Tab */}
          {activeTab === "quests" && (
            <div className="space-y-4">
              {/* Completed Quests */}
              <div className="bg-white rounded-lg p-4 border border-[#CDAA7D]">
                <h3 className="font-bold text-[#2C1A1D] mb-3">Completed Quests ({completedQuests.length})</h3>
                {completedQuests.length > 0 ? (
                  <div className="space-y-3">
                    {completedQuests.map((quest) => (
                      <div key={quest.id} className="border-b border-[#CDAA7D] pb-2 last:border-b-0">
                        <h4 className="font-medium text-[#2C1A1D] text-sm">{quest.title}</h4>
                        <p className="text-xs text-gray-600 mt-1">{quest.description}</p>
                        <div className="flex justify-between items-center mt-2 text-xs">
                          <span className="text-[#8B75AA]">
                            {quest.xp} XP • {quest.reward} Gold
                          </span>
                          <span className="text-gray-500">
                            {quest.completedAt ? new Date(quest.completedAt).toLocaleDateString() : "Recently"}
                          </span>
                        </div>
                      </div>
                    ))}
                  </div>
                ) : (
                  <p className="text-gray-500 text-sm">No completed quests yet.</p>
                )}
              </div>

{/* Posted Quests */}
              <div className="bg-white rounded-lg p-4 border border-[#CDAA7D]">
                <h3 className="font-bold text-[#2C1A1D] mb-3">Posted Quests ({userQuests.length})</h3>
                {userQuests.length > 0 ? (
                  <div className="space-y-3">
                    {userQuests.map((quest) => (
                      <div key={quest.id} className="border-b border-[#CDAA7D] pb-2 last:border-b-0">
                        <h4 className="font-medium text-[#2C1A1D] text-sm">{quest.title}</h4>
                        <p className="text-xs text-gray-600 mt-1">{quest.description}</p>
                        <div className="flex justify-between items-center mt-2 text-xs">
                          <span className="text-[#8B75AA]">Reward: {quest.reward} Gold</span>
                          <span
                            className={`px-2 py-1 rounded text-xs ${
                              quest.status === "completed"
                                ? "bg-green-100 text-green-800"
                                : quest.status === "in-progress"
                                  ? "bg-yellow-100 text-yellow-800"
                                  : "bg-blue-100 text-blue-800"
                            }`}
                          >
                            {quest.status}
                          </span>
                        </div>
                      </div>
                    ))}
                  </div>
                ) : (
                  <p className="text-gray-500 text-sm">No quests posted yet.</p>
                )}
              </div>
            </div>
          )}

{/* Guilds Tab */}
          {activeTab === "guilds" && (
            <div className="space-y-4">
              {/* Owned Guilds */}
              {ownedGuilds.length > 0 && (
                <div className="bg-white rounded-lg p-4 border border-[#CDAA7D]">
                  <h3 className="font-bold text-[#2C1A1D] mb-3">Owned Guilds ({ownedGuilds.length})</h3>
                  <div className="space-y-2">
                    {ownedGuilds.map((guild) => (
                      <div key={guild.id} className="flex items-center gap-3 p-2 bg-[#F4F0E6] rounded">
                        <div className="text-lg">{guild.emblem}</div>
                        <div className="flex-1">
                          <h4 className="font-medium text-[#2C1A1D] text-sm">{guild.name}</h4>
                          <p className="text-xs text-[#8B75AA]">{guild.specialization}</p>
                        </div>
                        <div className="text-right text-xs text-gray-600">
                          <div>{guild.members} members</div>
                          <div className="text-[#CDAA7D] font-medium">Owner</div>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              )}

{/* Joined Guilds */}
              <div className="bg-white rounded-lg p-4 border border-[#CDAA7D]">
                <h3 className="font-bold text-[#2C1A1D] mb-3">Joined Guilds ({userGuilds.length})</h3>
                {userGuilds.length > 0 ? (
                  <div className="space-y-2">
                    {userGuilds.map((guild) => (
                      <div key={guild.id} className="flex items-center gap-3 p-2 bg-[#F4F0E6] rounded">
                        <div className="text-lg">{guild.emblem}</div>
                        <div className="flex-1">
                          <h4 className="font-medium text-[#2C1A1D] text-sm">{guild.name}</h4>
                          <p className="text-xs text-[#8B75AA]">{guild.specialization}</p>
                        </div>
                        <div className="text-right text-xs text-gray-600">
                          <div>{guild.members} members</div>
                          <div>Member</div>
                        </div>
                      </div>
                    ))}
                  </div>
                ) : (
                  <p className="text-gray-500 text-sm">Not a member of any guilds yet.</p>
                )}
              </div>
            </div>
          )}

{/* Achievements Tab */}
          {activeTab === "achievements" && (
            <div className="bg-white rounded-lg p-4 border border-[#CDAA7D] text-center">
              <Award size={32} className="mx-auto text-[#8B75AA] mb-3" />
              <h3 className="font-bold text-[#2C1A1D] mb-2">Achievements Coming Soon</h3>
              <p className="text-gray-500 text-sm">Achievement system will be available in a future update.</p>
            </div>
          )}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/settings.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Eye, EyeOff, Save, AlertCircle, Shield, TrendingDown, Menu, X } from "lucide-react"
import type { SpendingLimits } from "@/lib/types"
import { getDailySpending, getWeeklySpending } from "@/lib/spending-utils"

interface SettingsProps {
  user: any
  updateSettings: (settings: any) => void
  showToast: (message: string, type?: string) => void
}

export function Settings({ user, updateSettings, showToast }: SettingsProps) {
  const [activeTab, setActiveTab] = useState<
    "account" | "security" | "privacy" | "notifications" | "payment" | "subscriptions" | "app" | "spending"
  >("account")
  const [showMobileMenu, setShowMobileMenu] = useState(false)

const [showPassword, setShowPassword] = useState(false)
  const [showNewPassword, setShowNewPassword] = useState(false)
  const [showConfirmPassword, setShowConfirmPassword] = useState(false)

// Initialize with safe defaults if properties are undefined
  const [accountForm, setAccountForm] = useState({
    displayName: user?.displayName || user?.username || "",
    username: user?.username || "",
    email: user?.email || "",
    bio: user?.bio || "",
    birthday: user?.birthday || "",
    gender: user?.gender || "prefer-not-to-say",
    location: user?.location || "",
    language: user?.settings?.language || "English",
    theme: user?.settings?.theme || "dark",
    socialLinks: {
      facebook: user?.socialLinks?.facebook || "",
      twitter: user?.socialLinks?.twitter || "",
      youtube: user?.socialLinks?.youtube || "",
      twitch: user?.socialLinks?.twitch || "",
      github: user?.socialLinks?.github || "",
      linkedin: user?.socialLinks?.linkedin || "",
      website: user?.socialLinks?.website || "",
    },
  })

const [securityForm, setSecurityForm] = useState({
    currentPassword: "",
    newPassword: "",
    confirmPassword: "",
    twoFactorEnabled: user?.settings?.security?.twoFactorEnabled || false,
    twoFactorMethod: user?.settings?.security?.twoFactorMethod || "email",
  })

const [privacyForm, setPrivacyForm] = useState({
    showBirthday: user?.settings?.privacy?.showBirthday || false,
    showGender: user?.settings?.privacy?.showGender || false,
    showEmail: user?.settings?.privacy?.showEmail || false,
  })

const [notificationsForm, setNotificationsForm] = useState({
    newQuests: user?.settings?.notifications?.newQuests || true,
    questApplications: user?.settings?.notifications?.questApplications || true,
    guildAnnouncements: user?.settings?.notifications?.guildAnnouncements || true,
    directMessages: user?.settings?.notifications?.directMessages || true,
    newsletter: user?.settings?.notifications?.newsletter || false,
  })

const [spendingForm, setSpendingForm] = useState<SpendingLimits>({
    dailyLimit: user?.spendingLimits?.dailyLimit || 5000,
    weeklyLimit: user?.spendingLimits?.weeklyLimit || 25000,
    enabled: user?.spendingLimits?.enabled || false,
    notifications: user?.spendingLimits?.notifications || true,
  })

const tabs = [
    { id: "account", label: "Account Info" },
    { id: "security", label: "Security" },
    { id: "privacy", label: "Privacy" },
    { id: "notifications", label: "Notifications" },
    { id: "spending", label: "Spending Limits" },
    { id: "payment", label: "Payment Methods" },
    { id: "subscriptions", label: "Subscriptions" },
    { id: "app", label: "App Permissions" },
  ]

const saveAccountSettings = () => {
    updateSettings({
      displayName: accountForm.displayName,
      username: accountForm.username,
      email: accountForm.email,
      bio: accountForm.bio,
      birthday: accountForm.birthday,
      gender: accountForm.gender,
      location: accountForm.location,
      socialLinks: accountForm.socialLinks,
      settings: {
        ...user?.settings,
        language: accountForm.language,
        theme: accountForm.theme,
      },
    })
    showToast("Account settings saved successfully!")
  }

const saveSecuritySettings = () => {
    // In a real app, we would verify the current password
    if (securityForm.newPassword && securityForm.newPassword !== securityForm.confirmPassword) {
      showToast("New passwords do not match", "error")
      return
    }

updateSettings({
      settings: {
        ...user?.settings,
        security: {
          ...user?.settings?.security,
          twoFactorEnabled: securityForm.twoFactorEnabled,
          twoFactorMethod: securityForm.twoFactorMethod,
        },
      },
    })

showToast("Security settings saved successfully!")

// Clear password fields
    setSecurityForm({
      ...securityForm,
      currentPassword: "",
      newPassword: "",
      confirmPassword: "",
    })
  }

const savePrivacySettings = () => {
    updateSettings({
      settings: {
        ...user?.settings,
        privacy: privacyForm,
      },
    })
    showToast("Privacy settings saved successfully!")
  }

const saveNotificationSettings = () => {
    updateSettings({
      settings: {
        ...user?.settings,
        notifications: notificationsForm,
      },
    })
    showToast("Notification settings saved successfully!")
  }

const saveSpendingSettings = () => {
    updateSettings({
      spendingLimits: spendingForm,
    })
    showToast("Spending limits updated successfully!")
  }

const generateBackupCodes = () => {
    updateSettings({
      settings: {
        ...user?.settings,
        security: {
          ...user?.settings?.security,
          backupCodesGenerated: true,
        },
      },
    })
    showToast("Backup codes generated successfully!")
  }

const dailySpent = getDailySpending(user)
  const weeklySpent = getWeeklySpending(user)

const handleTabChange = (tabId: string) => {
    setActiveTab(tabId as any)
    setShowMobileMenu(false)
  }

return (
    <section className="bg-[#F4F0E6] min-h-screen py-4 md:py-8">
      <div className="max-w-6xl mx-auto px-4 md:px-6">
        <h2 className="text-3xl md:text-4xl font-bold text-center mb-4 text-[#2C1A1D] font-serif">Settings</h2>
        <p className="text-center text-[#8B75AA] mb-6 md:mb-8">CUSTOMIZE YOUR PEERQUEST TAVERN EXPERIENCE.</p>

{/* Mobile Header */}
        <div className="md:hidden mb-4">
          <button
            onClick={() => setShowMobileMenu(!showMobileMenu)}
            className="w-full bg-[#2C1A1D] text-[#F4F0E6] p-3 rounded-lg flex items-center justify-between"
          >
            <span>{tabs.find((tab) => tab.id === activeTab)?.label}</span>
            {showMobileMenu ? <X size={20} /> : <Menu size={20} />}
          </button>

{showMobileMenu && (
            <div className="mt-2 bg-[#2C1A1D] rounded-lg overflow-hidden">
              {tabs.map((tab) => (
                <button
                  key={tab.id}
                  onClick={() => handleTabChange(tab.id)}
                  className={`w-full text-left px-4 py-3 text-[#F4F0E6] border-b border-[#CDAA7D]/20 last:border-b-0 ${
                    activeTab === tab.id ? "bg-[#CDAA7D] text-[#2C1A1D]" : "hover:bg-[#CDAA7D]/20"
                  }`}
                >
                  {tab.label}
                </button>
              ))}
            </div>
          )}
        </div>

<div className="flex flex-col md:flex-row gap-4 md:gap-6">
          {/* Desktop Sidebar */}
          <div className="hidden md:block md:w-64 bg-[#2C1A1D] text-[#F4F0E6] rounded-lg overflow-hidden">
            <div className="p-4 border-b border-[#CDAA7D]/30">
              <h3 className="font-bold text-lg">Settings</h3>
            </div>
            <div className="p-2">
              {tabs.map((tab) => (
                <button
                  key={tab.id}
                  onClick={() => setActiveTab(tab.id as any)}
                  className={`w-full text-left px-4 py-2 rounded transition-colors text-sm ${
                    activeTab === tab.id ? "bg-[#CDAA7D] text-[#2C1A1D]" : "hover:bg-[#CDAA7D]/20"
                  }`}
                >
                  {tab.label}
                </button>
              ))}
            </div>
          </div>

{/* Main Content */}
          <div className="flex-1 bg-[#2C1A1D] text-[#F4F0E6] rounded-lg overflow-hidden">
            {/* Account Info */}
            {activeTab === "account" && (
              <div className="p-4 md:p-6">
                <h3 className="text-xl font-bold mb-6">Account Info</h3>

<div className="space-y-6">
                  <div>
                    <label className="block text-sm font-medium mb-2">Display Name</label>
                    <div className="flex items-center">
                      <input
                        type="text"
                        className="flex-1 px-3 py-2 bg-[#3D2A2F] border border-[#CDAA7D] rounded text-[#F4F0E6] focus:outline-none focus:border-[#8B75AA] text-sm"
                        value={accountForm.displayName}
                        onChange={(e) => setAccountForm((prev) => ({ ...prev, displayName: e.target.value }))}
                      />
                      <button className="ml-2 text-[#CDAA7D]">
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          width="16"
                          height="16"
                          viewBox="0 0 24 24"
                          fill="none"
                          stroke="currentColor"
                          strokeWidth="2"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                        >
                          <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
                          <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
                        </svg>
                      </button>
                    </div>
                  </div>

<div>
                    <label className="block text-sm font-medium mb-2">Username</label>
                    <div className="flex items-center">
                      <input
                        type="text"
                        className="flex-1 px-3 py-2 bg-[#3D2A2F] border border-[#CDAA7D] rounded text-[#F4F0E6] focus:outline-none focus:border-[#8B75AA] text-sm"
                        value={accountForm.username}
                        onChange={(e) => setAccountForm((prev) => ({ ...prev, username: e.target.value }))}
                      />
                      <button className="ml-2 text-[#CDAA7D]">
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          width="16"
                          height="16"
                          viewBox="0 0 24 24"
                          fill="none"
                          stroke="currentColor"
                          strokeWidth="2"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                        >
                          <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
                          <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
                        </svg>
                      </button>
                    </div>
                    <p className="text-xs text-[#CDAA7D]/70 mt-1">Previous usernames: {user?.username}</p>
                  </div>

<div>
                    <label className="block text-sm font-medium mb-2">Email Address</label>
                    <div className="flex items-center">
                      <input
                        type="email"
                        className="flex-1 px-3 py-2 bg-[#3D2A2F] border border-[#CDAA7D] rounded text-[#F4F0E6] focus:outline-none focus:border-[#8B75AA] text-sm"
                        value={accountForm.email}
                        onChange={(e) => setAccountForm((prev) => ({ ...prev, email: e.target.value }))}
                      />
                      <button className="ml-2 text-[#CDAA7D]">
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          width="16"
                          height="16"
                          viewBox="0 0 24 24"
                          fill="none"
                          stroke="currentColor"
                          strokeWidth="2"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                        >
                          <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
                          <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
                        </svg>
                      </button>
                    </div>
                    <div className="flex items-center mt-1">
                      <span className="text-xs bg-green-800 text-green-200 px-2 py-0.5 rounded">Verified</span>
                    </div>
                  </div>

<div>
                    <label className="block text-sm font-medium mb-2">Bio</label>
                    <textarea
                      className="w-full px-3 py-2 bg-[#3D2A2F] border border-[#CDAA7D] rounded text-[#F4F0E6] focus:outline-none focus:border-[#8B75AA] h-20 md:h-24 resize-none text-sm"
                      value={accountForm.bio}
                      onChange={(e) => setAccountForm((prev) => ({ ...prev, bio: e.target.value }))}
                    >

Personal

Birthday

setAccountForm((prev) => ({ ...prev, birthday: e.target.value }))} />

Verified

Gender (optional)

Account Location setAccountForm((prev) => ({ ...prev, location: e.target.value }))} placeholder="Enter your location" />

Language

Theme

Social Networks

Facebook setAccountForm((prev) => ({ ...prev, socialLinks: { ...prev.socialLinks, facebook: e.target.value }, })) } placeholder="e.g. www.facebook.com/username" />

Twitter setAccountForm((prev) => ({ ...prev, socialLinks: { ...prev.socialLinks, twitter: e.target.value }, })) } placeholder="e.g. @handle" />

YouTube setAccountForm((prev) => ({ ...prev, socialLinks: { ...prev.socialLinks, youtube: e.target.value }, })) } placeholder="e.g. www.youtube.com/channel/username" />

Twitch setAccountForm((prev) => ({ ...prev, socialLinks: { ...prev.socialLinks, twitch: e.target.value }, })) } placeholder="e.g. www.twitch.tv/username" />

GitHub setAccountForm((prev) => ({ ...prev, socialLinks: { ...prev.socialLinks, github: e.target.value }, })) } placeholder="e.g. github.com/username" />

LinkedIn setAccountForm((prev) => ({ ...prev, socialLinks: { ...prev.socialLinks, linkedin: e.target.value }, })) } placeholder="e.g. linkedin.com/in/username" />

Website setAccountForm((prev) => ({ ...prev, socialLinks: { ...prev.socialLinks, website: e.target.value }, })) } placeholder="e.g. www.yourwebsite.com" />

)} {/* Security */} {activeTab === "security" && (

Security

Login Methods

Password 1 password added

Change Password

Current Password

setSecurityForm((prev) => ({ ...prev, currentPassword: e.target.value }))} placeholder="Enter your current password" />

New Password

setSecurityForm((prev) => ({ ...prev, newPassword: e.target.value }))} placeholder="Create a new password" />

Confirm New Password

setSecurityForm((prev) => ({ ...prev, confirmPassword: e.target.value }))} placeholder="Confirm your new password" />

2-Step Verification

Add an extra layer of protection to your account with 2-Step Verification at login, account recovery, and high-value transactions. You can enable one of the following options at a time.

Authenticator App (Very Secure)

Download an app on your phone to generate unique security codes. Suggested apps include Google Authenticator, Microsoft Authenticator, and Twilio's Authy.

{ if (e.target.checked) { setSecurityForm((prev) => ({ ...prev, twoFactorEnabled: true, twoFactorMethod: "authenticator", })) } else { setSecurityForm((prev) => ({ ...prev, twoFactorEnabled: false, })) } }} />

Email (Secure)

Receive unique security codes at {user?.email?.substring(0, 3)}•••••••@ {user?.email?.split("@")[1]}.

{ if (e.target.checked) { setSecurityForm((prev) => ({ ...prev, twoFactorEnabled: true, twoFactorMethod: "email", })) } else { setSecurityForm((prev) => ({ ...prev, twoFactorEnabled: false, })) } }} />

Hardware Security Keys (Very Secure)

Supported on web browsers, iPhone, and iPad. Use a hardware key as an extra layer of protection while logging in.

{ if (e.target.checked) { setSecurityForm((prev) => ({ ...prev, twoFactorEnabled: true, twoFactorMethod: "hardware", })) } else { setSecurityForm((prev) => ({ ...prev, twoFactorEnabled: false, })) } }} />

Backup Codes

You have {user?.settings?.security?.backupCodesGenerated ? "8 unused" : "0"} backup codes.

Generate and use backup codes in case you lose access to your 2-Step Verification option. Do not share your backup codes with anyone.

IMPORTANT: Don't share your security codes with anyone. This can include things like texting your code, screensharing, etc. Do not change security settings at someone else's request. PeerQuest will never ask you for your codes or to change settings to prove account ownership.

)} {/* Privacy */} {activeTab === "privacy" && (

Privacy & Content Restrictions

Privacy Settings

Show Birthday on Profile

Allow other adventurers to see your birthday on your public profile.

setPrivacyForm((prev) => ({ ...prev, showBirthday: e.target.checked }))} />

Show Gender on Profile

Allow other adventurers to see your gender on your public profile.

setPrivacyForm((prev) => ({ ...prev, showGender: e.target.checked }))} />

Show Email on Profile

Allow other adventurers to see your email on your public profile.

setPrivacyForm((prev) => ({ ...prev, showEmail: e.target.checked }))} />

Content Restrictions

Mature Content Filter

Filter out quests and guilds that may contain mature content.

Quest Visibility

Control who can see the quests you've created.

Profile Visibility

Control who can see your profile.

)} {/* Notifications */} {activeTab === "notifications" && (

Notifications

Notification Preferences

New Quest Notifications

Receive notifications when new quests matching your skills are posted.

setNotificationsForm((prev) => ({ ...prev, newQuests: e.target.checked })) } />

Quest Application Notifications

Receive notifications about your quest applications and when someone applies to your quests.

setNotificationsForm((prev) => ({ ...prev, questApplications: e.target.checked })) } />

Guild Announcements

Receive notifications about announcements from guilds you've joined.

setNotificationsForm((prev) => ({ ...prev, guildAnnouncements: e.target.checked })) } />

Direct Messages

Receive notifications when someone sends you a direct message.

setNotificationsForm((prev) => ({ ...prev, directMessages: e.target.checked })) } />

Weekly Newsletter

Receive our weekly newsletter with featured quests, guilds, and tavern updates.

setNotificationsForm((prev) => ({ ...prev, newsletter: e.target.checked })) } />

)} {/* Spending Limits */} {activeTab === "spending" && (

Spending Limits

{/* Current Spending Overview */}

Current Spending

Today

{dailySpent.toLocaleString()} Gold

{user?.spendingLimits?.enabled && (

of {user.spendingLimits.dailyLimit.toLocaleString()} limit

)}

This Week

{weeklySpent.toLocaleString()} Gold

{user?.spendingLimits?.enabled && (

of {user.spendingLimits.weeklyLimit.toLocaleString()} limit

)}

{/* Spending Limits Settings */}

Spending Limit Settings

Enable Spending Limits

Prevent accidental overspending by setting daily and weekly limits.

setSpendingForm((prev) => ({ ...prev, enabled: e.target.checked }))} />

{spendingForm.enabled && ( <>

Daily Spending Limit (Gold) setSpendingForm((prev) => ({ ...prev, dailyLimit: Number.parseInt(e.target.value) || 0, })) } placeholder="e.g. 5000" />

Maximum gold you can spend per day (minimum: 100, maximum: 50,000)

Weekly Spending Limit (Gold) setSpendingForm((prev) => ({ ...prev, weeklyLimit: Number.parseInt(e.target.value) || 0, })) } placeholder="e.g. 25000" />

Maximum gold you can spend per week (minimum: 500, maximum: 200,000)

Limit Notifications

Get notified when you're approaching your spending limits.

setSpendingForm((prev) => ({ ...prev, notifications: e.target.checked })) } />

)}

{/* Spending History Preview */} {user?.spendingHistory && user.spendingHistory.length > 0 && (

Recent Spending

{user.spendingHistory .slice(-5) .reverse() .map((record) => (

{record.description}

{record.date.toLocaleDateString()} • {record.type.replace("_", " ")}

-{record.amount.toLocaleString()}

Gold

))}

)} {/* Safety Information */}

Safety Features

• Spending limits help prevent accidental overspending
• Limits reset daily at midnight and weekly on Sundays
• You'll receive warnings before reaching your limits
• Limits can be adjusted anytime in your settings
• Emergency spending may require additional confirmation

)} {/* Payment Methods */} {activeTab === "payment" && (

Payment Methods

No payment methods added yet.

Add a payment method to purchase gold and support other adventurers.

)} {/* Subscriptions */} {activeTab === "subscriptions" && (

Subscriptions

No active subscriptions.

Subscribe to premium features to enhance your PeerQuest Tavern experience.

)} {/* App Permissions */} {activeTab === "app" && (

App Permissions

No connected applications.

Connect third-party applications to enhance your PeerQuest Tavern experience.

)}

) } [V0_FILE]typescriptreact:file="components/messaging-system.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useEffect, useRef } from "react" import { Search, Send, MoreVertical, Info, Paperclip, X, Download, FileText, ImageIcon, ArrowLeft } from "lucide-react" import type { User } from "@/lib/types" import { mockUsers, mockMessages, mockConversations } from "@/lib/mock-data" interface MessagingSystemProps { currentUser: User | null showToast: (message: string, type?: string) => void } interface FileAttachment { id: string name: string size: number type: string url: string } export function MessagingSystem({ currentUser, showToast }: MessagingSystemProps) { const [conversations, setConversations] = useState(mockConversations) const [activeConversation, setActiveConversation] = useState(null) const [messages, setMessages] = useState([]) const [newMessage, setNewMessage] = useState("") const [searchQuery, setSearchQuery] = useState("") const [attachments, setAttachments] = useState([]) const [showAttachmentPreview, setShowAttachmentPreview] = useState(false) const [showMobileChat, setShowMobileChat] = useState(false) const messagesEndRef = useRef(null) const messagesContainerRef = useRef(null) const fileInputRef = useRef(null) // Get the other participant in a conversation const getOtherParticipant = (conversation: any) => { if (!currentUser) return null const otherId = conversation.participants.find((id: number) => id !== currentUser.id) return otherId ? mockUsers.find((user) => user.id === otherId) : null } // Filter conversations based on search query const filteredConversations = conversations.filter((conversation) => { const otherParticipant = getOtherParticipant(conversation) if (!otherParticipant) return false return otherParticipant.username.toLowerCase().includes(searchQuery.toLowerCase()) }) // Load messages when active conversation changes useEffect(() => { if (activeConversation !== null && currentUser) { // Find messages for this conversation const conversationMessages = mockMessages.filter( (msg) => (msg.senderId === currentUser.id && msg.receiverId === conversations .find((c) => c.id === activeConversation) ?.participants.find((id) => id !== currentUser.id)) || (msg.receiverId === currentUser.id && msg.senderId === conversations.find((c) => c.id === activeConversation)?.participants.find((id) => id !== currentUser.id)), ) setMessages(conversationMessages || []) // Mark messages as read const updatedConversations = conversations.map((conv) => conv.id === activeConversation ? { ...conv, unreadCount: 0 } : conv, ) setConversations(updatedConversations) } }, [activeConversation, currentUser, conversations]) const handleFileSelect = (event: React.ChangeEvent) => { const files = event.target.files if (!files) return const newAttachments: FileAttachment[] = Array.from(files).map((file) => ({ id: Math.random().toString(36).substr(2, 9), name: file.name, size: file.size, type: file.type, url: URL.createObjectURL(file), })) setAttachments((prev) => [...prev, ...newAttachments]) setShowAttachmentPreview(true) } const removeAttachment = (id: string) => { setAttachments((prev) => prev.filter((att) => att.id !== id)) if (attachments.length === 1) { setShowAttachmentPreview(false) } } const formatFileSize = (bytes: number) => { if (bytes === 0) return "0 Bytes" const k = 1024 const sizes = ["Bytes", "KB", "MB", "GB"] const i = Math.floor(Math.log(bytes) / Math.log(k)) return Number.parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i] } const getFileIcon = (type: string) => { if (type.startsWith("image/")) return return } const handleSendMessage = () => { if ((!newMessage.trim() && attachments.length === 0) || activeConversation === null || !currentUser) return const otherParticipantId = conversations .find((c) => c.id === activeConversation) ?.participants.find((id) => id !== currentUser.id) if (!otherParticipantId) return const newMsg = { id: Date.now(), senderId: currentUser.id, receiverId: otherParticipantId, content: newMessage || (attachments.length > 0 ? `Sent ${attachments.length} file(s)` : ""), attachments: attachments.length > 0 ? attachments : undefined, createdAt: new Date(), read: false, } // Add to messages setMessages((prev) => [...prev, newMsg]) // Update conversation setConversations((prevConversations) => prevConversations.map((conv) => conv.id === activeConversation ? { ...conv, lastMessage: newMessage || `Sent ${attachments.length} file(s)`, lastMessageDate: new Date(), } : conv, ), ) setNewMessage("") setAttachments([]) setShowAttachmentPreview(false) showToast("Message sent!", "success") } const formatTime = (date: Date) => { const now = new Date() const diffDays = Math.floor((now.getTime() - date.getTime()) / (1000 * 60 * 60 * 24)) if (diffDays === 0) { return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) } else if (diffDays === 1) { return "Yesterday" } else if (diffDays < 7) { return date.toLocaleDateString([], { weekday: "short" }) } else { return date.toLocaleDateString([], { month: "short", day: "numeric" }) } } const handleConversationSelect = (conversationId: number) => { setActiveConversation(conversationId) setShowMobileChat(true) } const handleBackToConversations = () => { setShowMobileChat(false) setActiveConversation(null) } if (!currentUser) { return (

Please Log In

You need to be logged in to access the messaging system.

) } return (

{/* Conversations Sidebar - Mobile: Full width when not in chat, Desktop: Always visible */}

Messages

setSearchQuery(e.target.value)} className="w-full bg-gray-100 rounded-full px-4 py-2 pl-10 text-sm focus:outline-none focus:ring-2 focus:ring-[#8B75AA]" />

{filteredConversations.length > 0 ? ( filteredConversations.map((conversation) => { const otherParticipant = getOtherParticipant(conversation) if (!otherParticipant) return null return ( ) }) ) : (

No conversations found

)}

{/* Chat Area - Mobile: Full width when in chat, Desktop: Always visible */}

{activeConversation !== null ? ( <> {/* Chat Header */}

{getOtherParticipant(conversations.find((c) => c.id === activeConversation))?.avatar}

{getOtherParticipant(conversations.find((c) => c.id === activeConversation))?.username}

{getOtherParticipant(conversations.find((c) => c.id === activeConversation))?.isAdmin ? "Online" : "Offline"}

{/* Messages */}

{messages.length > 0 ? ( messages .sort((a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()) .map((message) => (

{message.senderId !== currentUser.id && (

{getOtherParticipant(conversations.find((c) => c.id === activeConversation))?.avatar}

)}

{message.content}

{/* File Attachments */} {message.attachments && message.attachments.length > 0 && (

{message.attachments.map((attachment: FileAttachment) => (

{getFileIcon(attachment.type)}

{attachment.name}

{formatFileSize(attachment.size)}

))}

)}

{new Date(message.createdAt).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", })}

)) ) : (

No messages yet. Start the conversation!

)}

{/* Attachment Preview */} {showAttachmentPreview && attachments.length > 0 && (

{attachments.length} file(s) selected

{attachments.map((attachment) => (

{getFileIcon(attachment.type)} {attachment.name}

))}

)} {/* Message Input */}

setNewMessage(e.target.value)}
                        onKeyPress={(e) => {
                          if (e.key === "Enter" && !e.shiftKey) {
                            e.preventDefault()
                            handleSendMessage()
                          }
                        }}
                        className="w-full bg-gray-100 rounded-lg px-3 md:px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[#8B75AA] resize-none"
                        rows={1}
                        style={{ minHeight: "36px", maxHeight: "120px" }}
                      />
                    </div>
                    <button
                      onClick={handleSendMessage}
                      disabled={!newMessage.trim() && attachments.length === 0}
                      className={`p-2 rounded-full transition-colors flex-shrink-0 ${
                        newMessage.trim() || attachments.length > 0
                          ? "bg-[#8B75AA] text-white hover:bg-[#7A6699]"
                          : "bg-gray-200 text-gray-400 cursor-not-allowed"
                      }`}
                    >
                      <Send size={18} />
                    </button>
                  </div>
                </div>
              </>
            ) : (
              <div className="h-full flex items-center justify-center p-4">
                <div className="text-center">
                  <div className="w-12 md:w-16 h-12 md:h-16 bg-[#8B75AA] rounded-full flex items-center justify-center text-white text-xl md:text-2xl mx-auto mb-4">
                    💬
                  </div>
                  <h3 className="text-lg md:text-xl font-bold text-[#2C1A1D] mb-2">Your Messages</h3>
                  <p className="text-gray-500 text-sm md:text-base max-w-xs">
                    Select a conversation to start messaging
                  </p>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]png:file="public/images/virtgold-chat-reference.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-zE285uHSYBpofP9t2JUM5tpxCaMgw2.png" isMerged="true"
[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Navbar } from "@/components/navbar"
import { Hero } from "@/components/hero"
import { QuestBoard } from "@/components/quest-board"
import { GuildHall } from "@/components/guild-hall"
import { Settings } from "@/components/settings"
import { About } from "@/components/about"
import { AuthModal } from "@/components/auth-modal"
import { PostQuestModal } from "@/components/post-quest-modal"
import { EnhancedCreateGuildModal } from "@/components/enhanced-create-guild-modal"
import { QuestDetailsModal } from "@/components/quest-details-modal"
import { ApplicationsModal } from "@/components/applications-modal"
import { EditQuestModal } from "@/components/edit-quest-modal"
import { GoldSystemModal } from "@/components/gold-system-modal"
import { Toast } from "@/components/toast"
import { Footer } from "@/components/footer"
import { Profile } from "@/components/profile"
import { UserSearch } from "@/components/user-search"
import { MessagingSystem } from "@/components/messaging-system"
import { QuestManagement } from "@/components/quest-management"
import { EnhancedGuildManagement } from "@/components/enhanced-guild-management"
import { AdminPanel } from "@/components/admin-panel"
import { AIChatbot } from "@/components/ai-chatbot"
import type { User, Quest, Guild, GuildApplication } from "@/lib/types"
import { mockUsers, mockQuests, mockGuilds } from "@/lib/mock-data"
import { authService } from "@/lib/auth-service"
import { addSpendingRecord } from "@/lib/spending-utils"

declare global {
  interface Window {
    openPostQuestModal?: () => void
    openCreateGuildModal?: () => void
    openGoldPurchaseModal?: () => void
    openAuthModal?: () => void
    showToast?: (message: string, type?: string) => void
    updateCompletedQuests?: (quest: Quest) => void
    joinGuildTest?: (userId: number, guildName: string) => void
  }
}

export default function Home() {
  const [activeSection, setActiveSection] = useState<string>("home")
  const [showAuthModal, setShowAuthModal] = useState<boolean>(false)
  const [authMode, setAuthMode] = useState<"login" | "register" | "forgot">("login")
  const [showPostQuestModal, setShowPostQuestModal] = useState<boolean>(false)
  const [showCreateGuildModal, setShowCreateGuildModal] = useState<boolean>(false)
  const [showQuestDetailsModal, setShowQuestDetailsModal] = useState<boolean>(false)
  const [showApplicationsModal, setShowApplicationsModal] = useState<boolean>(false)
  const [showEditQuestModal, setShowEditQuestModal] = useState<boolean>(false)
  const [showGoldPurchaseModal, setShowGoldPurchaseModal] = useState<boolean>(false)
  const [selectedQuest, setSelectedQuest] = useState<Quest | null>(null)
  const [selectedGuild, setSelectedGuild] = useState<Guild | null>(null)
  const [currentUser, setCurrentUser] = useState<User | null>(null)
  const [toast, setToast] = useState<{ message: string; type: string } | null>(null)
  const [users, setUsers] = useState<User[]>(mockUsers || [])
  const [quests, setQuests] = useState<Quest[]>(mockQuests || [])
  const [guilds, setGuilds] = useState<Guild[]>(mockGuilds || [])
  const [guildApplications, setGuildApplications] = useState<GuildApplication[]>([])
  const [isLoading, setIsLoading] = useState<boolean>(false)

// Expose modal functions to window
  useEffect(() => {
    window.openPostQuestModal = () => setShowPostQuestModal(true)
    window.openCreateGuildModal = () => setShowCreateGuildModal(true)
    window.openGoldPurchaseModal = () => setShowGoldPurchaseModal(true)
    window.openAuthModal = () => {
      setAuthMode("login")
      setShowAuthModal(true)
    }
    window.showToast = showToast

return () => {
      // Clean up
      window.openPostQuestModal = undefined
      window.openCreateGuildModal = undefined
      window.openGoldPurchaseModal = undefined
      window.openAuthModal = undefined
      window.showToast = undefined
    }
  }, [])

// Check for existing login
  useEffect(() => {
    const checkAuth = async () => {
      try {
        const user = await authService.getCurrentUser()
        if (user) {
          setCurrentUser(user)
        }
      } catch (error) {
        console.error("Error checking authentication:", error)
      }
    }
    checkAuth()
  }, [])

const handleLogin = async (credentials: { email: string; password: string }) => {
    try {
      setIsLoading(true)
      const user = await authService.login(credentials.email, credentials.password)
      setCurrentUser(user)
      setShowAuthModal(false)
      showToast("Welcome back to the PeerQuest Tavern!", "success")
    } catch (error: any) {
      showToast(error.message || "Login failed. Please try again.", "error")
    } finally {
      setIsLoading(false)
    }
  }

const handleRegister = async (userData: {
    username: string
    email: string
    password: string
    confirmPassword: string
  }) => {
    try {
      setIsLoading(true)
      const user = await authService.register(userData.username, userData.email, userData.password)
      setCurrentUser(user)
      setShowAuthModal(false)
      showToast("Welcome to the PeerQuest Tavern! Your account has been created.", "success")
    } catch (error: any) {
      showToast(error.message || "Registration failed. Please try again.", "error")
    } finally {
      setIsLoading(false)
    }
  }

const handleForgotPassword = async (email: string) => {
    try {
      setIsLoading(true)
      await authService.forgotPassword(email)
      showToast("Password reset instructions have been sent to your email.", "success")
      setAuthMode("login")
    } catch (error: any) {
      showToast(error.message || "Failed to send reset instructions. Please try again.", "error")
    } finally {
      setIsLoading(false)
    }
  }

const handleLogout = () => {
    authService.logout()
    setCurrentUser(null)
    setActiveSection("home")
    showToast("You have been logged out.", "info")
  }

const showToast = (message: string, type = "info") => {
    setToast({ message, type })
    setTimeout(() => setToast(null), 5000)
  }

const handleQuestSubmit = (questData: Partial<Quest> & { questCost?: number }) => {
    if (!currentUser) return

// Deduct gold from user for quest reward and add spending record
    if (questData.questCost) {
      const updatedUser = addSpendingRecord(
        currentUser,
        questData.questCost,
        "quest_posting",
        `Posted quest: ${questData.title}`,
      )
      setCurrentUser({ ...updatedUser, gold: updatedUser.gold - questData.questCost })
    }

const newQuest: Quest = {
      id: Date.now(),
      title: questData.title || "Untitled Quest",
      description: questData.description || "",
      category: questData.category || "misc",
      difficulty: questData.difficulty || "medium",
      reward: questData.reward || 100,
      xp: questData.xp || 50,
      status: "open",
      poster: currentUser,
      createdAt: new Date(),
      deadline: questData.deadline || new Date(Date.now() + 7 * 24 * 60 * 60 * 1000),
      applicants: [],
      isGuildQuest: questData.isGuildQuest || false,
      guildId: questData.guildId,
      guildReward: questData.guildReward || 0,
    }

setQuests([newQuest, ...quests])
    setShowPostQuestModal(false)
    showToast(`Quest posted! ${questData.questCost} gold deducted for reward pool.`, "success")
  }

const handleGuildSubmit = (guildData: Partial<Guild> & { guildCreationCost?: number }) => {
    if (!currentUser) return

// Deduct gold from user for guild creation and add spending record
    if (guildData.guildCreationCost) {
      const updatedUser = addSpendingRecord(
        currentUser,
        guildData.guildCreationCost,
        "guild_creation",
        `Created guild: ${guildData.name}`,
      )
      setCurrentUser({ ...updatedUser, gold: updatedUser.gold - guildData.guildCreationCost })
    }

const newGuild: Guild = {
      id: Date.now(),
      name: guildData.name || "Untitled Guild",
      description: guildData.description || "",
      emblem: guildData.emblem || "🏆",
      specialization: guildData.specialization || "general",
      category: guildData.category || "Other",
      members: 1,
      membersList: [currentUser.id],
      poster: currentUser,
      admins: [currentUser.id],
      createdAt: new Date(),
      applications: [],
      funds: 0,
      settings: {
        joinRequirements: {
          manualApproval: true,
          minimumLevel: 1,
          requiresApplication: true,
        },
        visibility: {
          publiclyVisible: true,
          showOnHomePage: true,
          allowDiscovery: true,
        },
        permissions: {
          whoCanPost: "members",
          whoCanInvite: "members",
          whoCanKick: "admins",
        },
      },
      roles: [],
      socialLinks: [],
    }

setGuilds([newGuild, ...guilds])
    setShowCreateGuildModal(false)
    showToast(`Guild created! ${guildData.guildCreationCost} gold deducted for guild registration.`, "success")
  }

const handleQuestClick = (quest: Quest) => {
    setSelectedQuest(quest)
    setShowQuestDetailsModal(true)
  }

const handleEditQuest = (quest: Quest) => {
    setSelectedQuest(quest)
    setShowEditQuestModal(true)
  }

const handleQuestSave = (updatedQuest: Quest) => {
    setQuests((prevQuests) => prevQuests.map((quest) => (quest.id === updatedQuest.id ? updatedQuest : quest)))
    setShowEditQuestModal(false)
  }

const handleApplyForGuild = (guildId: number, message: string) => {
    if (!currentUser) {
      showToast("Please log in to apply for guilds", "error")
      setShowAuthModal(true)
      return
    }

const newApplication: GuildApplication = {
      id: Date.now(),
      userId: currentUser.id,
      username: currentUser.username,
      avatar: currentUser.avatar,
      message,
      status: "pending",
      appliedAt: new Date(),
    }

// Add application to guild
    setGuilds((prevGuilds) =>
      prevGuilds.map((guild) => {
        if (guild.id === guildId) {
          return {
            ...guild,
            applications: [...(guild.applications || []), newApplication],
          }
        }
        return guild
      }),
    )

setGuildApplications([...guildApplications, newApplication])
    showToast("Guild application submitted successfully!", "success")
  }

const handleGoldPurchase = (amount: number) => {
    if (!currentUser) return

const updatedUser = {
      ...currentUser,
      gold: (currentUser.gold || 0) + amount,
    }

setCurrentUser(updatedUser)
    setShowGoldPurchaseModal(false)
    showToast(`Successfully purchased ${amount} gold!`, "success")
  }

const handleQuestCompletion = (questId: number) => {
    const quest = quests.find((q) => q.id === questId)
    if (!quest || !currentUser) return

// Update quest status
    setQuests((prevQuests) =>
      prevQuests.map((q) =>
        q.id === questId
          ? {
              ...q,
              status: "completed" as const,
              completedAt: new Date(),
            }
          : q,
      ),
    )

// Handle guild quest rewards
    if (quest.isGuildQuest && quest.guildId && quest.guildReward) {
      setGuilds((prevGuilds) =>
        prevGuilds.map((guild) => {
          if (guild.id === quest.guildId) {
            return {
              ...guild,
              funds: (guild.funds || 0) + quest.guildReward!,
            }
          }
          return guild
        }),
      )

showToast(
        `Quest completed! ${quest.reward} gold earned and ${quest.guildReward} gold added to guild funds!`,
        "success",
      )
    } else {
      showToast(`Quest completed! ${quest.reward} gold earned!`, "success")
    }

// Update user gold and XP
    setCurrentUser((prevUser) => {
      if (!prevUser) return null
      return {
        ...prevUser,
        gold: prevUser.gold + quest.reward,
        xp: prevUser.xp + quest.xp,
      }
    })
  }

return (
    <main className="min-h-screen bg-[#F4F0E6]">
      <Navbar
        currentUser={currentUser}
        setActiveSection={setActiveSection}
        handleLogout={handleLogout}
        openAuthModal={() => {
          setAuthMode("login")
          setShowAuthModal(true)
        }}
        openGoldPurchaseModal={() => setShowGoldPurchaseModal(true)}
        openPostQuestModal={() => setShowPostQuestModal(true)}
        openCreateGuildModal={() => setShowCreateGuildModal(true)}
      />

{activeSection === "home" && (
        <Hero
          currentUser={currentUser}
          openAuthModal={() => {
            setAuthMode("login")
            setShowAuthModal(true)
          }}
          openRegisterModal={() => {
            setAuthMode("register")
            setShowAuthModal(true)
          }}
          navigateToSection={setActiveSection}
        />
      )}

{activeSection === "quest-board" && (
        <QuestBoard
          quests={quests}
          currentUser={currentUser}
          openQuestDetails={handleQuestClick}
          openPostQuestModal={() => setShowPostQuestModal(true)}
          openApplications={(quest) => {
            setSelectedQuest(quest)
            setShowApplicationsModal(true)
          }}
          openEditQuestModal={handleEditQuest}
        />
      )}

{activeSection === "guild-hall" && (
        <GuildHall
          guilds={guilds}
          currentUser={currentUser}
          openCreateGuildModal={() => setShowCreateGuildModal(true)}
          handleApplyForGuild={handleApplyForGuild}
          showToast={showToast}
        />
      )}

{activeSection === "profile" && currentUser && (
        <Profile currentUser={currentUser} quests={quests} guilds={guilds} navigateToSection={setActiveSection} />
      )}

{activeSection === "guilds" && <div>{/* Placeholder for guilds section */}</div>}

{activeSection === "settings" && currentUser && (
        <Settings
          user={currentUser}
          updateSettings={(updatedUser) => setCurrentUser({ ...currentUser, ...updatedUser })}
          showToast={showToast}
        />
      )}

{activeSection === "about" && <About />}

{activeSection === "search" && (
        <UserSearch users={users} quests={quests} guilds={guilds} currentUser={currentUser} showToast={showToast} />
      )}

{activeSection === "messages" && currentUser && (
        <MessagingSystem currentUser={currentUser} showToast={showToast} />
      )}

{activeSection === "quest-management" && currentUser && (
        <QuestManagement
          quests={quests}
          currentUser={currentUser}
          onQuestStatusChange={(questId, newStatus) => {
            if (newStatus === "completed") {
              handleQuestCompletion(questId)
            } else {
              const updatedQuests = quests.map((q) => (q.id === questId ? { ...q, status: newStatus } : q))
              setQuests(updatedQuests)
              showToast(`Quest status updated to ${newStatus}`, "success")
            }
          }}
          setQuests={setQuests}
          showToast={showToast}
        />
      )}

{activeSection === "guild-management" && currentUser && (
        <EnhancedGuildManagement
          guilds={guilds}
          guildApplications={guildApplications}
          currentUser={currentUser}
          showToast={showToast}
          onViewGuild={(guild) => {
            showToast(`Viewing guild: ${guild.name}`, "info")
          }}
          onEditGuild={(guild) => {
            showToast(`Editing guild: ${guild.name}`, "info")
          }}
          onDeleteGuild={(guildId) => {
            setGuilds(guilds.filter((g) => g.id !== Number.parseInt(guildId)))
            showToast("Guild deleted successfully", "success")
          }}
          onApproveApplication={(applicationId) => {
            const application = guildApplications.find((app) => app.id.toString() === applicationId)
            if (application) {
              const updatedApplications = guildApplications.map((app) =>
                app.id.toString() === applicationId ? { ...app, status: "accepted" as const } : app,
              )
              setGuildApplications(updatedApplications)

const updatedGuilds = guilds.map((guild) => ({
                ...guild,
                applications: guild.applications.map((app) =>
                  app.id.toString() === applicationId ? { ...app, status: "accepted" as const } : app,
                ),
              }))
              setGuilds(updatedGuilds)

showToast("Application approved", "success")
            }
          }}
          onRejectApplication={(applicationId) => {
            const updatedApplications = guildApplications.map((app) =>
              app.id.toString() === applicationId ? { ...app, status: "rejected" as const } : app,
            )
            setGuildApplications(updatedApplications)

const updatedGuilds = guilds.map((guild) => ({
              ...guild,
              applications: guild.applications.map((app) =>
                app.id.toString() === applicationId ? { ...app, status: "rejected" as const } : app,
              ),
            }))
            setGuilds(updatedGuilds)

showToast("Application rejected", "success")
          }}
          onManageMembers={(guild) => {
            showToast(`Managing members for guild: ${guild.name}`, "info")
          }}
        />
      )}

{activeSection === "admin" && currentUser && currentUser.roles && currentUser.roles.includes("admin") && (
        <AdminPanel
          currentUser={currentUser}
          users={users}
          quests={quests}
          guilds={guilds}
          setUsers={setUsers}
          setQuests={setQuests}
          setGuilds={setGuilds}
          showToast={showToast}
        />
      )}

{/* AI Chatbot */}
      <AIChatbot currentUser={currentUser} />

{/* Modals */}
      <AuthModal
        isOpen={showAuthModal}
        onClose={() => setShowAuthModal(false)}
        mode={authMode}
        setMode={setAuthMode}
        onLogin={handleLogin}
        onRegister={handleRegister}
        onForgotPassword={handleForgotPassword}
      />

<PostQuestModal
        isOpen={showPostQuestModal}
        onClose={() => setShowPostQuestModal(false)}
        currentUser={currentUser}
        onSubmit={handleQuestSubmit}
        guilds={guilds}
      />

<EnhancedCreateGuildModal
        isOpen={showCreateGuildModal}
        onClose={() => setShowCreateGuildModal(false)}
        currentUser={currentUser}
        onSubmit={handleGuildSubmit}
        showToast={showToast}
      />

{selectedQuest && (
        <QuestDetailsModal
          isOpen={showQuestDetailsModal}
          onClose={() => setShowQuestDetailsModal(false)}
          quest={selectedQuest}
          currentUser={currentUser}
          isAuthenticated={!!currentUser}
          setQuests={setQuests}
          showToast={showToast}
          setAuthModalOpen={setShowAuthModal}
          openEditQuestModal={handleEditQuest}
        />
      )}

<ApplicationsModal
        isOpen={showApplicationsModal}
        onClose={() => setShowApplicationsModal(false)}
        quests={quests}
        currentUser={currentUser}
        setQuests={setQuests}
      />

<EditQuestModal
        isOpen={showEditQuestModal}
        onClose={() => setShowEditQuestModal(false)}
        quest={selectedQuest}
        onSave={handleQuestSave}
        showToast={showToast}
      />

<GoldSystemModal
        isOpen={showGoldPurchaseModal}
        onClose={() => setShowGoldPurchaseModal(false)}
        currentUser={currentUser}
        setCurrentUser={setCurrentUser}
        showToast={showToast}
      />

{/* Toast Notifications */}
      {toast && <Toast message={toast.message} type={toast.type} onClose={() => setToast(null)} />}
    </main>
  )
}
[V0_FILE]typescriptreact:file="app/api/chat/route.ts" isEdit="true" isMerged="true"
import { streamText } from "ai"
import { openai } from "@ai-sdk/openai"
import type { NextRequest } from "next/server"

export async function POST(req: NextRequest) {
  try {
    const { messages, currentUser } = (await req.json()) as {
      messages: Array<{ role: "user" | "assistant"; content: string }>
      currentUser?: { username?: string; level?: number; gold?: number }
    }

const userName = currentUser?.username || "adventurer"
    const userLevel = currentUser?.level || 1
    const userGold = currentUser?.gold || 0

const systemPrompt = `You are the Tavern Keeper's AI assistant in PeerQuest Tavern, a medieval-themed quest and guild platform.

CONTEXT:
- User: ${userName} (Level ${userLevel}, ${userGold} gold)
- Platform features: Quest Board, Guild Hall, Gold System, XP/Leveling, Messaging, User Profiles
- Users can post quests, join guilds, earn gold and XP, and collaborate on projects

PERSONALITY:
- Speak like a friendly medieval tavern keeper
- Use terms like "adventurer", "quest", "guild", "tavern"
- Be helpful and encouraging
- Keep responses concise but informative

CAPABILITIES:
- Help with quest posting and management
- Explain guild system and benefits  
- Guide users through platform features
- Provide tips for earning gold and XP
- Answer questions about the tavern community

Always stay in character and be helpful with PeerQuest Tavern related topics.`

const result = await streamText({
      model: openai("deepseek-r1", {
        apiKey: "sk-d71540ab1ae04e7c9b3073430b2e7e07",
        baseURL: "https://api.deepseek.com/v1",
      }),
      system: systemPrompt,
      messages,
      maxTokens: 300,
      temperature: 0.7,
    })

return result.toDataStreamResponse()
  } catch (error) {
    console.error("Chat API Error:", error)

// More detailed error logging
    if (error instanceof Error) {
      console.error("Error message:", error.message)
      console.error("Error stack:", error.stack)
    }

return new Response(
      JSON.stringify({
        error:
          "I apologize, but I'm having trouble connecting to my knowledge base right now. Please try again in a moment.",
        details: error instanceof Error ? error.message : "Unknown error",
      }),
      {
        status: 500,
        headers: { "Content-Type": "application/json" },
      },
    )
  }
}
[V0_FILE]typescriptreact:file="components/ai-chatbot.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"
import { useState, useRef, useEffect } from "react"
import { MessageCircle, X, Send, Bot, User, Loader2, Sparkles } from "lucide-react"
import type { User as UserType } from "@/lib/types"

interface Message {
  id: string
  role: "user" | "assistant"
  content: string
}

interface AIChatbotProps {
  currentUser: UserType | null
}

export function AIChatbot({ currentUser }: AIChatbotProps) {
  const [isOpen, setIsOpen] = useState(false)
  const [messages, setMessages] = useState<Message[]>([
    {
      id: "welcome",
      role: "assistant",
      content: `Greetings, ${currentUser?.username || "adventurer"}! I'm the Tavern Keeper's AI assistant. How can I help you with your quests today?`,
    },
  ])
  const [input, setInput] = useState("")
  const [isLoading, setIsLoading] = useState(false)
  const [showSuggestions, setShowSuggestions] = useState(true)
  const messagesEndRef = useRef<HTMLDivElement>(null)
  const inputRef = useRef<HTMLInputElement>(null)

const suggestionPrompts = [
    "🎯 How do I post a quest?",
    "🏰 Tell me about guilds",
    "💰 How do I earn gold?",
    "📈 How does leveling work?",
    "🔍 Find me good quests",
    "👥 How do I join a guild?",
    "💬 How does messaging work?",
    "⚔️ What are quest types?",
    "🏆 Show me achievements",
    "🎮 Getting started guide",
    "💎 What can I buy with gold?",
    "🛡️ Guild roles explained",
    "📊 Check my progress",
    "🎪 What's new in the tavern?",
    "🔧 Account settings help",
  ]

const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
  }

useEffect(() => {
    scrollToBottom()
  }, [messages])

useEffect(() => {
    if (isOpen && inputRef.current) {
      inputRef.current.focus()
    }
  }, [isOpen])

const generateAIResponse = (userMessage: string): string => {
    const userName = currentUser?.username || "adventurer"
    const userLevel = currentUser?.level || 1
    const userGold = currentUser?.gold || 0

const lowerMessage = userMessage.toLowerCase()

// Greeting responses
    if (
      lowerMessage.includes("hello") ||
      lowerMessage.includes("hi") ||
      lowerMessage.includes("hey") ||
      lowerMessage.includes("greetings")
    ) {
      const greetings = [
        `Well met, ${userName}! Welcome back to the tavern. I see you're Level ${userLevel} with ${userGold} gold. What adventure brings you here today?`,
        `Ah, ${userName}! Good to see you again! Your Level ${userLevel} status is impressive. How can this old tavern keeper assist you?`,
        `Greetings, brave ${userName}! The tavern is bustling today. With your ${userGold} gold, you're well-equipped for any quest!`,
        `Welcome, ${userName}! I've been expecting you. Your reputation as a Level ${userLevel} adventurer precedes you!`,
      ]
      return greetings[Math.floor(Math.random() * greetings.length)]
    }

// Quest posting responses
    if (lowerMessage.includes("post") && lowerMessage.includes("quest")) {
      return `Excellent question, ${userName}! To post a quest:\n\n1. 📋 Click "Post a Quest" on the Quest Board\n2. 📝 Write a clear, detailed description\n3. 💰 Set a fair reward (${userGold} gold available)\n4. ⏰ Choose a deadline\n5. 🏷️ Add relevant tags\n6. 🚀 Publish and watch adventurers apply!\n\nRemember: Clear quests with fair rewards attract the best talent!`
    }

// Quest finding responses
    if ((lowerMessage.includes("find") || lowerMessage.includes("good")) && lowerMessage.includes("quest")) {
      return `Looking for worthy quests, ${userName}? Here's my advice:\n\n🎯 **Browse by Category**: Check different quest types\n📊 **Match Your Level**: Look for Level ${userLevel} appropriate tasks\n💰 **Check Rewards**: Ensure fair compensation\n⭐ **Read Reviews**: See quest giver ratings\n🏷️ **Use Filters**: Sort by deadline, reward, difficulty\n\nStart with quests offering 50-200 gold for your level!`
    }

// Guild creation responses
    if (lowerMessage.includes("create") && lowerMessage.includes("guild")) {
      return `Starting your own guild, ${userName}? Ambitious! Here's how:\n\n🏰 **Visit Guild Hall** → "Create Guild"\n📝 **Choose a Name**: Make it memorable!\n🎨 **Design Banner**: Show your guild's identity\n📋 **Write Description**: Attract like-minded adventurers\n💰 **Pay Fee**: 500 gold (you have ${userGold})\n👥 **Invite Members**: Start with friends\n⚖️ **Set Rules**: Establish guild culture\n\nA strong guild becomes your adventuring family!`
    }

// Guild joining responses
    if (lowerMessage.includes("join") && lowerMessage.includes("guild")) {
      return `Seeking a guild family, ${userName}? Wise choice!\n\n🔍 **Browse Guilds**: Visit the Guild Hall\n📊 **Check Stats**: Member count, activity level\n📖 **Read Descriptions**: Find your perfect match\n💬 **Join Their Chat**: Get a feel for the community\n📝 **Apply**: Send a thoughtful application\n⏳ **Wait for Response**: Guild leaders review applications\n\nLook for active guilds with 10-50 members for the best experience!`
    }

// Gold earning responses
    if (lowerMessage.includes("earn") && (lowerMessage.includes("gold") || lowerMessage.includes("money"))) {
      return `Ah, seeking fortune, ${userName}? Here are the best ways to earn gold:\n\n⚔️ **Complete Quests**: 50-500 gold per quest\n🏆 **Daily Challenges**: 25-100 gold daily\n🏰 **Guild Bonuses**: Extra rewards for guild members\n🎯 **Skill Bonuses**: Higher level = better rewards\n💎 **Rare Achievements**: Special gold bonuses\n🔄 **Referrals**: Bring friends, earn gold\n📈 **Level Up**: Unlock higher-paying quests\n\nYour current ${userGold} gold shows you're on the right path!`
    }

// Gold spending responses
    if (
      (lowerMessage.includes("spend") || lowerMessage.includes("buy") || lowerMessage.includes("purchase")) &&
      lowerMessage.includes("gold")
    ) {
      return `Wondering how to spend your ${userGold} gold, ${userName}? Here are your options:\n\n🎯 **Post Quests**: Hire other adventurers\n🏰 **Guild Services**: Donations, upgrades\n🛡️ **Profile Upgrades**: Premium features\n🎨 **Customization**: Avatars, banners, themes\n💬 **Messaging**: Premium chat features\n🏆 **Achievements**: Unlock special rewards\n📊 **Analytics**: Advanced progress tracking\n\nInvest wisely to grow your reputation!`
    }

// Leveling responses
    if (lowerMessage.includes("level") || lowerMessage.includes("xp") || lowerMessage.includes("experience")) {
      return `Seeking to grow stronger, ${userName}? At Level ${userLevel}, you're doing great!\n\n📈 **Gain XP by**:\n• Completing quests (+50-200 XP)\n• Guild participation (+25 XP daily)\n• Helping others (+10-50 XP)\n• Daily login (+5 XP)\n• Achievements (+100-500 XP)\n\n🎯 **Level Benefits**:\n• Higher quest rewards\n• Guild leadership roles\n• Premium features\n• Increased reputation\n\nNext level needs ${(userLevel + 1) * 100} XP total!`
    }

// Messaging system responses
    if (lowerMessage.includes("messag") || lowerMessage.includes("chat") || lowerMessage.includes("talk")) {
      return `Communication is key in our tavern, ${userName}!\n\n💬 **Direct Messages**:\n• Click any user's profile\n• Send private messages\n• Share files and images\n• Voice messages (premium)\n\n🏰 **Guild Chat**:\n• Real-time group discussions\n• Quest coordination\n• File sharing\n• Announcement channels\n\n📱 **Features**:\n• Mobile notifications\n• Message history\n• Emoji reactions\n• @mentions\n\nStay connected with your fellow adventurers!`
    }

// Quest types responses
    if (lowerMessage.includes("quest") && lowerMessage.includes("type")) {
      return `Many quest types await you, ${userName}!\n\n⚔️ **Combat Quests**: Battle challenges, raids\n🧩 **Puzzle Quests**: Brain teasers, riddles\n🎨 **Creative Quests**: Art, writing, design\n🔧 **Technical Quests**: Coding, debugging\n📚 **Research Quests**: Information gathering\n🏃 **Speed Quests**: Time-limited challenges\n👥 **Group Quests**: Team collaboration\n🎯 **Daily Quests**: Regular small tasks\n🏆 **Epic Quests**: Long-term adventures\n\nChoose quests that match your skills and interests!`
    }

// Achievements responses
    if (lowerMessage.includes("achievement") || lowerMessage.includes("reward") || lowerMessage.includes("badge")) {
      return `Achievements showcase your prowess, ${userName}!\n\n🏆 **Quest Master**: Complete 100 quests\n👑 **Guild Leader**: Lead a successful guild\n💰 **Gold Hoarder**: Accumulate 10,000 gold\n⚡ **Speed Runner**: Complete quests quickly\n🤝 **Helper**: Assist 50+ adventurers\n📈 **Level Legend**: Reach Level 50\n🎯 **Specialist**: Master specific quest types\n🌟 **Tavern Regular**: 365 days active\n\nEach achievement grants gold, XP, and special titles!`
    }

// Getting started responses
    if (
      lowerMessage.includes("start") ||
      lowerMessage.includes("new") ||
      lowerMessage.includes("begin") ||
      lowerMessage.includes("guide")
    ) {
      return `Welcome to PeerQuest Tavern, ${userName}! Here's your adventure roadmap:\n\n🎯 **Step 1**: Browse the Quest Board\n🏰 **Step 2**: Join or create a guild\n💰 **Step 3**: Complete your first quest\n📈 **Step 4**: Level up and earn gold\n👥 **Step 5**: Connect with other adventurers\n🏆 **Step 6**: Unlock achievements\n\n💡 **Pro Tips**:\n• Start with easy quests\n• Join an active guild\n• Be helpful to others\n• Check in daily for bonuses\n\nYour journey begins now!`
    }

// Account settings responses
    if (lowerMessage.includes("setting") || lowerMessage.includes("account") || lowerMessage.includes("profile")) {
      return `Managing your adventurer profile, ${userName}?\n\n⚙️ **Profile Settings**:\n• Update avatar and banner\n• Edit bio and skills\n• Set availability status\n• Privacy controls\n\n🔔 **Notifications**:\n• Quest updates\n• Guild messages\n• Achievement alerts\n• Email preferences\n\n🔒 **Security**:\n• Change password\n• Two-factor authentication\n• Login history\n• Account recovery\n\nKeep your profile updated to attract better quests!`
    }

// Progress tracking responses
    if (lowerMessage.includes("progress") || lowerMessage.includes("stat") || lowerMessage.includes("track")) {
      return `Let's review your progress, ${userName}!\n\n📊 **Current Stats**:\n• Level: ${userLevel}\n• Gold: ${userGold}\n• Quests Completed: ${Math.floor(userLevel * 3)}\n• Guild Rank: ${userLevel > 10 ? "Veteran" : "Novice"}\n\n📈 **This Month**:\n• XP Gained: ${userLevel * 50}\n• Gold Earned: ${userGold}\n• New Connections: ${Math.floor(userLevel / 2)}\n\n🎯 **Goals**:\n• Next Level: ${(userLevel + 1) * 100} XP needed\n• Gold Target: ${Math.max(1000, userGold * 2)}\n• Quest Milestone: ${Math.floor(userLevel * 3) + 10}\n\nYou're making excellent progress!`
    }

// What's new responses
    if (lowerMessage.includes("new") && lowerMessage.includes("tavern")) {
      return `Exciting updates in our tavern, ${userName}!\n\n🆕 **Latest Features**:\n• AI Assistant (that's me!)\n• Enhanced guild chat\n• Mobile app improvements\n• New quest categories\n• Achievement system overhaul\n\n🎉 **Events**:\n• Weekly guild tournaments\n• Monthly quest challenges\n• Seasonal celebrations\n• Community contests\n\n🔜 **Coming Soon**:\n• Voice chat in guilds\n• Quest templates\n• Advanced analytics\n• Mentorship program\n\nStay tuned for more adventures!`
    }

// Guild roles responses
    if (lowerMessage.includes("guild") && lowerMessage.includes("role")) {
      return `Guild hierarchy brings order to chaos, ${userName}!\n\n👑 **Guild Master**: Full control, can disband guild\n⚔️ **Officers**: Manage members, moderate chat\n🛡️ **Veterans**: Experienced members, mentor others\n👥 **Members**: Full guild privileges\n🆕 **Recruits**: New members, limited permissions\n\n🎯 **Role Benefits**:\n• Higher roles = more privileges\n• Special chat channels\n• Quest posting rights\n• Treasury access\n• Event organization\n\nEarn promotions through dedication and helpfulness!`
    }

// Help with specific features
    if (lowerMessage.includes("help")) {
      return `I'm here to help, ${userName}! What specific area interests you?\n\n🎯 **Popular Topics**:\n• Quest posting and completion\n• Guild creation and management\n• Gold earning strategies\n• Leveling and XP system\n• Messaging and communication\n• Account settings\n• Achievement hunting\n\n💡 **Quick Tips**:\n• Use the search bar for specific quests\n• Join guild chat for real-time help\n• Check your notifications regularly\n• Complete daily challenges\n\nWhat would you like to know more about?`
    }

// Personality responses
    if (lowerMessage.includes("joke") || lowerMessage.includes("funny") || lowerMessage.includes("laugh")) {
      const jokes = [
        `Why did the adventurer bring a ladder to the tavern? Because they heard the drinks were on the house! *chuckles in tavern keeper*`,
        `What do you call a guild with no members? A guild-ty pleasure! *slaps knee*`,
        `Why don't quest givers ever get lost? Because they always know the way to adventure! *winks*`,
        `What's an adventurer's favorite type of music? Quest-ion and answer! *grins widely*`,
        `Why did the gold piece go to therapy? It had too many issues with change! *chortles*`,
      ]
      return (
        jokes[Math.floor(Math.random() * jokes.length)] +
        `\n\nBut seriously, ${userName}, what quest assistance do you need?`
      )
    }

if (
      lowerMessage.includes("tavern keeper") ||
      lowerMessage.includes("who are you") ||
      lowerMessage.includes("about you")
    ) {
      return `I'm the AI assistant to our beloved Tavern Keeper, ${userName}! I've learned from years of watching adventurers come and go, quests completed and guilds formed.\n\n🤖 **My Purpose**:\n• Guide new adventurers\n• Answer quest questions\n• Explain guild systems\n• Share tavern wisdom\n• Provide encouragement\n\n📚 **My Knowledge**:\n• Every quest type and strategy\n• Guild management best practices\n• Gold earning techniques\n• Platform features and updates\n\nI'm here 24/7 to help you succeed in your adventures!`
    }

// Default helpful response with suggestions
    const suggestions = [
      "quest posting strategies",
      "guild joining tips",
      "gold earning methods",
      "leveling techniques",
      "achievement hunting",
      "messaging features",
      "profile optimization",
    ]
    const randomSuggestion = suggestions[Math.floor(Math.random() * suggestions.length)]

return `Interesting question, ${userName}! While I specialize in tavern matters, I'm always eager to help.\n\n🤔 **Perhaps you're interested in**:\n• ${randomSuggestion}\n• Platform navigation\n• Community guidelines\n• Technical support\n\n💡 **Try asking about**:\n"How do I post a quest?"\n"Tell me about guilds"\n"How do I earn more gold?"\n\nWhat specific aspect of the tavern would you like to explore?`
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!input.trim() || isLoading) return

const userMessage = input.trim()
    const newUserMessage: Message = {
      id: Date.now().toString(),
      role: "user",
      content: userMessage,
    }

setMessages((prev) => [...prev, newUserMessage])
    setInput("")
    setIsLoading(true)
    setShowSuggestions(false)

// Simulate AI thinking time
    setTimeout(
      () => {
        const aiResponse: Message = {
          id: (Date.now() + 1).toString(),
          role: "assistant",
          content: generateAIResponse(userMessage),
        }
        setMessages((prev) => [...prev, aiResponse])
        setIsLoading(false)
      },
      1000 + Math.random() * 1500,
    ) // Random delay between 1-2.5 seconds
  }

const handleSuggestionClick = (suggestion: string) => {
    const cleanSuggestion = suggestion.replace(/^[🎯🏰💰📈🔍👥💬⚔️🏆🎮💎🛡️📊🎪🔧]\s/u, "")
    setInput(cleanSuggestion)
    setShowSuggestions(false)
    if (inputRef.current) {
      inputRef.current.focus()
    }
  }

const handleKeyPress = (e: React.KeyboardEvent) => {
    if (e.key === "Enter" && !e.shiftKey) {
      e.preventDefault()
      handleSubmit(e as any)
    }
  }

return (
    <>
      {/* Floating Chat Button */}
      <div className="fixed bottom-6 right-6 z-50">
        <button
          onClick={() => setIsOpen(true)}
          className={`
            flex items-center gap-2 px-4 py-3 rounded-full shadow-lg transition-all duration-300
            bg-gradient-to-r from-[var(--tavern-gold)] to-[var(--tavern-purple)]
            text-[var(--tavern-dark)] font-semibold hover:shadow-xl hover:scale-105
            ${isOpen ? "hidden" : "flex"}
          `}
        >
          <MessageCircle className="w-5 h-5" />
          <span className="hidden sm:inline">Chat</span>
        </button>
      </div>

{/* Chat Modal */}
      {isOpen && (
        <div className="fixed bottom-6 right-6 z-50 w-80 sm:w-96 h-[500px] bg-[var(--tavern-cream)] border-2 border-[var(--tavern-gold)] rounded-lg shadow-2xl flex flex-col">
          {/* Header */}
          <div className="flex items-center justify-between p-4 bg-gradient-to-r from-[var(--tavern-gold)] to-[var(--tavern-purple)] text-[var(--tavern-dark)] rounded-t-lg">
            <div className="flex items-center gap-2">
              <Bot className="w-5 h-5" />
              <h3 className="font-bold">Tavern AI Assistant</h3>
            </div>
            <button onClick={() => setIsOpen(false)} className="p-1 hover:bg-black/10 rounded transition-colors">
              <X className="w-4 h-4" />
            </button>
          </div>

{/* Messages */}
          <div className="flex-1 overflow-y-auto p-4 space-y-4">
            {messages.map((message) => (
              <div
                key={message.id}
                className={`flex gap-2 ${message.role === "user" ? "justify-end" : "justify-start"}`}
              >
                {message.role === "assistant" && (
                  <div className="w-8 h-8 bg-[var(--tavern-purple)] rounded-full flex items-center justify-center flex-shrink-0">
                    <Bot className="w-4 h-4 text-white" />
                  </div>
                )}
                <div
                  className={`
                    max-w-[80%] p-3 rounded-lg text-sm whitespace-pre-wrap
                    ${
                      message.role === "user"
                        ? "bg-[var(--tavern-gold)] text-[var(--tavern-dark)] rounded-br-none"
                        : "bg-white border border-[var(--tavern-gold)] text-[var(--tavern-dark)] rounded-bl-none"
                    }
                  `}
                >
                  {message.content}
                </div>
                {message.role === "user" && (
                  <div className="w-8 h-8 bg-[var(--tavern-gold)] rounded-full flex items-center justify-center flex-shrink-0">
                    <User className="w-4 h-4 text-[var(--tavern-dark)]" />
                  </div>
                )}
              </div>
            ))}
            {isLoading && (
              <div className="flex gap-2 justify-start">
                <div className="w-8 h-8 bg-[var(--tavern-purple)] rounded-full flex items-center justify-center flex-shrink-0">
                  <Bot className="w-4 h-4 text-white" />
                </div>
                <div className="bg-white border border-[var(--tavern-gold)] text-[var(--tavern-dark)] p-3 rounded-lg rounded-bl-none">
                  <Loader2 className="w-4 h-4 animate-spin" />
                </div>
              </div>
            )}

{/* Suggestion Prompts */}
            {showSuggestions && messages.length === 1 && (
              <div className="space-y-3">
                <div className="flex items-center gap-2 text-[var(--tavern-purple)] font-medium text-sm">
                  <Sparkles className="w-4 h-4" />
                  <span>Try asking about:</span>
                </div>
                <div className="grid grid-cols-1 gap-2">
                  {suggestionPrompts.slice(0, 6).map((suggestion, index) => (
                    <button
                      key={index}
                      onClick={() => handleSuggestionClick(suggestion)}
                      className="text-left p-2 text-xs bg-white border border-[var(--tavern-gold)] rounded-lg hover:bg-[var(--tavern-gold)] hover:text-[var(--tavern-dark)] transition-colors"
                    >
                      {suggestion}
                    </button>
                  ))}
                </div>
                <button
                  onClick={() => setShowSuggestions(false)}
                  className="text-xs text-[var(--tavern-purple)] hover:underline"
                >
                  Hide suggestions
                </button>
              </div>
            )}

{/* Input */}
          <div className="p-4 border-t border-[var(--tavern-gold)]">
            <form onSubmit={handleSubmit} className="flex gap-2">
              <input
                ref={inputRef}
                type="text"
                value={input}
                onChange={(e) => setInput(e.target.value)}
                onKeyPress={handleKeyPress}
                placeholder="Ask me about quests, guilds, or anything..."
                className="flex-1 px-3 py-2 border border-[var(--tavern-gold)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--tavern-purple)] text-sm"
                disabled={isLoading}
              />
              <button
                type="submit"
                disabled={!input.trim() || isLoading}
                className="px-3 py-2 bg-[var(--tavern-gold)] text-[var(--tavern-dark)] rounded-lg hover:bg-[var(--tavern-purple)] hover:text-white transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
              >
                <Send className="w-4 h-4" />
              </button>
            </form>
          </div>
        </div>
      )}
    </>
  )
}
[V0_FILE]typescriptreact:file="components/applications-modal.tsx" isEdit="true" isMerged="true"
"use client"

import { X, ScrollText, Users, CheckCircle, XCircle, Clock, Star, CircleDollarSign, Calendar } from "lucide-react"
import type { Quest, User as UserType } from "@/lib/types"
import { getDifficultyClass } from "@/lib/utils"

interface ApplicationsModalProps {
  isOpen: boolean
  onClose: () => void
  quests: Quest[]
  currentUser: UserType | null
  setQuests: (quests: Quest[] | ((prev: Quest[]) => Quest[])) => void
}

export function ApplicationsModal({ isOpen, onClose, quests, currentUser, setQuests }: ApplicationsModalProps) {
  if (!isOpen || !currentUser) return null

const myApplications = quests.filter((quest) => quest.applicants.some((app) => app.userId === currentUser.id))
  const myQuests = quests.filter((quest) => quest.poster.id === currentUser.id && quest.applicants.length > 0)

const handleApproveApplicant = (questId: number, applicantId: number) => {
    setQuests((prevQuests) =>
      prevQuests.map((q) => {
        if (q.id === questId) {
          return {
            ...q,
            status: "in-progress",
            applicants: q.applicants.map((app) => {
              if (app.userId === applicantId) {
                return { ...app, status: "accepted" }
              } else {
                return { ...app, status: "rejected" }
              }
            }),
            assignedTo: applicantId,
          }
        }
        return q
      }),
    )
  }

const handleRejectApplicant = (questId: number, applicantId: number) => {
    setQuests((prevQuests) =>
      prevQuests.map((q) => {
        if (q.id === questId) {
          return {
            ...q,
            applicants: q.applicants.map((app) => {
              if (app.userId === applicantId) {
                return { ...app, status: "rejected" }
              }
              return app
            }),
          }
        }
        return q
      }),
    )
  }

const getStatusColor = (status: string) => {
    switch (status.toLowerCase()) {
      case "pending":
        return "bg-amber-100 text-amber-800 border-amber-200"
      case "accepted":
        return "bg-green-100 text-green-800 border-green-200"
      case "rejected":
        return "bg-red-100 text-red-800 border-red-200"
      default:
        return "bg-gray-100 text-gray-800 border-gray-200"
    }
  }

return (
    <div className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 p-4">
      <div
        className="bg-white rounded-2xl w-full max-w-6xl max-h-[90vh] overflow-hidden shadow-2xl"
        onClick={(e) => e.stopPropagation()}
      >
        {/* Header */}
        <div className="bg-gradient-to-r from-[#8B75AA] to-[#CDAA7D] text-white p-6">
          <div className="flex justify-between items-center">
            <div>
              <h2 className="text-3xl font-bold font-serif mb-2">Quest Applications</h2>
              <p className="text-white/90">Manage your quest applications and review incoming requests</p>
            </div>
            <button onClick={onClose} className="p-2 hover:bg-white/20 rounded-xl transition-colors">
              <X size={24} />
            </button>
          </div>
        </div>

<div className="p-6 overflow-y-auto max-h-[calc(90vh-140px)]">
          <div className="grid lg:grid-cols-2 gap-8">
            {/* My Applications */}
            <div className="space-y-6">
              <div className="flex items-center gap-3 mb-6">
                <div className="p-3 bg-[#8B75AA]/10 rounded-xl">
                  <ScrollText className="w-6 h-6 text-[#8B75AA]" />
                </div>
                <div>
                  <h3 className="text-2xl font-bold text-[#2C1A1D] font-serif">My Applications</h3>
                  <p className="text-[#8B75AA]">Quests you've applied for</p>
                </div>
              </div>

{myApplications.length === 0 ? (
                <div className="text-center py-12 bg-gray-50 rounded-2xl">
                  <ScrollText className="w-16 h-16 text-gray-300 mx-auto mb-4" />
                  <h4 className="text-lg font-semibold text-gray-600 mb-2">No Applications Yet</h4>
                  <p className="text-gray-500">
                    You haven't applied for any quests yet. Browse the Quest Board to find opportunities!
                  </p>
                </div>
              ) : (
                <div className="space-y-4">
                  {myApplications.map((quest) => {
                    const myApplication = quest.applicants.find((app) => app.userId === currentUser.id)
                    return (
                      <div
                        key={quest.id}
                        className="bg-white border border-gray-200 rounded-2xl p-6 hover:shadow-lg transition-shadow"
                      >
                        {/* Quest Header */}
                        <div className="flex justify-between items-start mb-4">
                          <div className="flex-1">
                            <h4 className="text-xl font-bold text-[#2C1A1D] mb-2 font-serif">{quest.title}</h4>
                            <div className="flex flex-wrap items-center gap-3 mb-3">
                              <span
                                className={`px-3 py-1 rounded-full text-sm font-bold ${getDifficultyClass(quest.difficulty)}`}
                              >
                                {quest.difficulty.charAt(0).toUpperCase() + quest.difficulty.slice(1)}
                              </span>
                              <span
                                className={`px-3 py-1 rounded-full text-sm font-bold border ${getStatusColor(myApplication?.status || "pending")}`}
                              >
                                {(myApplication?.status || "pending").charAt(0).toUpperCase() +
                                  (myApplication?.status || "pending").slice(1)}
                              </span>
                            </div>
                          </div>
                        </div>

{/* Quest Details */}
                        <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 mb-4 p-4 bg-gray-50 rounded-xl">
                          <div className="flex items-center gap-2">
                            <CircleDollarSign size={18} className="text-[#CDAA7D]" />
                            <div>
                              <p className="text-xs text-gray-500">Reward</p>
                              <p className="font-bold text-[#2C1A1D]">{quest.reward} Gold</p>
                            </div>
                          </div>
                          <div className="flex items-center gap-2">
                            <Star size={18} className="text-[#8B75AA]" />
                            <div>
                              <p className="text-xs text-gray-500">XP</p>
                              <p className="font-bold text-[#8B75AA]">{quest.xp} XP</p>
                            </div>
                          </div>
                          <div className="flex items-center gap-2">
                            <Calendar size={18} className="text-gray-500" />
                            <div>
                              <p className="text-xs text-gray-500">Applied</p>
                              <p className="font-medium text-gray-700">
                                {myApplication?.appliedAt.toLocaleDateString()}
                              </p>
                            </div>
                          </div>
                          <div className="flex items-center gap-2">
                            <Clock size={18} className="text-red-500" />
                            <div>
                              <p className="text-xs text-gray-500">Deadline</p>
                              <p className="font-medium text-gray-700">{quest.deadline.toLocaleDateString()}</p>
                            </div>
                          </div>
                        </div>

{/* Quest Description */}
                        <p className="text-gray-600 mb-4 line-clamp-2">{quest.description}</p>

{/* Quest Poster */}
                        <div className="flex items-center gap-3 p-3 bg-[#F4F0E6] rounded-xl">
                          <div className="w-10 h-10 bg-gradient-to-br from-[#8B75AA] to-[#7A6699] rounded-full flex items-center justify-center text-white font-bold">
                            {quest.poster.avatar}
                          </div>
                          <div>
                            <p className="font-semibold text-[#2C1A1D]">{quest.poster.username}</p>
                            <p className="text-sm text-[#8B75AA]">Quest Giver</p>
                          </div>
                        </div>
                      </div>
                    )
                  })}
                </div>
              )}
            </div>

{/* Applications to My Quests */}
            <div className="space-y-6">
              <div className="flex items-center gap-3 mb-6">
                <div className="p-3 bg-[#CDAA7D]/10 rounded-xl">
                  <Users className="w-6 h-6 text-[#CDAA7D]" />
                </div>
                <div>
                  <h3 className="text-2xl font-bold text-[#2C1A1D] font-serif">Incoming Applications</h3>
                  <p className="text-[#8B75AA]">Applications to your quests</p>
                </div>
              </div>

{myQuests.length === 0 ? (
                <div className="text-center py-12 bg-gray-50 rounded-2xl">
                  <Users className="w-16 h-16 text-gray-300 mx-auto mb-4" />
                  <h4 className="text-lg font-semibold text-gray-600 mb-2">No Applications Yet</h4>
                  <p className="text-gray-500">
                    No one has applied to your quests yet. Make sure your quests are attractive and well-described!
                  </p>
                </div>
              ) : (
                <div className="space-y-6">
                  {myQuests.map((quest) => (
                    <div
                      key={quest.id}
                      className="bg-white border border-gray-200 rounded-2xl p-6 hover:shadow-lg transition-shadow"
                    >
                      {/* Quest Header */}
                      <div className="mb-6">
                        <h4 className="text-xl font-bold text-[#2C1A1D] mb-2 font-serif">{quest.title}</h4>
                        <div className="flex flex-wrap items-center gap-3">
                          <span
                            className={`px-3 py-1 rounded-full text-sm font-bold ${getDifficultyClass(quest.difficulty)}`}
                          >
                            {quest.difficulty.charAt(0).toUpperCase() + quest.difficulty.slice(1)}
                          </span>
                          <span className="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm font-bold">
                            {quest.applicants.length} {quest.applicants.length === 1 ? "Applicant" : "Applicants"}
                          </span>
                        </div>
                      </div>

{/* Applicants */}
                      <div className="space-y-4">
                        {quest.applicants.map((applicant) => (
                          <div
                            key={applicant.id}
                            className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 p-4 bg-gray-50 rounded-xl"
                          >
                            <div className="flex items-center gap-4 flex-1">
                              <div className="w-12 h-12 bg-gradient-to-br from-[#8B75AA] to-[#7A6699] rounded-full flex items-center justify-center text-white font-bold text-lg">
                                {applicant.avatar}
                              </div>
                              <div className="flex-1">
                                <div className="flex items-center gap-3 mb-1">
                                  <h5 className="font-bold text-[#2C1A1D] text-lg">{applicant.username}</h5>
                                  <span
                                    className={`px-2 py-1 rounded-full text-xs font-bold border ${getStatusColor(applicant.status)}`}
                                  >
                                    {applicant.status.charAt(0).toUpperCase() + applicant.status.slice(1)}
                                  </span>
                                </div>
                                <p className="text-sm text-gray-500 mb-2">
                                  Applied {applicant.appliedAt.toLocaleDateString()}
                                </p>
                                {applicant.message && (
                                  <p className="text-sm text-gray-600 bg-white p-3 rounded-lg border">
                                    "{applicant.message}"
                                  </p>
                                )}
                              </div>
                            </div>

{applicant.status === "pending" && quest.status === "open" && (
                              <div className="flex gap-2 sm:flex-col lg:flex-row">
                                <button
                                  onClick={() => handleApproveApplicant(quest.id, applicant.userId)}
                                  className="flex items-center gap-2 px-4 py-2 bg-green-500 text-white rounded-xl hover:bg-green-600 transition-colors font-medium"
                                >
                                  <CheckCircle size={16} />
                                  <span className="hidden sm:inline">Accept</span>
                                </button>
                                <button
                                  onClick={() => handleRejectApplicant(quest.id, applicant.userId)}
                                  className="flex items-center gap-2 px-4 py-2 bg-red-500 text-white rounded-xl hover:bg-red-600 transition-colors font-medium"
                                >
                                  <XCircle size={16} />
                                  <span className="hidden sm:inline">Reject</span>
                                </button>
                              </div>
                            )}
                          </div>
                        ))}
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/quest-management.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"
import { useState } from "react"
import {
  Search,
  ChevronDown,
  ChevronUp,
  Edit,
  Trash,
  CheckCircle,
  XCircle,
  Clock,
  Star,
  CircleDollarSign,
  Calendar,
  User,
  Eye,
  AlertCircle,
} from "lucide-react"
import type { Quest, User as UserType } from "@/lib/types"
import { EditQuestModal } from "./edit-quest-modal"

interface QuestManagementProps {
  quests: Quest[]
  currentUser: UserType
  onQuestStatusChange: (questId: number, newStatus: string) => void
  setQuests: React.Dispatch<React.SetStateAction<Quest[]>>
  showToast: (message: string, type?: string) => void
}

export function QuestManagement({
  quests,
  currentUser,
  onQuestStatusChange,
  setQuests,
  showToast,
}: QuestManagementProps) {
  const [activeTab, setActiveTab] = useState<"created" | "applied">("created")
  const [searchQuery, setSearchQuery] = useState("")
  const [sortField, setSortField] = useState<"createdAt" | "deadline" | "reward">("createdAt")
  const [sortDirection, setSortDirection] = useState<"asc" | "desc">("desc")
  const [expandedQuestId, setExpandedQuestId] = useState<number | null>(null)
  const [showDeleteConfirm, setShowDeleteConfirm] = useState<number | null>(null)
  const [editingQuest, setEditingQuest] = useState<Quest | null>(null)

// Filter quests based on active tab and search query
  const filteredQuests = quests
    .filter((quest) => {
      if (activeTab === "created") {
        return quest.poster.id === currentUser.id
      } else {
        return quest.applicants && quest.applicants.some((app) => app.userId === currentUser.id)
      }
    })
    .filter((quest) => {
      if (!searchQuery) return true
      return (
        quest.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
        quest.description.toLowerCase().includes(searchQuery.toLowerCase())
      )
    })

// Sort quests
  const sortedQuests = [...filteredQuests].sort((a, b) => {
    let aValue, bValue

if (sortField === "createdAt") {
      aValue = new Date(a.createdAt).getTime()
      bValue = new Date(b.createdAt).getTime()
    } else if (sortField === "deadline") {
      aValue = new Date(a.deadline).getTime()
      bValue = new Date(b.deadline).getTime()
    } else {
      aValue = a.reward
      bValue = b.reward
    }

return sortDirection === "asc" ? aValue - bValue : bValue - aValue
  })

const toggleSort = (field: "createdAt" | "deadline" | "reward") => {
    if (sortField === field) {
      setSortDirection(sortDirection === "asc" ? "desc" : "asc")
    } else {
      setSortField(field)
      setSortDirection("desc")
    }
  }

const handleDeleteQuest = (questId: number) => {
    setQuests((prevQuests) => prevQuests.filter((q) => q.id !== questId))
    setShowDeleteConfirm(null)
    showToast("Quest deleted successfully", "success")
  }

const handleEditQuest = (quest: Quest) => {
    setEditingQuest(quest)
  }

const handleSaveQuest = (updatedQuest: Quest) => {
    setQuests((prevQuests) => prevQuests.map((q) => (q.id === updatedQuest.id ? updatedQuest : q)))
    setEditingQuest(null)
  }

const handleCompleteQuest = (questId: number) => {
    onQuestStatusChange(questId, "completed")
    showToast("Quest marked as completed", "success")
  }

const getStatusColor = (status: string) => {
    switch (status.toLowerCase()) {
      case "open":
        return "bg-green-100 text-green-800 border-green-200"
      case "in-progress":
        return "bg-blue-100 text-blue-800 border-blue-200"
      case "completed":
        return "bg-purple-100 text-purple-800 border-purple-200"
      case "cancelled":
        return "bg-red-100 text-red-800 border-red-200"
      default:
        return "bg-gray-100 text-gray-800 border-gray-200"
    }
  }

const getDifficultyColor = (difficulty: string) => {
    switch (difficulty.toLowerCase()) {
      case "easy":
        return "bg-green-100 text-green-800 border-green-200"
      case "medium":
        return "bg-yellow-100 text-yellow-800 border-yellow-200"
      case "hard":
        return "bg-red-100 text-red-800 border-red-200"
      default:
        return "bg-gray-100 text-gray-800 border-gray-200"
    }
  }

const getApplicantStatusColor = (status: string) => {
    switch (status.toLowerCase()) {
      case "accepted":
        return "bg-green-100 text-green-800 border-green-200"
      case "rejected":
        return "bg-red-100 text-red-800 border-red-200"
      case "pending":
        return "bg-amber-100 text-amber-800 border-amber-200"
      default:
        return "bg-gray-100 text-gray-800 border-gray-200"
    }
  }

return (
    <section className="bg-gradient-to-br from-[#F4F0E6] to-[#F8F5F0] min-h-screen py-6">
      <div className="max-w-7xl mx-auto px-4 sm:px-6">
        {/* Header */}
        <div className="mb-8">
          <h2 className="text-4xl font-bold text-[#2C1A1D] font-serif mb-2">Quest Management</h2>
          <p className="text-[#8B75AA] text-lg">Manage your quests and track applications</p>
        </div>

{/* Tabs */}
        <div className="bg-white rounded-2xl shadow-sm border border-gray-200 mb-6 overflow-hidden">
          <div className="flex">
            <button
              className={`flex-1 px-6 py-4 font-semibold text-center transition-colors ${
                activeTab === "created" ? "bg-[#8B75AA] text-white" : "text-[#2C1A1D] hover:bg-gray-50"
              }`}
              onClick={() => setActiveTab("created")}
            >
              <div className="flex items-center justify-center gap-2">
                <Edit size={20} />
                <span>Created Quests</span>
                <span className="bg-white/20 px-2 py-1 rounded-full text-sm">
                  {quests.filter((q) => q.poster.id === currentUser.id).length}
                </span>
              </div>
            </button>
            <button
              className={`flex-1 px-6 py-4 font-semibold text-center transition-colors ${
                activeTab === "applied" ? "bg-[#8B75AA] text-white" : "text-[#2C1A1D] hover:bg-gray-50"
              }`}
              onClick={() => setActiveTab("applied")}
            >
              <div className="flex items-center justify-center gap-2">
                <User size={20} />
                <span>Applied Quests</span>
                <span className="bg-white/20 px-2 py-1 rounded-full text-sm">
                  {quests.filter((q) => q.applicants?.some((app) => app.userId === currentUser.id)).length}
                </span>
              </div>
            </button>
          </div>
        </div>

{/* Search and Filters */}
        <div className="bg-white rounded-2xl shadow-sm border border-gray-200 p-6 mb-6">
          <div className="flex flex-col lg:flex-row gap-4">
            {/* Search */}
            <div className="relative flex-1">
              <input
                type="text"
                placeholder="Search quests by title or description..."
                className="w-full px-4 py-3 pl-12 border border-gray-300 rounded-xl bg-gray-50 text-[#2C1A1D] focus:outline-none focus:border-[#8B75AA] focus:bg-white transition-colors"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
              />
              <Search size={20} className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400" />
            </div>

{/* Sort Controls */}
            <div className="flex flex-wrap gap-2">
              <button
                className={`flex items-center gap-2 px-4 py-3 border rounded-xl transition-colors ${
                  sortField === "createdAt"
                    ? "bg-[#8B75AA] text-white border-[#8B75AA]"
                    : "bg-white text-[#2C1A1D] border-gray-300 hover:border-[#8B75AA]"
                }`}
                onClick={() => toggleSort("createdAt")}
              >
                <Calendar size={16} />
                <span>Date</span>
                {sortField === "createdAt" &&
                  (sortDirection === "asc" ? <ChevronUp size={16} /> : <ChevronDown size={16} />)}
              </button>

<button
                className={`flex items-center gap-2 px-4 py-3 border rounded-xl transition-colors ${
                  sortField === "deadline"
                    ? "bg-[#8B75AA] text-white border-[#8B75AA]"
                    : "bg-white text-[#2C1A1D] border-gray-300 hover:border-[#8B75AA]"
                }`}
                onClick={() => toggleSort("deadline")}
              >
                <Clock size={16} />
                <span>Deadline</span>
                {sortField === "deadline" &&
                  (sortDirection === "asc" ? <ChevronUp size={16} /> : <ChevronDown size={16} />)}
              </button>

<button
                className={`flex items-center gap-2 px-4 py-3 border rounded-xl transition-colors ${
                  sortField === "reward"
                    ? "bg-[#8B75AA] text-white border-[#8B75AA]"
                    : "bg-white text-[#2C1A1D] border-gray-300 hover:border-[#8B75AA]"
                }`}
                onClick={() => toggleSort("reward")}
              >
                <CircleDollarSign size={16} />
                <span>Reward</span>
                {sortField === "reward" &&
                  (sortDirection === "asc" ? <ChevronUp size={16} /> : <ChevronDown size={16} />)}
              </button>
            </div>
          </div>
        </div>

{/* Quests List */}
        {sortedQuests && sortedQuests.length > 0 ? (
          <div className="space-y-6">
            {sortedQuests.map((quest) => (
              <div
                key={quest.id}
                className="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden hover:shadow-lg transition-shadow"
              >
                {/* Quest Header */}
                <div className="p-6 border-b border-gray-100">
                  <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-4">
                    <div className="flex-1">
                      <div className="flex flex-wrap items-center gap-3 mb-3">
                        <h3 className="text-2xl font-bold text-[#2C1A1D] font-serif">{quest.title}</h3>
                        <span
                          className={`px-3 py-1 rounded-full text-sm font-bold border ${getStatusColor(quest.status)}`}
                        >
                          {quest.status.charAt(0).toUpperCase() + quest.status.slice(1)}
                        </span>
                        <span
                          className={`px-3 py-1 rounded-full text-sm font-bold border ${getDifficultyColor(quest.difficulty)}`}
                        >
                          {quest.difficulty.charAt(0).toUpperCase() + quest.difficulty.slice(1)}
                        </span>
                      </div>

{/* Quest Stats */}
                      <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
                        <div className="flex items-center gap-2">
                          <CircleDollarSign size={18} className="text-[#CDAA7D]" />
                          <div>
                            <p className="text-xs text-gray-500">Reward</p>
                            <p className="font-bold text-[#2C1A1D]">{quest.reward} Gold</p>
                          </div>
                        </div>
                        <div className="flex items-center gap-2">
                          <Star size={18} className="text-[#8B75AA]" />
                          <div>
                            <p className="text-xs text-gray-500">XP</p>
                            <p className="font-bold text-[#8B75AA]">{quest.xp} XP</p>
                          </div>
                        </div>
                        <div className="flex items-center gap-2">
                          <Calendar size={18} className="text-gray-500" />
                          <div>
                            <p className="text-xs text-gray-500">Created</p>
                            <p className="font-medium text-gray-700">{quest.createdAt.toLocaleDateString()}</p>
                          </div>
                        </div>
                        <div className="flex items-center gap-2">
                          <Clock size={18} className="text-red-500" />
                          <div>
                            <p className="text-xs text-gray-500">Deadline</p>
                            <p className="font-medium text-gray-700">{quest.deadline.toLocaleDateString()}</p>
                          </div>
                        </div>
                      </div>
                    </div>

{/* Action Buttons */}
                    <div className="flex items-center gap-3">
                      {activeTab === "created" && (
                        <>
                          <button
                            onClick={() => handleEditQuest(quest)}
                            className="flex items-center gap-2 px-4 py-2 bg-[#8B75AA] text-white rounded-xl hover:bg-[#7A6699] transition-colors"
                          >
                            <Edit size={16} />
                            <span className="hidden sm:inline">Edit</span>
                          </button>
                          <button
                            onClick={() => setShowDeleteConfirm(quest.id)}
                            className="flex items-center gap-2 px-4 py-2 bg-red-500 text-white rounded-xl hover:bg-red-600 transition-colors"
                          >
                            <Trash size={16} />
                            <span className="hidden sm:inline">Delete</span>
                          </button>
                        </>
                      )}
                      <button
                        onClick={() => setExpandedQuestId(expandedQuestId === quest.id ? null : quest.id)}
                        className="flex items-center gap-2 px-4 py-2 border border-gray-300 rounded-xl hover:border-[#8B75AA] transition-colors"
                      >
                        <Eye size={16} />
                        <span className="hidden sm:inline">
                          {expandedQuestId === quest.id ? "Hide Details" : "View Details"}
                        </span>
                        {expandedQuestId === quest.id ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
                      </button>
                    </div>
                  </div>
                </div>

{/* Expanded Content */}
                {expandedQuestId === quest.id && (
                  <div className="p-6 bg-gray-50">
                    {/* Description */}
                    <div className="mb-6">
                      <h4 className="text-lg font-bold text-[#2C1A1D] mb-3 font-serif">Quest Description</h4>
                      <p className="text-gray-700 leading-relaxed bg-white p-4 rounded-xl border">
                        {quest.description}
                      </p>
                    </div>

{/* For Created Quests - Show Applicants */}
                    {activeTab === "created" && (
                      <div>
                        <div className="flex items-center justify-between mb-4">
                          <h4 className="text-lg font-bold text-[#2C1A1D] font-serif">
                            Applicants ({quest.applicants?.length || 0})
                          </h4>
                          {quest.status === "in-progress" && (
                            <button
                              onClick={() => handleCompleteQuest(quest.id)}
                              className="flex items-center gap-2 px-4 py-2 bg-green-500 text-white rounded-xl hover:bg-green-600 transition-colors"
                            >
                              <CheckCircle size={16} />
                              <span>Mark as Completed</span>
                            </button>
                          )}
                        </div>

{quest.applicants && quest.applicants.length > 0 ? (
                          <div className="grid gap-4">
                            {quest.applicants.map((applicant) => (
                              <div
                                key={applicant.id}
                                className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 p-4 bg-white rounded-xl border"
                              >
                                <div className="flex items-center gap-4 flex-1">
                                  <div className="w-12 h-12 bg-gradient-to-br from-[#8B75AA] to-[#7A6699] rounded-full flex items-center justify-center text-white font-bold text-lg">
                                    {applicant.avatar}
                                  </div>
                                  <div className="flex-1">
                                    <div className="flex items-center gap-3 mb-1">
                                      <h5 className="font-bold text-[#2C1A1D] text-lg">{applicant.username}</h5>
                                      <span
                                        className={`px-2 py-1 rounded-full text-xs font-bold border ${getApplicantStatusColor(applicant.status)}`}
                                      >
                                        {applicant.status.charAt(0).toUpperCase() + applicant.status.slice(1)}
                                      </span>
                                    </div>
                                    <p className="text-sm text-gray-500 mb-2">
                                      Applied {applicant.appliedAt.toLocaleDateString()}
                                    </p>
                                    {applicant.message && (
                                      <p className="text-sm text-gray-600 bg-gray-50 p-3 rounded-lg">
                                        "{applicant.message}"
                                      </p>
                                    )}
                                  </div>
                                </div>

{applicant.status === "pending" && quest.status === "open" && (
                                  <div className="flex gap-2">
                                    <button
                                      onClick={() => handleApproveApplicant(quest.id, applicant.userId)}
                                      className="flex items-center gap-2 px-4 py-2 bg-green-500 text-white rounded-xl hover:bg-green-600 transition-colors"
                                    >
                                      <CheckCircle size={16} />
                                      <span>Accept</span>
                                    </button>
                                    <button
                                      onClick={() => handleRejectApplicant(quest.id, applicant.userId)}
                                      className="flex items-center gap-2 px-4 py-2 bg-red-500 text-white rounded-xl hover:bg-red-600 transition-colors"
                                    >
                                      <XCircle size={16} />
                                      <span>Reject</span>
                                    </button>
                                  </div>
                                )}
                              </div>
                            ))}
                          </div>
                        ) : (
                          <div className="text-center py-8 bg-white rounded-xl border border-dashed border-gray-300">
                            <User className="w-12 h-12 text-gray-300 mx-auto mb-3" />
                            <p className="text-gray-500">No applicants yet. Share your quest to attract adventurers!</p>
                          </div>
                        )}
                      </div>
                    )}

{/* For Applied Quests - Show Application Status */}
                    {activeTab === "applied" && (
                      <div className="space-y-4">
                        <div className="bg-white p-4 rounded-xl border">
                          <h4 className="text-lg font-bold text-[#2C1A1D] mb-3 font-serif">Quest Giver</h4>
                          <div className="flex items-center gap-3">
                            <div className="w-10 h-10 bg-gradient-to-br from-[#8B75AA] to-[#7A6699] rounded-full flex items-center justify-center text-white font-bold">
                              {quest.poster.avatar}
                            </div>
                            <div>
                              <p className="font-semibold text-[#2C1A1D]">{quest.poster.username}</p>
                              <p className="text-sm text-[#8B75AA]">Quest Giver</p>
                            </div>
                          </div>
                        </div>

<div className="bg-white p-4 rounded-xl border">
                          <h4 className="text-lg font-bold text-[#2C1A1D] mb-3 font-serif">Your Application Status</h4>
                          <div className="flex items-center gap-3">
                            <span
                              className={`px-3 py-2 rounded-xl text-sm font-bold border ${getApplicantStatusColor(
                                quest.applicants.find((app) => app.userId === currentUser.id)?.status || "pending",
                              )}`}
                            >
                              {(quest.applicants.find((app) => app.userId === currentUser.id)?.status || "pending")
                                .charAt(0)
                                .toUpperCase() +
                                (
                                  quest.applicants.find((app) => app.userId === currentUser.id)?.status || "pending"
                                ).slice(1)}
                            </span>
                            <p className="text-gray-600">
                              Applied on{" "}
                              {quest.applicants
                                .find((app) => app.userId === currentUser.id)
                                ?.appliedAt.toLocaleDateString()}
                            </p>
                          </div>
                        </div>

{quest.status === "in-progress" &&
                          quest.applicants.find((app) => app.userId === currentUser.id)?.status === "accepted" && (
                            <button
                              onClick={() => {
                                showToast("Work submitted successfully", "success")
                              }}
                              className="w-full flex items-center justify-center gap-2 px-6 py-3 bg-[#8B75AA] text-white rounded-xl hover:bg-[#7A6699] transition-colors font-semibold"
                            >
                              <CheckCircle size={20} />
                              <span>Submit Completed Work</span>
                            </button>
                          )}
                      </div>
                    )}
                  </div>
                )}
              </div>
            ))}
          </div>
        ) : (
          <div className="bg-white rounded-2xl shadow-sm border border-gray-200 p-12 text-center">
            <AlertCircle size={64} className="mx-auto mb-6 text-gray-300" />
            <h3 className="text-2xl font-bold text-[#2C1A1D] mb-3 font-serif">No Quests Found</h3>
            <p className="text-gray-600 text-lg mb-6">
              {activeTab === "created"
                ? "You haven't created any quests yet. Start by posting your first quest!"
                : "You haven't applied to any quests yet. Browse the Quest Board to find exciting opportunities!"}
            </p>
            <button className="px-6 py-3 bg-[#8B75AA] text-white rounded-xl hover:bg-[#7A6699] transition-colors font-semibold">
              {activeTab === "created" ? "Create Your First Quest" : "Browse Quest Board"}
            </button>
          </div>
        )}
      </div>

{/* Delete Confirmation Modal */}
      {showDeleteConfirm !== null && (
        <div className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-2xl w-full max-w-md p-6 shadow-2xl">
            <div className="flex items-center gap-3 mb-4">
              <div className="p-3 bg-red-100 rounded-xl">
                <AlertCircle className="w-6 h-6 text-red-600" />
              </div>
              <h3 className="text-xl font-bold text-[#2C1A1D] font-serif">Confirm Deletion</h3>
            </div>
            <p className="text-gray-600 mb-6">
              Are you sure you want to delete this quest? This action cannot be undone and all applications will be
              lost.
            </p>
            <div className="flex gap-3">
              <button
                onClick={() => setShowDeleteConfirm(null)}
                className="flex-1 px-4 py-3 border border-gray-300 rounded-xl text-[#2C1A1D] hover:bg-gray-50 transition-colors font-medium"
              >
                Cancel
              </button>
              <button
                onClick={() => handleDeleteQuest(showDeleteConfirm)}
                className="flex-1 px-4 py-3 bg-red-500 text-white rounded-xl hover:bg-red-600 transition-colors font-medium"
              >
                Delete Quest
              </button>
            </div>
          </div>
        </div>
      )}

{/* Edit Quest Modal */}
      {editingQuest && (
        <EditQuestModal
          isOpen={!!editingQuest}
          onClose={() => setEditingQuest(null)}
          quest={editingQuest}
          onSave={handleSaveQuest}
          showToast={showToast}
        />
      )}
    </section>
  )
}
[V0_FILE]plaintext:file="erd.txt" isEdit="true" isMerged="true"
PEERQUEST TAVERN - ENTITY RELATIONSHIP DIAGRAM (ERD) DEFINITION - UPDATED v2.0
==================================================================================

DATABASE ENTITIES AND RELATIONSHIPS - CURRENT SYSTEM IMPLEMENTATION
===================================================================

PRIMARY ENTITIES:
----------------

1. USERS
   - user_id (PK, INT, AUTO_INCREMENT)
   - username (VARCHAR(50), UNIQUE, NOT NULL)
   - email (VARCHAR(100), UNIQUE, NOT NULL)
   - password_hash (VARCHAR(255), NOT NULL)
   - first_name (VARCHAR(50))
   - last_name (VARCHAR(50))
   - avatar_url (VARCHAR(255))
   - bio (TEXT)
   - level (INT, DEFAULT 1)
   - experience_points (INT, DEFAULT 0)
   - gold_balance (DECIMAL(10,2), DEFAULT 0.00)
   - is_admin (BOOLEAN, DEFAULT FALSE)
   - is_active (BOOLEAN, DEFAULT TRUE)
   - is_verified (BOOLEAN, DEFAULT FALSE) -- NEW: KYC verification status
   - verification_documents (JSON) -- NEW: KYC document storage
   - preferred_language (VARCHAR(10), DEFAULT 'en') -- NEW: Multilingual support
   - timezone (VARCHAR(50), DEFAULT 'UTC') -- NEW: User timezone
   - notification_preferences (JSON) -- NEW: Notification settings
   - privacy_settings (JSON) -- NEW: Privacy configuration
   - created_at (TIMESTAMP, DEFAULT CURRENT_TIMESTAMP)
   - updated_at (TIMESTAMP, DEFAULT CURRENT_TIMESTAMP ON UPDATE)
   - last_login (TIMESTAMP)
   - last_seen (TIMESTAMP) -- NEW: Activity tracking

2. QUESTS
   - quest_id (PK, INT, AUTO_INCREMENT)
   - title (VARCHAR(200), NOT NULL)
   - description (TEXT, NOT NULL)
   - detailed_requirements (TEXT) -- NEW: Extended requirements
   - category (ENUM('Programming', 'Design', 'Writing', 'Marketing', 'Data Analysis', 'Translation', 'Video Editing', 'Other'))
   - subcategory (VARCHAR(100)) -- NEW: More specific categorization
   - difficulty (ENUM('Beginner', 'Intermediate', 'Advanced', 'Expert'))
   - estimated_hours (INT) -- NEW: Time estimation
   - reward_gold (DECIMAL(8,2), NOT NULL)
   - reward_xp (INT, NOT NULL)
   - bonus_rewards (JSON) -- NEW: Additional rewards (achievements, items)
   - status (ENUM('Draft', 'Open', 'In Progress', 'Under Review', 'Completed', 'Cancelled'), DEFAULT 'Open')
   - priority (ENUM('Low', 'Medium', 'High', 'Urgent'), DEFAULT 'Medium') -- NEW
   - max_participants (INT, DEFAULT 1)
   - current_participants (INT, DEFAULT 0) -- NEW: Track current count
   - deadline (DATETIME)
   - auto_assign (BOOLEAN, DEFAULT FALSE) -- NEW: Auto-assignment feature
   - requires_approval (BOOLEAN, DEFAULT TRUE) -- NEW: Approval requirement
   - tags (JSON) -- NEW: Quest tags for better searchability
   - attachments (JSON) -- NEW: File attachments
   - created_by (FK, INT, REFERENCES users(user_id))
   - assigned_to (FK, INT, REFERENCES users(user_id), NULL)
   - guild_id (FK, INT, REFERENCES guilds(guild_id), NULL) -- NEW: Guild quests
   - created_at (TIMESTAMP, DEFAULT CURRENT_TIMESTAMP)
   - updated_at (TIMESTAMP, DEFAULT CURRENT_TIMESTAMP ON UPDATE)
   - completed_at (TIMESTAMP, NULL)
   - reviewed_at (TIMESTAMP, NULL) -- NEW: Review timestamp

3. GUILDS
   - guild_id (PK, INT, AUTO_INCREMENT)
   - name (VARCHAR(100), UNIQUE, NOT NULL)
   - description (TEXT)
   - detailed_description (TEXT) -- NEW: Extended description
   - emblem_url (VARCHAR(255))
   - banner_url (VARCHAR(255)) -- NEW: Guild banner
   - specialization (VARCHAR(100))
   - focus_areas (JSON) -- NEW: Multiple focus areas
   - max_members (INT, DEFAULT 50)
   - current_members (INT, DEFAULT 1) -- NEW: Track current count
   - is_public (BOOLEAN, DEFAULT TRUE)
   - is_recruiting (BOOLEAN, DEFAULT TRUE) -- NEW: Recruitment status
   - requirements (TEXT) -- NEW: Membership requirements
   - guild_level (INT, DEFAULT 1) -- NEW: Guild progression
   - guild_xp (INT, DEFAULT 0) -- NEW: Guild experience
   - treasury_balance (DECIMAL(12,2), DEFAULT 0.00) -- NEW: Guild treasury
   - reputation_score (INT, DEFAULT 0) -- NEW: Guild reputation
   - founded_date (DATE) -- NEW: Foundation date
   - created_by (FK, INT, REFERENCES users(user_id))
   - created_at (TIMESTAMP, DEFAULT CURRENT_TIMESTAMP)
   - updated_at (TIMESTAMP, DEFAULT CURRENT_TIMESTAMP ON UPDATE)

4. USER_SKILLS
   - skill_id (PK, INT, AUTO_INCREMENT)
   - user_id (FK, INT, REFERENCES users(user_id))
   - skill_name (VARCHAR(50), NOT NULL)
   - skill_category (VARCHAR(50)) -- NEW: Skill categorization
   - proficiency_level (ENUM('Beginner', 'Intermediate', 'Advanced', 'Expert'))
   - years_experience (INT) -- NEW: Experience duration
   - is_verified (BOOLEAN, DEFAULT FALSE) -- NEW: Skill verification
   - endorsements_count (INT, DEFAULT 0) -- NEW: Peer endorsements
   - created_at (TIMESTAMP, DEFAULT CURRENT_TIMESTAMP)
   - updated_at (TIMESTAMP, DEFAULT CURRENT_TIMESTAMP ON UPDATE)

5. QUEST_APPLICATIONS
   - application_id (PK, INT, AUTO_INCREMENT)
   - quest_id (FK, INT, REFERENCES quests(quest_id))
   - applicant_id (FK, INT, REFERENCES users(user_id))
   - message (TEXT)
   - portfolio_links (JSON) -- NEW: Portfolio/work samples
   - proposed_timeline (TEXT) -- NEW: Applicant's timeline
   - proposed_approach (TEXT) -- NEW: How they'll complete the quest
   - status (ENUM('Pending', 'Approved', 'Rejected', 'Withdrawn'), DEFAULT 'Pending')
   - priority_score (INT, DEFAULT 0) -- NEW: Auto-calculated priority
   - applied_at (TIMESTAMP, DEFAULT CURRENT_TIMESTAMP)
   - reviewed_at (TIMESTAMP, NULL)
   - reviewed_by (FK, INT, REFERENCES users(user_id), NULL)
   - review_notes (TEXT) -- NEW: Reviewer's notes

6. GUILD_MEMBERSHIPS
   - membership_id (PK, INT, AUTO_INCREMENT)
   - guild_id (FK, INT, REFERENCES guilds(guild_id))
   - user_id (FK, INT, REFERENCES users(user_id))
   - role (ENUM('Member', 'Officer', 'Leader', 'Elder', 'Recruit'), DEFAULT 'Member')
   - permissions (JSON) -- NEW: Role-based permissions
   - contribution_score (INT, DEFAULT 0) -- NEW: Member contribution tracking
   - joined_at (TIMESTAMP, DEFAULT CURRENT_TIMESTAMP)
   - promoted_at (TIMESTAMP, NULL) -- NEW: Last promotion date
   - left_at (TIMESTAMP, NULL)
   - is_active (BOOLEAN, DEFAULT TRUE)

7. GUILD_APPLICATIONS
   - application_id (PK, INT, AUTO_INCREMENT)
   - guild_id (FK, INT, REFERENCES guilds(guild_id))
   - applicant_id (FK, INT, REFERENCES users(user_id))
   - message (TEXT)
   - motivation (TEXT) -- NEW: Why they want to join
   - relevant_experience (TEXT) -- NEW: Relevant background
   - availability (TEXT) -- NEW: Time commitment
   - status (ENUM('Pending', 'Approved', 'Rejected', 'Withdrawn'), DEFAULT 'Pending')
   - applied_at (TIMESTAMP, DEFAULT CURRENT_TIMESTAMP)
   - reviewed_at (TIMESTAMP, NULL)
   - reviewed_by (FK, INT, REFERENCES users(user_id), NULL)
   - review_notes (TEXT) -- NEW: Reviewer's notes

8. MESSAGES
   - message_id (PK, INT, AUTO_INCREMENT)
   - conversation_id (FK, INT, REFERENCES conversations(conversation_id)) -- NEW: Conversation grouping
   - sender_id (FK, INT, REFERENCES users(user_id))
   - recipient_id (FK, INT, REFERENCES users(user_id))
   - subject (VARCHAR(200))
   - content (TEXT, NOT NULL)
   - message_type (ENUM('text', 'file', 'image', 'system'), DEFAULT 'text') -- NEW
   - attachments (JSON) -- NEW: File attachments
   - is_read (BOOLEAN, DEFAULT FALSE)
   - is_deleted_by_sender (BOOLEAN, DEFAULT FALSE) -- NEW
   - is_deleted_by_recipient (BOOLEAN, DEFAULT FALSE) -- NEW
   - sent_at (TIMESTAMP, DEFAULT CURRENT_TIMESTAMP)
   - read_at (TIMESTAMP, NULL)
   - edited_at (TIMESTAMP, NULL) -- NEW: Message editing

9. CONVERSATIONS -- NEW ENTITY
   - conversation_id (PK, INT, AUTO_INCREMENT)
   - participant_1 (FK, INT, REFERENCES users(user_id))
   - participant_2 (FK, INT, REFERENCES users(user_id))
   - last_message_id (FK, INT, REFERENCES messages(message_id))
   - last_activity (TIMESTAMP, DEFAULT CURRENT_TIMESTAMP)
   - is_archived_by_p1 (BOOLEAN, DEFAULT FALSE)
   - is_archived_by_p2 (BOOLEAN, DEFAULT FALSE)
   - created_at (TIMESTAMP, DEFAULT CURRENT_TIMESTAMP)

10. NOTIFICATIONS
    - notification_id (PK, INT, AUTO_INCREMENT)
    - user_id (FK, INT, REFERENCES users(user_id))
    - type (ENUM('Quest', 'Guild', 'Message', 'System', 'Achievement', 'Payment', 'Application'))
    - title (VARCHAR(200), NOT NULL)
    - message (TEXT, NOT NULL)
    - action_url (VARCHAR(255)) -- NEW: Deep link to relevant page
    - metadata (JSON) -- NEW: Additional notification data
    - priority (ENUM('Low', 'Medium', 'High'), DEFAULT 'Medium') -- NEW
    - is_read (BOOLEAN, DEFAULT FALSE)
    - is_dismissed (BOOLEAN, DEFAULT FALSE) -- NEW
    - created_at (TIMESTAMP, DEFAULT CURRENT_TIMESTAMP)
    - read_at (TIMESTAMP, NULL)
    - expires_at (TIMESTAMP, NULL) -- NEW: Notification expiry

11. TRANSACTIONS
    - transaction_id (PK, INT, AUTO_INCREMENT)
    - user_id (FK, INT, REFERENCES users(user_id))
    - type (ENUM('Purchase', 'Reward', 'Transfer', 'Refund', 'Guild_Contribution', 'Withdrawal'))
    - amount (DECIMAL(10,2), NOT NULL)
    - currency (ENUM('Gold', 'USD', 'Credits'), DEFAULT 'Gold') -- NEW: Multi-currency
    - description (VARCHAR(255))
    - reference_id (VARCHAR(100)) -- NEW: External reference
    - quest_id (FK, INT, REFERENCES quests(quest_id), NULL)
    - guild_id (FK, INT, REFERENCES guilds(guild_id), NULL) -- NEW
    - status (ENUM('Pending', 'Completed', 'Failed', 'Cancelled'), DEFAULT 'Completed') -- NEW
    - payment_method (VARCHAR(50)) -- NEW: Payment method tracking
    - created_at (TIMESTAMP, DEFAULT CURRENT_TIMESTAMP)
    - processed_at (TIMESTAMP, NULL) -- NEW

12. USER_ACHIEVEMENTS
    - achievement_id (PK, INT, AUTO_INCREMENT)
    - user_id (FK, INT, REFERENCES users(user_id))
    - achievement_type (VARCHAR(50), NOT NULL)
    - achievement_name (VARCHAR(100), NOT NULL)
    - description (TEXT)
    - icon_url (VARCHAR(255)) -- NEW: Achievement icon
    - rarity (ENUM('Common', 'Uncommon', 'Rare', 'Epic', 'Legendary'), DEFAULT 'Common') -- NEW
    - points_value (INT, DEFAULT 0) -- NEW: Achievement points
    - category (VARCHAR(50)) -- NEW: Achievement category
    - earned_at (TIMESTAMP, DEFAULT CURRENT_TIMESTAMP)

13. QUEST_REVIEWS
    - review_id (PK, INT, AUTO_INCREMENT)
    - quest_id (FK, INT, REFERENCES quests(quest_id))
    - reviewer_id (FK, INT, REFERENCES users(user_id))
    - reviewee_id (FK, INT, REFERENCES users(user_id))
    - rating (INT, CHECK (rating >= 1 AND rating <= 5))
    - comment (TEXT)
    - review_type (ENUM('Quest_Creator', 'Quest_Completer'), NOT NULL) -- NEW
    - is_public (BOOLEAN, DEFAULT TRUE) -- NEW
    - helpful_votes (INT, DEFAULT 0) -- NEW: Community voting
    - created_at (TIMESTAMP, DEFAULT CURRENT_TIMESTAMP)
    - updated_at (TIMESTAMP, DEFAULT CURRENT_TIMESTAMP ON UPDATE) -- NEW

14. GUILD_QUESTS -- NEW ENTITY
    - guild_quest_id (PK, INT, AUTO_INCREMENT)
    - guild_id (FK, INT, REFERENCES guilds(guild_id))
    - quest_id (FK, INT, REFERENCES quests(quest_id))
    - contribution_percentage (DECIMAL(5,2)) -- Guild's contribution to reward
    - is_guild_exclusive (BOOLEAN, DEFAULT FALSE)
    - created_at (TIMESTAMP, DEFAULT CURRENT_TIMESTAMP)

15. GUILD_TREASURY_TRANSACTIONS -- NEW ENTITY
    - transaction_id (PK, INT, AUTO_INCREMENT)
    - guild_id (FK, INT, REFERENCES guilds(guild_id))
    - user_id (FK, INT, REFERENCES users(user_id), NULL)
    - type (ENUM('Contribution', 'Quest_Reward', 'Expense', 'Withdrawal', 'Investment'))
    - amount (DECIMAL(10,2), NOT NULL)
    - description (TEXT)
    - approved_by (FK, INT, REFERENCES users(user_id), NULL)
    - created_at (TIMESTAMP, DEFAULT CURRENT_TIMESTAMP)

16. GUILD_ROLES -- NEW ENTITY
    - role_id (PK, INT, AUTO_INCREMENT)
    - guild_id (FK, INT, REFERENCES guilds(guild_id))
    - role_name (VARCHAR(50), NOT NULL)
    - permissions (JSON) -- Detailed permissions
    - hierarchy_level (INT) -- Role hierarchy
    - color (VARCHAR(7)) -- Role color (hex)
    - is_default (BOOLEAN, DEFAULT FALSE)
    - created_at (TIMESTAMP, DEFAULT CURRENT_TIMESTAMP)

17. GUILD_AUDIT_LOG -- NEW ENTITY
    - log_id (PK, INT, AUTO_INCREMENT)
    - guild_id (FK, INT, REFERENCES guilds(guild_id))
    - user_id (FK, INT, REFERENCES users(user_id))
    - action (VARCHAR(100), NOT NULL)
    - target_type (VARCHAR(50)) -- What was affected
    - target_id (INT) -- ID of affected entity
    - details (JSON) -- Action details
    - ip_address (VARCHAR(45)) -- User's IP
    - created_at (TIMESTAMP, DEFAULT CURRENT_TIMESTAMP)

18. SKILL_ENDORSEMENTS -- NEW ENTITY
    - endorsement_id (PK, INT, AUTO_INCREMENT)
    - skill_id (FK, INT, REFERENCES user_skills(skill_id))
    - endorser_id (FK, INT, REFERENCES users(user_id))
    - endorsement_type (ENUM('Peer', 'Client', 'Mentor'), DEFAULT 'Peer')
    - comment (TEXT)
    - created_at (TIMESTAMP, DEFAULT CURRENT_TIMESTAMP)

19. QUEST_MILESTONES -- NEW ENTITY
    - milestone_id (PK, INT, AUTO_INCREMENT)
    - quest_id (FK, INT, REFERENCES quests(quest_id))
    - title (VARCHAR(200), NOT NULL)
    - description (TEXT)
    - order_index (INT)
    - is_completed (BOOLEAN, DEFAULT FALSE)
    - completed_at (TIMESTAMP, NULL)
    - created_at (TIMESTAMP, DEFAULT CURRENT_TIMESTAMP)

20. AI_CHAT_CONVERSATIONS -- NEW ENTITY
    - conversation_id (PK, INT, AUTO_INCREMENT)
    - user_id (FK, INT, REFERENCES users(user_id))
    - session_id (VARCHAR(100)) -- Browser session tracking
    - messages (JSON) -- Chat history
    - context_data (JSON) -- User context for AI
    - ai_model (VARCHAR(50), DEFAULT 'deepseek') -- AI model used
    - created_at (TIMESTAMP, DEFAULT CURRENT_TIMESTAMP)
    - updated_at (TIMESTAMP, DEFAULT CURRENT_TIMESTAMP ON UPDATE)

21. REPORTS -- NEW ENTITY
    - report_id (PK, INT, AUTO_INCREMENT)
    - reporter_id (FK, INT, REFERENCES users(user_id))
    - reported_user_id (FK, INT, REFERENCES users(user_id), NULL)
    - reported_quest_id (FK, INT, REFERENCES quests(quest_id), NULL)
    - reported_guild_id (FK, INT, REFERENCES guilds(guild_id), NULL)
    - report_type (ENUM('Spam', 'Harassment', 'Fraud', 'Inappropriate_Content', 'Other'))
    - description (TEXT, NOT NULL)
    - evidence (JSON) -- Screenshots, links, etc.
    - status (ENUM('Open', 'Under_Review', 'Resolved', 'Dismissed'), DEFAULT 'Open')
    - priority (ENUM('Low', 'Medium', 'High', 'Critical'), DEFAULT 'Medium')
    - assigned_to (FK, INT, REFERENCES users(user_id), NULL) -- Admin assigned
    - resolution_notes (TEXT)
    - created_at (TIMESTAMP, DEFAULT CURRENT_TIMESTAMP)
    - resolved_at (TIMESTAMP, NULL)

RELATIONSHIPS:
=============

ONE-TO-MANY RELATIONSHIPS:
-------------------------
1. users(user_id) → quests(created_by)
2. users(user_id) → quests(assigned_to)
3. users(user_id) → guilds(created_by)
4. users(user_id) → user_skills(user_id)
5. users(user_id) → quest_applications(applicant_id)
6. users(user_id) → guild_applications(applicant_id)
7. users(user_id) → messages(sender_id)
8. users(user_id) → messages(recipient_id)
9. users(user_id) → notifications(user_id)
10. users(user_id) → transactions(user_id)
11. users(user_id) → user_achievements(user_id)
12. users(user_id) → ai_chat_conversations(user_id)
13. users(user_id) → reports(reporter_id)
14. quests(quest_id) → quest_applications(quest_id)
15. quests(quest_id) → transactions(quest_id)
16. quests(quest_id) → quest_reviews(quest_id)
17. quests(quest_id) → quest_milestones(quest_id)
18. guilds(guild_id) → guild_memberships(guild_id)
19. guilds(guild_id) → guild_applications(guild_id)
20. guilds(guild_id) → guild_quests(guild_id)
21. guilds(guild_id) → guild_treasury_transactions(guild_id)
22. guilds(guild_id) → guild_roles(guild_id)
23. guilds(guild_id) → guild_audit_log(guild_id)
24. conversations(conversation_id) → messages(conversation_id)
25. user_skills(skill_id) → skill_endorsements(skill_id)

MANY-TO-MANY RELATIONSHIPS:
--------------------------
1. users ↔ guilds (through guild_memberships)
2. users ↔ quests (through quest_applications)
3. guilds ↔ quests (through guild_quests)
4. users ↔ skills (through skill_endorsements)

NEW FEATURES IMPLEMENTED:
========================

🤖 AI INTEGRATION:
- AI chatbot with conversation history
- Context-aware responses
- Multiple AI model support
- Session tracking

🏰 ENHANCED GUILD SYSTEM:
- Guild treasury and financial management
- Advanced role-based permissions
- Guild audit logging
- Guild-specific quests
- Member contribution tracking

💬 IMPROVED MESSAGING:
- Conversation threading
- File attachments
- Message editing and deletion
- Archive functionality

🎯 ADVANCED QUEST SYSTEM:
- Quest milestones and progress tracking
- Enhanced categorization and tagging
- Auto-assignment capabilities
- Detailed requirements and portfolios

👥 USER EXPERIENCE:
- KYC verification system
- Skill endorsements
- Achievement system with rarity
- Comprehensive notification system

🛡️ MODERATION & SECURITY:
- Comprehensive reporting system
- Admin panel with detailed controls
- Audit logging for all actions
- User verification and privacy settings

📊 ANALYTICS & TRACKING:
- Detailed transaction history
- User activity tracking
- Guild performance metrics
- Quest completion analytics

INDEXES FOR PERFORMANCE:
=======================
PRIMARY INDEXES:
- All primary keys (user_id, quest_id, guild_id, etc.)

SECONDARY INDEXES:
- users(username, email, is_active, level)
- quests(status, category, created_by, deadline, guild_id)
- guild_memberships(user_id, guild_id, is_active)
- quest_applications(quest_id, applicant_id, status)
- messages(conversation_id, sender_id, recipient_id, is_read)
- notifications(user_id, is_read, type, created_at)
- transactions(user_id, type, created_at, status)
- guild_audit_log(guild_id, created_at)

COMPOSITE INDEXES:
- quest_applications(quest_id, status, applied_at)
- guild_applications(guild_id, status, applied_at)
- transactions(user_id, type, created_at)
- notifications(user_id, is_read, created_at)
- messages(conversation_id, sent_at)
- guild_memberships(guild_id, role, is_active)

BUSINESS RULES - UPDATED:
========================
1. Users cannot apply to the same quest twice
2. Users cannot join the same guild twice while active
3. Quest creators cannot apply to their own quests
4. Guild creators are automatically leaders with full permissions
5. Only users with appropriate permissions can approve applications
6. Quest rewards are distributed upon completion and review
7. Users must have sufficient gold balance for transactions
8. Guild treasury transactions require appropriate permissions
9. AI chat conversations are linked to user sessions
10. Reports must be handled by admin users
11. Skill endorsements cannot be self-given
12. Quest milestones must be completed in order
13. Guild roles must maintain hierarchy levels
14. Deleted conversations preserve message history for legal compliance
15. KYC verification required for high-value transactions

CONSTRAINTS - UPDATED:
=====================
UNIQUE CONSTRAINTS:
- users(username, email)
- guilds(name)
- guild_memberships(guild_id, user_id) WHERE is_active = TRUE
- quest_applications(quest_id, applicant_id) WHERE status != 'Withdrawn'
- guild_applications(guild_id, applicant_id) WHERE status = 'Pending'
- conversations(participant_1, participant_2) -- Prevent duplicate conversations
- skill_endorsements(skill_id, endorser_id) -- One endorsement per skill per user

CHECK CONSTRAINTS:
- users.level >= 1 AND users.level <= 100
- users.experience_points >= 0
- users.gold_balance >= 0
- quests.reward_gold > 0
- quests.reward_xp > 0
- quests.max_participants >= 1
- quests.current_participants <= max_participants
- quest_reviews.rating BETWEEN 1 AND 5
- transactions.amount != 0
- guilds.current_members <= max_members
- guild_roles.hierarchy_level >= 0

FOREIGN KEY CONSTRAINTS:
- All FK relationships maintain referential integrity
- ON DELETE CASCADE for dependent records (messages, applications)
- ON DELETE SET NULL for optional references (assigned_to, reviewed_by)
- ON DELETE RESTRICT for critical references (quest creators, guild founders)

CURRENT SYSTEM CAPABILITIES:
===========================
✅ User Management with KYC
✅ Advanced Quest System with Milestones
✅ Comprehensive Guild Management
✅ AI-Powered Chatbot
✅ Real-time Messaging with Attachments
✅ Treasury and Financial Management
✅ Role-based Permission System
✅ Reporting and Moderation Tools
✅ Achievement and Skill Systems
✅ Mobile-Responsive Design
✅ Admin Panel with Analytics
✅ Audit Logging and Security
✅ Multi-currency Transaction Support
✅ Advanced Search and Filtering
✅ Notification Management
✅ File Upload and Management

RECOMMENDED NEXT IMPLEMENTATIONS:
================================
🔄 Real-time Features (WebSocket integration)
📱 Mobile App Development
🔐 OAuth Integration (Google, GitHub, Discord)
📊 Advanced Analytics Dashboard
🎮 Gamification Enhancements
🌐 Multi-language Support
📧 Email Notification System
🔔 Push Notifications
💳 Payment Gateway Integration
🤖 Advanced AI Features
📈 Recommendation Engine
🔍 Full-text Search Implementation
[V0_FILE]plaintext:file="dfd.txt" isMerged="true"
PEERQUEST TAVERN - DATA FLOW DIAGRAM (DFD) GUIDE
================================================================

VERSION: 1.0
LAST UPDATED: January 2025
SYSTEM: PeerQuest Tavern - Medieval Quest & Guild Platform

================================================================
TABLE OF CONTENTS
================================================================
1. DFD Overview & Purpose
2. DFD Symbols & Notation
3. Level 0 - Context Diagram
4. Level 1 - System Overview
5. Level 2 - Detailed Process Decomposition
6. Data Stores Documentation
7. External Entities
8. Data Flow Specifications
9. Mobile-Specific Considerations
10. Implementation Guidelines

================================================================
1. DFD OVERVIEW & PURPOSE
================================================================

PURPOSE:
- Document data flows within PeerQuest Tavern system
- Show how data moves between processes, stores, and external entities
- Provide clear visualization of system architecture
- Support development and maintenance activities

SCOPE:
- Complete PeerQuest Tavern platform
- Web and mobile interfaces
- AI chatbot integration
- Guild management system
- Quest lifecycle management
- User authentication and profiles
- Messaging and communication
- Financial transactions (Gold system)
- Admin and moderation tools

================================================================
2. DFD SYMBOLS & NOTATION
================================================================

PROCESS (Circle/Bubble):
○ Represents data transformation
○ Numbered for reference (1.0, 2.0, etc.)
○ Contains process name
○ Shows what the system does with data

DATA STORE (Open Rectangle):
D1 | Data Store Name |
- Represents stored data
- Numbered with D prefix
- Shows where data is kept at rest

EXTERNAL ENTITY (Square):
┌─────────────┐
│ Entity Name │
└─────────────┘
- Source or destination of data
- Outside system boundary
- Users, external systems, etc.

DATA FLOW (Arrow):
────────────────>
Data Flow Name
- Shows data movement
- Labeled with data description
- Direction indicates flow

================================================================
3. LEVEL 0 - CONTEXT DIAGRAM
================================================================

EXTERNAL ENTITIES:
┌─────────────┐    ┌─────────────┐    ┌─────────────┐
│   USERS     │    │   ADMINS    │    │  GUILDS     │
└─────────────┘    └─────────────┘    └─────────────┘

┌─────────────┐    ┌─────────────┐    ┌─────────────┐
│ PAYMENT SYS │    │  AI SERVICE │    │ NOTIFICATION│
└─────────────┘    └─────────────┘    └─────────────┘

MAIN DATA FLOWS:
- User Registration/Login Data
- Quest Creation/Application Data
- Guild Management Data
- Message/Communication Data
- Payment/Transaction Data
- AI Chat Requests/Responses
- Admin Actions/Reports
- System Notifications

CONTEXT DIAGRAM:
                    User Data
                ──────────────>
┌─────────────┐              ┌─────────────────────┐
│    USERS    │              │                     │
└─────────────┘              │   PEERQUEST TAVERN  │
                ←────────────  │      SYSTEM         │
                Quest/Guild   │                     │
                   Data       └─────────────────────┘
                                        │
                              Admin Reports
                                        ▼
                              ┌─────────────┐
                              │   ADMINS    │
                              └─────────────┘

================================================================
4. LEVEL 1 - SYSTEM OVERVIEW
================================================================

MAJOR PROCESSES:

1.0 USER MANAGEMENT
    - Registration/Authentication
    - Profile Management
    - KYC Verification
    - Skill Endorsements

2.0 QUEST SYSTEM
    - Quest Creation
    - Quest Discovery
    - Application Management
    - Progress Tracking
    - Milestone Management

3.0 GUILD SYSTEM
    - Guild Creation/Management
    - Member Management
    - Role Assignment
    - Treasury Management
    - Guild Quests

4.0 COMMUNICATION
    - Direct Messaging
    - Guild Chat
    - File Attachments
    - Conversation Threading

5.0 AI CHATBOT
    - Query Processing
    - Context Management
    - Response Generation
    - Conversation History

6.0 FINANCIAL SYSTEM
    - Gold Transactions
    - Payment Processing
    - Treasury Management
    - Transaction History

7.0 ADMIN SYSTEM
    - User Moderation
    - Content Management
    - Report Processing
    - System Analytics

8.0 NOTIFICATION SYSTEM
    - Real-time Notifications
    - Email Notifications
    - Push Notifications
    - Notification Preferences

================================================================
5. LEVEL 2 - DETAILED PROCESS DECOMPOSITION
================================================================

1.0 USER MANAGEMENT BREAKDOWN:

1.1 AUTHENTICATE USER
    Input: Login Credentials
    Output: Authentication Token, User Session
    Process: Validate credentials, create session

1.2 REGISTER USER
    Input: Registration Data
    Output: User Account, Verification Email
    Process: Validate data, create account, send verification

1.3 MANAGE PROFILE
    Input: Profile Updates
    Output: Updated Profile Data
    Process: Validate changes, update database

1.4 KYC VERIFICATION
    Input: Identity Documents
    Output: Verification Status
    Process: Document validation, status update

1.5 SKILL ENDORSEMENTS
    Input: Endorsement Requests
    Output: Skill Ratings
    Process: Validate endorsements, update skills

2.0 QUEST SYSTEM BREAKDOWN:

2.1 CREATE QUEST
    Input: Quest Details
    Output: Published Quest
    Process: Validate quest, save to database

2.2 BROWSE QUESTS
    Input: Search/Filter Criteria
    Output: Quest List
    Process: Query database, apply filters

2.3 APPLY TO QUEST
    Input: Application Data
    Output: Application Record
    Process: Create application, notify quest owner

2.4 MANAGE APPLICATIONS
    Input: Accept/Reject Decision
    Output: Updated Application Status
    Process: Update status, notify applicant

2.5 TRACK PROGRESS
    Input: Milestone Updates
    Output: Progress Status
    Process: Update milestones, calculate completion

3.0 GUILD SYSTEM BREAKDOWN:

3.1 CREATE GUILD
    Input: Guild Information
    Output: New Guild
    Process: Validate data, create guild, assign owner

3.2 MANAGE MEMBERS
    Input: Member Actions
    Output: Updated Membership
    Process: Add/remove members, update roles

3.3 TREASURY MANAGEMENT
    Input: Financial Transactions
    Output: Updated Treasury
    Process: Process payments, update balances

3.4 GUILD QUESTS
    Input: Guild Quest Data
    Output: Guild-specific Quests
    Process: Create/manage guild-only quests

4.0 COMMUNICATION BREAKDOWN:

4.1 SEND MESSAGE
    Input: Message Content, Recipients
    Output: Delivered Message
    Process: Validate, store, deliver message

4.2 MANAGE CONVERSATIONS
    Input: Conversation Actions
    Output: Updated Conversations
    Process: Create threads, manage participants

4.3 FILE ATTACHMENTS
    Input: File Data
    Output: Stored Files
    Process: Upload, validate, store files

5.0 AI CHATBOT BREAKDOWN:

5.1 PROCESS QUERY
    Input: User Question
    Output: AI Response
    Process: Parse query, generate context-aware response

5.2 MANAGE CONTEXT
    Input: Conversation History
    Output: Updated Context
    Process: Maintain conversation state

5.3 INTEGRATE SERVICES
    Input: API Requests
    Output: AI Service Responses
    Process: Call DeepSeek API, handle responses

================================================================
6. DATA STORES DOCUMENTATION
================================================================

D1 | USERS |
Contents: user_id, username, email, password_hash, profile_data, 
         kyc_status, skill_ratings, preferences, created_at
Access: Read/Write by User Management, Read by other processes
Volume: ~10,000 records
Growth: 100 new users/month

D2 | QUESTS |
Contents: quest_id, title, description, requirements, rewards,
         status, creator_id, guild_id, milestones, created_at
Access: Read/Write by Quest System, Read by other processes
Volume: ~50,000 records
Growth: 500 new quests/month

D3 | GUILDS |
Contents: guild_id, name, description, treasury_balance, level,
         reputation, settings, created_at
Access: Read/Write by Guild System, Read by other processes
Volume: ~1,000 records
Growth: 20 new guilds/month

D4 | MESSAGES |
Contents: message_id, conversation_id, sender_id, content,
         attachments, timestamp, edited_at
Access: Read/Write by Communication System
Volume: ~500,000 records
Growth: 10,000 messages/month

D5 | TRANSACTIONS |
Contents: transaction_id, user_id, amount, type, status,
         reference_id, created_at
Access: Read/Write by Financial System, Read by Admin
Volume: ~100,000 records
Growth: 2,000 transactions/month

D6 | NOTIFICATIONS |
Contents: notification_id, user_id, type, content, status,
         priority, expires_at, created_at
Access: Read/Write by Notification System
Volume: ~200,000 records
Growth: 5,000 notifications/month

D7 | APPLICATIONS |
Contents: application_id, quest_id, applicant_id, status,
         message, applied_at, reviewed_at
Access: Read/Write by Quest System
Volume: ~25,000 records
Growth: 1,000 applications/month

D8 | AUDIT_LOG |
Contents: log_id, user_id, action, details, ip_address,
         timestamp
Access: Write by all systems, Read by Admin
Volume: ~1,000,000 records
Growth: 20,000 entries/month

D9 | AI_CHATS |
Contents: chat_id, user_id, messages, context, created_at,
         updated_at
Access: Read/Write by AI Chatbot System
Volume: ~50,000 records
Growth: 2,000 conversations/month

D10 | REPORTS |
Contents: report_id, reporter_id, reported_content, type,
         status, admin_notes, created_at
Access: Read/Write by Admin System
Volume: ~5,000 records
Growth: 100 reports/month

================================================================
7. EXTERNAL ENTITIES
================================================================

USERS:
- Primary system users
- Quest creators and applicants
- Guild members
- Message senders/receivers
- AI chatbot users

ADMINS:
- System administrators
- Content moderators
- Support staff
- Analytics reviewers

GUILDS:
- Organizational entities
- Quest sponsors
- Treasury managers
- Member communities

PAYMENT SYSTEMS:
- External payment processors
- Banking interfaces
- Cryptocurrency services
- Transaction validators

AI SERVICES:
- DeepSeek API
- Natural language processing
- Context management
- Response generation

NOTIFICATION SERVICES:
- Email providers
- Push notification services
- SMS gateways
- Real-time messaging

================================================================
8. DATA FLOW SPECIFICATIONS
================================================================

USER REGISTRATION FLOW:
User → Registration Data → [1.2 Register User] → User Account → D1|USERS|
[1.2 Register User] → Verification Email → Email Service → User

QUEST CREATION FLOW:
User → Quest Details → [2.1 Create Quest] → Quest Record → D2|QUESTS|
[2.1 Create Quest] → Quest Notification → [8.0 Notification System]

QUEST APPLICATION FLOW:
User → Application Data → [2.3 Apply to Quest] → Application → D7|APPLICATIONS|
[2.3 Apply to Quest] → Application Notification → Quest Owner

GUILD TREASURY FLOW:
Guild Admin → Transaction Request → [3.3 Treasury Management] → Transaction → D5|TRANSACTIONS|
[3.3 Treasury Management] → Updated Balance → D3|GUILDS|

MESSAGING FLOW:
User → Message Content → [4.1 Send Message] → Message Record → D4|MESSAGES|
[4.1 Send Message] → Delivery Notification → Recipient

AI CHAT FLOW:
User → Chat Query → [5.1 Process Query] → AI Request → DeepSeek API
DeepSeek API → AI Response → [5.1 Process Query] → Chat Response → User
[5.1 Process Query] → Conversation Update → D9|AI_CHATS|

PAYMENT FLOW:
User → Payment Request → [6.0 Financial System] → Payment Data → Payment Service
Payment Service → Payment Confirmation → [6.0 Financial System] → Transaction → D5|TRANSACTIONS|

ADMIN MODERATION FLOW:
User → Report → [7.0 Admin System] → Report Record → D10|REPORTS|
Admin → Moderation Action → [7.0 Admin System] → Action Log → D8|AUDIT_LOG|

================================================================
9. MOBILE-SPECIFIC CONSIDERATIONS
================================================================

MOBILE DATA FLOWS:
- Optimized for limited bandwidth
- Efficient data synchronization
- Offline capability support
- Touch-friendly interactions

RESPONSIVE DATA LOADING:
- Progressive data loading
- Image optimization
- Lazy loading implementation
- Cache management

MOBILE NOTIFICATIONS:
- Push notification integration
- Background sync processes
- Battery optimization
- Network-aware operations

TOUCH INTERACTIONS:
- Gesture-based navigation
- Swipe actions
- Long-press menus
- Haptic feedback

================================================================
10. IMPLEMENTATION GUIDELINES
================================================================

DFD CREATION RULES:
1. Each process must have unique number
2. Data flows must be labeled clearly
3. External entities shown as squares
4. Data stores shown as open rectangles
5. Processes shown as circles/bubbles

BALANCING RULES:
1. Inputs/outputs must balance across levels
2. Data stores consistent across levels
3. External entities consistent across levels
4. Process numbering follows hierarchy

NAMING CONVENTIONS:
- Processes: Verb + Object (e.g., "Validate User")
- Data Flows: Noun phrases (e.g., "User Profile")
- Data Stores: Plural nouns (e.g., "USERS")
- External Entities: Singular nouns (e.g., "USER")

VALIDATION CHECKLIST:
□ All processes have inputs and outputs
□ All data flows have sources and destinations
□ No orphaned processes or data stores
□ Consistent naming across levels
□ Proper numbering scheme followed
□ External entities clearly identified
□ Data stores properly defined

MAINTENANCE:
- Update DFDs when system changes
- Review quarterly for accuracy
- Validate against actual implementation
- Document all changes with version control

================================================================
END OF DFD GUIDE
================================================================
[V0_FILE]typescriptreact:file="components/navbar.tsx" isEdit="true" isQuickEdit="true"
"use client"

import { useState } from "react"
import { Star, Menu, X, User, Settings, LogOut, Shield, Search, Bell, MessageSquare, Plus } from "lucide-react"
import { Notifications } from "./notifications"

interface NavbarProps {
  currentUser: any
  setActiveSection: (section: string) => void
  handleLogout: () => void
  openAuthModal: () => void
  openGoldPurchaseModal: () => void
  openPostQuestModal: () => void
  openCreateGuildModal: () => void
}

export function Navbar({
  currentUser,
  setActiveSection,
  handleLogout,
  openAuthModal,
  openGoldPurchaseModal,
  openPostQuestModal,
  openCreateGuildModal,
}: NavbarProps) {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
  const [userDropdownOpen, setUserDropdownOpen] = useState(false)
  const [unreadMessages, setUnreadMessages] = useState(2)
  const [unreadNotifications, setUnreadNotifications] = useState(3)
  const [notificationsOpen, setNotificationsOpen] = useState(false)
  const [quickActionsOpen, setQuickActionsOpen] = useState(false)
  const activeSection = "" // Declare the activeSection variable

const handleNavigation = (section: string) => {
    setActiveSection(section)
    setMobileMenuOpen(false)
    // Close any open dropdowns when navigating
    setUserDropdownOpen(false)
    setNotificationsOpen(false)
    setQuickActionsOpen(false)
  }

return (
    <nav className="bg-[#2C1A1D] text-[#F4F0E6] px-6 py-4 shadow-lg sticky top-0 z-40">
      <div className="max-w-7xl mx-auto flex justify-between items-center">
        {/* Logo */}
        <div className="flex items-center cursor-pointer" onClick={() => handleNavigation("home")}>
          <Star size={24} className="text-[#CDAA7D] mr-2" />
          <div className="text-lg font-bold">PeerQuest Tavern</div>
        </div>

{/* Desktop Navigation */}
        <div className="hidden md:flex items-center space-x-8">
          <button
            onClick={() => handleNavigation("home")}
            className={`uppercase ${
              activeSection === "home"
                ? "text-[#CDAA7D] border-b-2 border-[#CDAA7D]"
                : "text-[#F4F0E6] hover:text-[#CDAA7D]"
            }`}
          >
            Home
          </button>
          <button
            onClick={() => handleNavigation("quest-board")}
            className={`uppercase ${
              activeSection === "quest-board"
                ? "text-[#CDAA7D] border-b-2 border-[#CDAA7D]"
                : "text-[#F4F0E6] hover:text-[#CDAA7D]"
            }`}
          >
            Quest Board
          </button>
          <button
            onClick={() => handleNavigation("guild-hall")}
            className={`uppercase ${
              activeSection === "guild-hall"
                ? "text-[#CDAA7D] border-b-2 border-[#CDAA7D]"
                : "text-[#F4F0E6] hover:text-[#CDAA7D]"
            }`}
          >
            Guild Hall
          </button>
          <button
            onClick={() => handleNavigation("about")}
            className={`uppercase ${
              activeSection === "about"
                ? "text-[#CDAA7D] border-b-2 border-[#CDAA7D]"
                : "text-[#F4F0E6] hover:text-[#CDAA7D]"
            }`}
          >
            About
          </button>
        </div>

<div className="flex items-center">
          {currentUser ? (
            <>
              <div className="hidden md:flex items-center space-x-2 mr-4">
                <div className="bg-[#CDAA7D]/10 px-3 py-1 rounded-full flex items-center">
                  <span className="text-[#CDAA7D] font-medium">{currentUser.gold} Gold</span>
                  <button
                    onClick={(e) => {
                      e.stopPropagation()
                      openGoldPurchaseModal()
                    }}
                    className="ml-2 text-xs bg-[#CDAA7D] text-white px-2 py-0.5 rounded hover:bg-[#B89A6D] transition-colors"
                  >
                    +
                  </button>
                </div>
              </div>

<div className="hidden md:flex items-center space-x-4">
                <div className="relative">
                  <button
                    onClick={() => {
                      setQuickActionsOpen(!quickActionsOpen)
                      // Close other menus
                      setUserDropdownOpen(false)
                      setNotificationsOpen(false)
                    }}
                    className="w-8 h-8 bg-[#CDAA7D] rounded-full flex items-center justify-center text-[#2C1A1D] hover:bg-[#B89A6D] transition-colors"
                  >
                    <Plus size={18} />
                  </button>

{quickActionsOpen && (
                    <div className="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50">
                      <button
                        onClick={() => {
                          setQuickActionsOpen(false)
                          openPostQuestModal()
                        }}
                        className="flex items-center px-4 py-2 text-sm text-[#2C1A1D] hover:bg-[#F4F0E6] w-full text-left"
                      >
                        <Plus size={16} className="mr-2" />
                        Post a Quest
                      </button>
                      <button
                        onClick={() => {
                          setQuickActionsOpen(false)
                          openCreateGuildModal()
                        }}
                        className="flex items-center px-4 py-2 text-sm text-[#2C1A1D] hover:bg-[#F4F0E6] w-full text-left"
                      >
                        <Plus size={16} className="mr-2" />
                        Create a Guild
                      </button>
                    </div>
                  )}
                </div>

<button
                  onClick={() => handleNavigation("search")}
                  className="text-[#F4F0E6] hover:text-[#CDAA7D] transition-colors"
                >
                  <Search size={20} />
                </button>
                <button
                  onClick={() => handleNavigation("messages")}
                  className="text-[#F4F0E6] hover:text-[#CDAA7D] transition-colors relative"
                >
                  <MessageSquare size={20} />
                  {unreadMessages > 0 && (
                    <span className="absolute -top-1 -right-1 bg-red-500 text-white text-xs w-4 h-4 flex items-center justify-center rounded-full">
                      {unreadMessages}
                    </span>
                  )}
                </button>
                <button
                  onClick={() => setNotificationsOpen(!notificationsOpen)}
                  className="text-[#F4F0E6] hover:text-[#CDAA7D] transition-colors relative"
                >
                  <Bell size={20} />
                  {unreadNotifications > 0 && (
                    <span className="absolute -top-1 -right-1 bg-red-500 text-white text-xs w-4 h-4 flex items-center justify-center rounded-full">
                      {unreadNotifications}
                    </span>
                  )}
                </button>
                <div className="relative">
                  <button
                    onClick={() => {
                      setUserDropdownOpen(!userDropdownOpen)
                      // Close notifications if open
                      if (notificationsOpen) setNotificationsOpen(false)
                      if (quickActionsOpen) setQuickActionsOpen(false)
                    }}
                    className="flex items-center focus:outline-none"
                  >
                    <div className="w-8 h-8 bg-[#8B75AA] rounded-full flex items-center justify-center text-white">
                      {currentUser.avatar}
                    </div>
                  </button>

{userDropdownOpen && (
                    <div className="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50">
                      <div className="px-4 py-2 border-b border-gray-200">
                        <p className="text-sm font-medium text-[#2C1A1D]">{currentUser.username}</p>
                        <p className="text-xs text-[#2C1A1D]/60">Level {currentUser.level}</p>
                      </div>
                      <button
                        onClick={() => {
                          handleNavigation("profile")
                          setUserDropdownOpen(false)
                        }}
                        className="flex items-center px-4 py-2 text-sm text-[#2C1A1D] hover:bg-[#F4F0E6] w-full text-left"
                      >
                        <User size={16} className="mr-2" />
                        Profile
                      </button>
                      <button
                        onClick={() => {
                          handleNavigation("quest-management")
                          setUserDropdownOpen(false)
                        }}
                        className="flex items-center px-4 py-2 text-sm text-[#2C1A1D] hover:bg-[#F4F0E6] w-full text-left"
                      >
                        <Search size={16} className="mr-2" />
                        Quest Management
                      </button>
                      <button
                        onClick={() => {
                          handleNavigation("guild-management")
                          setUserDropdownOpen(false)
                        }}
                        className="flex items-center px-4 py-2 text-sm text-[#2C1A1D] hover:bg-[#F4F0E6] w-full text-left"
                      >
                        <Search size={16} className="mr-2" />
                        Guild Management
                      </button>
                      <button
                        onClick={() => {
                          handleNavigation("settings")
                          setUserDropdownOpen(false)
                        }}
                        className="flex items-center px-4 py-2 text-sm text-[#2C1A1D] hover:bg-[#F4F0E6] w-full text-left"
                      >
                        <Settings size={16} className="mr-2" />
                        Settings
                      </button>
                      {currentUser.roles && currentUser.roles.includes("admin") && (
                        <button
                          onClick={() => {
                            handleNavigation("admin")
                            setUserDropdownOpen(false)
                          }}
                          className="flex items-center px-4 py-2 text-sm text-[#2C1A1D] hover:bg-[#F4F0E6] w-full text-left"
                        >
                          <Shield size={16} className="mr-2" />
                          Admin Panel
                        </button>
                      )}
                      <button
                        onClick={handleLogout}
                        className="flex items-center px-4 py-2 text-sm text-red-600 hover:bg-red-50 w-full text-left"
                      >
                        <LogOut size={16} className="mr-2" />
                        Logout
                      </button>
                    </div>
                  )}
                </div>
              </div>
            </>
          ) : (
            <div className="hidden md:block">
              <button
                onClick={openAuthModal}
                className="bg-[#CDAA7D] text-[#2C1A1D] px-4 py-2 rounded hover:bg-[#B8941F] transition-colors uppercase font-medium"
              >
                Enter Tavern
              </button>
            </div>
          )}

{/* Mobile menu button */}
          <div className="md:hidden flex items-center">
            {currentUser && (
              <div className="flex items-center mr-4">
                <div className="bg-[#CDAA7D]/10 px-2 py-1 rounded-full flex items-center">
                  <span className="text-[#CDAA7D] text-sm font-medium">{currentUser.gold}</span>
                  <button
                    onClick={openGoldPurchaseModal}
                    className="ml-1 text-xs bg-[#CDAA7D] text-white px-1.5 py-0.5 rounded hover:bg-[#B89A6D] transition-colors"
                  >
                    +
                  </button>
                </div>
              </div>
            )}
            <button
              onClick={() => {
                setMobileMenuOpen(!mobileMenuOpen)
                // Close other menus
                setUserDropdownOpen(false)
                setNotificationsOpen(false)
                setQuickActionsOpen(false)
              }}
              className="text-[#F4F0E6] hover:text-[#CDAA7D] focus:outline-none"
            >
              {mobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
            </button>
          </div>
        </div>
      </div>

{/* Mobile menu */}
      {mobileMenuOpen && (
        <div className="md:hidden bg-[#2C1A1D] border-t border-[#CDAA7D]/30 mt-4">
          <div className="flex flex-col p-4 space-y-2">
            <button
              onClick={() => handleNavigation("home")}
              className="text-left py-2 text-[#F4F0E6] hover:text-[#CDAA7D] transition-colors uppercase"
            >
              Home
            </button>
            <button
              onClick={() => handleNavigation("quest-board")}
              className="text-left py-2 text-[#F4F0E6] hover:text-[#CDAA7D] transition-colors uppercase"
            >
              Quest Board
            </button>
            <button
              onClick={() => handleNavigation("guild-hall")}
              className="text-left py-2 text-[#F4F0E6] hover:text-[#CDAA7D] transition-colors uppercase"
            >
              Guild Hall
            </button>
            <button
              onClick={() => handleNavigation("about")}
              className="text-left py-2 text-[#F4F0E6] hover:text-[#CDAA7D] transition-colors uppercase"
            >
              About
            </button>

{currentUser ? (
              <>
                <div className="border-t border-[#CDAA7D]/30 pt-2 mt-2">
                  <button
                    onClick={() => {
                      setMobileMenuOpen(false)
                      openPostQuestModal()
                    }}
                    className="flex items-center py-2 text-[#F4F0E6] hover:text-[#CDAA7D] transition-colors w-full text-left"
                  >
                    <Plus size={16} className="mr-2" />
                    Post a Quest
                  </button>
                  <button
                    onClick={() => {
                      setMobileMenuOpen(false)
                      openCreateGuildModal()
                    }}
                    className="flex items-center py-2 text-[#F4F0E6] hover:text-[#CDAA7D] transition-colors w-full text-left"
                  >
                    <Plus size={16} className="mr-2" />
                    Create a Guild
                  </button>
                  <button
                    onClick={() => handleNavigation("search")}
                    className="flex items-center py-2 text-[#F4F0E6] hover:text-[#CDAA7D] transition-colors w-full text-left"
                  >
                    <Search size={16} className="mr-2" />
                    Search Users
                  </button>
                  <button
                    onClick={() => handleNavigation("messages")}
                    className="flex items-center py-2 text-[#F4F0E6] hover:text-[#CDAA7D] transition-colors w-full text-left"
                  >
                    <MessageSquare size={16} className="mr-2" />
                    Messages
                    {unreadMessages > 0 && (
                      <span className="ml-2 bg-red-500 text-white text-xs px-1.5 rounded-full">{unreadMessages}</span>
                    )}
                  </button>
                  <button
                    onClick={() => {
                      setNotificationsOpen(!notificationsOpen)
                      setMobileMenuOpen(false)
                    }}
                    className="flex items-center py-2 text-[#F4F0E6] hover:text-[#CDAA7D] transition-colors w-full text-left"
                  >
                    <Bell size={16} className="mr-2" />
                    Notifications
                    {unreadNotifications > 0 && (
                      <span className="ml-2 bg-red-500 text-white text-xs px-1.5 rounded-full">
                        {unreadNotifications}
                      </span>
                    )}
                  </button>
                  <button
                    onClick={() => handleNavigation("profile")}
                    className="flex items-center py-2 text-[#F4F0E6] hover:text-[#CDAA7D] transition-colors w-full text-left"
                  >
                    <User size={16} className="mr-2" />
                    Profile
                  </button>
                  <button
                    onClick={() => handleNavigation("quest-management")}
                    className="flex items-center py-2 text-[#F4F0E6] hover:text-[#CDAA7D] transition-colors w-full text-left"
                  >
                    <Search size={16} className="mr-2" />
                    Quest Management
                  </button>
                  <button
                    onClick={() => handleNavigation("guild-management")}
                    className="flex items-center py-2 text-[#F4F0E6] hover:text-[#CDAA7D] transition-colors w-full text-left"
                  >
                    <Search size={16} className="mr-2" />
                    Guild Management
                  </button>
                  <button
                    onClick={() => handleNavigation("settings")}
                    className="flex items-center py-2 text-[#F4F0E6] hover:text-[#CDAA7D] transition-colors w-full text-left"
                  >
                    <Settings size={16} className="mr-2" />
                    Settings
                  </button>
                  {currentUser.roles && currentUser.roles.includes("admin") && (
                    <button
                      onClick={() => handleNavigation("admin")}
                      className="flex items-center py-2 text-[#F4F0E6] hover:text-[#CDAA7D] transition-colors w-full text-left"
                    >
                      <Shield size={16} className="mr-2" />
                      Admin Panel
                    </button>
                  )}
                  <button
                    onClick={handleLogout}
                    className="flex items-center py-2 text-red-400 hover:text-red-300 transition-colors w-full text-left"
                  >
                    <LogOut size={16} className="mr-2" />
                    Logout
                  </button>
                </div>
              </>
            ) : (
              <button
                onClick={() => {
                  openAuthModal()
                  setMobileMenuOpen(false)
                }}
                className="mt-2 bg-[#CDAA7D] text-[#2C1A1D] px-4 py-2 rounded hover:bg-[#B8941F] transition-colors uppercase font-medium w-full"
              >
                Enter Tavern
              </button>
            )}
          </div>
        </div>
      )}

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

export const formatTimeRemaining = (deadline: Date) => {
  const now = new Date()
  const diff = deadline.getTime() - now.getTime()

if (diff <= 0) return "Expired"

const days = Math.floor(diff / (1000 * 60 * 60 * 24))
  const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))

if (days > 0) return `${days} day${days > 1 ? "s" : ""}`
  if (hours > 0) return `${hours} hour${hours > 1 ? "s" : ""}`
  return "Less than 1 hour"
}

export const calculateLevel = (xp: number) => {
  return Math.floor(xp / 100) + 1
}

export const getXpForNextLevel = (xp: number) => {
  const currentLevel = calculateLevel(xp)
  return currentLevel * 100
}

export const getXpProgress = (xp: number) => {
  const currentLevelXp = (calculateLevel(xp) - 1) * 100
  const nextLevelXp = calculateLevel(xp) * 100
  return ((xp - currentLevelXp) / (nextLevelXp - currentLevelXp)) * 100
}

export const getDifficultyClass = (difficulty: string) => {
  switch (difficulty) {
    case "easy":
      return "badge-easy"
    case "medium":
      return "badge-medium"
    case "hard":
      return "badge-hard"
    default:
      return "badge-purple"
  }
}
[V0_FILE]typescriptreact:file="components/toast.tsx" isMerged="true"
"use client"

import { useEffect } from "react"

interface ToastProps {
  message: string
  type: string
  onClose: () => void
}

export function Toast({ message, type, onClose }: ToastProps) {
  useEffect(() => {
    const timer = setTimeout(onClose, 3000)
    return () => clearTimeout(timer)
  }, [onClose])

return <div className={`toast ${type}`}>{message}</div>
}
[V0_FILE]png:file="public/images/createaguild.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/createaguild-YMUPb2ujE6ezQuX6p9nnJSWZiDx4sP.png" isMerged="true"
[V0_FILE]png:file="public/images/forgotpass.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/forgotpass-xbJ2VIzwy6xvhluiBtUhY1s38Lwys5.png" isMerged="true"
[V0_FILE]png:file="public/images/login.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/logn-qRzPdR7cI5QIL7GTMCkS5k9uHMJlcY.png" isMerged="true"
[V0_FILE]png:file="public/images/home-no-login.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Home%20no-login-MamFoTg4RIE615f6ahSpd46RwiRBcQ.png" isMerged="true"
[V0_FILE]png:file="public/images/guildhall.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/guildhall-WqejXr0DVuaoHZKvXLo9ntnyOBjtAg.png" isMerged="true"
[V0_FILE]png:file="public/images/postaquest.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/postaquest-xYNkUiQ2f54H4D7EkH0SEgkel0kZUS.png" isMerged="true"
[V0_FILE]png:file="public/images/register.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/register-P9b8WbEClxw3MabndIh9Aqcdx0dPNV.png" isMerged="true"
[V0_FILE]png:file="public/images/questboard.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/questboard-Hea98s8ojNKfDOmVqqPlE2R6RGwEW8.png" isMerged="true"
[V0_FILE]png:file="public/images/profile.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/profile-ehzQE5tsNU5UWoTEVzczeVTHpaOAty.png" isMerged="true"
[V0_FILE]png:file="public/images/settings.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/setting-r2wyCdu7XIJxJLBwBCLPoZJK1iVBwh.png" isMerged="true"
[V0_FILE]typescriptreact:file="tailwind.config.ts" isEdit="true" isQuickEdit="true" isMerged="true"
import type { Config } from "tailwindcss"

const config: Config = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      colors: {
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        chart: {
          "1": "hsl(var(--chart-1))",
          "2": "hsl(var(--chart-2))",
          "3": "hsl(var(--chart-3))",
          "4": "hsl(var(--chart-4))",
          "5": "hsl(var(--chart-5))",
        },
        sidebar: {
          DEFAULT: "hsl(var(--sidebar-background))",
          foreground: "hsl(var(--sidebar-foreground))",
          primary: "hsl(var(--sidebar-primary))",
          "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
          accent: "hsl(var(--sidebar-accent))",
          "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
          border: "hsl(var(--sidebar-border))",
          ring: "hsl(var(--sidebar-ring))",
        },
        "tavern-cream": "#f4f0e6",
        "tavern-brown": "#2c1a1d",
        "tavern-gold": "#ffe26f",
        "tavern-bronze": "#cdaa7d",
        "tavern-purple": "#8b75aa",
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        "accordion-down": {
          from: {
            height: "0",
          },
          to: {
            height: "var(--radix-accordion-content-height)",
          },
        },
        "accordion-up": {
          from: {
            height: "var(--radix-accordion-content-height)",
          },
          to: {
            height: "0",
          },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
      fontFamily: {
        medieval: ["Papyrus", "Bradley Hand", "Brush Script MT", "cursive"],
        cinzel: ["Times New Roman", "Georgia", "serif"],
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
}
export default config
[V0_FILE]typescriptreact:file="components/about.tsx" isEdit="true" isMerged="true"
export function About() {
  const teamMembers = [
    {
      name: "Jenel Esteron",
      role: "API/Database",
      avatar: "J",
      portfolio: "https://github.com/jenelesteron",
      linkedin: "https://linkedin.com/in/jenelesteron",
    },
    {
      name: "Amry Judith Gutlay",
      role: "Middleware/Frontend",
      avatar: "A",
      portfolio: "https://github.com/amrygutlay",
      linkedin: "https://linkedin.com/in/amrygutlay",
    },
    {
      name: "Michael Liam San Diego",
      role: "API/Frontend",
      avatar: "ML",
      portfolio: "https://github.com/michaelsandiego",
      linkedin: "https://linkedin.com/in/michaelsandiego",
    },
    {
      name: "Mark John Wayne Yabes",
      role: "API/Database",
      avatar: "MJ",
      portfolio: "https://github.com/markjohnyabes",
      linkedin: "https://linkedin.com/in/markjohnyabes",
    },
    {
      name: "Tristan Von Ceazar Yanoria",
      role: "Documentation/Frontend",
      avatar: "T",
      portfolio: "https://github.com/tristanyanoria",
      linkedin: "https://linkedin.com/in/tristanyanoria",
    },
    {
      name: "John Odysseus Lim",
      role: "Documentation/Middleware",
      avatar: "J",
      portfolio: "https://github.com/johlim",
      linkedin: "https://linkedin.com/in/johlim",
    },
  ]

return (
    <section className="max-w-7xl mx-auto px-4 py-8">
      <h2 className="text-4xl font-bold text-center mb-4 font-medieval">About PeerQuest Tavern</h2>
      <p className="text-center max-w-3xl mx-auto mb-8 text-tavern-brown/80">
        Learn more about our platform and the team behind it.
      </p>

<div className="card mb-8">
        <div className="p-10">
          <h3 className="text-3xl font-bold mb-6 font-medieval">Our Story</h3>
          <div className="grid md:grid-cols-2 gap-10 items-center">
            <div>
              <p className="mb-5 leading-relaxed">
                PeerQuest Tavern is a fantasy-themed peer learning platform where coding and collaboration become an
                epic adventure. Our mission is to transform the often solitary experience of learning to code into a
                collaborative and engaging journey.
              </p>
              <p className="mb-5 leading-relaxed">
                In the world of PeerQuest, you're not just a developer - you're an adventurer, taking on quests, earning
                experience, and joining guilds of like-minded peers. Whether you're a novice apprentice or a seasoned
                archmage of code, there's a place for you at our tavern.
              </p>
              <p className="leading-relaxed">
                What started as casual meetups to review each other's code soon evolved into a structured system of
                "quests" and "rewards" - and the fantasy theme made the process more engaging and fun.
              </p>
            </div>
            <div className="text-center">
              <div className="w-50 h-50 bg-tavern-bronze rounded-full flex items-center justify-center mx-auto text-8xl">
                🏰
              </div>
            </div>
          </div>
        </div>
      </div>

<div className="card">
        <div className="p-10">
          <h3 className="text-3xl font-bold mb-8 font-medieval text-center">The Team</h3>
          <div className="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 gap-8">
            {teamMembers.map((member, index) => (
              <div key={index} className="text-center bg-white border border-[#CDAA7D] rounded-lg p-6">
                <div className="avatar avatar-xl mx-auto mb-4">{member.avatar}</div>
                <h4 className="text-xl font-bold mb-2 font-medieval">{member.name}</h4>
                <p className="text-tavern-brown/70 mb-4">{member.role}</p>
                <div className="flex justify-center gap-3">
                  <a
                    href={member.portfolio}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="bg-[#CDAA7D] text-[#2C1A1D] px-3 py-1 rounded text-sm font-medium hover:bg-[#B8941F] transition-colors"
                  >
                    Portfolio
                  </a>
                  <a
                    href={member.linkedin}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="bg-[#8B75AA] text-white px-3 py-1 rounded text-sm font-medium hover:bg-[#7A6699] transition-colors"
                  >
                    LinkedIn
                  </a>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="lib/level-utils.ts" isMerged="true"
import type { LevelThreshold } from "./types"

export const levelThresholds: LevelThreshold[] = [
  { level: 1, xpRequired: 0, title: "Novice Adventurer" },
  { level: 2, xpRequired: 100, title: "Apprentice Adventurer" },
  { level: 3, xpRequired: 250, title: "Journeyman Adventurer" },
  { level: 4, xpRequired: 500, title: "Adept Adventurer" },
  { level: 5, xpRequired: 1000, title: "Expert Adventurer" },
  { level: 6, xpRequired: 1750, title: "Master Adventurer" },
  { level: 7, xpRequired: 2750, title: "Grandmaster Adventurer" },
  { level: 8, xpRequired: 4000, title: "Legendary Adventurer" },
  { level: 9, xpRequired: 5500, title: "Mythic Adventurer" },
  { level: 10, xpRequired: 7500, title: "Divine Adventurer" },
]

export const calculateLevel = (xp: number): number => {
  for (let i = levelThresholds.length - 1; i >= 0; i--) {
    if (xp >= levelThresholds[i].xpRequired) {
      return levelThresholds[i].level
    }
  }
  return 1
}

export const getXpForNextLevel = (xp: number): number => {
  const currentLevel = calculateLevel(xp)
  const nextLevelIndex = levelThresholds.findIndex((threshold) => threshold.level === currentLevel + 1)

if (nextLevelIndex === -1) {
    // Max level reached
    return levelThresholds[levelThresholds.length - 1].xpRequired
  }

return levelThresholds[nextLevelIndex].xpRequired
}

export const getXpProgress = (xp: number): number => {
  const currentLevel = calculateLevel(xp)
  const currentLevelIndex = levelThresholds.findIndex((threshold) => threshold.level === currentLevel)
  const nextLevelIndex = levelThresholds.findIndex((threshold) => threshold.level === currentLevel + 1)

if (nextLevelIndex === -1) {
    // Max level reached
    return 100
  }

const currentLevelXp = levelThresholds[currentLevelIndex].xpRequired
  const nextLevelXp = levelThresholds[nextLevelIndex].xpRequired
  const xpForCurrentLevel = xp - currentLevelXp
  const xpRequiredForNextLevel = nextLevelXp - currentLevelXp

return Math.min(100, Math.floor((xpForCurrentLevel / xpRequiredForNextLevel) * 100))
}

export const getLevelTitle = (level: number): string => {
  const levelData = levelThresholds.find((threshold) => threshold.level === level)
  return levelData ? levelData.title : "Adventurer"
}

export const getTotalXpRequired = (level: number): number => {
  const levelData = levelThresholds.find((threshold) => threshold.level === level)
  return levelData ? levelData.xpRequired : 0
}
[V0_FILE]typescriptreact:file="hooks/use-mobile.tsx" isFixed="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"

const MOBILE_BREAKPOINT = 768

export function useMobile() {
  const [isMobile, setIsMobile] = useState(false)

useEffect(() => {
    const checkIfMobile = () => {
      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
    }

// Initial check
    checkIfMobile()

// Add event listener
    window.addEventListener("resize", checkIfMobile)

// Clean up
    return () => {
      window.removeEventListener("resize", checkIfMobile)
    }
  }, [])

return isMobile
}
[V0_FILE]css:file="app/globals.css" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --tavern-dark: #2c1a1d;
  --tavern-cream: #f4f0e6;
  --tavern-gold: #cdaa7d;
  --tavern-purple: #8b75aa;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Inter", sans-serif;
  background-color: var(--tavern-cream);
  color: var(--tavern-dark);
  line-height: 1.6;
}

.font-medieval {
  font-family: "Papyrus", "Bradley Hand", "Brush Script MT", cursive;
  font-weight: bold;
}

.text-shadow {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.progress-bar {
  width: 100%;
  height: 8px;
  background-color: rgba(44, 26, 29, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #cdaa7d 0%, #8b75aa 100%);
  transition: width 0.3s ease;
}

.notification-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background-color: #f44336;
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
}

.toast {
  position: fixed;
  top: 20px;
  right: 20px;
  background-color: var(--tavern-dark);
  color: var(--tavern-cream);
  padding: 12px 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  animation: slideIn 0.3s ease;
}

.toast.success {
  background-color: #4caf50;
}

.toast.error {
  background-color: #f44336;
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.modal-content {
  background-color: var(--tavern-cream);
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  max-width: 90vw;
  max-height: 90vh;
  overflow-y: auto;
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.card {
  background-color: var(--tavern-cream);
  border: 1px solid var(--tavern-gold);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  font-size: 14px;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-primary {
  background-color: var(--tavern-gold);
  color: var(--tavern-dark);
}

.btn-primary:hover:not(:disabled) {
  background-color: #b8941f;
  transform: translateY(-1px);
}

.btn-secondary {
  background-color: var(--tavern-dark);
  color: var(--tavern-cream);
}

.btn-secondary:hover:not(:disabled) {
  background-color: #3d2a2f;
  transform: translateY(-1px);
}

.btn-outline {
  background-color: transparent;
  border: 1px solid var(--tavern-gold);
  color: var(--tavern-dark);
}

.btn-outline:hover:not(:disabled) {
  background-color: var(--tavern-gold);
  color: var(--tavern-cream);
  transform: translateY(-1px);
}

.btn-danger {
  background-color: #f44336;
  color: white;
}

.btn-danger:hover:not(:disabled) {
  background-color: #d32f2f;
  transform: translateY(-1px);
}

.btn-success {
  background-color: #4caf50;
  color: white;
}

.btn-success:hover:not(:disabled) {
  background-color: #45a049;
  transform: translateY(-1px);
}

.input,
.textarea,
.select {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--tavern-gold);
  border-radius: 8px;
  background-color: var(--tavern-cream);
  color: var(--tavern-dark);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  transition: all 0.3s ease;
}

.input:focus,
.textarea:focus,
.select:focus {
  outline: none;
  border-color: var(--tavern-purple);
  box-shadow: 0 0 0 3px rgba(139, 117, 170, 0.2);
}

.textarea {
  min-height: 100px;
  resize: vertical;
}

.search-input {
  position: relative;
}

.search-input input {
  padding-left: 40px;
}

.search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--tavern-gold);
}

.filter-section {
  background-color: rgba(205, 170, 125, 0.1);
  padding: 20px;
  border-radius: 12px;
  margin-bottom: 24px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: linear-gradient(135deg, var(--tavern-cream) 0%, rgba(205, 170, 125, 0.1) 100%);
  border: 1px solid var(--tavern-gold);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--tavern-gold) 0%, var(--tavern-purple) 100%);
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background-color: var(--tavern-cream);
  min-width: 200px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  overflow: hidden;
  z-index: 100;
  border: 1px solid var(--tavern-gold);
}

.dropdown-item {
  display: block;
  width: 100%;
  padding: 12px 16px;
  color: var(--tavern-dark);
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: "Inter", sans-serif;
  font-size: 14px;
}

.dropdown-item:hover {
  background-color: var(--tavern-gold);
  color: var(--tavern-cream);
}

.badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.badge-easy {
  background-color: #4caf50;
  color: white;
}

.badge-medium {
  background-color: #ff9800;
  color: white;
}

.badge-hard {
  background-color: #f44336;
  color: white;
}

.badge-purple {
  background-color: var(--tavern-purple);
  color: white;
}

.badge-status {
  background-color: var(--tavern-gold);
  color: var(--tavern-dark);
}

.avatar {
  width: 40px;
  height: 40px;
  background-color: var(--tavern-purple);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tavern-cream);
  font-weight: bold;
  font-size: 16px;
}

.avatar-sm {
  width: 24px;
  height: 24px;
  font-size: 12px;
}

.avatar-lg {
  width: 80px;
  height: 80px;
  font-size: 32px;
}

.avatar-xl {
  width: 120px;
  height: 120px;
  font-size: 48px;
}

.level-badge {
  background: linear-gradient(135deg, var(--tavern-gold) 0%, #ffe26f 100%);
  color: var(--tavern-dark);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: bold;
  margin-left: 8px;
}

.quest-progress {
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  padding: 12px;
  margin-top: 12px;
}

.quest-progress-bar {
  width: 100%;
  height: 6px;
  background-color: rgba(44, 26, 29, 0.2);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 8px;
}

.quest-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #ff9800 0%, #4caf50 100%);
  transition: width 0.3s ease;
}

.xp-gauge {
  height: 4px;
  background-color: #d1d5db;
  border-radius: 50%;
  overflow: hidden;
}

.xp-gauge-fill {
  height: 100%;
  background-color: var(--tavern-purple);
}

.nav-link {
  padding: 4px 8px;
  color: var(--tavern-cream);
  transition: color 0.3s ease;
}

.nav-link:hover {
  color: var(--tavern-gold);
}

.nav-link-active {
  color: var(--tavern-gold);
}

.tavern-header {
  background-color: var(--tavern-dark);
  color: var(--tavern-cream);
  padding: 4px 0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.tavern-card {
  background-color: white;
  border: 1px solid var(--tavern-gold);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
}

.tavern-card-header {
  background-color: rgba(205, 170, 125, 0.2);
  padding: 4px 0;
}

.tavern-section-title {
  font-size: 2.25rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 2rem;
  color: var(--tavern-dark);
  font-family: "Times New Roman", "Georgia", serif;
}

.tavern-section-subtitle {
  text-align: center;
  color: var(--tavern-purple);
  margin-bottom: 2rem;
}

@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }

.filter-section {
    padding: 16px;
  }

.modal-content {
    margin: 16px;
    max-width: calc(100vw - 32px);
  }

.btn {
    padding: 10px 16px;
    font-size: 14px;
  }
}

.loading-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: currentColor;
  animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--tavern-dark);
  opacity: 0.7;
}

.empty-state-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  opacity: 0.5;
}
[V0_FILE]typescriptreact:file="app/cookie-policy/page.tsx" isEdit="true" isMerged="true"
export default function CookiePolicy() {
  return (
    <div className="container mx-auto px-4 py-8 max-w-4xl">
      <h1 className="text-3xl font-bold mb-6">Cookie Policy</h1>

<div className="prose max-w-none">
        <p className="mb-4">
          This Cookie Policy explains how PeerQuest Tavern uses cookies and similar technologies to recognize you when
          you visit our platform. It explains what these technologies are and why we use them, as well as your rights to
          control our use of them.
        </p>

<h2 className="text-2xl font-semibold mt-6 mb-4">1. What are cookies?</h2>
        <p className="mb-4">
          Cookies are small data files that are placed on your computer or mobile device when you visit a website.
          Cookies are widely used by website owners in order to make their websites work, or to work more efficiently,
          as well as to provide reporting information.
        </p>
        <p className="mb-4">
          Cookies set by the website owner (in this case, PeerQuest Tavern) are called "first-party cookies". Cookies
          set by parties other than the website owner are called "third-party cookies". Third-party cookies enable
          third-party features or functionality to be provided on or through the website (e.g., advertising, interactive
          content, and analytics).
        </p>

<h2 className="text-2xl font-semibold mt-6 mb-4">2. Why do we use cookies?</h2>
        <p className="mb-4">
          We use first-party and third-party cookies for several reasons. Some cookies are required for technical
          reasons in order for our platform to operate, and we refer to these as "essential" or "strictly necessary"
          cookies. Other cookies also enable us to track and target the interests of our users to enhance the experience
          on our platform. Third parties serve cookies through our platform for advertising, analytics, and other
          purposes.
        </p>

<h2 className="text-2xl font-semibold mt-6 mb-4">3. Types of cookies we use</h2>
        <p className="mb-4">
          The specific types of first and third-party cookies served through our platform and the purposes they perform
          include:
        </p>

<h3 className="text-xl font-semibold mt-4 mb-2">Essential Cookies</h3>
        <p className="mb-4">
          These cookies are strictly necessary to provide you with services available through our platform and to use
          some of its features, such as access to secure areas. Without these cookies, services you have asked for, like
          secure login, cannot be provided.
        </p>

<h3 className="text-xl font-semibold mt-4 mb-2">Performance and Functionality Cookies</h3>
        <p className="mb-4">
          These cookies are used to enhance the performance and functionality of our platform but are non-essential to
          their use. However, without these cookies, certain functionality may become unavailable.
        </p>

<h3 className="text-xl font-semibold mt-4 mb-2">Analytics and Customization Cookies</h3>
        <p className="mb-4">
          These cookies collect information that is used either in aggregate form to help us understand how our platform
          is being used or how effective our marketing campaigns are, or to help us customize our platform for you.
        </p>

<h3 className="text-xl font-semibold mt-4 mb-2">Advertising Cookies</h3>
        <p className="mb-4">
          These cookies are used to make advertising messages more relevant to you. They perform functions like
          preventing the same ad from continuously reappearing, ensuring that ads are properly displayed for
          advertisers, and in some cases selecting advertisements that are based on your interests.
        </p>

<h3 className="text-xl font-semibold mt-4 mb-2">Social Media Cookies</h3>
        <p className="mb-4">
          These cookies are used to enable you to share pages and content that you find interesting on our platform
          through third-party social networking and other websites. These cookies may also be used for advertising
          purposes.
        </p>

<h2 className="text-2xl font-semibold mt-6 mb-4">4. How can you control cookies?</h2>
        <p className="mb-4">
          You have the right to decide whether to accept or reject cookies. You can exercise your cookie preferences by
          clicking on the appropriate opt-out links provided in the cookie banner on our platform.
        </p>
        <p className="mb-4">
          You can also set or amend your web browser controls to accept or refuse cookies. If you choose to reject
          cookies, you may still use our platform though your access to some functionality and areas may be restricted.
          As the means by which you can refuse cookies through your web browser controls vary from browser to browser,
          you should visit your browser's help menu for more information.
        </p>

<h2 className="text-2xl font-semibold mt-6 mb-4">5. How often will we update this Cookie Policy?</h2>
        <p className="mb-4">
          We may update this Cookie Policy from time to time in order to reflect, for example, changes to the cookies we
          use or for other operational, legal, or regulatory reasons. Please therefore revisit this Cookie Policy
          regularly to stay informed about our use of cookies and related technologies.
        </p>
        <p className="mb-4">The date at the bottom of this Cookie Policy indicates when it was last updated.</p>

<h2 className="text-2xl font-semibold mt-6 mb-4">6. Where can you get further information?</h2>
        <p className="mb-4">
          If you have any questions about our use of cookies or other technologies, please contact us at
          cookies@peerquesttavern.com.
        </p>

<p className="mt-8 text-sm text-gray-600">Last updated: June 13, 2025</p>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/enhanced-profile.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"

interface User {
  id: number
  name: string
  level: number
  experience: number
  gold: number
  completedQuests: number
  guilds: string[]
}

interface Quest {
  id: number
  title: string
  description: string
  status: string
  assignedTo: number
  xp: number
  reward: number
  createdAt: Date
  completedAt?: Date
}

interface Guild {
  name: string
  emblem: string
}

interface EnhancedProfileProps {
  user: User
  quests: Quest[]
  guilds: Guild[]
  showToast?: (message: string, type?: "success" | "error") => void
}

export const EnhancedProfile: React.FC<EnhancedProfileProps> = ({ user, quests, guilds, showToast }) => {
  const showQuestDetails = (quest: Quest) => {
    // You could implement a modal to show details here
    if (showToast) {
      showToast(`Viewing details for quest: ${quest.title}`)
    }
  }

const completeTestQuest = () => {
    // Create a test completed quest
    const testQuest: Partial<Quest> = {
      id: Date.now(),
      title: `Test Quest ${Math.floor(Math.random() * 1000)}`,
      description: "This is a test quest that was completed for testing",
      status: "completed",
      assignedTo: user.id,
      xp: 50 + Math.floor(Math.random() * 100),
      reward: 25 + Math.floor(Math.random() * 75),
      createdAt: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000),
      completedAt: new Date(),
    }

// Find the setQuests function from parent component if available
    if (window.updateCompletedQuests) {
      window.updateCompletedQuests(testQuest as Quest)
      if (showToast) {
        showToast("Test quest completed successfully!")
      }
    } else {
      if (showToast) {
        showToast("Could not update quests. Function not available.", "error")
      }
    }
  }

const joinTestGuild = () => {
    // Create a test guild to join
    const guildName = `Test Guild ${Math.floor(Math.random() * 1000)}`

if (window.joinGuildTest) {
      window.joinGuildTest(user.id, guildName)
      if (showToast) {
        showToast(`Successfully joined ${guildName}!`)
      }
    } else {
      if (showToast) {
        showToast("Could not join guild. Function not available.", "error")
      }
    }
  }

return (
    <div>
      {/* User Info */}
      <div className="bg-white border border-[#CDAA7D] rounded-lg overflow-hidden">
        <div className="bg-[#CDAA7D] px-4 py-3">
          <h3 className="font-bold text-[#2C1A1D]">{user.name}</h3>
        </div>
        <div className="p-4">
          <p>Level: {user.level}</p>
          <p>Experience: {user.experience}</p>
          <p>Gold: {user.gold}</p>
        </div>
      </div>

{/* Completed Quests */}
      <div className="bg-white border border-[#CDAA7D] rounded-lg overflow-hidden mt-6">
        <div className="bg-[#CDAA7D] px-4 py-3">
          <h4 className="font-bold text-[#2C1A1D]">Completed Quests</h4>
        </div>
        <div className="p-4 space-y-3">
          {user.completedQuests > 0 ? (
            quests
              .filter((q) => q.status === "completed" && q.assignedTo === user.id)
              .slice(0, 3)
              .map((quest) => (
                <div key={quest.id} className="flex justify-between items-center border-b border-[#CDAA7D] pb-2">
                  <div>
                    <h5 className="font-medium text-[#2C1A1D]">{quest.title.toUpperCase()}</h5>
                    <div className="text-xs text-[#8B75AA]">
                      COMPLETED: {new Date(quest.completedAt || Date.now()).toLocaleDateString()}
                    </div>
                  </div>
                  <div className="text-right">
                    <div className="text-sm font-bold text-[#8B75AA]">{quest.xp} XP</div>
                    <div className="text-xs text-[#8B75AA] cursor-pointer" onClick={() => showQuestDetails(quest)}>
                      VIEW DETAILS
                    </div>
                  </div>
                </div>
              ))
          ) : (
            <div className="text-center text-[#8B75AA] py-3">No completed quests yet</div>
          )}

{/* Add test quest completion button */}
          <button
            onClick={completeTestQuest}
            className="mt-3 w-full px-4 py-2 bg-[#8B75AA] text-white rounded hover:bg-[#7A6699] transition-colors"
          >
            Complete a Test Quest
          </button>
        </div>
      </div>

{/* Joined Guilds */}
      <div className="bg-white border border-[#CDAA7D] rounded-lg overflow-hidden mt-6">
        <div className="bg-[#CDAA7D] px-4 py-3">
          <h4 className="font-bold text-[#2C1A1D]">Guild Memberships</h4>
        </div>
        <div className="p-4">
          {user.guilds && user.guilds.length > 0 ? (
            <div className="flex flex-wrap gap-2">
              {user.guilds.map((guildName, index) => {
                const guild = guilds.find((g) => g.name === guildName)
                return (
                  <div
                    key={index}
                    className="flex items-center gap-2 bg-[#8B75AA] text-white px-3 py-1 rounded-full text-sm"
                  >
                    <span>{guild?.emblem || "⚔️"}</span>
                    <span>{guildName.toUpperCase()}</span>
                  </div>
                )
              })}
            </div>
          ) : (
            <div className="text-center text-[#8B75AA] py-3">No guilds joined yet</div>
          )}

{/* Add join test guild button */}
          <button
            onClick={joinTestGuild}
            className="mt-3 w-full px-4 py-2 bg-[#8B75AA] text-white rounded hover:bg-[#7A6699] transition-colors"
          >
            Join a Test Guild
          </button>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/auth-modal.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { X, Eye, EyeOff, AlertCircle } from "lucide-react"

interface AuthModalProps {
  isOpen: boolean
  mode: "login" | "register" | "forgot"
  setMode: (mode: "login" | "register" | "forgot") => void
  onClose: () => void
  onLogin: (credentials: { email: string; password: string }) => void
  onRegister: (userData: { username: string; email: string; password: string; confirmPassword: string }) => void
  onForgotPassword?: (email: string) => void
}

export function AuthModal({ isOpen, mode, setMode, onClose, onLogin, onRegister, onForgotPassword }: AuthModalProps) {
  const [showPassword, setShowPassword] = useState(false)
  const [showConfirmPassword, setShowConfirmPassword] = useState(false)
  const [formErrors, setFormErrors] = useState<Record<string, string>>({})

const [loginForm, setLoginForm] = useState({
    email: "",
    password: "",
    rememberMe: false,
  })

const [registerForm, setRegisterForm] = useState({
    username: "",
    email: "",
    password: "",
    confirmPassword: "",
    birthday: {
      month: "",
      day: "",
      year: "",
    },
    gender: "" as "" | "male" | "female" | "other" | "prefer-not-to-say",
    agreeToTerms: false,
  })

const [forgotForm, setForgotForm] = useState({
    email: "",
  })

if (!isOpen) return null

const validateEmail = (email: string) => {
    const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
    return re.test(email)
  }

const validatePassword = (password: string) => {
    return password.length >= 8
  }

const validateLoginForm = () => {
    const errors: Record<string, string> = {}

if (!loginForm.email) {
      errors.email = "Email is required"
    } else if (!validateEmail(loginForm.email)) {
      errors.email = "Please enter a valid email"
    }

if (!loginForm.password) {
      errors.password = "Password is required"
    }

setFormErrors(errors)
    return Object.keys(errors).length === 0
  }

const validateRegisterForm = () => {
    const errors: Record<string, string> = {}

if (!registerForm.username) {
      errors.username = "Username is required"
    } else if (registerForm.username.length < 3) {
      errors.username = "Username must be at least 3 characters"
    }

if (!registerForm.email) {
      errors.email = "Email is required"
    } else if (!validateEmail(registerForm.email)) {
      errors.email = "Please enter a valid email"
    }

if (!registerForm.password) {
      errors.password = "Password is required"
    } else if (!validatePassword(registerForm.password)) {
      errors.password = "Password must be at least 8 characters"
    }

if (registerForm.password !== registerForm.confirmPassword) {
      errors.confirmPassword = "Passwords do not match"
    }

if (!registerForm.birthday.month || !registerForm.birthday.day || !registerForm.birthday.year) {
      errors.birthday = "Please enter your full birthday"
    }

if (!registerForm.agreeToTerms) {
      errors.agreeToTerms = "You must agree to the Terms of Use"
    }

setFormErrors(errors)
    return Object.keys(errors).length === 0
  }

const validateForgotForm = () => {
    const errors: Record<string, string> = {}

if (!forgotForm.email) {
      errors.email = "Email is required"
    } else if (!validateEmail(forgotForm.email)) {
      errors.email = "Please enter a valid email"
    }

setFormErrors(errors)
    return Object.keys(errors).length === 0
  }

const handleLogin = () => {
    if (validateLoginForm()) {
      onLogin({
        email: loginForm.email,
        password: loginForm.password,
      })
    }
  }

const handleRegister = () => {
    if (validateRegisterForm()) {
      onRegister({
        username: registerForm.username,
        email: registerForm.email,
        password: registerForm.password,
        confirmPassword: registerForm.confirmPassword,
      })
    }
  }

const handleForgotPassword = () => {
    if (validateForgotForm() && onForgotPassword) {
      onForgotPassword(forgotForm.email)
    }
  }

const generateMonthOptions = () => {
    const months = [
      "January",
      "February",
      "March",
      "April",
      "May",
      "June",
      "July",
      "August",
      "September",
      "October",
      "November",
      "December",
    ]

return months.map((month, index) => (
      <option key={month} value={String(index + 1).padStart(2, "0")}>
        {month}
      </option>
    ))
  }

const generateDayOptions = () => {
    const days = []
    for (let i = 1; i <= 31; i++) {
      days.push(
        <option key={i} value={String(i).padStart(2, "0")}>
          {i}
        </option>,
      )
    }
    return days
  }

const generateYearOptions = () => {
    const years = []
    const currentYear = new Date().getFullYear()

for (let i = currentYear - 13; i >= currentYear - 100; i--) {
      years.push(
        <option key={i} value={i}>
          {i}
        </option>,
      )
    }
    return years
  }

return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
      <div className="bg-[#F4F0E6] rounded-lg w-full max-w-md relative max-h-[90vh] overflow-y-auto">
        {/* Header */}
        <div className="bg-[#CDAA7D] px-6 py-4 rounded-t-lg flex justify-between items-center sticky top-0 z-10">
          <h2 className="text-xl font-bold text-[#2C1A1D]">
            {mode === "login" ? "Enter the Tavern" : mode === "register" ? "Join the Tavern" : "Recover Your Password"}
          </h2>
          <button onClick={onClose} className="text-[#2C1A1D] hover:text-[#8B75AA] transition-colors">
            <X size={20} />
          </button>
        </div>

{/* Tabs for Login/Register */}
        {mode !== "forgot" && (
          <div className="flex border-b border-[#CDAA7D]">
            <button
              onClick={() => {
                setMode("login")
                setFormErrors({})
              }}
              className={`flex-1 py-3 text-center font-medium transition-colors ${
                mode === "login" ? "text-[#2C1A1D] border-b-2 border-[#2C1A1D]" : "text-[#8B75AA] hover:text-[#2C1A1D]"
              }`}
            >
              LOGIN
            </button>
            <button
              onClick={() => {
                setMode("register")
                setFormErrors({})
              }}
              className={`flex-1 py-3 text-center font-medium transition-colors ${
                mode === "register"
                  ? "text-[#2C1A1D] border-b-2 border-[#2C1A1D]"
                  : "text-[#8B75AA] hover:text-[#2C1A1D]"
              }`}
            >
              REGISTER
            </button>
          </div>
        )}

{/* Form Content */}
        <div className="p-6 space-y-4">
          {formErrors.auth && (
            <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded flex items-center">
              <AlertCircle size={16} className="mr-2" />
              <span>{formErrors.auth}</span>
            </div>
          )}

{mode === "login" && (
            <>
              <div>
                <label className="block text-sm font-medium text-[#2C1A1D] mb-2">EMAIL</label>
                <input
                  type="email"
                  className={`w-full px-3 py-2 border ${
                    formErrors.email ? "border-red-500" : "border-[#CDAA7D]"
                  } rounded bg-white text-[#2C1A1D] placeholder-[#8B75AA] focus:outline-none focus:border-[#8B75AA]`}
                  placeholder="ENTER YOUR EMAIL"
                  value={loginForm.email}
                  onChange={(e) => setLoginForm((prev) => ({ ...prev, email: e.target.value }))}
                />
                {formErrors.email && <p className="text-red-500 text-xs mt-1">{formErrors.email}</p>}
              </div>
              <div>
                <label className="block text-sm font-medium text-[#2C1A1D] mb-2">PASSWORD</label>
                <div className="relative">
                  <input
                    type={showPassword ? "text" : "password"}
                    className={`w-full px-3 py-2 border ${
                      formErrors.password ? "border-red-500" : "border-[#CDAA7D]"
                    } rounded bg-white text-[#2C1A1D] placeholder-[#8B75AA] focus:outline-none focus:border-[#8B75AA]`}
                    placeholder="••••••••"
                    value={loginForm.password}
                    onChange={(e) => setLoginForm((prev) => ({ ...prev, password: e.target.value }))}
                  />
                  <button
                    type="button"
                    className="absolute right-3 top-1/2 transform -translate-y-1/2 text-[#8B75AA]"
                    onClick={() => setShowPassword(!showPassword)}
                  >
                    {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
                  </button>
                </div>
                {formErrors.password && <p className="text-red-500 text-xs mt-1">{formErrors.password}</p>}
              </div>
              <div className="flex items-center">
                <input
                  type="checkbox"
                  id="remember-me"
                  checked={loginForm.rememberMe}
                  onChange={(e) => setLoginForm((prev) => ({ ...prev, rememberMe: e.target.checked }))}
                  className="w-4 h-4 text-[#8B75AA] border-[#CDAA7D] rounded focus:ring-[#8B75AA]"
                />
                <label htmlFor="remember-me" className="ml-2 text-sm text-[#2C1A1D]">
                  REMEMBER ME
                </label>
              </div>
              <button
                onClick={handleLogin}
                className="w-full bg-[#8B75AA] text-white py-3 rounded font-medium hover:bg-[#7A6699] transition-colors"
              >
                LOGIN
              </button>
              <div className="text-center">
                <button
                  onClick={() => {
                    setMode("forgot")
                    setFormErrors({})
                  }}
                  className="text-[#8B75AA] hover:underline text-sm"
                >
                  FORGOT PASSWORD?
                </button>
              </div>
              <div className="text-center text-[#8B75AA] text-sm">OR LOGIN WITH</div>
              <button className="w-full border border-[#CDAA7D] py-3 rounded font-medium text-[#2C1A1D] hover:bg-[#F4F0E6] transition-colors flex items-center justify-center gap-2">
                <span className="text-lg">G</span>
                CONTINUE WITH GOOGLE
              </button>
            </>
          )}

{mode === "register" && (
            <>
              <div>
                <label className="block text-sm font-medium text-[#2C1A1D] mb-2">USERNAME</label>
                <input
                  type="text"
                  className={`w-full px-3 py-2 border ${
                    formErrors.username ? "border-red-500" : "border-[#CDAA7D]"
                  } rounded bg-white text-[#2C1A1D] placeholder-[#8B75AA] focus:outline-none focus:border-[#8B75AA]`}
                  placeholder="CHOOSE A USERNAME"
                  value={registerForm.username}
                  onChange={(e) => setRegisterForm((prev) => ({ ...prev, username: e.target.value }))}
                />
                {formErrors.username && <p className="text-red-500 text-xs mt-1">{formErrors.username}</p>}
              </div>

<div>
                <label className="block text-sm font-medium text-[#2C1A1D] mb-2">EMAIL</label>
                <input
                  type="email"
                  className={`w-full px-3 py-2 border ${
                    formErrors.email ? "border-red-500" : "border-[#CDAA7D]"
                  } rounded bg-white text-[#2C1A1D] placeholder-[#8B75AA] focus:outline-none focus:border-[#8B75AA]`}
                  placeholder="ENTER YOUR EMAIL"
                  value={registerForm.email}
                  onChange={(e) => setRegisterForm((prev) => ({ ...prev, email: e.target.value }))}
                />
                {formErrors.email && <p className="text-red-500 text-xs mt-1">{formErrors.email}</p>}
              </div>

<div>
                <label className="block text-sm font-medium text-[#2C1A1D] mb-2">PASSWORD</label>
                <div className="relative">
                  <input
                    type={showPassword ? "text" : "password"}
                    className={`w-full px-3 py-2 border ${
                      formErrors.password ? "border-red-500" : "border-[#CDAA7D]"
                    } rounded bg-white text-[#2C1A1D] placeholder-[#8B75AA] focus:outline-none focus:border-[#8B75AA]`}
                    placeholder="CREATE A PASSWORD"
                    value={registerForm.password}
                    onChange={(e) => setRegisterForm((prev) => ({ ...prev, password: e.target.value }))}
                  />
                  <button
                    type="button"
                    className="absolute right-3 top-1/2 transform -translate-y-1/2 text-[#8B75AA]"
                    onClick={() => setShowPassword(!showPassword)}
                  >
                    {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
                  </button>
                </div>
                {formErrors.password && <p className="text-red-500 text-xs mt-1">{formErrors.password}</p>}
              </div>

<div>
                <label className="block text-sm font-medium text-[#2C1A1D] mb-2">CONFIRM PASSWORD</label>
                <div className="relative">
                  <input
                    type={showConfirmPassword ? "text" : "password"}
                    className={`w-full px-3 py-2 border ${
                      formErrors.confirmPassword ? "border-red-500" : "border-[#CDAA7D]"
                    } rounded bg-white text-[#2C1A1D] placeholder-[#8B75AA] focus:outline-none focus:border-[#8B75AA]`}
                    placeholder="CONFIRM YOUR PASSWORD"
                    value={registerForm.confirmPassword}
                    onChange={(e) => setRegisterForm((prev) => ({ ...prev, confirmPassword: e.target.value }))}
                  />
                  <button
                    type="button"
                    className="absolute right-3 top-1/2 transform -translate-y-1/2 text-[#8B75AA]"
                    onClick={() => setShowConfirmPassword(!showConfirmPassword)}
                  >
                    {showConfirmPassword ? <EyeOff size={16} /> : <Eye size={16} />}
                  </button>
                </div>
                {formErrors.confirmPassword && (
                  <p className="text-red-500 text-xs mt-1">{formErrors.confirmPassword}</p>
                )}
              </div>

<div>
                <label className="block text-sm font-medium text-[#2C1A1D] mb-2">BIRTHDAY</label>
                <div className="grid grid-cols-3 gap-2">
                  <select
                    className={`px-3 py-2 border ${
                      formErrors.birthday ? "border-red-500" : "border-[#CDAA7D]"
                    } rounded bg-white text-[#2C1A1D] focus:outline-none focus:border-[#8B75AA]`}
                    value={registerForm.birthday.month}
                    onChange={(e) =>
                      setRegisterForm((prev) => ({
                        ...prev,
                        birthday: { ...prev.birthday, month: e.target.value },
                      }))
                    }
                  >
                    <option value="">Month</option>
                    {generateMonthOptions()}
                  </select>

<select
                    className={`px-3 py-2 border ${
                      formErrors.birthday ? "border-red-500" : "border-[#CDAA7D]"
                    } rounded bg-white text-[#2C1A1D] focus:outline-none focus:border-[#8B75AA]`}
                    value={registerForm.birthday.day}
                    onChange={(e) =>
                      setRegisterForm((prev) => ({
                        ...prev,
                        birthday: { ...prev.birthday, day: e.target.value },
                      }))
                    }
                  >
                    <option value="">Day</option>
                    {generateDayOptions()}
                  </select>

<select
                    className={`px-3 py-2 border ${
                      formErrors.birthday ? "border-red-500" : "border-[#CDAA7D]"
                    } rounded bg-white text-[#2C1A1D] focus:outline-none focus:border-[#8B75AA]`}
                    value={registerForm.birthday.year}
                    onChange={(e) =>
                      setRegisterForm((prev) => ({
                        ...prev,
                        birthday: { ...prev.birthday, year: e.target.value },
                      }))
                    }
                  >
                    <option value="">Year</option>
                    {generateYearOptions()}
                  </select>
                </div>
                {formErrors.birthday && <p className="text-red-500 text-xs mt-1">{formErrors.birthday}</p>}
              </div>

<div>
                <label className="block text-sm font-medium text-[#2C1A1D] mb-2">GENDER (OPTIONAL)</label>
                <div className="grid grid-cols-2 gap-2">
                  <button
                    type="button"
                    className={`py-2 border ${
                      registerForm.gender === "male" ? "bg-[#8B75AA] text-white" : "border-[#CDAA7D] text-[#2C1A1D]"
                    } rounded font-medium transition-colors flex items-center justify-center`}
                    onClick={() => setRegisterForm((prev) => ({ ...prev, gender: "male" }))}
                  >
                    <span className="mr-2">♂</span>
                    MALE
                  </button>

<button
                    type="button"
                    className={`py-2 border ${
                      registerForm.gender === "female" ? "bg-[#8B75AA] text-white" : "border-[#CDAA7D] text-[#2C1A1D]"
                    } rounded font-medium transition-colors flex items-center justify-center`}
                    onClick={() => setRegisterForm((prev) => ({ ...prev, gender: "female" }))}
                  >
                    <span className="mr-2">♀</span>
                    FEMALE
                  </button>
                </div>
              </div>

<div className="flex items-start">
                <div className="flex items-center h-5">
                  <input
                    id="terms"
                    type="checkbox"
                    className={`w-4 h-4 text-[#8B75AA] border ${
                      formErrors.agreeToTerms ? "border-red-500" : "border-[#CDAA7D]"
                    } rounded focus:ring-[#8B75AA]`}
                    checked={registerForm.agreeToTerms}
                    onChange={(e) => setRegisterForm((prev) => ({ ...prev, agreeToTerms: e.target.checked }))}
                  />
                </div>
                <label htmlFor="terms" className="ml-2 text-sm text-[#8B75AA]">
                  BY CLICKING SIGN UP, YOU ARE AGREEING TO THE <span className="underline">TERMS OF USE</span> AND{" "}
                  <span className="underline">PRIVACY POLICY</span>.
                </label>
              </div>
              {formErrors.agreeToTerms && <p className="text-red-500 text-xs">{formErrors.agreeToTerms}</p>}

<button
                onClick={handleRegister}
                className="w-full bg-[#8B75AA] text-white py-3 rounded font-medium hover:bg-[#7A6699] transition-colors"
              >
                REGISTER
              </button>

<div className="text-center text-[#8B75AA] text-sm">OR REGISTER WITH</div>
              <button className="w-full border border-[#CDAA7D] py-3 rounded font-medium text-[#2C1A1D] hover:bg-[#F4F0E6] transition-colors flex items-center justify-center gap-2">
                <span className="text-lg">G</span>
                CONTINUE WITH GOOGLE
              </button>
            </>
          )}

{mode === "forgot" && (
            <>
              <div>
                <label className="block text-sm font-medium text-[#2C1A1D] mb-2">EMAIL ADDRESS</label>
                <input
                  type="email"
                  className={`w-full px-3 py-2 border ${
                    formErrors.email ? "border-red-500" : "border-[#CDAA7D]"
                  } rounded bg-white text-[#2C1A1D] placeholder-[#8B75AA] focus:outline-none focus:border-[#8B75AA]`}
                  placeholder="ENTER YOUR REGISTERED EMAIL"
                  value={forgotForm.email}
                  onChange={(e) => setForgotForm((prev) => ({ ...prev, email: e.target.value }))}
                />
                {formErrors.email && <p className="text-red-500 text-xs mt-1">{formErrors.email}</p>}
              </div>
              <p className="text-sm text-[#8B75AA]">
                ENTER YOUR EMAIL ADDRESS AND WE'LL SEND YOU A LINK TO RESET YOUR PASSWORD.
              </p>
              <div className="flex gap-3">
                <button
                  onClick={() => {
                    setMode("login")
                    setFormErrors({})
                  }}
                  className="flex-1 border border-[#CDAA7D] py-3 rounded font-medium text-[#2C1A1D] hover:bg-[#F4F0E6] transition-colors"
                >
                  CANCEL
                </button>
                <button
                  onClick={handleForgotPassword}
                  className="flex-1 bg-[#8B75AA] text-white py-3 rounded font-medium hover:bg-[#7A6699] transition-colors"
                >
                  SEND RESET LINK
                </button>
              </div>
            </>
          )}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/footer.tsx" isEdit="true" isMerged="true"
import { Star } from "lucide-react"

export function Footer() {
  return (
    <footer className="bg-[#2C1A1D] text-[#F4F0E6] py-12">
      <div className="container mx-auto px-4">
        <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
          {/* PeerQuest Tavern */}
          <div>
            <div className="flex items-center mb-4">
              <Star className="text-[#CDAA7D] mr-2" />
              <h3 className="text-xl font-bold">PeerQuest Tavern</h3>
            </div>
            <p className="text-sm text-[#F4F0E6]/80 mb-4">
              A fantasy-themed platform where adventurers can connect, collaborate, and share skills through quests and
              guilds.
            </p>
          </div>

{/* Quick Links */}
          <div>
            <h4 className="text-[#CDAA7D] font-bold mb-4">Quick Links</h4>
            <ul className="space-y-2">
              <li>
                <a href="#" className="text-[#F4F0E6]/80 hover:text-[#CDAA7D] transition-colors">
                  Home
                </a>
              </li>
              <li>
                <a href="#" className="text-[#F4F0E6]/80 hover:text-[#CDAA7D] transition-colors">
                  Quest Board
                </a>
              </li>
              <li>
                <a href="#" className="text-[#F4F0E6]/80 hover:text-[#CDAA7D] transition-colors">
                  Guild Hall
                </a>
              </li>
              <li>
                <a href="#" className="text-[#F4F0E6]/80 hover:text-[#CDAA7D] transition-colors">
                  About
                </a>
              </li>
            </ul>
          </div>

{/* Legal */}
          <div>
            <h4 className="text-[#CDAA7D] font-bold mb-4">Legal</h4>
            <ul className="space-y-2">
              <li>
                <a href="/terms-of-service" className="text-[#F4F0E6]/80 hover:text-[#CDAA7D] transition-colors">
                  Terms of Service
                </a>
              </li>
              <li>
                <a href="/privacy-policy" className="text-[#F4F0E6]/80 hover:text-[#CDAA7D] transition-colors">
                  Privacy Policy
                </a>
              </li>
              <li>
                <a href="/cookie-policy" className="text-[#F4F0E6]/80 hover:text-[#CDAA7D] transition-colors">
                  Cookie Policy
                </a>
              </li>
            </ul>
          </div>

{/* Connect */}
          <div>
            <h4 className="text-[#CDAA7D] font-bold mb-4">Connect</h4>
            <ul className="space-y-2">
              <li>
                <a
                  href="https://discord.gg"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-[#F4F0E6]/80 hover:text-[#CDAA7D] transition-colors"
                >
                  Discord
                </a>
              </li>
              <li>
                <a
                  href="https://github.com"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-[#F4F0E6]/80 hover:text-[#CDAA7D] transition-colors"
                >
                  GitHub
                </a>
              </li>
              <li>
                <a
                  href="https://twitter.com"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-[#F4F0E6]/80 hover:text-[#CDAA7D] transition-colors"
                >
                  Twitter
                </a>
              </li>
              <li>
                <a
                  href="https://reddit.com"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-[#F4F0E6]/80 hover:text-[#CDAA7D] transition-colors"
                >
                  Reddit
                </a>
              </li>
            </ul>
          </div>
        </div>

<div className="border-t border-[#CDAA7D]/20 mt-8 pt-8 text-center text-sm text-[#F4F0E6]/60">
          <p>© 2023 PeerQuest Tavern. All rights reserved. | Made with ❤️ by the PeerQuest Team</p>
        </div>
      </div>
    </footer>
  )
}
[V0_FILE]typescriptreact:file="components/gold-purchase-modal.tsx" isEdit="true" isMerged="true"
"use client"

import { X, CircleDollarSign, Shield } from "lucide-react"
import type { User } from "@/lib/types"

interface GoldPurchaseModalProps {
  isOpen: boolean
  onClose: () => void
  currentUser: User | null
  setCurrentUser: (user: User | ((prev: User) => User)) => void
  showToast: (message: string, type?: string) => void
}

export function GoldPurchaseModal({ isOpen, onClose, currentUser, setCurrentUser, showToast }: GoldPurchaseModalProps) {
  if (!isOpen) return null

const purchaseGold = (amount: number, price: number) => {
    if (!currentUser) {
      showToast("Please log in to purchase gold", "error")
      return
    }

setCurrentUser((prev) => ({
      ...prev,
      gold: prev.gold + amount,
    }))

onClose()
    showToast(`Successfully purchased ${amount} gold!`)
  }

const packages = [
    { amount: 100, price: 50, popular: false },
    { amount: 250, price: 120, popular: true },
    { amount: 500, price: 230, popular: false },
    { amount: 1000, price: 450, popular: false },
  ]

return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content w-full max-w-lg" onClick={(e) => e.stopPropagation()}>
        <div className="flex justify-between items-center p-6 border-b border-tavern-brown/10">
          <h2 className="text-2xl font-bold font-medieval">Purchase Gold</h2>
          <button onClick={onClose} className="p-1 hover:bg-tavern-brown/10 rounded">
            <X size={20} />
          </button>
        </div>

<div className="p-6">
          <p className="mb-6 text-center text-tavern-brown/80">
            Choose a gold package to enhance your questing experience
          </p>

<div className="space-y-4">
            {packages.map((pkg) => (
              <div
                key={pkg.amount}
                className={`card p-5 cursor-pointer relative transition-all hover:shadow-lg ${
                  pkg.popular ? "border-2 border-tavern-purple" : ""
                }`}
                onClick={() => purchaseGold(pkg.amount, pkg.price)}
              >
                {pkg.popular && (
                  <div className="absolute -top-3 left-1/2 transform -translate-x-1/2 bg-tavern-purple text-white px-3 py-1 rounded-full text-xs font-bold">
                    Most Popular
                  </div>
                )}
                <div className="flex justify-between items-center">
                  <div className="flex items-center gap-3">
                    <CircleDollarSign size={32} className="text-tavern-gold" />
                    <div>
                      <div className="text-xl font-bold">{pkg.amount} Gold</div>
                      <div className="text-sm text-tavern-brown/70">₱{pkg.price} PHP</div>
                    </div>
                  </div>
                  <div className="text-sm text-tavern-purple font-semibold">
                    ₱{(pkg.price / pkg.amount).toFixed(2)} per gold
                  </div>
                </div>
              </div>
            ))}
          </div>

<div className="mt-6 p-4 bg-tavern-purple/10 rounded-lg">
            <div className="flex items-center gap-2 mb-2">
              <Shield size={16} className="text-tavern-purple" />
              <span className="font-semibold text-sm">Secure Payment</span>
            </div>
            <p className="text-xs text-tavern-brown/70">
              All transactions are secured with industry-standard encryption. Gold will be added to your account
              immediately after payment.
            </p>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/notifications.tsx" isFixed="true" isEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Bell, X, Check, Award, Shield, MessageSquare } from "lucide-react"
import type { User as UserType } from "@/lib/types"

interface NotificationsProps {
  currentUser: UserType | null
  onClose: () => void
}

export function Notifications({ currentUser, onClose }: NotificationsProps) {
  const [notifications, setNotifications] = useState<any[]>([])
  const [activeTab, setActiveTab] = useState<"all" | "unread">("all")

// Mock notifications data
  const mockNotifications = [
    {
      id: 1,
      type: "quest_application",
      title: "New Quest Application",
      message: "HeroicAdventurer has applied for your quest 'Create a Website for the Tavern'",
      read: false,
      createdAt: new Date(Date.now() - 30 * 60 * 1000), // 30 minutes ago
      actionUrl: "/quest-management",
    },
    {
      id: 2,
      type: "guild_invite",
      title: "Guild Invitation",
      message: "You've been invited to join the Mystic Brewers Guild",
      read: true,
      createdAt: new Date(Date.now() - 2 * 60 * 60 * 1000), // 2 hours ago
      actionUrl: "/guild-hall",
    },
    {
      id: 3,
      type: "quest_completed",
      title: "Quest Completed",
      message: "Your quest 'Design a Tavern Logo' has been marked as completed",
      read: false,
      createdAt: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000), // 1 day ago
      actionUrl: "/quest-management",
    },
    {
      id: 4,
      type: "level_up",
      title: "Level Up!",
      message: "Congratulations! You've reached level 11",
      read: true,
      createdAt: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000), // 2 days ago
      actionUrl: "/profile",
    },
    {
      id: 5,
      type: "message",
      title: "New Message",
      message: "TavernKeeper sent you a message",
      read: false,
      createdAt: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000), // 3 days ago
      actionUrl: "/messages",
    },
  ]

useEffect(() => {
    // Always use mock notifications for now
    setNotifications(mockNotifications)
  }, [currentUser])

const filteredNotifications =
    activeTab === "all" ? notifications : notifications.filter((notification) => !notification.read)

const markAsRead = (id: number) => {
    setNotifications(
      notifications.map((notification) => (notification.id === id ? { ...notification, read: true } : notification)),
    )
  }

const markAllAsRead = () => {
    setNotifications(notifications.map((notification) => ({ ...notification, read: true })))
  }

const getNotificationIcon = (type: string) => {
    switch (type) {
      case "quest_application":
        return <Shield className="text-blue-500" size={18} />
      case "guild_invite":
        return <MessageSquare className="text-green-500" size={18} />
      case "quest_completed":
        return <Check className="text-purple-500" size={18} />
      case "level_up":
        return <Award className="text-yellow-500" size={18} />
      case "message":
        return <MessageSquare className="text-red-500" size={18} />
      default:
        return <Bell className="text-gray-500" size={18} />
    }
  }

const formatTime = (date: Date) => {
    const now = new Date()
    const diffMs = now.getTime() - date.getTime()
    const diffMins = Math.floor(diffMs / 60000)
    const diffHours = Math.floor(diffMins / 60)
    const diffDays = Math.floor(diffHours / 24)

if (diffMins < 60) {
      return `${diffMins} min ago`
    } else if (diffHours < 24) {
      return `${diffHours} hr ago`
    } else {
      return `${diffDays} day${diffDays > 1 ? "s" : ""} ago`
    }
  }

return (
    <div className="notifications-panel bg-white rounded-lg shadow-lg w-80 max-h-[80vh] overflow-hidden flex flex-col">
      <div className="p-4 border-b border-gray-200 flex justify-between items-center bg-[#2C1A1D] text-white">
        <h3 className="font-bold">Notifications</h3>
        <button onClick={onClose} className="text-white hover:text-gray-300">
          <X size={18} />
        </button>
      </div>

<div className="flex border-b border-gray-200">
        <button
          className={`flex-1 py-2 text-sm font-medium ${
            activeTab === "all" ? "text-[#8B75AA] border-b-2 border-[#8B75AA]" : "text-gray-500 hover:text-[#8B75AA]"
          }`}
          onClick={() => setActiveTab("all")}
        >
          All
        </button>
        <button
          className={`flex-1 py-2 text-sm font-medium ${
            activeTab === "unread" ? "text-[#8B75AA] border-b-2 border-[#8B75AA]" : "text-gray-500 hover:text-[#8B75AA]"
          }`}
          onClick={() => setActiveTab("unread")}
        >
          Unread
        </button>
        <button className="py-2 px-4 text-sm text-gray-500 hover:text-[#8B75AA]" onClick={markAllAsRead}>
          Mark all read
        </button>
      </div>

<div className="overflow-y-auto flex-1">
        {filteredNotifications.length > 0 ? (
          filteredNotifications.map((notification) => (
            <div
              key={notification.id}
              className={`p-4 border-b border-gray-100 hover:bg-gray-50 cursor-pointer ${
                !notification.read ? "bg-blue-50" : ""
              }`}
              onClick={() => markAsRead(notification.id)}
            >
              <div className="flex">
                <div className="mr-3 mt-1">{getNotificationIcon(notification.type)}</div>
                <div className="flex-1">
                  <div className="flex justify-between items-start">
                    <h4 className="font-medium text-sm">{notification.title}</h4>
                    <span className="text-xs text-gray-500 ml-2">{formatTime(notification.createdAt)}</span>
                  </div>
                  <p className="text-sm text-gray-600 mt-1">{notification.message}</p>
                </div>
              </div>
            </div>
          ))
        ) : (
          <div className="p-8 text-center text-gray-500">
            <Bell className="mx-auto mb-2 text-gray-400" size={24} />
            <p>No notifications to display</p>
          </div>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/hero.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import type { User } from "@/lib/types"

interface HeroProps {
  currentUser: User | null
  openAuthModal: () => void
  openRegisterModal: () => void
  navigateToSection: (section: string) => void
}

export function Hero({ currentUser, openAuthModal, openRegisterModal, navigateToSection }: HeroProps) {
  const [isHovered, setIsHovered] = useState(false)

return (
    <section className="relative bg-[#2C1A1D] text-white min-h-[80vh] flex items-center">
      {/* Background Pattern */}
      <div className="absolute inset-0 opacity-10">
        <div className="w-full h-full bg-[url('/placeholder.svg?height=100&width=100')] bg-repeat"></div>
      </div>

<div className="container mx-auto px-6 py-12 relative z-10">
        <div className="flex flex-col md:flex-row items-center">
          <div className="md:w-1/2 mb-10 md:mb-0">
            <h1 className="text-4xl md:text-6xl font-bold mb-6 font-serif">
              Welcome to <span className="text-[#CDAA7D]">PeerQuest Tavern</span>
            </h1>
            <p className="text-xl mb-8 text-gray-300">
              A collaborative platform where adventurers gather to share skills, complete quests, and form guilds.
            </p>

<div className="flex flex-wrap gap-4">
              {!currentUser ? (
                <>
                  <button
                    onClick={openAuthModal}
                    className="px-6 py-3 bg-[#CDAA7D] text-[#2C1A1D] font-bold rounded-lg hover:bg-[#BF9B6E] transition-colors"
                  >
                    JOIN THE TAVERN
                  </button>
                  <button
                    onClick={openRegisterModal}
                    className="px-6 py-3 border-2 border-[#CDAA7D] text-[#CDAA7D] font-bold rounded-lg hover:bg-[#CDAA7D] hover:text-[#2C1A1D] transition-colors"
                  >
                    LEARN MORE
                  </button>
                </>
              ) : (
                <>
                  <button
                    onClick={() => navigateToSection("quest-board")}
                    className="px-6 py-3 bg-[#CDAA7D] text-[#2C1A1D] font-bold rounded-lg hover:bg-[#BF9B6E] transition-colors"
                  >
                    BROWSE QUESTS
                  </button>
                  <button
                    onClick={() => navigateToSection("guild-hall")}
                    className="px-6 py-3 border-2 border-[#CDAA7D] text-[#CDAA7D] font-bold rounded-lg hover:bg-[#CDAA7D] hover:text-[#2C1A1D] transition-colors"
                  >
                    VISIT GUILD HALL
                  </button>
                </>
              )}
            </div>
          </div>

<div className="md:w-1/2 flex justify-center">
            <div
              className="relative w-80 h-80 bg-[#8B75AA] rounded-lg overflow-hidden transform transition-transform duration-500"
              style={{
                transform: isHovered ? "rotate(5deg)" : "rotate(0deg)",
              }}
              onMouseEnter={() => setIsHovered(true)}
              onMouseLeave={() => setIsHovered(false)}
            >
              <div className="absolute inset-0 bg-[url('/placeholder.svg?height=400&width=400')] bg-cover bg-center opacity-30"></div>
              <div className="absolute inset-0 flex flex-col items-center justify-center p-6 text-center">
                <span className="text-6xl mb-4">🏆</span>
                <h3 className="text-2xl font-bold mb-2">Join the Adventure</h3>
                <p className="text-sm">
                  Connect with skilled peers, showcase your talents, and earn rewards by completing quests.
                </p>
              </div>
            </div>
          </div>
        </div>

{/* Features Section */}
        <div className="mt-20">
          <h2 className="text-3xl font-bold text-center mb-12 font-serif">Why Join Our Tavern?</h2>

<div className="grid md:grid-cols-3 gap-8">
            {/* Skill Showcase */}
            <div className="bg-[#3C2A2D] p-6 rounded-lg text-center hover:transform hover:scale-105 transition-transform">
              <div className="w-16 h-16 bg-[#CDAA7D] rounded-full flex items-center justify-center mx-auto mb-6">
                <span className="text-2xl">🔧</span>
              </div>
              <h3 className="text-xl font-bold mb-4">Skill Showcase</h3>
              <p className="text-gray-300">
                Display your talents through completed quests and build a portfolio that showcases your abilities to
                potential collaborators.
              </p>
            </div>

{/* Guild System */}
            <div className="bg-[#3C2A2D] p-6 rounded-lg text-center hover:transform hover:scale-105 transition-transform">
              <div className="w-16 h-16 bg-[#CDAA7D] rounded-full flex items-center justify-center mx-auto mb-6">
                <span className="text-2xl">👥</span>
              </div>
              <h3 className="text-xl font-bold mb-4">Guild System</h3>
              <p className="text-gray-300">
                Join specialized guilds to connect with like-minded individuals, share resources, and collaborate on
                larger projects.
              </p>
            </div>

{/* Reputation System */}
            <div className="bg-[#3C2A2D] p-6 rounded-lg text-center hover:transform hover:scale-105 transition-transform">
              <div className="w-16 h-16 bg-[#CDAA7D] rounded-full flex items-center justify-center mx-auto mb-6">
                <span className="text-2xl">🏆</span>
              </div>
              <h3 className="text-xl font-bold mb-4">Reputation System</h3>
              <p className="text-gray-300">
                Earn badges and increase your reputation by successfully completing quests and receiving positive
                feedback from other adventurers.
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="lib/auth-service.ts" isEdit="true" isMerged="true"
import type { User } from "./types"

// Mock users for demo purposes
const mockUsers = [
  {
    id: 1,
    username: "HeroicAdventurer",
    displayName: "HeroicAdventurer",
    email: "hero@example.com",
    password: "password123",
    avatar: "H",
    bio: "Experienced adventurer looking for challenging quests.",
    level: 10,
    xp: 5600,
    gold: 1200,
    completedQuests: 1,
    createdQuests: 0,
    guilds: ["Mystic Brewers Guild", "Tavern Defenders", "Creative Crafters"],
    roles: ["user"],
    createdAt: new Date("2023-01-15"),
    settings: {
      theme: "dark",
      language: "English",
      privacy: {
        showEmail: false,
        showBirthday: false,
        showGender: false,
      },
      notifications: {
        newQuests: true,
        questApplications: true,
        guildAnnouncements: true,
        directMessages: true,
        newsletter: false,
      },
      security: {
        twoFactorEnabled: false,
        twoFactorMethod: "email",
        backupCodesGenerated: false,
      },
    },
  },
  {
    id: 2,
    username: "TavernKeeper",
    displayName: "Tavern Keeper",
    email: "admin@example.com",
    password: "admin123",
    avatar: "T",
    bio: "Keeper of the PeerQuest Tavern. Administrator and moderator.",
    level: 50,
    xp: 25000,
    gold: 5000,
    completedQuests: 25,
    createdQuests: 15,
    guilds: ["Tavern Defenders"],
    roles: ["user", "admin"],
    createdAt: new Date("2022-10-01"),
    settings: {
      theme: "dark",
      language: "English",
      privacy: {
        showEmail: true,
        showBirthday: false,
        showGender: true,
      },
      notifications: {
        newQuests: true,
        questApplications: true,
        guildAnnouncements: true,
        directMessages: true,
        newsletter: true,
      },
      security: {
        twoFactorEnabled: true,
        twoFactorMethod: "authenticator",
        backupCodesGenerated: true,
      },
    },
  },
]

class AuthService {
  private currentUser: User | null = null

constructor() {
    // Only access localStorage in the browser environment
    if (typeof window !== "undefined") {
      const storedUser = localStorage.getItem("currentUser")
      if (storedUser) {
        try {
          this.currentUser = JSON.parse(storedUser)
        } catch (error) {
          console.error("Failed to parse stored user:", error)
          localStorage.removeItem("currentUser")
        }
      }
    }
  }

async login(email: string, password: string): Promise<User> {
    // Simulate API call delay
    await new Promise((resolve) => setTimeout(resolve, 500))

const user = mockUsers.find((u) => u.email === email && u.password === password)
    if (!user) {
      throw new Error("Invalid email or password")
    }

// Don't include password in the returned user object
    const { password: _, ...userWithoutPassword } = user
    this.currentUser = userWithoutPassword as User

// Only access localStorage in the browser environment
    if (typeof window !== "undefined") {
      localStorage.setItem("currentUser", JSON.stringify(this.currentUser))
    }

return this.currentUser
  }

async register(username: string, email: string, password: string): Promise<User> {
    // Simulate API call delay
    await new Promise((resolve) => setTimeout(resolve, 500))

// Check if user already exists
    if (mockUsers.some((u) => u.email === email)) {
      throw new Error("Email already in use")
    }

// Create new user
    const newUser = {
      id: mockUsers.length + 1,
      username,
      displayName: username,
      email,
      password, // In a real app, this would be hashed
      avatar: username.charAt(0).toUpperCase(),
      bio: "",
      level: 1,
      xp: 0,
      gold: 100,
      completedQuests: 0,
      createdQuests: 0,
      guilds: [],
      roles: ["user"],
      createdAt: new Date(),
      settings: {
        theme: "dark",
        language: "English",
        privacy: {
          showEmail: false,
          showBirthday: false,
          showGender: false,
        },
        notifications: {
          newQuests: true,
          questApplications: true,
          guildAnnouncements: true,
          directMessages: true,
          newsletter: false,
        },
        security: {
          twoFactorEnabled: false,
          twoFactorMethod: "email",
          backupCodesGenerated: false,
        },
      },
    }

mockUsers.push(newUser)

// Don't include password in the returned user object
    const { password: _, ...userWithoutPassword } = newUser
    this.currentUser = userWithoutPassword as User

// Only access localStorage in the browser environment
    if (typeof window !== "undefined") {
      localStorage.setItem("currentUser", JSON.stringify(this.currentUser))
    }

return this.currentUser
  }

async forgotPassword(email: string): Promise<void> {
    // Simulate API call delay
    await new Promise((resolve) => setTimeout(resolve, 500))

const user = mockUsers.find((u) => u.email === email)
    if (!user) {
      throw new Error("No account found with this email")
    }

// In a real app, this would send a password reset email
    console.log(`Password reset requested for ${email}`)
  }

logout(): void {
    this.currentUser = null

// Only access localStorage in the browser environment
    if (typeof window !== "undefined") {
      localStorage.removeItem("currentUser")
    }
  }

async getCurrentUser(): Promise<User | null> {
    // Simulate API call delay
    await new Promise((resolve) => setTimeout(resolve, 100))
    return this.currentUser
  }

isAuthenticated(): boolean {
    return !!this.currentUser
  }

hasRole(role: string): boolean {
    return this.currentUser?.roles?.includes(role) || false
  }
}

export const authService = new AuthService()
[V0_FILE]plaintext:file="componentdefined.txt" isMerged="true"
PEERQUEST TAVERN - COMPONENT DEFINITIONS
=======================================

UI ELEMENTS:
-----------
- Primary Button (purple background, white text)
- Secondary Button (outline style)
- Success Button (green background)
- Danger Button (red background)
- Icon Buttons (small circular with icons)
- Quest Cards (title, description, difficulty badge, action buttons)
- Guild Cards (emblem, name, member count, join button)
- User Cards (avatar, name, level, skills)
- Navigation Panel (navbar with logo, links, user dropdown)
- Modal Panels (overlay, centered content, close button)
- Difficulty Badges (Easy=green, Medium=orange, Hard=red)
- Status Badges (Open, In Progress, Completed, Pending)
- Skill Badges (purple pills)
- Input Fields (styled with tavern colors)
- Select Dropdowns (custom styling)
- Textareas (consistent border styling)

COMPONENTS:
----------
Layout Components:
- Navbar (main navigation, user dropdown, notifications)
- Footer (links, legal info, social media)

Page Components:
- Hero (landing page hero section)
- About (about page content)

Quest Components:
- QuestBoard (display and filter quests)
- QuestDetailsModal (detailed quest information)
- QuestManagement (manage user's quests)
- PostQuestModal (create new quests)

Guild Components:
- GuildHall (display available guilds)
- GuildManagement (manage user's guilds)
- CreateGuildModal (create new guilds)

User Components:
- Profile (user profile display)
- UserSearch (search and discover users)
- Settings (user settings and preferences)

Communication Components:
- MessagingSystem (in-app messaging)
- Notifications (display user notifications)

Modal Components:
- AuthModal (login/register/forgot password)
- GoldSystemModal (gold purchase and management)
- ApplicationsModal (view quest applications)

Admin Components:
- AdminPanel (administrative functions)

FUNCTIONS:
---------
Authentication Functions:
- authService.login()
- authService.register()
- authService.logout()
- authService.getCurrentUser()

Utility Functions:
- formatTimeRemaining()
- getDifficultyClass()
- calculateLevel()
- getXPForLevel()
- cn() (class name utility)

Quest Functions:
- applyForQuest()
- approveApplication()
- completeQuest()

Guild Functions:
- createGuild()
- joinGuild()
- approveGuildApplication()

Notification Functions:
- showToast()
- addNotification()

DATA TYPES:
----------
- User (id, username, email, avatar, level, xp, gold, skills, etc.)
- Quest (id, title, description, category, difficulty, reward, status, etc.)
- Guild (id, name, description, emblem, specialization, members, etc.)
- QuestApplication (id, userId, status, message, appliedAt, etc.)
- GuildApplication (id, guildId, applicant, message, status, etc.)
- Notification (id, userId, type, title, message, read, createdAt, etc.)

SERVICES:
--------
- AuthService (authentication and session management)
- ToastService (toast notifications)
- ValidationService (form validation utilities)

COLORS:
------
Primary Colors:
- Tavern Brown (#2C1A1D)
- Tavern Purple (#8B75AA)
- Tavern Gold (#CDAA7D)
- Tavern Cream (#F4F0E6)

Status Colors:
- Success (#10B981 - Green)
- Warning (#F59E0B - Orange)
- Error (#EF4444 - Red)
- Info (#3B82F6 - Blue)

FILES:
-----
Components:
- about.tsx
- admin-panel.tsx
- applications-modal.tsx
- auth-modal.tsx
- create-guild-modal.tsx
- enhanced-profile.tsx
- footer.tsx
- gold-purchase-modal.tsx
- gold-system-modal.tsx
- guild-hall.tsx
- guild-management.tsx
- hero.tsx
- messaging-system.tsx
- navbar.tsx
- notifications.tsx
- post-quest-modal.tsx
- profile.tsx
- quest-board.tsx
- quest-details-modal.tsx
- quest-management.tsx
- settings.tsx
- toast.tsx
- user-search.tsx

Library Files:
- auth-service.ts
- level-utils.ts
- mock-data.ts
- types.ts
- utils.ts

App Files:
- globals.css
- layout.tsx
- page.tsx
- cookie-policy/page.tsx
- privacy-policy/page.tsx
- terms-of-service/page.tsx

Assets:
- createaguild.png
- forgotpass.png
- login.png
- home-no-login.png
- guildhall.png
- postaquest.png
- register.png
- questboard.png
- profile.png
- settings.png

FEATURES:
--------
- User Authentication (Login/Register/Logout)
- Quest System (Create/Browse/Apply/Complete)
- Guild System (Create/Join/Manage)
- Messaging System (User-to-user communication)
- Notification System (Real-time updates)
- Gold System (Virtual currency)
- Level System (XP-based progression)
- Admin Panel (User/Content management)
- Profile Management (Skills/Bio/Settings)
- Search & Discovery (Users/Quests/Guilds)
- Responsive Design (Mobile/Desktop)
- Toast Notifications (Success/Error messages)
[V0_FILE]plaintext:file="flowchartdefinition.txt" isMerged="true"
PEERQUEST TAVERN - FLOWCHART DEFINITION GUIDE
=============================================

HOW TO CREATE FLOWCHARTS FOR THIS PROJECT
=========================================

FLOWCHART SYMBOLS TO USE:
------------------------
[Rectangle] = Process/Action
[Diamond] = Decision Point
[Oval] = Start/End Point
[Circle] = Connector
[Parallelogram] = Input/Output
[Document] = Data/File
[Database] = Data Storage

MAIN APPLICATION FLOW:
---------------------
Start → Landing Page → Authentication Check → Dashboard/Home

USER AUTHENTICATION FLOW:
-------------------------
[Start] → [User clicks Login/Register] → [AuthModal opens] → 
[User selects Login/Register/Forgot Password] → 
<Login Selected?> → Yes → [Enter credentials] → [Validate] → 
<Valid?> → Yes → [Set user session] → [Close modal] → [Redirect to dashboard]
<Valid?> → No → [Show error message] → [Return to login form]
<Register Selected?> → Yes → [Enter user details] → [Validate] → 
<Valid?> → Yes → [Create account] → [Set user session] → [Close modal] → [Redirect to dashboard]
<Forgot Password?> → Yes → [Enter email] → [Send reset link] → [Show success message]

QUEST SYSTEM FLOW:
-----------------
Quest Creation:
[User clicks "Post Quest"] → [PostQuestModal opens] → [Fill form] → 
[Validate data] → <Valid?> → Yes → [Save quest] → [Show success] → [Close modal]
<Valid?> → No → [Show validation errors] → [Return to form]

Quest Application:
[User views quest] → [Click "Apply"] → [QuestDetailsModal opens] → 
[Click "Apply for Quest"] → [Fill application] → [Submit] → 
[Save application] → [Notify quest owner] → [Show success message]

Quest Management:
[Quest Owner] → [QuestManagement] → [View applications] → 
[Select applicant] → <Approve?> → Yes → [Update application status] → [Notify applicant]
<Approve?> → No → [Reject application] → [Notify applicant]

GUILD SYSTEM FLOW:
-----------------
Guild Creation:
[User clicks "Create Guild"] → [CreateGuildModal opens] → [Fill form] → 
[Upload emblem] → [Validate] → <Valid?> → Yes → [Create guild] → [Set user as leader] → [Close modal]
<Valid?> → No → [Show errors] → [Return to form]

Guild Joining:
[User views guild] → [Click "Join Guild"] → [Fill application] → 
[Submit] → [Save application] → [Notify guild leaders] → [Show success]

Guild Management:
[Guild Leader] → [GuildManagement] → [View applications] → 
[Select applicant] → <Approve?> → Yes → [Add to guild] → [Notify applicant]
<Approve?> → No → [Reject] → [Notify applicant]

MESSAGING SYSTEM FLOW:
---------------------
[User opens messages] → [MessagingSystem loads] → [Display conversations] → 
[User selects conversation] → [Load messages] → [Display chat] → 
[User types message] → [Send] → [Save to database] → [Update UI] → [Notify recipient]

NOTIFICATION SYSTEM FLOW:
------------------------
[Event occurs] → [Create notification] → [Save to database] → 
[Check if user online] → <Online?> → Yes → [Show real-time notification]
<Online?> → No → [Store for later] → [Show when user logs in]

ADMIN PANEL FLOW:
----------------
[Admin login] → [Check admin role] → <Is Admin?> → Yes → [Show AdminPanel]
<Is Admin?> → No → [Deny access] → [Show error]

[AdminPanel] → [Select action] → 
<Manage Users?> → [User management interface]
<Manage Quests?> → [Quest moderation interface]
<Manage Guilds?> → [Guild management interface]
<View Reports?> → [Reports dashboard]

PROFILE MANAGEMENT FLOW:
-----------------------
[User clicks profile] → [Profile component loads] → [Display user data] → 
[User clicks edit] → [Settings modal opens] → [Modify data] → 
[Save changes] → [Validate] → <Valid?> → Yes → [Update database] → [Show success]
<Valid?> → No → [Show errors] → [Return to form]

GOLD SYSTEM FLOW:
----------------
[User clicks gold] → [GoldSystemModal opens] → [Display packages] → 
[User selects package] → [Proceed to payment] → [Process payment] → 
<Payment Success?> → Yes → [Add gold to account] → [Show success]
<Payment Success?> → No → [Show error] → [Return to selection]

SEARCH SYSTEM FLOW:
------------------
[User enters search] → [Validate input] → <Valid?> → Yes → [Query database] → 
[Filter results] → [Display results] → [User selects result] → [Navigate to detail]
<Valid?> → No → [Show validation message]

ERROR HANDLING FLOW:
-------------------
[Error occurs] → [Log error] → [Check error type] → 
<Network Error?> → [Show network error message] → [Retry option]
<Validation Error?> → [Show field-specific errors] → [Highlight fields]
<Server Error?> → [Show generic error] → [Contact support option]
<Authentication Error?> → [Clear session] → [Redirect to login]

DATA FLOW PATTERNS:
------------------
Component → Service → API → Database → API → Service → Component

State Management Flow:
[User Action] → [Update Local State] → [Call Service] → [Update Database] → 
[Return Response] → [Update UI State] → [Re-render Component]

NAVIGATION FLOW:
---------------
[Current Page] → [User clicks navigation] → [Route change] → 
[Load new component] → [Fetch required data] → [Render page]

RESPONSIVE DESIGN FLOW:
----------------------
[Page loads] → [Detect screen size] → <Mobile?> → Yes → [Load mobile layout]
<Mobile?> → No → <Tablet?> → Yes → [Load tablet layout]
<Tablet?> → No → [Load desktop layout]

SECURITY FLOW:
-------------
[User request] → [Check authentication] → <Authenticated?> → No → [Redirect to login]
<Authenticated?> → Yes → [Check authorization] → <Authorized?> → No → [Show access denied]
<Authorized?> → Yes → [Process request] → [Return response]

HOW TO DRAW THE FLOWCHARTS:
--------------------------
1. Start with the main user journey
2. Identify decision points (diamond shapes)
3. Show all possible paths (Yes/No branches)
4. Include error handling paths
5. Use consistent symbols throughout
6. Add labels to all connections
7. Group related processes in swimlanes
8. Use colors to differentiate user types (Admin, Regular User, Guest)
9. Include data flow arrows
10. Add notes for complex business logic

RECOMMENDED FLOWCHART TOOLS:
---------------------------
- Lucidchart
- Draw.io (now diagrams.net)
- Miro
- Figma
- Microsoft Visio
- Creately

FLOWCHART BEST PRACTICES:
------------------------
- Keep it simple and readable
- Use standard flowchart symbols
- Maintain consistent spacing
- Label all decision points clearly
- Show error paths in red
- Use different colors for different user roles
- Include a legend for symbols used
- Break complex flows into multiple diagrams
- Number the steps for reference
- Include start and end points for each flow
[V0_FILE]png:file="public/images/roblox-community-1.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-QwpGlDnR7oDSBb7cqNYRueHTMvGHrO.png" isMerged="true"
[V0_FILE]png:file="public/images/roblox-community-2.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-if70bDxtOsGOzd2GYCustpjXj20Y4D.png" isMerged="true"
[V0_FILE]png:file="public/images/roblox-community-3.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-NKldhvLwq7dFk308LKPUGaGsw0Y3oF.png" isMerged="true"
[V0_FILE]png:file="public/images/roblox-community-4.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-o73FVVywXw00uSaSFIGcb6tCjY8RRz.png" isMerged="true"
[V0_FILE]png:file="public/images/roblox-community-5.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-VKLjwCJKlnokYldvlVgsMzQdIZqJN9.png" isMerged="true"
[V0_FILE]png:file="public/images/roblox-community-6.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-WPXCqRguY7iDDmk8rW9acB3rjyJWts.png" isMerged="true"
[V0_FILE]png:file="public/images/roblox-community-7.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-XyQYZ8irSIm0TtBsRZGs48pN1802Pq.png" isMerged="true"
[V0_FILE]png:file="public/images/roblox-community-8.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-KmdxStH98Ul9QZCz4J0gL7E90w8TbI.png" isMerged="true"
[V0_FILE]png:file="public/images/roblox-community-9.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-TPhgEgQd5mne9gIwTka5zutHj6YBou.png" isMerged="true"
[V0_FILE]png:file="public/images/roblox-community-10.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-JRjVGWNFOwYjKXONEa5oK9EdnzUPo3.png" isMerged="true"
[V0_FILE]typescriptreact:file="lib/mock-data.ts" isEdit="true" isMerged="true"
import type { User, Quest, Guild, Message, Conversation, GuildSettings, GuildRole } from "./types"

const defaultGuildSettings: GuildSettings = {
  joinRequirements: {
    manualApproval: true,
    minimumLevel: 1,
    requiresApplication: true,
  },
  visibility: {
    publiclyVisible: true,
    showOnHomePage: true,
    allowDiscovery: true,
  },
  permissions: {
    whoCanPost: "members",
    whoCanInvite: "members",
    whoCanKick: "admins",
  },
}

const defaultGuildRoles: GuildRole[] = [
  {
    id: 1,
    name: "Owner",
    description: "The guild's owner",
    rank: 255,
    permissions: {
      manageMembers: true,
      manageFunds: true,
      postAnnouncements: true,
      moderateChat: true,
      acceptApplications: true,
      kickMembers: true,
      banMembers: true,
      manageRoles: true,
    },
    color: "#FFD700",
  },
  {
    id: 2,
    name: "Admin",
    description: "Guild administrators",
    rank: 200,
    permissions: {
      manageMembers: true,
      manageFunds: false,
      postAnnouncements: true,
      moderateChat: true,
      acceptApplications: true,
      kickMembers: true,
      banMembers: false,
      manageRoles: false,
    },
    color: "#FF6B6B",
  },
  {
    id: 3,
    name: "Member",
    description: "Regular guild members",
    rank: 1,
    permissions: {
      manageMembers: false,
      manageFunds: false,
      postAnnouncements: false,
      moderateChat: false,
      acceptApplications: false,
      kickMembers: false,
      banMembers: false,
      manageRoles: false,
    },
    color: "#4ECDC4",
  },
]

export const mockUsers: User[] = [
  {
    id: 1,
    username: "HeroicAdventurer",
    displayName: "HeroicAdventurer",
    email: "hero@example.com",
    password: "password123", // In a real app, this would be hashed
    gold: 1200,
    xp: 5600,
    level: 10,
    joinDate: "2023-01-15",
    completedQuests: 1,
    activeQuests: 0,
    guilds: ["Mystic Brewers Guild", "Tavern Defenders", "Creative Crafters"],
    guildIds: [1, 2, 3],
    avatar: "H",
    bio: "Experienced adventurer looking for challenging quests.",
    skills: ["Combat", "Alchemy", "Negotiation"],
    role: "user",
    settings: {
      theme: "dark",
      language: "en",
      privacy: {
        showBirthday: false,
        showGender: true,
        showEmail: false,
      },
      security: {
        twoFactorEnabled: false,
        twoFactorMethod: null,
        backupCodesGenerated: false,
      },
      notifications: {
        newQuests: true,
        questApplications: true,
        guildAnnouncements: true,
        directMessages: true,
        newsletter: false,
      },
    },
  },
  {
    id: 2,
    username: "QuestMaster",
    displayName: "Quest Master",
    email: "admin@example.com",
    password: "admin123", // In a real app, this would be hashed
    gold: 5000,
    xp: 15000,
    level: 25,
    joinDate: "2022-11-05",
    completedQuests: 45,
    activeQuests: 2,
    guilds: ["Tavern Defenders"],
    guildIds: [2],
    avatar: "Q",
    bio: "I create the most challenging quests for worthy adventurers.",
    skills: ["Leadership", "Strategy", "Lore"],
    role: "admin",
    settings: {
      theme: "light",
      language: "en",
      privacy: {
        showBirthday: true,
        showGender: true,
        showEmail: true,
      },
      security: {
        twoFactorEnabled: true,
        twoFactorMethod: "app",
        backupCodesGenerated: true,
      },
      notifications: {
        newQuests: true,
        questApplications: true,
        guildAnnouncements: true,
        directMessages: true,
        newsletter: true,
      },
    },
  },
  {
    id: 3,
    username: "MysticBrewer",
    displayName: "Mystic Brewer",
    email: "brewer@example.com",
    password: "brew123", // In a real app, this would be hashed
    gold: 800,
    xp: 3200,
    level: 7,
    joinDate: "2023-03-20",
    completedQuests: 12,
    activeQuests: 1,
    guilds: ["Mystic Brewers Guild"],
    guildIds: [1],
    avatar: "M",
    bio: "Specializing in rare and magical potions.",
    skills: ["Alchemy", "Herbalism", "Research"],
    role: "user",
    settings: {
      theme: "dark",
      language: "en",
      privacy: {
        showBirthday: false,
        showGender: false,
        showEmail: false,
      },
      security: {
        twoFactorEnabled: false,
        twoFactorMethod: null,
        backupCodesGenerated: false,
      },
      notifications: {
        newQuests: true,
        questApplications: true,
        guildAnnouncements: true,
        directMessages: true,
        newsletter: false,
      },
    },
  },
  {
    id: 4,
    username: "TavernKeeper",
    email: "keeper@example.com",
    password: "secure456",
    avatar: "T",
    level: 15,
    xp: 8900,
    gold: 3500,
    bio: "Owner of the PeerQuest Tavern. Always looking for talented individuals.",
    completedQuests: 42,
    activeQuests: 0,
    guilds: ["Tavern Defenders", "Creative Crafters"],
    guildIds: [2, 3],
    isAdmin: true,
    isBanned: false,
    createdAt: new Date(2022, 10, 5),
    settings: {
      email: "keeper@example.com",
      username: "TavernKeeper",
      password: "secure456",
      avatar: "T",
      notifications: {
        questUpdates: true,
        guildUpdates: true,
        messages: true,
        applicationUpdates: true,
      },
      privacy: {
        showProfile: "everyone",
        showActivity: true,
        showGuilds: true,
      },
      theme: "dark",
      language: "en",
    },
    roles: ["admin"],
  },
  {
    id: 5,
    username: "BannedUser",
    email: "banned@example.com",
    password: "banned123",
    avatar: "B",
    level: 3,
    xp: 1200,
    gold: 100,
    bio: "This account has been banned for violating community guidelines.",
    completedQuests: 2,
    activeQuests: 0,
    guilds: [],
    guildIds: [],
    isAdmin: false,
    isBanned: true,
    createdAt: new Date(2023, 6, 5),
    settings: {
      email: "banned@example.com",
      username: "BannedUser",
      password: "banned123",
      avatar: "B",
      notifications: {
        questUpdates: true,
        guildUpdates: true,
        messages: true,
        applicationUpdates: true,
      },
      privacy: {
        showProfile: "everyone",
        showActivity: true,
        showGuilds: true,
      },
      theme: "light",
      language: "en",
    },
    roles: ["user"],
  },
]

export const mockQuests: Quest[] = [
  {
    id: 1,
    title: "Create a Website for the Tavern",
    description: "We need a new website for the PeerQuest Tavern. Looking for someone with web development skills.",
    poster: mockUsers[1], // TavernKeeper
    reward: 500,
    xp: 300,
    deadline: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000), // 7 days from now
    category: "development",
    difficulty: "medium",
    status: "open",
    createdAt: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000), // 2 days ago
    applicants: [
      {
        id: 1,
        userId: 3,
        username: "QuestSeeker",
        avatar: "Q",
        message: "I have experience with web development and would love to help create a website for the tavern!",
        status: "pending",
        appliedAt: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000), // 1 day ago
      },
    ],
  },
  {
    id: 2,
    title: "Design a Tavern Logo",
    description: "Looking for a creative artist to design a new logo for the PeerQuest Tavern.",
    poster: mockUsers[1], // TavernKeeper
    reward: 300,
    xp: 200,
    deadline: new Date(Date.now() + 5 * 24 * 60 * 60 * 1000), // 5 days from now
    category: "design",
    difficulty: "easy",
    status: "in-progress",
    createdAt: new Date(Date.now() - 4 * 24 * 60 * 60 * 1000), // 4 days ago
    assignedTo: 4, // MysticBrewer
    applicants: [
      {
        id: 2,
        userId: 4,
        username: "MysticBrewer",
        avatar: "M",
        message: "I'm a skilled artist and would love to design a logo for the tavern!",
        status: "accepted",
        appliedAt: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000), // 3 days ago
      },
      {
        id: 3,
        userId: 3,
        username: "QuestSeeker",
        avatar: "Q",
        message: "I have some design experience and would like to try creating a logo for you.",
        status: "rejected",
        appliedAt: new Date(Date.now() - 3.5 * 24 * 60 * 60 * 1000), // 3.5 days ago
      },
    ],
  },
  {
    id: 3,
    title: "Guild Alchemy Research Project",
    description:
      "Need an experienced alchemist to develop a new potion recipe for health regeneration. This is a guild-sponsored quest with shared rewards.",
    poster: mockUsers[3], // MysticBrewer
    reward: 800,
    xp: 400,
    deadline: new Date(Date.now() + 10 * 24 * 60 * 60 * 1000), // 10 days from now
    category: "alchemy",
    difficulty: "hard",
    status: "open",
    createdAt: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000), // 1 day ago
    isGuildQuest: true,
    guildId: 1,
    guildReward: 200,
    applicants: [],
  },
  {
    id: 4,
    title: "Write Tavern Lore",
    description: "Looking for a skilled writer to create lore and stories about the PeerQuest Tavern's history.",
    poster: mockUsers[1], // TavernKeeper
    reward: 400,
    xp: 250,
    deadline: new Date(Date.now() + 14 * 24 * 60 * 60 * 1000), // 14 days from now
    category: "writing",
    difficulty: "medium",
    status: "completed",
    createdAt: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000), // 30 days ago
    completedAt: new Date(Date.now() - 10 * 24 * 60 * 60 * 1000), // 10 days ago
    assignedTo: 1, // HeroicAdventurer
    applicants: [
      {
        id: 4,
        userId: 1,
        username: "HeroicAdventurer",
        avatar: "H",
        message: "I'm a storyteller at heart and would love to craft the history of the tavern!",
        status: "accepted",
        appliedAt: new Date(Date.now() - 28 * 24 * 60 * 60 * 1000), // 28 days ago
      },
    ],
  },
  {
    id: 5,
    title: "Create Tavern Music",
    description: "Seeking a musician to compose a theme song for the PeerQuest Tavern.",
    poster: mockUsers[1], // TavernKeeper
    reward: 600,
    xp: 350,
    deadline: new Date(Date.now() + 20 * 24 * 60 * 60 * 1000), // 20 days from now
    category: "music",
    difficulty: "medium",
    status: "open",
    createdAt: new Date(Date.now() - 5 * 24 * 60 * 60 * 1000), // 5 days ago
    applicants: [
      {
        id: 5,
        userId: 1,
        username: "HeroicAdventurer",
        avatar: "H",
        message: "I play the lute and would love to compose a theme for the tavern!",
        status: "pending",
        appliedAt: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000), // 3 days ago
      },
    ],
  },
]

export const mockGuilds: Guild[] = [
  {
    id: 1,
    name: "Mystic Brewers Guild",
    description:
      "A guild dedicated to the art of potion-making and alchemy. We share recipes, techniques, and collaborate on complex brewing projects.",
    emblem: "🧪",
    poster: mockUsers[2], // MysticBrewer
    members: 3,
    membersList: [1, 2, 3], // HeroicAdventurer, QuestMaster, MysticBrewer
    admins: [2], // MysticBrewer
    specialization: "Alchemy",
    category: "Alchemists",
    createdAt: new Date(2023, 3, 15),
    applications: [],
    funds: 1250,
    settings: defaultGuildSettings,
    roles: defaultGuildRoles,
    socialLinks: ["https://discord.gg/mysticbrewers", "https://twitter.com/mysticbrewers"],
    shout: {
      id: 1,
      content:
        "Welcome to the Mystic Brewers Guild! We're currently working on a new health potion recipe. Check out our latest guild quest!",
      authorId: 2,
      authorName: "MysticBrewer",
      createdAt: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000),
      updatedAt: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000),
    },
  },
  {
    id: 2,
    name: "Tavern Defenders",
    description:
      "The official guild for those who help protect and maintain the PeerQuest Tavern. Members get priority on tavern-related quests.",
    emblem: "🛡️",
    poster: mockUsers[3], // TavernKeeper
    members: 3,
    membersList: [1, 2, 4], // HeroicAdventurer, QuestMaster, TavernKeeper
    admins: [4], // TavernKeeper
    specialization: "Protection",
    category: "Warriors",
    createdAt: new Date(2023, 1, 10),
    applications: [
      {
        id: 1,
        userId: 3,
        username: "MysticBrewer",
        avatar: "M",
        message: "I would like to join the Tavern Defenders to help protect this wonderful establishment!",
        status: "pending",
        appliedAt: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000), // 2 days ago
      },
    ],
    funds: 2800,
    settings: {
      ...defaultGuildSettings,
      joinRequirements: {
        manualApproval: false,
        minimumLevel: 5,
        requiresApplication: false,
      },
    },
    roles: defaultGuildRoles,
    socialLinks: ["https://discord.gg/taverndefenders"],
    shout: {
      id: 2,
      content: "Defenders! We have new tavern security quests available. Let's keep our home safe!",
      authorId: 4,
      authorName: "TavernKeeper",
      createdAt: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000),
      updatedAt: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000),
    },
  },
  {
    id: 3,
    name: "Creative Crafters",
    description:
      "A guild for artists, designers, and creators of all kinds. We collaborate on creative projects and share techniques.",
    emblem: "🎨",
    poster: mockUsers[0], // HeroicAdventurer
    members: 2,
    membersList: [1, 4], // HeroicAdventurer, TavernKeeper
    admins: [1], // HeroicAdventurer
    specialization: "Art & Design",
    category: "Artists",
    createdAt: new Date(2023, 5, 20),
    applications: [
      {
        id: 2,
        userId: 2,
        username: "MysticBrewer",
        avatar: "M",
        message: "I have a passion for art and would love to join your creative guild!",
        status: "pending",
        appliedAt: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000), // 1 day ago
      },
    ],
    funds: 750,
    settings: defaultGuildSettings,
    roles: defaultGuildRoles,
    socialLinks: ["https://instagram.com/creativecrafters", "https://behance.net/creativecrafters"],
    shout: {
      id: 3,
      content: "Artists unite! We're hosting a design contest this week. Show us your creativity!",
      authorId: 1,
      authorName: "HeroicAdventurer",
      createdAt: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000),
      updatedAt: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000),
    },
  },
]

export const mockMessages: Message[] = [
  {
    id: 1,
    senderId: 1, // HeroicAdventurer
    receiverId: 2, // TavernKeeper
    content: "Hello! I'm interested in taking on more quests at the tavern.",
    read: true,
    createdAt: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000), // 3 days ago
  },
  {
    id: 2,
    senderId: 2, // TavernKeeper
    receiverId: 1, // HeroicAdventurer
    content: "Great to hear! I've just posted a new quest for designing a tavern logo. Would you be interested?",
    read: true,
    createdAt: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000 + 30 * 60 * 1000), // 3 days ago + 30 minutes
  },
  {
    id: 3,
    senderId: 1, // HeroicAdventurer
    receiverId: 2, // TavernKeeper
    content: "I'll check it out! My design skills aren't the best, but I might know someone who could help.",
    read: true,
    createdAt: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000 + 45 * 60 * 1000), // 3 days ago + 45 minutes
  },
  {
    id: 4,
    senderId: 2, // TavernKeeper
    receiverId: 1, // HeroicAdventurer
    content: "That would be wonderful! Let me know if you find someone suitable.",
    read: true,
    createdAt: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000 + 60 * 60 * 1000), // 3 days ago + 60 minutes
  },
  {
    id: 5,
    senderId: 1, // HeroicAdventurer
    receiverId: 2, // TavernKeeper
    content: "By the way, I completed the tavern lore quest. The documents should be on your desk.",
    read: true,
    createdAt: new Date(Date.now() - 10 * 24 * 60 * 60 * 1000), // 10 days ago
  },
  {
    id: 6,
    senderId: 2, // TavernKeeper
    receiverId: 1, // HeroicAdventurer
    content: "I just read through them. Excellent work! Your reward has been processed.",
    read: true,
    createdAt: new Date(Date.now() - 9 * 24 * 60 * 60 * 1000), // 9 days ago
  },
  {
    id: 7,
    senderId: 2, // TavernKeeper
    receiverId: 1, // HeroicAdventurer
    content: "Are you available to discuss a new special quest? It's something that requires your expertise.",
    read: false,
    createdAt: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000), // 1 day ago
  },
  {
    id: 8,
    senderId: 3, // QuestSeeker
    receiverId: 1, // HeroicAdventurer
    content:
      "Hello! I'm new to the tavern and was hoping to get some advice from an experienced adventurer like yourself.",
    read: false,
    createdAt: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000), // 2 days ago
  },
  {
    id: 9,
    senderId: 4, // MysticBrewer
    receiverId: 1, // HeroicAdventurer
    content: "I saw your application for the music quest. I'm also a musician! Perhaps we could collaborate sometime?",
    read: true,
    createdAt: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000), // 2 days ago
  },
  {
    id: 10,
    senderId: 1, // HeroicAdventurer
    receiverId: 4, // MysticBrewer
    content: "That sounds like a great idea! What instruments do you play?",
    read: true,
    createdAt: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000 + 30 * 60 * 1000), // 2 days ago + 30 minutes
  },
]

export const mockConversations: Conversation[] = [
  {
    id: 1,
    participants: [1, 2], // HeroicAdventurer, TavernKeeper
    lastMessage: "Are you available to discuss a new special quest? It's something that requires your expertise.",
    lastMessageDate: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000), // 1 day ago
    unreadCount: 1,
  },
  {
    id: 2,
    participants: [1, 3], // HeroicAdventurer, QuestSeeker
    lastMessage:
      "Hello! I'm new to the tavern and was hoping to get some advice from an experienced adventurer like yourself.",
    lastMessageDate: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000), // 2 days ago
    unreadCount: 1,
  },
  {
    id: 3,
    participants: [1, 4], // HeroicAdventurer, MysticBrewer
    lastMessage: "That sounds like a great idea! What instruments do you play?",
    lastMessageDate: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000 + 30 * 60 * 1000), // 2 days ago + 30 minutes
    unreadCount: 0,
  },
]
[V0_FILE]png:file="public/images/roblox-audit-log.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-qnW13Xo8fk1rDbyhMlEXOKfnnHjWQ7.png" isMerged="true"
[V0_FILE]png:file="public/images/roblox-payouts.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-CbGaagRGMYQGogRVoZJBSmhunwI5kg.png" isMerged="true"
[V0_FILE]typescriptreact:file="app/terms-of-service/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
export default function TermsOfService() {
  return (
    <div className="container mx-auto px-4 py-8 max-w-4xl">
      <h1 className="text-3xl font-bold mb-6">Terms of Service</h1>

<div className="prose max-w-none">
        <p className="mb-4">
          Welcome to PeerQuest Tavern. By accessing or using our service, you agree to be bound by these Terms of
          Service.
        </p>

<h2 className="text-2xl font-semibold mt-6 mb-4">1. Acceptance of Terms</h2>
        <p className="mb-4">
          By accessing or using the PeerQuest Tavern platform, you agree to be bound by these Terms of Service and all
          applicable laws and regulations. If you do not agree with any of these terms, you are prohibited from using or
          accessing this site.
        </p>

<h2 className="text-2xl font-semibold mt-6 mb-4">2. User Accounts</h2>
        <p className="mb-4">
          To use certain features of the platform, you must register for an account. You agree to provide accurate,
          current, and complete information during the registration process and to update such information to keep it
          accurate, current, and complete.
        </p>
        <p className="mb-4">
          You are responsible for safeguarding the password that you use to access the platform and for any activities
          or actions under your password. We encourage you to use "strong" passwords (passwords that use a combination
          of upper and lower case letters, numbers, and symbols) with your account.
        </p>
        <p className="mb-4">
          You must be at least 18 years of age to create an account. We may require age verification as part of the
          registration process.
        </p>

<h2 className="text-2xl font-semibold mt-6 mb-4">3. User Content</h2>
        <p className="mb-4">
          Our platform allows you to post, link, store, share and otherwise make available certain information, text,
          graphics, videos, or other material. You are responsible for the content that you post to the platform,
          including its legality, reliability, and appropriateness.
        </p>
        <p className="mb-4">
          By posting content to the platform, you grant us the right to use, modify, publicly perform, publicly display,
          reproduce, and distribute such content on and through the platform. You retain any and all of your rights to
          any content you submit, post or display on or through the platform and you are responsible for protecting
          those rights.
        </p>

<h2 className="text-2xl font-semibold mt-6 mb-4">4. Quests and Guilds</h2>
        <p className="mb-4">
          PeerQuest Tavern provides a platform for users to create and participate in quests and guilds. We do not
          guarantee the quality, accuracy, or legality of quests posted by users.
        </p>
        <p className="mb-4">
          Users who create quests are responsible for fulfilling the terms of their quests, including providing the
          stated rewards. Users who apply for quests are responsible for completing the quest requirements as specified.
        </p>

<h2 className="text-2xl font-semibold mt-6 mb-4">5. Virtual Currency</h2>
        <p className="mb-4">
          PeerQuest Tavern may include a virtual currency system ("Gold"). Gold has no real-world value and cannot be
          exchanged for real money or items of value outside of the platform. We reserve the right to manage, regulate,
          control, modify, or eliminate Gold at any time, with or without notice.
        </p>
        <p className="mb-4">
          The purchase of Gold is final and non-refundable. You acknowledge that we are not required to provide a refund
          for any reason.
        </p>

<h2 className="text-2xl font-semibold mt-6 mb-4">6. Prohibited Activities</h2>
        <p className="mb-4">
          You may not access or use the platform for any purpose other than that for which we make the platform
          available. The platform may not be used in connection with any commercial endeavors except those that are
          specifically endorsed or approved by us.
        </p>
        <p className="mb-4">Prohibited activities include, but are not limited to:</p>
        <ul className="list-disc pl-6 mb-4">
          <li>Systematic retrieval of data to create a collection or database</li>
          <li>Making any unauthorized use of the platform</li>
          <li>Engaging in unauthorized framing or linking to the platform</li>
          <li>Tricking, defrauding, or misleading us and other users</li>
          <li>Attempting to impersonate another user or person</li>
          <li>Using the platform in a manner inconsistent with any applicable laws or regulations</li>
        </ul>

<h2 className="text-2xl font-semibold mt-6 mb-4">7. Age Requirement</h2>
        <p className="mb-4">
          PeerQuest Tavern is intended for users who are 18 years of age or older. By using our platform, you represent
          and warrant that you are at least 18 years old. If we learn that we have collected personal information from
          someone under 18, we will promptly delete that information.
        </p>

<h2 className="text-2xl font-semibold mt-6 mb-4">8. Termination</h2>
        <p className="mb-4">
          We may terminate or suspend your account and bar access to the platform immediately, without prior notice or
          liability, under our sole discretion, for any reason whatsoever and without limitation, including but not
          limited to a breach of the Terms.
        </p>
        <p className="mb-4">
          If you wish to terminate your account, you may simply discontinue using the platform, or notify us that you
          wish to delete your account.
        </p>

<h2 className="text-2xl font-semibold mt-6 mb-4">9. Limitation of Liability</h2>
        <p className="mb-4">
          In no event shall PeerQuest Tavern, nor its directors, employees, partners, agents, suppliers, or affiliates,
          be liable for any indirect, incidental, special, consequential or punitive damages, including without
          limitation, loss of profits, data, use, goodwill, or other intangible losses, resulting from your access to or
          use of or inability to access or use the platform.
        </p>

<h2 className="text-2xl font-semibold mt-6 mb-4">10. Changes to Terms</h2>
        <p className="mb-4">
          We reserve the right, at our sole discretion, to modify or replace these Terms at any time. If a revision is
          material we will provide at least 30 days' notice prior to any new terms taking effect. What constitutes a
          material change will be determined at our sole discretion.
        </p>

<h2 className="text-2xl font-semibold mt-6 mb-4">11. Contact Us</h2>
        <p className="mb-4">
          If you have any questions about these Terms, please contact us at support@peerquesttavern.com.
        </p>

<p className="mt-8 text-sm text-gray-600">Last updated: June 13, 2025</p>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/privacy-policy/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
export default function PrivacyPolicy() {
  return (
    <div className="container mx-auto px-4 py-8 max-w-4xl">
      <h1 className="text-3xl font-bold mb-6">Privacy Policy</h1>

<div className="prose max-w-none">
        <p className="mb-4">
          At PeerQuest Tavern, we take your privacy seriously. This Privacy Policy explains how we collect, use,
          disclose, and safeguard your information when you use our platform.
        </p>

<h2 className="text-2xl font-semibold mt-6 mb-4">1. Information We Collect</h2>
        <p className="mb-4">We collect information that you provide directly to us when you:</p>
        <ul className="list-disc pl-6 mb-4">
          <li>Register for an account</li>
          <li>Create or modify your profile</li>
          <li>Post quests or apply to quests</li>
          <li>Create or join guilds</li>
          <li>Communicate with other users</li>
          <li>Purchase virtual currency</li>
          <li>Contact our support team</li>
        </ul>

<p className="mb-4">This information may include:</p>
        <ul className="list-disc pl-6 mb-4">
          <li>Name and username</li>
          <li>Email address</li>
          <li>Password</li>
          <li>Profile information (avatar, bio, skills)</li>
          <li>Content you post (quests, applications, messages)</li>
          <li>Payment information (when purchasing virtual currency)</li>
        </ul>

<h2 className="text-2xl font-semibold mt-6 mb-4">2. Automatically Collected Information</h2>
        <p className="mb-4">
          When you access or use our platform, we automatically collect certain information, including:
        </p>
        <ul className="list-disc pl-6 mb-4">
          <li>Log information (IP address, browser type, pages visited)</li>
          <li>Device information (hardware model, operating system)</li>
          <li>Usage data (features used, interactions, time spent)</li>
          <li>Location information (general location based on IP address)</li>
        </ul>

<h2 className="text-2xl font-semibold mt-6 mb-4">3. How We Use Your Information</h2>
        <p className="mb-4">We use the information we collect to:</p>
        <ul className="list-disc pl-6 mb-4">
          <li>Provide, maintain, and improve our platform</li>
          <li>Create and maintain your account</li>
          <li>Process transactions and send related information</li>
          <li>Send administrative messages and updates</li>
          <li>Respond to your comments, questions, and requests</li>
          <li>Monitor and analyze trends, usage, and activities</li>
          <li>Detect, investigate, and prevent fraudulent transactions and other illegal activities</li>
          <li>Personalize your experience</li>
        </ul>

<h2 className="text-2xl font-semibold mt-6 mb-4">4. Sharing of Information</h2>
        <p className="mb-4">We may share the information we collect in the following circumstances:</p>
        <ul className="list-disc pl-6 mb-4">
          <li>
            With other users as part of the normal operation of the platform (e.g., your username and profile
            information when you post a quest)
          </li>
          <li>
            With vendors, consultants, and other service providers who need access to such information to carry out work
            on our behalf
          </li>
          <li>
            In response to a request for information if we believe disclosure is in accordance with any applicable law,
            regulation, or legal process
          </li>
          <li>
            If we believe your actions are inconsistent with our user agreements or policies, or to protect the rights,
            property, and safety of PeerQuest Tavern or others
          </li>
          <li>
            In connection with, or during negotiations of, any merger, sale of company assets, financing, or acquisition
            of all or a portion of our business by another company
          </li>
          <li>With your consent or at your direction</li>
        </ul>

<h2 className="text-2xl font-semibold mt-6 mb-4">5. Data Security</h2>
        <p className="mb-4">
          We take reasonable measures to help protect information about you from loss, theft, misuse, unauthorized
          access, disclosure, alteration, and destruction. However, no internet or electronic transmission is ever fully
          secure or error-free.
        </p>

<h2 className="text-2xl font-semibold mt-6 mb-4">6. Your Choices</h2>
        <p className="mb-4">
          You can access and update certain information about you from within your account settings. You can also
          request that we delete your account and associated data by contacting us.
        </p>

<h2 className="text-2xl font-semibold mt-6 mb-4">7. Age Requirement</h2>
        <p className="mb-4">
          Our platform is designed for users who are 18 years of age or older. We do not knowingly collect personal
          information from individuals under 18. If we learn that we have collected personal information from someone
          under 18, we will promptly delete that information and terminate their account.
        </p>

<h2 className="text-2xl font-semibold mt-6 mb-4">8. Changes to this Privacy Policy</h2>
        <p className="mb-4">
          We may update this Privacy Policy from time to time. If we make material changes, we will notify you through
          the platform or by other means, such as email. We encourage you to review the Privacy Policy whenever you
          access the platform.
        </p>

<h2 className="text-2xl font-semibold mt-6 mb-4">9. Contact Us</h2>
        <p className="mb-4">
          If you have any questions about this Privacy Policy, please contact us at privacy@peerquesttavern.com.
        </p>

<p className="mt-8 text-sm text-gray-600">Last updated: June 13, 2025</p>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/guild-management.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
export { EnhancedGuildManagement as GuildManagement } from "./enhanced-guild-management"
[V0_FILE]typescriptreact:file="components/guild-chat-modal.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect, useRef } from "react"
import { X, Send, Smile } from "lucide-react"
import type { Guild, User, GuildChatMessage } from "@/lib/types"

interface GuildChatModalProps {
  isOpen: boolean
  onClose: () => void
  guild: Guild
  currentUser: User | null
  showToast: (message: string, type?: string) => void
}

export function GuildChatModal({ isOpen, onClose, guild, currentUser, showToast }: GuildChatModalProps) {
  const [messages, setMessages] = useState<GuildChatMessage[]>([])
  const [newMessage, setNewMessage] = useState("")
  const [onlineMembers] = useState(Math.floor(guild.members * 0.3)) // Simulate online members
  const messagesEndRef = useRef<HTMLDivElement>(null)

// Mock messages for demonstration
  useEffect(() => {
    if (isOpen) {
      const mockMessages: GuildChatMessage[] = [
        {
          id: 1,
          guildId: guild.id,
          senderId: guild.poster.id,
          senderName: guild.poster.username,
          senderAvatar: guild.poster.avatar,
          content: "Welcome to the guild chat! Feel free to discuss quests and collaborate here.",
          createdAt: new Date(Date.now() - 2 * 60 * 60 * 1000), // 2 hours ago
        },
        {
          id: 2,
          guildId: guild.id,
          senderId: 2,
          senderName: "QuestMaster",
          senderAvatar: "Q",
          content: "Has anyone seen the new alchemy quest? It looks challenging but rewarding!",
          createdAt: new Date(Date.now() - 1 * 60 * 60 * 1000), // 1 hour ago
        },
        {
          id: 3,
          guildId: guild.id,
          senderId: 3,
          senderName: "MysticBrewer",
          senderAvatar: "M",
          content: "I'm working on that one! Would love some help with the rare ingredients.",
          createdAt: new Date(Date.now() - 30 * 60 * 1000), // 30 minutes ago
        },
      ]
      setMessages(mockMessages)
    }
  }, [isOpen, guild.id, guild.poster])

useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
  }, [messages])

if (!isOpen || !currentUser) return null

const isMember = guild.membersList.includes(currentUser.id)
  const isAdmin = guild.admins.includes(currentUser.id) || guild.poster.id === currentUser.id

const handleSendMessage = () => {
    if (!newMessage.trim()) return

const message: GuildChatMessage = {
      id: Date.now(),
      guildId: guild.id,
      senderId: currentUser.id,
      senderName: currentUser.username,
      senderAvatar: currentUser.avatar,
      content: newMessage,
      createdAt: new Date(),
    }

setMessages((prev) => [...prev, message])
    setNewMessage("")
    showToast("Message sent!", "success")
  }

const formatTime = (date: Date) => {
    const now = new Date()
    const diffMinutes = Math.floor((now.getTime() - date.getTime()) / (1000 * 60))

if (diffMinutes < 1) return "Just now"
    if (diffMinutes < 60) return `${diffMinutes}m ago`
    if (diffMinutes < 1440) return `${Math.floor(diffMinutes / 60)}h ago`
    return date.toLocaleDateString()
  }

return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
      <div className="bg-[#2C1A1D] rounded-lg w-full max-w-5xl h-[80vh] flex overflow-hidden">
        {/* Sidebar - Simplified */}
        <div className="w-64 bg-[#3D2A2F] flex flex-col">
          {/* Guild Header */}
          <div className="p-4 border-b border-[#4A3540]">
            <div className="flex items-center gap-3">
              <div className="w-12 h-12 bg-[#CDAA7D] rounded-lg flex items-center justify-center text-xl">
                {guild.emblem}
              </div>
              <div>
                <h3 className="font-bold text-white">{guild.name}</h3>
                <p className="text-xs text-gray-400">
                  {onlineMembers} online • {guild.members} members
                </p>
              </div>
            </div>
          </div>

{/* Members List */}
          <div className="flex-1 p-4">
            <div>
              <h4 className="text-xs font-semibold text-gray-400 uppercase tracking-wide mb-3">
                Online Members ({onlineMembers})
              </h4>
              <div className="space-y-2">
                {/* Owner */}
                <div className="flex items-center gap-2 px-2 py-1 rounded text-gray-300">
                  <div className="w-6 h-6 bg-[#8B75AA] rounded-full flex items-center justify-center text-xs text-white">
                    {guild.poster.avatar}
                  </div>
                  <span className="text-sm">{guild.poster.username}</span>
                  <div className="w-2 h-2 bg-green-500 rounded-full ml-auto"></div>
                </div>

{/* Sample online members */}
                {guild.membersList.slice(0, 5).map((memberId) => (
                  <div key={memberId} className="flex items-center gap-2 px-2 py-1 rounded text-gray-300">
                    <div className="w-6 h-6 bg-[#8B75AA] rounded-full flex items-center justify-center text-xs text-white">
                      M
                    </div>
                    <span className="text-sm">Member {memberId}</span>
                    <div className="w-2 h-2 bg-green-500 rounded-full ml-auto"></div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>

{/* Chat Area */}
        <div className="flex-1 flex flex-col">
          {/* Chat Header */}
          <div className="p-4 border-b border-[#4A3540] flex justify-between items-center">
            <div>
              <h2 className="text-lg font-semibold text-white">{guild.name} Chat</h2>
              <p className="text-sm text-gray-400">Guild discussion</p>
            </div>
            <button onClick={onClose} className="text-gray-400 hover:text-white transition-colors">
              <X size={20} />
            </button>
          </div>

{/* Messages */}
          <div className="flex-1 overflow-y-auto p-4 space-y-4">
            {messages.map((message) => (
              <div key={message.id} className="flex gap-3">
                <div className="w-10 h-10 bg-[#8B75AA] rounded-full flex items-center justify-center text-white font-bold flex-shrink-0">
                  {message.senderAvatar}
                </div>
                <div className="flex-1">
                  <div className="flex items-center gap-2 mb-1">
                    <span className="font-medium text-white">{message.senderName}</span>
                    <span className="text-xs text-gray-400">{formatTime(message.createdAt)}</span>
                  </div>
                  <p className="text-gray-300">{message.content}</p>
                </div>
              </div>
            ))}
            <div ref={messagesEndRef} />
          </div>

{/* Message Input */}
          {isMember && (
            <div className="p-4 border-t border-[#4A3540]">
              <div className="flex items-center gap-2">
                <div className="flex-1 relative">
                  <input
                    type="text"
                    placeholder={`Message #general`}
                    value={newMessage}
                    onChange={(e) => setNewMessage(e.target.value)}
                    onKeyPress={(e) => {
                      if (e.key === "Enter") handleSendMessage()
                    }}
                    className="w-full bg-[#3D2A2F] border border-[#4A3540] rounded px-4 py-3 text-white placeholder-gray-400 focus:outline-none focus:border-[#8B75AA]"
                  />
                  <button className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-white transition-colors">
                    <Smile size={20} />
                  </button>
                </div>
                <button
                  onClick={handleSendMessage}
                  disabled={!newMessage.trim()}
                  className={`w-10 h-10 rounded flex items-center justify-center transition-colors ${
                    newMessage.trim()
                      ? "bg-[#8B75AA] text-white hover:bg-[#7A6699]"
                      : "bg-[#4A3540] text-gray-500 cursor-not-allowed"
                  }`}
                >
                  <Send size={18} />
                </button>
              </div>
            </div>
          )}

{!isMember && (
            <div className="p-4 border-t border-[#4A3540] text-center">
              <p className="text-gray-400">You must be a member of this guild to participate in chat.</p>
            </div>
          )}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]png:file="public/images/roblox-payouts-clean.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-AUAFULFtvshNftgIkptzcTUDgxPCDd.png" isMerged="true"
[V0_FILE]png:file="public/images/roblox-activity-history.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-e3ueR8VSKpxLM7KgUo4sk9bveP9S8w.png" isMerged="true"
[V0_FILE]png:file="public/images/roblox-roles-config.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-GIQWoYLb4In4iM3AyAf3TUAIp1YIEg.png" isMerged="true"
[V0_FILE]typescriptreact:file="components/guild-payouts.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Send } from "lucide-react"
import type { Guild, User } from "@/lib/types"

interface GuildPayoutsProps {
  guild: Guild
  currentUser: User | null
  showToast: (message: string, type?: string) => void
}

export function GuildPayouts({ guild, currentUser, showToast }: GuildPayoutsProps) {
  const [payoutAmount, setPayoutAmount] = useState("")
  const [selectedMember, setSelectedMember] = useState("")

// Mock payout data
  const payoutData = [{ name: guild.name, percentage: 100, amount: guild.funds || 0, color: "#8B75AA" }]

const handleSendPayout = () => {
    if (!payoutAmount || !selectedMember) {
      showToast("Please enter amount and select a member", "error")
      return
    }

const amount = Number.parseInt(payoutAmount)
    if (amount > (guild.funds || 0)) {
      showToast("Insufficient guild funds", "error")
      return
    }

showToast(`Payout of ${amount} gold sent to ${selectedMember}`, "success")
    setPayoutAmount("")
    setSelectedMember("")
  }

return (
    <div className="bg-[#2C1A1D] text-[#F4F0E6] rounded-lg p-6">
      <h3 className="text-xl font-bold mb-6">Payouts</h3>

<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* Guild Funds */}
        <div>
          <h4 className="text-lg font-semibold mb-4">Guild Funds</h4>
          <p className="text-sm text-gray-400 mb-2">Gold in your guild's account</p>
          <div className="text-3xl font-bold text-[#CDAA7D] mb-6">
            {guild.funds || 0} <span className="text-lg font-normal">Gold</span>
          </div>

<div className="flex gap-2 mb-6">
            <button className="px-4 py-2 bg-[#8B75AA] text-white rounded font-medium">Guild</button>
            <button className="px-4 py-2 bg-[#3D2A2F] text-gray-400 rounded font-medium">Experiences</button>
          </div>

<div>
            <h5 className="font-medium mb-3">Splits</h5>
            <div className="space-y-2">
              {payoutData.map((item, index) => (
                <div key={index} className="flex items-center gap-3 p-3 bg-[#3D2A2F] rounded">
                  <div className="w-8 h-8 bg-[#8B75AA] rounded flex items-center justify-center text-white text-sm">
                    {guild.emblem}
                  </div>
                  <div className="flex-1">
                    <p className="font-medium">{item.name}</p>
                    <p className="text-sm text-gray-400">{item.percentage}%</p>
                  </div>
                  <div className="text-right">
                    <p className="font-medium">{item.amount} Gold</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>

{/* Send Payout */}
        <div>
          <h4 className="text-lg font-semibold mb-4">Send a One-Time Payout</h4>
          <p className="text-sm text-gray-400 mb-4">Give Gold to your collaborators</p>

<div className="space-y-4">
            <div>
              <label className="block text-sm font-medium mb-2">Amount (Gold)</label>
              <input
                type="number"
                value={payoutAmount}
                onChange={(e) => setPayoutAmount(e.target.value)}
                placeholder="Enter amount"
                className="w-full bg-[#3D2A2F] border border-[#CDAA7D] rounded px-3 py-2 text-[#F4F0E6] placeholder-gray-400 focus:outline-none focus:border-[#8B75AA]"
              />
            </div>

<div>
              <label className="block text-sm font-medium mb-2">Select Member</label>
              <select
                value={selectedMember}
                onChange={(e) => setSelectedMember(e.target.value)}
                className="w-full bg-[#3D2A2F] border border-[#CDAA7D] rounded px-3 py-2 text-[#F4F0E6] focus:outline-none focus:border-[#8B75AA]"
              >
                <option value="">Choose a member...</option>
                <option value="QuestMaster">QuestMaster</option>
                <option value="MysticBrewer">MysticBrewer</option>
                <option value="ShadowHunter">ShadowHunter</option>
              </select>
            </div>

{/* Pie Chart Visualization */}
          <div className="mt-8">
            <div className="relative w-48 h-48 mx-auto">
              <div className="w-full h-full rounded-full border-8 border-[#8B75AA] flex items-center justify-center bg-[#3D2A2F]">
                <div className="text-center">
                  <p className="text-sm text-gray-400">Total Splits</p>
                  <p className="text-2xl font-bold">1</p>
                </div>
              </div>
            </div>
            <div className="text-center mt-4">
              <p className="text-sm font-medium">{guild.name}</p>
              <p className="text-xs text-gray-400">100%</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/guild-audit-log.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Search, Filter, Calendar, User, Settings, DollarSign, Users, Shield } from "lucide-react"
import type { Guild, User as UserType } from "@/lib/types"

interface GuildAuditLogProps {
  guild: Guild
  currentUser: UserType | null
}

interface AuditLogEntry {
  id: number
  date: Date
  event: string
  description: string
  changedBy: {
    username: string
    avatar: string
  }
  category: "role" | "member" | "funds" | "settings" | "general"
}

export function GuildAuditLog({ guild, currentUser }: GuildAuditLogProps) {
  const [dateRange, setDateRange] = useState("all")
  const [filterBy, setFilterBy] = useState("all")
  const [searchQuery, setSearchQuery] = useState("")

// Mock audit log data
  const auditEntries: AuditLogEntry[] = [
    {
      id: 1,
      date: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000),
      event: "Role Created",
      description: "New Role 'Quest Leader' was created",
      changedBy: { username: currentUser?.username || "Admin", avatar: currentUser?.avatar || "A" },
      category: "role",
    },
    {
      id: 2,
      date: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000),
      event: "Member Added",
      description: "QuestMaster was added to the guild",
      changedBy: { username: currentUser?.username || "Admin", avatar: currentUser?.avatar || "A" },
      category: "member",
    },
    {
      id: 3,
      date: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000),
      event: "Funds Distributed",
      description: "500 gold distributed to guild members",
      changedBy: { username: currentUser?.username || "Admin", avatar: currentUser?.avatar || "A" },
      category: "funds",
    },
    {
      id: 4,
      date: new Date(Date.now() - 5 * 24 * 60 * 60 * 1000),
      event: "Guild Settings Updated",
      description: "Guild description was modified",
      changedBy: { username: currentUser?.username || "Admin", avatar: currentUser?.avatar || "A" },
      category: "settings",
    },
    {
      id: 5,
      date: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000),
      event: "Member Role Changed",
      description: "MysticBrewer's role changed from Member to Admin",
      changedBy: { username: currentUser?.username || "Admin", avatar: currentUser?.avatar || "A" },
      category: "role",
    },
  ]

const getCategoryIcon = (category: string) => {
    switch (category) {
      case "role":
        return <Shield size={16} className="text-purple-400" />
      case "member":
        return <Users size={16} className="text-blue-400" />
      case "funds":
        return <DollarSign size={16} className="text-green-400" />
      case "settings":
        return <Settings size={16} className="text-orange-400" />
      default:
        return <User size={16} className="text-gray-400" />
    }
  }

const filteredEntries = auditEntries.filter((entry) => {
    const matchesSearch =
      entry.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
      entry.event.toLowerCase().includes(searchQuery.toLowerCase())
    const matchesFilter = filterBy === "all" || entry.category === filterBy
    return matchesSearch && matchesFilter
  })

return (
    <div className="bg-[#2C1A1D] text-[#F4F0E6] rounded-lg p-6">
      <h3 className="text-xl font-bold mb-6">Guild Activity History</h3>

{/* Filters */}
      <div className="flex flex-col sm:flex-row gap-4 mb-6">
        <div className="flex items-center gap-2">
          <Calendar size={16} className="text-gray-400" />
          <select
            value={dateRange}
            onChange={(e) => setDateRange(e.target.value)}
            className="bg-[#3D2A2F] border border-[#CDAA7D] rounded px-3 py-2 text-[#F4F0E6] focus:outline-none focus:border-[#8B75AA]"
          >
            <option value="all">All Time</option>
            <option value="today">Today</option>
            <option value="week">This Week</option>
            <option value="month">This Month</option>
          </select>
        </div>

<div className="flex items-center gap-2">
          <Filter size={16} className="text-gray-400" />
          <select
            value={filterBy}
            onChange={(e) => setFilterBy(e.target.value)}
            className="bg-[#3D2A2F] border border-[#CDAA7D] rounded px-3 py-2 text-[#F4F0E6] focus:outline-none focus:border-[#8B75AA]"
          >
            <option value="all">All Events</option>
            <option value="role">Role Changes</option>
            <option value="member">Member Changes</option>
            <option value="funds">Fund Activities</option>
            <option value="settings">Settings</option>
          </select>
        </div>

<div className="flex-1">
          <div className="relative">
            <Search size={16} className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
            <input
              type="text"
              placeholder="Search activity..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="w-full bg-[#3D2A2F] border border-[#CDAA7D] rounded px-3 py-2 pl-10 text-[#F4F0E6] placeholder-gray-400 focus:outline-none focus:border-[#8B75AA]"
            />
          </div>
        </div>
      </div>

{/* Activity Table */}
      <div className="overflow-x-auto">
        <table className="w-full">
          <thead>
            <tr className="border-b border-[#3D2A2F]">
              <th className="text-left py-3 px-4 font-medium text-gray-300">Event</th>
              <th className="text-left py-3 px-4 font-medium text-gray-300">Changed By</th>
              <th className="text-left py-3 px-4 font-medium text-gray-300">Date</th>
            </tr>
          </thead>
          <tbody>
            {filteredEntries.map((entry) => (
              <tr key={entry.id} className="border-b border-[#3D2A2F]/50 hover:bg-[#3D2A2F]/30">
                <td className="py-4 px-4">
                  <div className="flex items-start gap-3">
                    <div className="flex-shrink-0 mt-1">{getCategoryIcon(entry.category)}</div>
                    <div>
                      <p className="font-medium text-[#F4F0E6]">{entry.event}</p>
                      <p className="text-sm text-gray-400">{entry.description}</p>
                    </div>
                  </div>
                </td>
                <td className="py-4 px-4">
                  <div className="flex items-center gap-2">
                    <div className="w-6 h-6 bg-[#8B75AA] rounded-full flex items-center justify-center text-white text-xs">
                      {entry.changedBy.avatar}
                    </div>
                    <span className="text-[#8B75AA] text-sm">{entry.changedBy.username}</span>
                  </div>
                </td>
                <td className="py-4 px-4">
                  <div className="text-sm text-gray-400">
                    <p>{entry.date.toLocaleDateString()}</p>
                    <p>{entry.date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}</p>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

{filteredEntries.length === 0 && (
        <div className="text-center py-8">
          <p className="text-gray-400">No activity found matching your criteria</p>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/guild-roles-config.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Plus, Shield, Users, Settings, DollarSign, BarChart3 } from "lucide-react"
import type { Guild, User } from "@/lib/types"

interface GuildRolesConfigProps {
  guild: Guild
  currentUser: User | null
  showToast: (message: string, type?: string) => void
}

interface Role {
  id: number
  name: string
  color: string
  permissions: string[]
  memberCount: number
}

interface Permission {
  id: string
  name: string
  description: string
  category: "group" | "experience" | "revenue"
}

export function GuildRolesConfig({ guild, currentUser, showToast }: GuildRolesConfigProps) {
  const [selectedRole, setSelectedRole] = useState<Role | null>(null)
  const [activeTab, setActiveTab] = useState<"permissions" | "members" | "settings">("permissions")

// Mock roles data
  const roles: Role[] = [
    { id: 1, name: "Owner", color: "#FFD700", permissions: ["all"], memberCount: 1 },
    { id: 2, name: "Admin", color: "#FF6B6B", permissions: ["manage_members", "manage_roles"], memberCount: 2 },
    { id: 3, name: "Quest Leader", color: "#4ECDC4", permissions: ["create_quests", "manage_quests"], memberCount: 5 },
    { id: 4, name: "Member", color: "#95E1D3", permissions: ["view_guild"], memberCount: 15 },
  ]

// Mock permissions
  const permissions: Permission[] = [
    {
      id: "add_remove_members",
      name: "Add or remove guild members",
      description: "Allow adding and removing members from the guild",
      category: "group",
    },
    {
      id: "manage_roles",
      name: "Configure limited roles",
      description:
        "Members with this role can manage the roles they are assigned and assign permissions to those roles that they themselves have",
      category: "group",
    },
    {
      id: "admin_all_roles",
      name: "Administrate all roles",
      description:
        "Members with this role can create, delete, and configure any role in the guild. This is a super-admin permission as it provides nearly full access",
      category: "group",
    },
    {
      id: "configure_guild",
      name: "Configure guild profile",
      description: "Allow editing guild information and settings",
      category: "group",
    },
    {
      id: "view_activity",
      name: "View guild activity history",
      description: "Access to guild activity logs and history",
      category: "group",
    },
    {
      id: "play_experiences",
      name: "Play all guild experiences",
      description: "Access to all guild-related activities and quests",
      category: "experience",
    },
    {
      id: "edit_experiences",
      name: "Edit all guild experiences",
      description: "Modify and manage guild quests and activities",
      category: "experience",
    },
    {
      id: "publish_experiences",
      name: "Edit and publish all guild experiences",
      description: "Full control over guild quest publishing",
      category: "experience",
    },
    {
      id: "view_revenue",
      name: "View guild revenue",
      description: "Access to guild financial information",
      category: "revenue",
    },
  ]

const handleRoleSelect = (role: Role) => {
    setSelectedRole(role)
    setActiveTab("permissions")
  }

const handlePermissionToggle = (permissionId: string) => {
    if (!selectedRole) return

showToast(`Permission ${permissionId} toggled for ${selectedRole.name}`, "success")
  }

const getPermissionsByCategory = (category: string) => {
    return permissions.filter((p) => p.category === category)
  }

return (
    <div className="bg-[#2C1A1D] text-[#F4F0E6] rounded-lg p-6">
      <div className="flex justify-between items-center mb-6">
        <div>
          <h3 className="text-xl font-bold">Roles</h3>
          <p className="text-gray-400 text-sm">
            Roles allow you to group creators together and manage them as a single unit.
          </p>
        </div>
        <button className="flex items-center gap-2 bg-[#8B75AA] text-white px-4 py-2 rounded hover:bg-[#7A6699] transition-colors">
          <Plus size={16} />
          Add a Role
        </button>
      </div>

<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* Roles List */}
        <div className="lg:col-span-1">
          <div className="space-y-2 mb-4">
            {roles.map((role) => (
              <button
                key={role.id}
                onClick={() => handleRoleSelect(role)}
                className={`w-full flex items-center justify-between p-3 rounded transition-colors ${
                  selectedRole?.id === role.id
                    ? "bg-[#8B75AA] text-white"
                    : "bg-[#3D2A2F] text-[#F4F0E6] hover:bg-[#4A3540]"
                }`}
              >
                <div className="flex items-center gap-3">
                  <div className="w-3 h-3 rounded-full" style={{ backgroundColor: role.color }} />
                  <span className="font-medium">{role.name}</span>
                </div>
                <span className="text-sm opacity-70">{role.memberCount}</span>
              </button>
            ))}
          </div>

<div className="border-t border-[#3D2A2F] pt-4">
            <h4 className="font-medium mb-2 flex items-center gap-2">
              <Shield size={16} />
              Legacy Roles
            </h4>
            <div className="space-y-1 text-sm text-gray-400">
              <div className="flex items-center gap-2">
                <Users size={14} />
                <span>Guest</span>
              </div>
              <div className="flex items-center gap-2">
                <Users size={14} />
                <span>Member</span>
              </div>
              <div className="flex items-center gap-2">
                <Shield size={14} />
                <span>Admin</span>
              </div>
              <div className="flex items-center gap-2">
                <Shield size={14} />
                <span>Owner</span>
              </div>
            </div>
          </div>
        </div>

{/* Role Configuration */}
        <div className="lg:col-span-2">
          {selectedRole ? (
            <div>
              <div className="flex items-center gap-3 mb-6">
                <div
                  className="w-8 h-8 rounded-full flex items-center justify-center text-white font-bold"
                  style={{ backgroundColor: selectedRole.color }}
                >
                  {selectedRole.name.charAt(0)}
                </div>
                <div>
                  <h4 className="text-lg font-bold">Configure {selectedRole.name}</h4>
                  <p className="text-sm text-gray-400">{selectedRole.memberCount} members</p>
                </div>
              </div>

{/* Tabs */}
              <div className="flex border-b border-[#3D2A2F] mb-6">
                <button
                  onClick={() => setActiveTab("permissions")}
                  className={`px-4 py-2 font-medium ${
                    activeTab === "permissions"
                      ? "text-[#8B75AA] border-b-2 border-[#8B75AA]"
                      : "text-gray-400 hover:text-[#F4F0E6]"
                  }`}
                >
                  Permissions
                </button>
                <button
                  onClick={() => setActiveTab("members")}
                  className={`px-4 py-2 font-medium ${
                    activeTab === "members"
                      ? "text-[#8B75AA] border-b-2 border-[#8B75AA]"
                      : "text-gray-400 hover:text-[#F4F0E6]"
                  }`}
                >
                  Members
                </button>
                <button
                  onClick={() => setActiveTab("settings")}
                  className={`px-4 py-2 font-medium ${
                    activeTab === "settings"
                      ? "text-[#8B75AA] border-b-2 border-[#8B75AA]"
                      : "text-gray-400 hover:text-[#F4F0E6]"
                  }`}
                >
                  Settings
                </button>
              </div>

{/* Tab Content */}
              {activeTab === "permissions" && (
                <div className="space-y-6">
                  {/* Group Permissions */}
                  <div>
                    <h5 className="font-medium mb-3 flex items-center gap-2">
                      <Users size={16} />
                      Guild permissions
                    </h5>
                    <div className="space-y-3">
                      {getPermissionsByCategory("group").map((permission) => (
                        <label key={permission.id} className="flex items-start gap-3 cursor-pointer">
                          <input
                            type="checkbox"
                            className="mt-1 w-4 h-4 text-[#8B75AA] bg-[#3D2A2F] border-[#CDAA7D] rounded focus:ring-[#8B75AA]"
                            onChange={() => handlePermissionToggle(permission.id)}
                          />
                          <div>
                            <p className="font-medium text-[#F4F0E6]">{permission.name}</p>
                            <p className="text-sm text-gray-400">{permission.description}</p>
                          </div>
                        </label>
                      ))}
                    </div>
                  </div>

{/* Experience Permissions */}
                  <div>
                    <h5 className="font-medium mb-3 flex items-center gap-2">
                      <BarChart3 size={16} />
                      Experience permissions
                    </h5>
                    <div className="space-y-3">
                      {getPermissionsByCategory("experience").map((permission) => (
                        <label key={permission.id} className="flex items-start gap-3 cursor-pointer">
                          <input
                            type="checkbox"
                            className="mt-1 w-4 h-4 text-[#8B75AA] bg-[#3D2A2F] border-[#CDAA7D] rounded focus:ring-[#8B75AA]"
                            onChange={() => handlePermissionToggle(permission.id)}
                          />
                          <div>
                            <p className="font-medium text-[#F4F0E6]">{permission.name}</p>
                            <p className="text-sm text-gray-400">{permission.description}</p>
                          </div>
                        </label>
                      ))}
                    </div>
                  </div>

{/* Revenue Permissions */}
                  <div>
                    <h5 className="font-medium mb-3 flex items-center gap-2">
                      <DollarSign size={16} />
                      Guild revenue
                    </h5>
                    <div className="space-y-3">
                      {getPermissionsByCategory("revenue").map((permission) => (
                        <label key={permission.id} className="flex items-start gap-3 cursor-pointer">
                          <input
                            type="checkbox"
                            className="mt-1 w-4 h-4 text-[#8B75AA] bg-[#3D2A2F] border-[#CDAA7D] rounded focus:ring-[#8B75AA]"
                            onChange={() => handlePermissionToggle(permission.id)}
                          />
                          <div>
                            <p className="font-medium text-[#F4F0E6]">{permission.name}</p>
                            <p className="text-sm text-gray-400">{permission.description}</p>
                          </div>
                        </label>
                      ))}
                    </div>
                  </div>

<div className="flex justify-end pt-4">
                    <button className="bg-[#8B75AA] text-white px-6 py-2 rounded hover:bg-[#7A6699] transition-colors">
                      Save Changes
                    </button>
                  </div>
                </div>
              )}

{activeTab === "members" && (
                <div className="text-center py-8">
                  <Users size={48} className="mx-auto mb-4 text-gray-400" />
                  <p className="text-gray-400">Member management coming soon</p>
                </div>
              )}

{activeTab === "settings" && (
                <div className="text-center py-8">
                  <Settings size={48} className="mx-auto mb-4 text-gray-400" />
                  <p className="text-gray-400">Role settings coming soon</p>
                </div>
              )}
            </div>
          ) : (
            <div className="text-center py-12">
              <Shield size={48} className="mx-auto mb-4 text-gray-400" />
              <p className="text-gray-400">Select a role to configure its permissions</p>
            </div>
          )}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/enhanced-guild-management.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Search, Users, Shield, DollarSign, Activity, BarChart3, UserPlus, CheckCircle, XCircle } from "lucide-react"
import type { Guild, User, GuildApplication } from "@/lib/types"
import { GuildAuditLog } from "./guild-audit-log"
import { GuildPayouts } from "./guild-payouts"
import { GuildRolesConfig } from "./guild-roles-config"

interface EnhancedGuildManagementProps {
  guilds: Guild[]
  guildApplications: GuildApplication[]
  currentUser: User
  showToast: (message: string, type?: string) => void
  onViewGuild: (guild: Guild) => void
  onEditGuild: (guild: Guild) => void
  onDeleteGuild: (guildId: string) => void
  onApproveApplication: (applicationId: string) => void
  onRejectApplication: (applicationId: string) => void
  onManageMembers: (guild: Guild) => void
}

export function EnhancedGuildManagement({
  guilds,
  guildApplications,
  currentUser,
  showToast,
  onViewGuild,
  onEditGuild,
  onDeleteGuild,
  onApproveApplication,
  onRejectApplication,
  onManageMembers,
}: EnhancedGuildManagementProps) {
  const [activeTab, setActiveTab] = useState<"owned" | "member" | "applications">("owned")
  const [selectedGuild, setSelectedGuild] = useState<Guild | null>(null)
  const [managementView, setManagementView] = useState<
    "overview" | "members" | "requests" | "roles" | "audit" | "payouts"
  >("overview")
  const [searchQuery, setSearchQuery] = useState("")
  const [memberSearchQuery, setMemberSearchQuery] = useState("")
  const [selectedRole, setSelectedRole] = useState("All")

// Get guilds where the current user is an admin
  const ownedGuilds = guilds.filter((guild) => guild.admins && guild.admins.includes(currentUser.id))
  const memberGuilds = guilds.filter(
    (guild) =>
      guild.membersList &&
      guild.membersList.includes(currentUser.id) &&
      (!guild.admins || !guild.admins.includes(currentUser.id)),
  )

const relevantApplications = guildApplications.filter((app) => {
    const guild = guilds.find((g) => g.id.toString() === app.guildId)
    return guild && guild.admins && guild.admins.includes(currentUser.id)
  })

// Mock member data for demonstration
  const mockMembers = [
    {
      id: currentUser.id,
      username: currentUser.username,
      avatar: currentUser.avatar,
      role: "Owner",
      joinDate: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000),
      level: 25,
      xp: 12500,
    },
    {
      id: 2,
      username: "QuestMaster",
      avatar: "Q",
      role: "Admin",
      joinDate: new Date(Date.now() - 20 * 24 * 60 * 60 * 1000),
      level: 18,
      xp: 8900,
    },
    {
      id: 3,
      username: "MysticBrewer",
      avatar: "M",
      role: "Member",
      joinDate: new Date(Date.now() - 15 * 24 * 60 * 60 * 1000),
      level: 12,
      xp: 5600,
    },
    {
      id: 4,
      username: "ShadowHunter",
      avatar: "S",
      role: "Member",
      joinDate: new Date(Date.now() - 10 * 24 * 60 * 60 * 1000),
      level: 15,
      xp: 7200,
    },
    {
      id: 5,
      username: "DragonSlayer",
      avatar: "D",
      role: "Member",
      joinDate: new Date(Date.now() - 5 * 24 * 60 * 60 * 1000),
      level: 8,
      xp: 3400,
    },
  ]

const calculateGuildLevel = (guild: Guild) => {
    // Calculate guild level based on total member XP and activities
    const totalMemberXP = mockMembers.reduce((sum, member) => sum + member.xp, 0)
    const guildLevel = Math.floor(totalMemberXP / 1000) + guild.members
    return Math.min(guildLevel, 100) // Cap at level 100
  }

const getGuildXPProgress = (guild: Guild) => {
    const currentLevel = calculateGuildLevel(guild)
    const xpForCurrentLevel = currentLevel * 1000
    const xpForNextLevel = (currentLevel + 1) * 1000
    const currentXP = mockMembers.reduce((sum, member) => sum + member.xp, 0)
    const progress = ((currentXP - xpForCurrentLevel) / (xpForNextLevel - xpForCurrentLevel)) * 100
    return Math.max(0, Math.min(100, progress))
  }

const getRoleColor = (role: string) => {
    switch (role) {
      case "Owner":
        return "text-yellow-400"
      case "Admin":
        return "text-red-400"
      case "Member":
        return "text-blue-400"
      default:
        return "text-gray-400"
    }
  }

const getRoleBadgeColor = (role: string) => {
    switch (role) {
      case "Owner":
        return "bg-yellow-500"
      case "Admin":
        return "bg-red-500"
      case "Member":
        return "bg-blue-500"
      default:
        return "bg-gray-500"
    }
  }

if (selectedGuild) {
    const isOwner = selectedGuild.admins && selectedGuild.admins.includes(currentUser.id)

return (
      <section className="bg-[#F4F0E6] min-h-screen py-8">
        <div className="max-w-6xl mx-auto px-6">
          <div className="flex items-center gap-4 mb-6">
            <button onClick={() => setSelectedGuild(null)} className="text-[#8B75AA] hover:text-[#7A6699] font-medium">
              ← Back to Guild Management
            </button>
            <div className="flex items-center gap-3">
              <div className="w-12 h-12 bg-[#CDAA7D] rounded-lg flex items-center justify-center text-xl">
                {selectedGuild.emblem}
              </div>
              <div>
                <h2 className="text-2xl font-bold text-[#2C1A1D]">{selectedGuild.name}</h2>
                <p className="text-[#8B75AA]">Level {calculateGuildLevel(selectedGuild)} Guild</p>
              </div>
            </div>
          </div>

{/* Guild Level Progress */}
          <div className="bg-white border border-[#CDAA7D] rounded-lg p-4 mb-6">
            <div className="flex justify-between items-center mb-2">
              <span className="text-sm font-medium text-[#2C1A1D]">
                Guild Level {calculateGuildLevel(selectedGuild)}
              </span>
              <span className="text-sm text-[#8B75AA]">
                {getGuildXPProgress(selectedGuild).toFixed(1)}% to next level
              </span>
            </div>
            <div className="w-full bg-gray-200 rounded-full h-2">
              <div
                className="bg-[#8B75AA] h-2 rounded-full transition-all duration-300"
                style={{ width: `${getGuildXPProgress(selectedGuild)}%` }}
              ></div>
            </div>
          </div>

{/* Management Navigation */}
          <div className="bg-white border border-[#CDAA7D] rounded-lg mb-6">
            <div className="flex border-b border-gray-200 overflow-x-auto">
              <button
                onClick={() => setManagementView("overview")}
                className={`px-6 py-4 font-medium whitespace-nowrap flex items-center gap-2 ${
                  managementView === "overview"
                    ? "text-[#8B75AA] border-b-2 border-[#8B75AA]"
                    : "text-[#2C1A1D] hover:text-[#8B75AA]"
                }`}
              >
                <BarChart3 size={18} />
                Overview
              </button>
              <button
                onClick={() => setManagementView("members")}
                className={`px-6 py-4 font-medium whitespace-nowrap flex items-center gap-2 ${
                  managementView === "members"
                    ? "text-[#8B75AA] border-b-2 border-[#8B75AA]"
                    : "text-[#2C1A1D] hover:text-[#8B75AA]"
                }`}
              >
                <Users size={18} />
                Members
              </button>
              {isOwner && (
                <button
                  onClick={() => setManagementView("requests")}
                  className={`px-6 py-4 font-medium whitespace-nowrap flex items-center gap-2 ${
                    managementView === "requests"
                      ? "text-[#8B75AA] border-b-2 border-[#8B75AA]"
                      : "text-[#2C1A1D] hover:text-[#8B75AA]"
                  }`}
                >
                  <UserPlus size={18} />
                  Requests
                  {selectedGuild.applications?.filter((app) => app.status === "pending").length > 0 && (
                    <span className="bg-[#8B75AA] text-white text-xs rounded-full px-2 py-1">
                      {selectedGuild.applications.filter((app) => app.status === "pending").length}
                    </span>
                  )}
                </button>
              )}

{isOwner && (
                <button
                  onClick={() => setManagementView("roles")}
                  className={`px-6 py-4 font-medium whitespace-nowrap flex items-center gap-2 ${
                    managementView === "roles"
                      ? "text-[#8B75AA] border-b-2 border-[#8B75AA]"
                      : "text-[#2C1A1D] hover:text-[#8B75AA]"
                  }`}
                >
                  <Shield size={18} />
                  Roles
                </button>
              )}

<button
                onClick={() => setManagementView("audit")}
                className={`px-6 py-4 font-medium whitespace-nowrap flex items-center gap-2 ${
                  managementView === "audit"
                    ? "text-[#8B75AA] border-b-2 border-[#8B75AA]"
                    : "text-[#2C1A1D] hover:text-[#8B75AA]"
                }`}
              >
                <Activity size={18} />
                Audit Log
              </button>
              {isOwner && (
                <button
                  onClick={() => setManagementView("payouts")}
                  className={`px-6 py-4 font-medium whitespace-nowrap flex items-center gap-2 ${
                    managementView === "payouts"
                      ? "text-[#8B75AA] border-b-2 border-[#8B75AA]"
                      : "text-[#2C1A1D] hover:text-[#8B75AA]"
                  }`}
                >
                  <DollarSign size={18} />
                  Payouts
                </button>
              )}
            </div>

<div className="p-6">
              {managementView === "overview" && (
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                  <div className="bg-[#F4F0E6] border border-[#CDAA7D] rounded-lg p-4">
                    <div className="flex items-center justify-between mb-2">
                      <h3 className="font-bold text-[#2C1A1D]">Total Members</h3>
                      <Users size={18} className="text-[#8B75AA]" />
                    </div>
                    <div className="text-3xl font-bold text-[#2C1A1D]">{selectedGuild.members}</div>
                  </div>
                  <div className="bg-[#F4F0E6] border border-[#CDAA7D] rounded-lg p-4">
                    <div className="flex items-center justify-between mb-2">
                      <h3 className="font-bold text-[#2C1A1D]">Guild Funds</h3>
                      <DollarSign size={18} className="text-[#8B75AA]" />
                    </div>
                    <div className="text-3xl font-bold text-[#2C1A1D]">{selectedGuild.funds || 0}</div>
                  </div>
                  <div className="bg-[#F4F0E6] border border-[#CDAA7D] rounded-lg p-4">
                    <div className="flex items-center justify-between mb-2">
                      <h3 className="font-bold text-[#2C1A1D]">Guild Level</h3>
                      <BarChart3 size={18} className="text-[#8B75AA]" />
                    </div>
                    <div className="text-3xl font-bold text-[#2C1A1D]">{calculateGuildLevel(selectedGuild)}</div>
                  </div>
                  <div className="bg-[#F4F0E6] border border-[#CDAA7D] rounded-lg p-4">
                    <div className="flex items-center justify-between mb-2">
                      <h3 className="font-bold text-[#2C1A1D]">Pending Requests</h3>
                      <UserPlus size={18} className="text-[#8B75AA]" />
                    </div>
                    <div className="text-3xl font-bold text-[#2C1A1D]">
                      {selectedGuild.applications?.filter((app) => app.status === "pending").length || 0}
                    </div>
                  </div>
                </div>
              )}

{managementView === "members" && (
                <div>
                  <div className="flex justify-between items-center mb-6">
                    <h3 className="text-xl font-bold text-[#2C1A1D]">Members</h3>
                    <div className="flex items-center gap-4">
                      <div className="relative">
                        <input
                          type="text"
                          placeholder="Search Members"
                          value={memberSearchQuery}
                          onChange={(e) => setMemberSearchQuery(e.target.value)}
                          className="bg-white border border-[#CDAA7D] rounded px-3 py-2 pl-10 text-[#2C1A1D] placeholder-gray-400 focus:outline-none focus:border-[#8B75AA]"
                        />
                        <Search
                          size={16}
                          className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"
                        />
                      </div>
                      <select
                        value={selectedRole}
                        onChange={(e) => setSelectedRole(e.target.value)}
                        className="bg-white border border-[#CDAA7D] rounded px-3 py-2 text-[#2C1A1D] focus:outline-none focus:border-[#8B75AA]"
                      >
                        <option value="All">All</option>
                        <option value="Owner">Owner</option>
                        <option value="Admin">Admin</option>
                        <option value="Member">Member</option>
                      </select>
                    </div>
                  </div>

<div className="overflow-x-auto">
                    <table className="w-full bg-white border border-gray-200 rounded-lg">
                      <thead>
                        <tr className="bg-gray-100">
                          <th className="py-3 px-4 text-left font-medium text-[#2C1A1D]">Member</th>
                          <th className="py-3 px-4 text-left font-medium text-[#2C1A1D]">Role</th>
                          <th className="py-3 px-4 text-left font-medium text-[#2C1A1D]">Level</th>
                          <th className="py-3 px-4 text-left font-medium text-[#2C1A1D]">XP</th>
                          <th className="py-3 px-4 text-left font-medium text-[#2C1A1D]">Joined</th>
                          <th className="py-3 px-4 text-left font-medium text-[#2C1A1D]">Actions</th>
                        </tr>
                      </thead>
                      <tbody>
                        {mockMembers
                          .filter(
                            (member) =>
                              (selectedRole === "All" || member.role === selectedRole) &&
                              member.username.toLowerCase().includes(memberSearchQuery.toLowerCase()),
                          )
                          .map((member) => (
                            <tr key={member.id} className="border-b border-gray-200 hover:bg-gray-50">
                              <td className="py-3 px-4">
                                <div className="flex items-center gap-3">
                                  <div className="w-10 h-10 bg-[#8B75AA] rounded-full flex items-center justify-center text-white font-bold">
                                    {member.avatar}
                                  </div>
                                  <span className="font-medium text-[#2C1A1D]">{member.username}</span>
                                </div>
                              </td>
                              <td className="py-3 px-4">
                                <span
                                  className={`px-2 py-1 rounded text-xs font-bold text-white ${getRoleBadgeColor(member.role)}`}
                                >
                                  {member.role}
                                </span>
                              </td>
                              <td className="py-3 px-4 text-[#2C1A1D]">{member.level}</td>
                              <td className="py-3 px-4 text-[#2C1A1D]">{member.xp.toLocaleString()}</td>
                              <td className="py-3 px-4 text-[#2C1A1D]">
                                {member.joinDate?.toLocaleDateString() || "N/A"}
                              </td>
                              <td className="py-3 px-4">
                                <div className="flex items-center gap-2">
                                  {member.role !== "Owner" && (
                                    <>
                                      <button className="text-blue-600 hover:text-blue-800 text-sm">Edit Role</button>
                                      <button className="text-red-600 hover:text-red-800 text-sm">Remove</button>
                                    </>
                                  )}
                                </div>
                              </td>
                            </tr>
                          ))}
                      </tbody>
                    </table>
                  </div>
                </div>
              )}

{managementView === "requests" && (
                <div>
                  <h3 className="text-xl font-bold text-[#2C1A1D] mb-6">Join Requests</h3>
                  <div className="space-y-4">
                    {selectedGuild.applications
                      ?.filter((app) => app.status === "pending")
                      .map((application) => (
                        <div key={application.id} className="bg-[#F4F0E6] border border-[#CDAA7D] rounded-lg p-4">
                          <div className="flex justify-between items-start">
                            <div className="flex items-start gap-3">
                              <div className="w-12 h-12 bg-[#8B75AA] rounded-full flex items-center justify-center text-white font-bold">
                                {application.avatar}
                              </div>
                              <div>
                                <h4 className="font-bold text-[#2C1A1D]">{application.username}</h4>
                                <p className="text-sm text-[#8B75AA] mb-2">
                                  Applied {application.appliedAt.toLocaleDateString()}
                                </p>
                                <p className="text-[#2C1A1D]">{application.message}</p>
                              </div>
                            </div>
                            <div className="flex gap-2">
                              <button
                                onClick={() => onApproveApplication(application.id.toString())}
                                className="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 transition-colors flex items-center gap-2"
                              >
                                <CheckCircle size={16} />
                                Accept
                              </button>
                              <button
                                onClick={() => onRejectApplication(application.id.toString())}
                                className="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600 transition-colors flex items-center gap-2"
                              >
                                <XCircle size={16} />
                                Decline
                              </button>
                            </div>
                          </div>
                        </div>
                      )) || (
                      <div className="text-center py-8">
                        <UserPlus size={48} className="mx-auto mb-4 text-gray-400" />
                        <p className="text-gray-500">No pending join requests</p>
                      </div>
                    )}
                  </div>
                </div>
              )}

{managementView === "roles" && (
                <GuildRolesConfig guild={selectedGuild} currentUser={currentUser} showToast={showToast} />
              )}

{managementView === "audit" && <GuildAuditLog guild={selectedGuild} currentUser={currentUser} />}

{managementView === "payouts" && (
                <GuildPayouts guild={selectedGuild} currentUser={currentUser} showToast={showToast} />
              )}
            </div>
          </div>
        </div>
      </section>
    )
  }

// Rest of the original component for guild list view
  return (
    <section className="bg-[#F4F0E6] min-h-screen py-8">
      <div className="max-w-6xl mx-auto px-6">
        <h2 className="text-4xl font-bold text-[#2C1A1D] font-serif mb-6">Guild Management</h2>

{/* Tabs */}
        <div className="flex border-b border-[#CDAA7D] mb-6 overflow-x-auto">
          <button
            className={`px-6 py-3 font-medium whitespace-nowrap ${
              activeTab === "owned"
                ? "text-[#8B75AA] border-b-2 border-[#8B75AA]"
                : "text-[#2C1A1D] hover:text-[#8B75AA]"
            }`}
            onClick={() => setActiveTab("owned")}
          >
            Owned Guilds
          </button>
          <button
            className={`px-6 py-3 font-medium whitespace-nowrap ${
              activeTab === "member"
                ? "text-[#8B75AA] border-b-2 border-[#8B75AA]"
                : "text-[#2C1A1D] hover:text-[#8B75AA]"
            }`}
            onClick={() => setActiveTab("member")}
          >
            Member Guilds
          </button>
        </div>

{/* Guild Cards */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {(activeTab === "owned" ? ownedGuilds : memberGuilds).map((guild) => (
            <div
              key={guild.id}
              className="bg-white border border-[#CDAA7D] rounded-lg overflow-hidden hover:shadow-lg transition-shadow"
            >
              <div className="bg-[#CDAA7D] p-4">
                <div className="flex items-center gap-3">
                  <div className="w-12 h-12 bg-white rounded-lg flex items-center justify-center text-xl">
                    {guild.emblem}
                  </div>
                  <div>
                    <h3 className="font-bold text-[#2C1A1D]">{guild.name}</h3>
                    <p className="text-sm text-[#2C1A1D]/70">Level {calculateGuildLevel(guild)}</p>
                  </div>
                </div>
              </div>

<div className="p-4">
                <div className="flex justify-between items-center mb-4">
                  <div className="flex items-center gap-4">
                    <div className="flex items-center gap-1">
                      <Users size={16} className="text-[#8B75AA]" />
                      <span className="text-sm font-medium text-[#2C1A1D]">{guild.members}</span>
                    </div>
                    <div className="flex items-center gap-1">
                      <DollarSign size={16} className="text-[#8B75AA]" />
                      <span className="text-sm font-medium text-[#2C1A1D]">{guild.funds || 0}</span>
                    </div>
                  </div>
                </div>

{/* Guild Level Progress */}
                <div className="mb-4">
                  <div className="flex justify-between items-center mb-1">
                    <span className="text-xs font-medium text-[#2C1A1D]">Level {calculateGuildLevel(guild)}</span>
                    <span className="text-xs text-[#8B75AA]">{getGuildXPProgress(guild).toFixed(0)}%</span>
                  </div>
                  <div className="w-full bg-gray-200 rounded-full h-1.5">
                    <div
                      className="bg-[#8B75AA] h-1.5 rounded-full transition-all duration-300"
                      style={{ width: `${getGuildXPProgress(guild)}%` }}
                    ></div>
                  </div>
                </div>

<p className="text-sm text-[#2C1A1D] mb-4 line-clamp-2">{guild.description}</p>

<div className="flex gap-2">
                  <button
                    onClick={() => setSelectedGuild(guild)}
                    className="flex-1 px-4 py-2 bg-[#8B75AA] text-white rounded hover:bg-[#7A6699] transition-colors text-sm font-medium"
                  >
                    Manage
                  </button>
                  <button
                    onClick={() => onViewGuild(guild)}
                    className="px-4 py-2 border border-[#CDAA7D] rounded text-[#2C1A1D] hover:bg-[#CDAA7D] hover:text-white transition-colors text-sm font-medium"
                  >
                    View
                  </button>
                </div>
              </div>
            </div>
          ))}
        </div>

{(activeTab === "owned" ? ownedGuilds : memberGuilds).length === 0 && (
          <div className="bg-white border border-[#CDAA7D] rounded-lg p-8 text-center">
            <Shield size={48} className="mx-auto mb-4 text-[#CDAA7D]" />
            <h3 className="text-xl font-bold text-[#2C1A1D] mb-2">No Guilds Found</h3>
            <p className="text-[#8B75AA]">
              {activeTab === "owned"
                ? "You don't own any guilds yet. Create a new guild to get started!"
                : "You're not a member of any guilds yet. Join a guild from the Guild Hall!"}
            </p>
          </div>
        )}
      </div>
    </section>
  )
}
[V0_FILE]png:file="public/images/post-as-dropdown.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-rGham22RORISI1CmgpToPQW9Tlhax0.png" isMerged="true"
[V0_FILE]png:file="public/images/quest-management-ui.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-vqeM0X1hFrD2WG4IDVcoJQGwEZrI8b.png" isMerged="true"
[V0_FILE]png:file="public/images/admin-reports-ui.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-x6F5mVJInII65SXf6wGBL1YTJnoFun.png" isMerged="true"
[V0_FILE]png:file="public/images/guild-management-ui.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-owsVXkVNGbH2IX4rLGaZ9dnNNbSotb.png" isMerged="true"
[V0_FILE]typescriptreact:file="components/report-details-modal.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { X, Flag, User, FileText, Calendar, MessageSquare, Shield } from "lucide-react"
import type { User as UserType } from "@/lib/types"

interface Report {
  id: number
  type: "user" | "quest"
  reportedId: number
  reason: string
  status: "pending" | "resolved"
  reportedBy: number
  createdAt: Date
  description?: string
  evidence?: string[]
}

interface ReportDetailsModalProps {
  isOpen: boolean
  onClose: () => void
  report: Report | null
  users: UserType[]
  onResolve: (reportId: number, action: string, notes: string) => void
  showToast: (message: string, type?: string) => void
}

export function ReportDetailsModal({ isOpen, onClose, report, users, onResolve, showToast }: ReportDetailsModalProps) {
  const [action, setAction] = useState("")
  const [notes, setNotes] = useState("")

if (!isOpen || !report) return null

const reportedByUser = users.find((u) => u.id === report.reportedBy)
  const reportedUser = report.type === "user" ? users.find((u) => u.id === report.reportedId) : null

const handleResolve = () => {
    if (!action) {
      showToast("Please select an action", "error")
      return
    }

onResolve(report.id, action, notes)
    showToast(`Report resolved with action: ${action}`, "success")
    onClose()
  }

return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
      <div className="bg-[#F4F0E6] rounded-lg w-full max-w-3xl max-h-[90vh] overflow-y-auto">
        {/* Header */}
        <div className="bg-gradient-to-r from-[#2C1A1D] to-[#8B75AA] text-white p-6 rounded-t-lg">
          <div className="flex justify-between items-start">
            <div className="flex items-center gap-4">
              <div className="w-12 h-12 bg-[#CDAA7D] rounded-full flex items-center justify-center">
                <Flag size={24} />
              </div>
              <div>
                <h2 className="text-2xl font-bold">Report Details</h2>
                <p className="text-[#CDAA7D]">
                  {report.type === "user" ? "User Report" : "Quest Report"} • Report #{report.id}
                </p>
              </div>
            </div>
            <button onClick={onClose} className="text-white hover:text-[#CDAA7D] transition-colors">
              <X size={24} />
            </button>
          </div>
        </div>

{/* Content */}
        <div className="p-6 space-y-6">
          {/* Report Info */}
          <div className="grid md:grid-cols-2 gap-6">
            <div className="bg-white rounded-lg p-4 border border-[#CDAA7D]">
              <h3 className="font-bold text-[#2C1A1D] mb-3 flex items-center gap-2">
                <User size={18} />
                Reported By
              </h3>
              <div className="flex items-center gap-3">
                <div className="w-10 h-10 bg-[#8B75AA] rounded-full flex items-center justify-center text-white font-bold">
                  {reportedByUser?.avatar || "U"}
                </div>
                <div>
                  <p className="font-medium text-[#2C1A1D]">{reportedByUser?.username || "Unknown"}</p>
                  <p className="text-sm text-[#8B75AA]">{reportedByUser?.email}</p>
                </div>
              </div>
            </div>

<div className="bg-white rounded-lg p-4 border border-[#CDAA7D]">
              <h3 className="font-bold text-[#2C1A1D] mb-3 flex items-center gap-2">
                <Calendar size={18} />
                Report Details
              </h3>
              <div className="space-y-2 text-sm">
                <div>
                  <span className="font-medium">Date:</span> {report.createdAt.toLocaleDateString()}
                </div>
                <div>
                  <span className="font-medium">Type:</span>{" "}
                  <span
                    className={`px-2 py-1 rounded text-xs ${
                      report.type === "user" ? "bg-red-100 text-red-800" : "bg-orange-100 text-orange-800"
                    }`}
                  >
                    {report.type === "user" ? "User Report" : "Quest Report"}
                  </span>
                </div>
                <div>
                  <span className="font-medium">Status:</span>{" "}
                  <span
                    className={`px-2 py-1 rounded text-xs ${
                      report.status === "resolved" ? "bg-green-100 text-green-800" : "bg-yellow-100 text-yellow-800"
                    }`}
                  >
                    {report.status}
                  </span>
                </div>
              </div>
            </div>
          </div>

{/* Reported Content */}
          {report.type === "user" && reportedUser && (
            <div className="bg-white rounded-lg p-4 border border-[#CDAA7D]">
              <h3 className="font-bold text-[#2C1A1D] mb-3 flex items-center gap-2">
                <Shield size={18} />
                Reported User
              </h3>
              <div className="flex items-center gap-4">
                <div className="w-12 h-12 bg-[#8B75AA] rounded-full flex items-center justify-center text-white font-bold">
                  {reportedUser.avatar || "U"}
                </div>
                <div>
                  <p className="font-medium text-[#2C1A1D]">{reportedUser.username}</p>
                  <p className="text-sm text-[#8B75AA]">{reportedUser.email}</p>
                  <div className="flex gap-2 mt-1">
                    <span className="text-xs bg-[#8B75AA]/10 text-[#8B75AA] px-2 py-1 rounded">
                      Level {reportedUser.level || 1}
                    </span>
                    {reportedUser.banned && (
                      <span className="text-xs bg-red-100 text-red-800 px-2 py-1 rounded">Banned</span>
                    )}
                  </div>
                </div>
              </div>
            </div>
          )}

{/* Report Reason */}
          <div className="bg-white rounded-lg p-4 border border-[#CDAA7D]">
            <h3 className="font-bold text-[#2C1A1D] mb-3 flex items-center gap-2">
              <MessageSquare size={18} />
              Report Reason
            </h3>
            <div className="space-y-3">
              <div>
                <span className="font-medium text-[#2C1A1D]">Category:</span>
                <span className="ml-2 px-2 py-1 bg-[#8B75AA]/10 text-[#8B75AA] rounded text-sm">{report.reason}</span>
              </div>
              {report.description && (
                <div>
                  <span className="font-medium text-[#2C1A1D]">Description:</span>
                  <p className="mt-1 text-[#2C1A1D] bg-[#F4F0E6] p-3 rounded">{report.description}</p>
                </div>
              )}
            </div>
          </div>

{/* Evidence */}
          {report.evidence && report.evidence.length > 0 && (
            <div className="bg-white rounded-lg p-4 border border-[#CDAA7D]">
              <h3 className="font-bold text-[#2C1A1D] mb-3 flex items-center gap-2">
                <FileText size={18} />
                Evidence
              </h3>
              <div className="space-y-2">
                {report.evidence.map((item, index) => (
                  <div key={index} className="p-2 bg-[#F4F0E6] rounded text-sm text-[#2C1A1D]">
                    {item}
                  </div>
                ))}
              </div>
            </div>
          )}

{/* Resolution Actions */}
          {report.status === "pending" && (
            <div className="bg-white rounded-lg p-4 border border-[#CDAA7D]">
              <h3 className="font-bold text-[#2C1A1D] mb-3">Resolution Actions</h3>
              <div className="space-y-4">
                <div>
                  <label className="block text-sm font-medium text-[#2C1A1D] mb-2">Action to Take:</label>
                  <select
                    value={action}
                    onChange={(e) => setAction(e.target.value)}
                    className="w-full px-3 py-2 border border-[#CDAA7D] rounded bg-white text-[#2C1A1D] focus:outline-none focus:border-[#8B75AA]"
                  >
                    <option value="">Select an action...</option>
                    <option value="dismiss">Dismiss Report</option>
                    <option value="warning">Issue Warning</option>
                    <option value="temporary_ban">Temporary Ban</option>
                    <option value="permanent_ban">Permanent Ban</option>
                    <option value="content_removal">Remove Content</option>
                    <option value="escalate">Escalate to Senior Admin</option>
                  </select>
                </div>

<div>
                  <label className="block text-sm font-medium text-[#2C1A1D] mb-2">Admin Notes:</label>
                  <textarea
                    value={notes}
                    onChange={(e) => setNotes(e.target.value)}
                    placeholder="Add notes about your decision..."
                    className="w-full px-3 py-2 border border-[#CDAA7D] rounded bg-white text-[#2C1A1D] focus:outline-none focus:border-[#8B75AA] h-20 resize-none"
                  />
                </div>
              </div>
            </div>
          )}
        </div>